Update Ionic 2.3.0 to 3.5.3

## Update CLI CLIのバージョンを上げておく ``` $ sudo nom i -g ionic cordova ``` ## Update Ionic 3 packageをupgrade ```js "dependencies": { "@angular/common": "4.1.3", "@angular/compiler": "4.1.3", "@angular/compiler-cli": "4.1.3", "@angular/core": "4.1.3", "@angular/forms": "4.1.3", "@angular/http": "4.1.3", "@angular/platform-browser": "4.1.3", "@angular/platform-browser-dynamic": "4.1.3", "@ionic-native/core": "3.12.1", "@ionic-native/splash-screen": "3.12.1", "@ionic-native/status-bar": "3.12.1", "@ionic/storage": "2.0.1", "ionic-angular": "3.5.3", "ionicons": "3.0.0", "rxjs": "5.4.0", "sw-toolbox": "3.6.0", "zone.js": "0.8.12" }, "devDependencies": { "@ionic/app-scripts": "2.0.2", "typescript": "2.3.4" } ``` `BrowserModule` を import, `Http` を利用している場合は `HttpModule` も import `app.module.ts` ```typescript import { BrowserModule } from '@angular/platform-browser'; import { HttpModule } from '@angular/http'; ... imports: [ BrowserModule, HttpModule, IonicModule.forRoot(MyApp) ], ``` * https://github.com/ionic-team/ionic/blob/master/CHANGELOG.md#300-2017-04-05 `src/index.html` に `vender.js` を追加 ``` <!-- The polyfills js is generated during the build process --> <script src="build/polyfills.js"></script> <!-- The vendor js is generated during the build process It contains all of the dependencies in node_modules --> <script src="build/vendor.js"></script> <!-- The bundle js is generated during the build process --> <script src="build/main.js"></script> ``` `src/service-worker.js` に `vender.js` を追加 ``` './build/main.js', './build/vendor.js', './build/main.css', ``` ## Update Ionic Storage 2.0.1 `IonicStorageModule` を import `app.module.ts` ```typescript import { IonicStorageModule } from '@ionic/storage' ... imports: [ BrowserModule, HttpModule, IonicModule.forRoot(MyApp), IonicStorageModule.forRoot() ], ``` `Storage` を Inject して使用するように変更 ```typescript import { Storage } from '@ionic/storage'; export class MyApp { constructor(private storage: Storage) { } ... } ``` * https://ionicframework.com/docs/storage/ ## Update Ionic Native 3.x pluginを別々インストールするように変更されたので、必要なpluginを `package.json` に追加する ```js "dependencies": { ... "@ionic-native/status-bar": "3.12.1", } ``` 対象pakcageをimportし、Injectして使用するように変更 ```typescript import { StatusBar } from '@ionic-native/status-bar'; export class MyApp { constructor(private statusBar: StatusBar) { } ... } ``` ## Others ### Replace template to ng-template `template` が deprecated なので `ng-template` に変更 ``` <ng-template [ngIf]="..."> ... </ng-template> ``` ### Ionic CLI configs ionicコマンドでconfigを変えて実行している場合はそのconfigも修正する ``` $ ionic build ios -w ./config/webpack.config.js ``` ## Errors ### `Cannot read property 'filter' of undefined` on building (deeplinks) `app.module.ts` を確認 `@NgModule` に設定する各値を変数で代入するとエラーが発生する 直接指定すればOK ``` // NG @NgModule({ declarations: declarations, imports: imports, bootstrap: [IonicApp], entryComponents: entryComponents, providers: providers, }) // OK @NgModule({ declarations: [ ... ], imports: [ ... ], bootstrap: [IonicApp], entryComponents: [ ... ], providers: [ ... ], }) ``` ### `TypeError: Path must be a string. Received true` on building (uglifyjs) typescript が `target: 'es5'` でtranspileされてない可能性 `tsconfig.js` の確認と `es6` の場合は babili か uglify-es を利用する ### Http request failed `undefined is not an object (evaluating 'o.apply')` wkwebview engine を最新にしてみる ### `Error: Cannot read property 'replace' of undefined` on starting iOS simulator 最新の `cordova-ios` だとダメみたいなので別branchを利用する ``` $ ionic cordova platform add https://github.com/apache/cordova-ios.git#4.4.0-ios-sim ``` ## Note どうしてもダメな場合は `ionic start` でv3プロジェクトを作成して比較するか https://github.com/ionic-team/ionic-conference-app を参考に比較して見るとなんとなるかも ## 参考 * https://github.com/ionic-team/ionic/blob/master/CHANGELOG.md