2017-03-28 62 views
16

Bu bağlantıda bulunabilecek Açısal 2 Yönlendirme ve Navigasyon örneğini takip ediyorum: https://plnkr.co/edit/I4ArEQTniO7MJtfzpBWl?p=info.Normal 2 Yönlendirici Animasyon - '@ açısal/platform tarayıcı/animasyonlar' modülü bulunamıyor

Transpiler'i çalıştırdığımda hata iletisini alıyorum: "client/app/app.module.ts (5,41): error TS2307: '@' 'Açısal/platform tarayıcı/animasyon' modülü bulunamıyor.

Benim systemjs.config.js'ye (aşağıda gösterilmiştir) dayanarak, modülün '@ açısal/platform tarayıcı/animasyonları', 'platform-tarayıcı-animations.umd.js' dosyası olması beklenir. node_modules/@ açısal/platform tarayıcı/paketler, ancak orada değil. Sonra bağımlı sürümlerini yüklemeye çalıştı ama karşılanmamış bağımlılık mesajı almaya devam

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

: Eksik çerçeveler yüklemek ancak bir karşılanmamış bağımlılık hata iletisi Ben yüklemeye çalıştı UÖM'sini kullanma

//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); 

.

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

Ben animasyonlar yüklü 4.0 var ve bu ben yüklemek istemiyorum çekirdek 4.0 gerektirir gibi 4.

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

Eğik görünüyor yüklemek gerektiğini gösterir bir uyarı ettim. Animasyonları 4.0 kaldırmalı ve animasyonların önceki bir sürümünü yüklemem gerekir mi? Package.json dosyasım aşağıda.

//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": {} 
} 

Sorun benim animations sürümüyle ilgili olabilir gibi görünüyor mu? Kabul ediyorsanız, mevcut sürümü nasıl kaldıracağım ve hangi sürümün yüklemem gerektiğini @ açısal/çekirdekli sürümüyle uyumlu hale getirmeliyim, 2.4.8. Sorun bu değilse, eksik dosyayı nasıl yüklerim, @ angular/platform-browser/bundles/platform-browser-animations.umd.js?

cevap

28

Saatlerce araştırma yaptıktan sonra, 2.4.0-2.4.8 arasında değişen @ açısal/çekirdekli sürümlerim ile uyumlu olan @ açısal/animasyonların hiçbir sürümünü bulamadım. Bu yazının cevabını okudum, How to get list of versions for compatible Angular 2 modules?. Bu yazı, yönlendirici hariç, açısal 2'nin tüm modüllerinin aynı sürümde olduğunu ve paketin içine açılmış olan açısal/animasyonları 2.4.8 taktım ve emin olmak istediğim gibi tüm sürümleri 2.4.8'e değiştirdim. Ben bir şey eksik değildi. Daha sonra npm kurulumunu çalıştırdım ve bu animasyonlar versiyonunda başarısız oldu.

Sonunda bu yazıyı buldum; Angular 4.0'a güncellenirken http://angularjs.blogspot.com/. Gönderide, eksik olduğum animasyonlar modülüne özel bir söz vardı, ancak sadece yükseltme ile kullanılabilir. Windows için basit güncelleme talimatlarını takip ettim ve uygulamam şimdi iyi çalışıyor. Uygulamam, kılavuzdaki plunker örneğine çok benziyor. Yayının başına, Angular 2.x.x çalıştırıyorsanız, bu çoğu uygulama için geriye dönük olarak uyumlu olmalıdır. Yükseltme talimatları aşağıdadır. 4.0.0

Güncelleniyor 4'e kadar güncellenmesi

son sürümü ve animasyonlar isterseniz çift kontrol etmek için Açısal bağımlılıkları güncellenmesi kadar kolaydır. Bu çoğu kullanım durumları için çalışacaktır.Linux/Mac üzerinde

:

npm açısal/{ortak, derleyici, derleyici-cli, çekirdek, formlar, http, platform tarayıcı, platform tarayıcı dinamik, platform sunucu, yönlendirici, animasyonlar @ yüklemek } @latest typescript @ son --save Windows'ta

:

npm açısal/açısal/derleyici @ ortak @ son açısal/@ son @ derleyici-cli @ açısal/çekirdek @ son @ son @angular @ yüklemek/@ @ @ @ @ @@@@ @@ @ @ angular/platform-tarayıcı @ en son @ angular/platform-tarayıcı-dynamic @ @ @@@@@@ @@ @ @ açısal/yönlendirici @ son @ açısal/animasyonlar @ ypescript @ son --save

+2

Fantastik, takip @ j-terranova çalıştı yüklemek NPM! – Geoffrey

+1

Harika cevap - mükemmel bir şekilde çalıştı ve bu problemle ilgili bilinmeyen saatleri yanmamı sağladı. – Shane

+1

Bu beni uzun zamandır rahatsız ediyor. Bu çözüm mükemmel! –

2

aşağıda deneyin

Adım-1

$ rm-rf node_modules

$ npm önbellek net

Adım -2

adımları

$/animasyonlar açısal @ yüklemek NPM @ son --save

$

Onun benim için

+0

npm'in en son sürümünde npm önbelleği temizle komutu artık kullanılamıyor. Önbelleği gerçekten temizlemeniz gerekiyorsa şimdi npm önbellek doğrulaması yapınız: npm önbellek temizle - ön –