ionic-angular項目中,插件升級問題.
原來的package.json文件:
1 "dependencies": { 2 "@angular/common": "2.2.1", 3 "@angular/compiler": "2.2.1", 4 "@angular/compiler-cli": "2.2.1", 5 "@angular/core": "2.2.1", 6 "@angular/forms": "2.2.1", 7 "@angular/http": "2.2.1", 8 "@angular/platform-browser": "2.2.1", 9 "@angular/platform-browser-dynamic": "2.2.1", 10 "@angular/platform-server": "2.2.1", 11 "@ionic-native/camera": "^3.4.4", 12 "@ionic-native/core": "^3.4.4", 13 "@ionic-native/network": "^4.4.2", 14 "@ionic-native/photo-viewer": "^3.4.4", 15 "@ionic/storage": "^1.1.7", 16 "angular2-logger": "^0.5.1", 17 "cordova-android": "^6.3.0", 18 "cordova-plugin-camera": "^2.4.1", 19 "cordova-plugin-compat": "^1.2.0", 20 "cordova-plugin-console": "^1.0.7", 21 "cordova-plugin-device": "^1.1.6", 22 "cordova-plugin-file": "^4.3.3", 23 "cordova-plugin-network-information": "^1.3.4", 24 "cordova-plugin-splashscreen": "^4.0.3", 25 "cordova-plugin-statusbar": "^2.2.3", 26 "cordova-plugin-whitelist": "^1.3.2", 27 "cordova-sqlite-storage": "^2.0.4", 28 "ionic-angular": "2.0.1", 29 "ionic-native": "2.4.1", 30 "ionic-plugin-keyboard": "^2.2.1", 31 "ionicons": "3.0.0", 32 "rxjs": "5.0.0-beta.12", 33 "sw-toolbox": "3.4.0", 34 "typescript": "^2.3.4", 35 "zone.js": "0.6.26" 36 }, 37 "devDependencies": { 38 "@ionic/app-scripts": "1.1.0", 39 "typescript": "2.0.9" 40 },
升級到:
1 "dependencies": { 2 "@angular/common": "4.1.3", 3 "@angular/compiler": "4.1.3", 4 "@angular/compiler-cli": "4.1.3", 5 "@angular/core": "4.1.3", 6 "@angular/forms": "4.1.3", 7 "@angular/http": "4.1.3", 8 "@angular/platform-browser": "4.1.3", 9 "@angular/platform-browser-dynamic": "4.1.3", 10 "@angular/platform-server": "^4.1.3", 11 "@ionic-native/camera": "^4.5.2", 12 "@ionic-native/core": "4.4.0", 13 "@ionic-native/network": "^4.5.2", 14 "@ionic-native/photo-viewer": "^4.5.2", 15 "@ionic/storage": "^2.1.3", 16 "angular2-csv": "^0.2.5", 17 "angular2-logger": "^0.6.0", 18 "cordova-android": "6.3.0", 19 "cordova-plugin-camera": "^4.0.1", 20 "cordova-plugin-compat": "^1.2.0", 21 "cordova-plugin-console": "^1.1.0", 22 "cordova-plugin-device": "^1.1.4", 23 "cordova-plugin-file": "^6.0.1", 24 "cordova-plugin-network-information": "^2.0.1", 25 "cordova-plugin-splashscreen": "^4.0.3", 26 "cordova-plugin-statusbar": "^2.2.3", 27 "cordova-plugin-whitelist": "^1.3.2", 28 "cordova-sqlite-storage": "^2.0.4", 29 "ionic-angular": "3.5.3", 30 "ionic-native": "2.4.1", 31 "ionic-plugin-keyboard": "^2.2.1", 32 "ionicons": "3.0.0", 33 "rxjs": "5.5.2", 34 "sw-toolbox": "3.6.0", 35 "zone.js": "0.8.18" 36 }, 37 "devDependencies": { 38 "@ionic/app-scripts": "2.0.2", 39 "typescript": "2.4.2" 40 },
首先, 刪除node_modules文件,不刪也可以,但為了避免不必要的麻煩,還是刪除為好.
1 rm -rf node_modules/
然后執行
1 npm install
此過程中可能出現的問題:
1. @angular開頭的幾個插件盡量保持版本一致, 他們之間是相互依賴的,存在版本的互查, 版本不一致會出現問題.
2. "cordova-android" 的版本會很高,npm install的時候可能會安裝到7.0.0, 其他插件的版本有些會要求該插件的版本在6.3.0一下,所以
npm install cordova-android@6.3.0
安裝完之后,在package.json文件中可能會顯示"cordova-android": "^6.3.0", 要去掉"^", 不然add platform的時候它會使用高版本.
3. 安裝apk到手機上, 會長時間白屏或者直接是白屏.
連接手機到電腦, 使用google查看問題,發現是"angular2-csv/angular2-csv.js"找不到, 實際上文件是存在的,這個並不是主要問題, 應該是angular的版本過高,剛開始我本想將@angular升級到5.0.3, 還有將ionic-angular從3.9.3降到3.5.3,問題解決.
4. angular版本2和4語法略有不同,注意代碼,(比如聲明為Promisse的page不能用為navCtrl.push()的參數).
5. "webpackJsonp is not difined".
原因是@ionic/app-scripts從1升級到2, 有所不同.
1 <body> 2 3 <!-- Ionic's root component and where the app will load --> 4 <ion-app></ion-app> 5 6 <!-- The polyfills js is generated during the build process --> 7 <script src="build/polyfills.js"></script> 8 9 <script src="build/vendor.js"></script> 10 <!-- The bundle js is generated during the build process --> 11 <script src="build/main.js"></script> 12 13 </body>
在引用man.js文件之前引用vendor.js文件, 也就是添加
1 <script src="build/vendor.js"></script>
6. Can't resolve all parameters for Store:(?)
如果你使用了Storage插件的話,會出現該錯誤, Storage的引用方式有所改變.
app.module.ts文件中
原文件
1 import {Storage} from '@ionic/storage'; 2 3 ...... 4 5 @NgModule({ 6 declarations: [ 7 MyApp, 8 ...pages, 9 ...pipes, 10 ...components 11 12 ], 13 imports: [ 14 IonicModule.forRoot(MyApp,{ 15 backButtonText:'后退'}) 16 ], 17 bootstrap: [IonicApp], 18 entryComponents: pages, 19 providers: [{provide: ErrorHandler, useClass: IonicErrorHandler},Storage,Network,...providers] 20 })
更改之后:
1 import { IonicStorageModule } from '@ionic/storage'; 2 3 ...... 4 5 @NgModule({ 6 declarations: [ 7 MyApp, 8 ...pages, 9 ...pipes, 10 ...components 11 12 ], 13 imports: [ 14 IonicModule.forRoot(MyApp,{ 15 backButtonText:'后退'}), 16 BrowserModule, 17 HttpModule, 18 IonicStorageModule.forRoot(), 19 ], 20 bootstrap: [IonicApp], 21 entryComponents: pages, 22 providers: [{provide: ErrorHandler, useClass: IonicErrorHandler},Network,...providers] 23 })
7. 如果使用了Http, 可能會有
No provider for http...
此問題和問題6類似, 修改后的代碼中已有體現, import方式
1 import { HttpModule } from '@angular/http';
8. No provider for ApplicationInitStatus.
與問題6類似, 修改后的代碼中也有體現,添加import BrowserMoudule.
1 import { BrowserModule } from '@angular/platform-browser';
以上是我在升級過程中遇到的問題, 及如何解決的,如有不當之處,歡迎指正.