2017-03-28 34 views
16

Podążam za przykładem Angled 2 Routing and Navigation, który można znaleźć pod tym linkiem: https://plnkr.co/edit/I4ArEQTniO7MJtfzpBWl?p=info.Augular 2 Router Animation - Nie można znaleźć modułu '@ kątowa/platforma-przeglądarka/animacje'

Po uruchomieniu transplera pojawia się komunikat o błędzie: "client/app/app.module.ts (5,41): error TS2307: Nie można znaleźć modułu '@ kątowa/platforma-przeglądarka/animacje". "

Na podstawie mojego pliku systemjs.config.js (pokazanego poniżej), spodziewam się, że modułem "@ kątowa/platforma-przeglądarka/animacje" będzie plik "platforma-przeglądarka-animacje.umd.js" znajdujący się w node_modules/@ angle/platform-browser/bundles, ale go tam nie ma.

//systemjs.config.js 
(function (global) { 
    System.config({ 
    paths: { 
    // paths serve as alias 
    'npm:': 'node_modules/' 
    }, 
    // map tells the System loader where to look for things 
    map: { 
    // our app is within the app folder 
    app: 'app', 

    '@angular/animations': 'npm:@angular/animations/bundles/animations.umd.js', 
    '@angular/animations/browser': 'npm:@angular/animations/bundles/animations-browser.umd.js', 
    '@angular/core': 'npm:@angular/core/bundles/core.umd.js', 
    '@angular/common': 'npm:@angular/common/bundles/common.umd.js', 
    '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js', 
    '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js', 
    '@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js', 
    '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js', 
    '@angular/http': 'npm:@angular/http/bundles/http.umd.js', 
    '@angular/router': 'npm:@angular/router/bundles/router.umd.js', 
    '@angular/router/upgrade': 'npm:@angular/router/bundles/router-upgrade.umd.js', 
    '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js', 
    '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js', 
    '@angular/upgrade/static': 'npm:@angular/upgrade/bundles/upgrade-static.umd.js', 

    // other libraries 
    'rxjs':      'npm:rxjs', 
    'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js' 
}, 
// packages tells the System loader how to load when no filename and/or no extension 
packages: { 
    //app: { 
    // main: './main.js', 
    // defaultExtension: 'js' 
    //}, 
    client: { 
    main: './main.js', 
    defaultExtension: 'js' 
    }, 
    rxjs: { 
    defaultExtension: 'js' 
    } 
} 
}); 
})(this); 

Korzystanie KMP Próbowałem zainstalować instalację brakujących ram ale odbierać niezaspokojone komunikat o błędzie zależność:

+-- UNMET PEER DEPENDENCY @angular/[email protected] 
+-- UNMET PEER DEPENDENCY @angular/[email protected] 
`-- UNMET PEER DEPENDENCY @angular/[email protected] 

Następnie próbowałem zainstalować wersje zależne ale dalszy otrzymywać niezaspokojone wiadomość o zależnościach.

>npm install @angular/[email protected] @angular/[email protected] @angular/[email protected] --save 

zauważyłem jedno ostrzeżenie z informacją, że należy zainstalować kątowa 4.

npm WARN @angular/[email protected] requires a peer of @angular/[email protected] but no 
ne was installed. 

Wygląda Mam animacje 4.0 zainstalowany i wymaga jądro 4.0, która nie chce się zainstalować. Czy muszę odinstalować animacje 4.0 i zainstalować starszą wersję animacji? Mój plik package.json znajduje się poniżej.

//package.json 
{ 
"name": "angular-quickstart", 
"version": "1.0.0", 
"description": "QuickStart package.json from the documentation, supplemented with testing support", 
"scripts": { 
"build": "tsc -p client/", 
"build:watch": "tsc -p client/ -w", 
"build:e2e": "tsc -p e2e/", 
"serve:e2e": "lite-server -c=bs-config.e2e.json", 
"prestart": "npm run build", 
"start": "npm run build:watch", 
"pree2e": "npm run build:e2e", 
"e2e": "concurrently \"npm run serve:e2e\" \"npm run protractor\" --kill-others --success first", 
"preprotractor": "webdriver-manager update", 
"protractor": "protractor protractor.config.js", 
"pretest": "npm run build", 
"test": "concurrently \"npm run build:watch\" \"karma start karma.conf.js\"", 
"pretest:once": "npm run build", 
"test:once": "karma start karma.conf.js --single-run", 
"lint": "tslint ./client/**/*.ts -t verbose" 
    }, 
"keywords": [], 
"author": "", 
"license": "MIT", 
"dependencies": { 
"@angular/animations": "^4.0.0", 
"@angular/common": "^2.4.8", 
"@angular/compiler": "~2.4.0", 
"@angular/core": "^2.4.8", 
"@angular/forms": "~2.4.0", 
"@angular/http": "~2.4.0", 
"@angular/platform-browser": "^2.4.10", 
"@angular/platform-browser-dynamic": "~2.4.0", 
"@angular/router": "~3.4.0", 
"angular-animate": "^1.6.3", 
"angular-in-memory-web-api": "~0.2.4", 
"body-parser": "^1.17.0", 
"bootstrap": "^3.3.7", 
"cookie-parser": "^1.4.3", 
"core-js": "^2.4.1", 
"ejs": "^2.5.6", 
"express": "^4.15.0", 
"express-session": "^1.15.1", 
"jade": "^1.11.0", 
"jquery": "^3.1.1", 
"mongoose": "^4.8.5", 
"morgan": "^1.8.1", 
"passport": "^0.3.2", 
"passport-local": "^1.0.0", 
"rxjs": "5.0.1", 
"stylus": "^0.54.5", 
"systemjs": "0.19.40", 
"toastr": "^2.1.2", 
"zone.js": "^0.7.4" 
}, 
"devDependencies": { 
"concurrently": "^3.2.0", 
"lite-server": "^2.2.2", 
"typescript": "~2.0.10", 
"canonical-path": "0.0.2", 
"tslint": "^3.15.1", 
"lodash": "^4.16.4", 
"jasmine-core": "~2.4.1", 
"karma": "^1.3.0", 
"karma-chrome-launcher": "^2.0.0", 
"karma-cli": "^1.0.1", 
"karma-jasmine": "^1.0.2", 
"karma-jasmine-html-reporter": "^0.2.2", 
"protractor": "~4.0.14", 
"rimraf": "^2.5.4", 
"@types/node": "^6.0.46", 
"@types/jasmine": "2.5.36" 
}, 
"repository": {} 
} 

Wygląda na to, że problem może być związany z moją wersją animacji? Jeśli zgadzasz się, jak odinstalować istniejącą wersję i jaką wersję mam zainstalować, która jest kompatybilna z wersją @agular/core, mam, 2.4.8. Jeśli nie jest to problem, jak zainstalować brakujący plik @ kątowa/platforma-przeglądarka/pakiety/platforma-browser-animations.umd.js?

Odpowiedz

28

Po kilku godzinach szukania nie mogłem znaleźć żadnej wersji @ angle/animacji, która byłaby zgodna z moją wersją @agular/core, która była w zakresie od 2.4.0-2.4.8. Przeczytałem odpowiedź na ten post, How to get list of versions for compatible Angular 2 modules?. Ten post wskazał, że wszystkie moduły kątowe 2, z wyjątkiem routera, są w tej samej wersji, więc podłączyłem @ angle/animations 2.4.8 do mojego package.json i zmieniłem wszystkie wersje na 2.4.8 włącznie z wpisami animacji, ponieważ chciałem mieć pewność Nie przegapiłem czegoś. Następnie uruchomiłem npm install i to się nie udało w wersji animacji.

W końcu znalazłem ten post; http://angularjs.blogspot.com/ w sprawie aktualizacji do Angular 4.0. Ten post miał również specjalną wzmiankę o module animacji, którego mi brakowało, ale jest dostępny tylko po uaktualnieniu. Postępowałem zgodnie z prostymi instrukcjami aktualizacji dla Windows i moja aplikacja działa teraz poprawnie. Moja aplikacja jest bardzo podobna do przykładu plunker z przewodnika. Na pocztę, jeśli korzystasz z Angulara 2.x.x, powinna to być kompatybilna wstecz dla większości aplikacji. Poniżej znajdują się instrukcje aktualizacji.

Aktualizacja do 4.0.0

Aktualizacja do 4 jest tak proste jak aktualizowanie zależności kątowe do najnowszej wersji i podwójnej kontroli, jeśli chcesz animacje. To zadziała w większości przypadków użycia.

Na Linux/Mac:

npm zainstalować @ kątowej/{wspólnego, kompilator, kompilator CLI rdzeniem, formularze, http platformy przeglądarce platformy przeglądarce dynamicznej platformy serwera, routera, Animacje } @latest maszynopis @ ostatni flagą --save

W systemie Windows:

npm zainstalować @ kątowej/common @ najnowszej @ kątowej/kompilatora @ ostatni @ kątowej/kompilatora-cli @ ostatni @ kątowej/core @ najnowszej @angular/forms @ latest @ angular/http @ najnowszy @ kątowy/platforma-browser @ najnowsza @ kątowa/platforma-przeglądarka-dynamiczna @ najnowsza @ kątowa/platforma-serwer @ najnowsza @ kątowa/router @ najnowsza @ kątowa/animacje @ najnowsza t ypescript @ ostatni flagą --save

+2

Fantastic kontynuacji @ j-Terranova! – Geoffrey

+1

Świetna odpowiedź - zadziałała doskonale i powstrzymała mnie przed wypaleniem niezliczonych godzin na ten problem. – Shane

+1

To mnie martwiło przez długi czas. To rozwiązanie jest idealne! –

2

Spróbuj poniżej kroki

KROK-1

$ rm -rf node_modules

$ npm cache jasne

Step -2

$ NPM zainstalować @ kątowe/animacje @ ostatnie --save

$ NPM zainstalować

Jego pracował dla mnie

+0

W ostatniej wersji 'npm' polecenie' npm cache clear' nie jest już dostępne. Masz teraz 'npm cache verify' lub jeśli naprawdę potrzebujesz wyczyścić cache:' npm cache clear --force' –