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‘;
以上是我在升级过程中遇到的问题, 及如何解决的,如有不当之处,欢迎指正.
