ionic3からionic4への移行 - きまぐれweb/app開発日記

ionic3で製作していてほぼ完成間近のアプリがある中、ionicチームから一通のメールが。「ionic4が正式にリリースされたよ。起動時間やパフォーマンスが向上してるよ。テーマやCSSも強化してるよ。」との事。パフォーマンスが上がってると聞いたら手を出さずにはいられません。早速アプリをionic4に移行させました。

移行方法

海外のサイトを漁った結果、移行する方法については、既存のアプリを書き換えるよりも、新たにionic4のアプリを作成するのが王道らしい。なので新規でアプリを作成します。

プロジェクト作成

ionic start myApp --type=angular

「--type=angular」のところがポイントで、「--type=ionic-angular」にするとionic3のアプリが作成されます。なおionicはangularだけでなく、vueをエンジンにするプロジェクトも進めていて、既にα版がリリースされているとのこと。こちらも正式版が楽しみです。

プロジェクトを作成して、ionic serveを試してみるとこんなエラーが。。。

[ERROR] Cannot perform Ionic serve/watch for project type: angular.

どうやら最新版でないionicもインストールされていて、パスの優先順位の問題でそちらが優先されて動いていたためこのようなエラーが出たようです。パスを修正して「ionic --version」で4.9.0と出たのを確認して再度ionic serveすると無事立ち上がりました。

pagesフォルダが無い！

ionic3の時、開発していて一番使うのがpagesフォルダでしたが、ionic4では見当たりません。どこに移動したかと言うと、appフォルダの中です。appフォルダの中にapp.component.tsやapp.module.tsと並んでページのフォルダが作られるように変わりました。

読み込みエラーの山

無事立ち上がったのを確認した私は猛然とionic3で作ったコードをionic4のプロジェクトにコピペ。そしていざionic serveしてみると山のようなエラーが。。。少々うんざりしながらもログに目をとうしてみると、moduleが見つからないというエラーを大量に吐いています。

ググって調べてみると、プラグインをimportするときの表記方法が微妙に変わっているとのこと。「勝手に変えんな、クソが！」と叫びつつ、修正していきます。

エラーの原因は主に2つでionic-nativeとionic-angularでした。

ionic nativeは3の場合

import { *** } from '@ionic-native/***';

だったものが、4では

import { *** } from '@ionic-native/***/ngx';

に変わっています。

ionic-angularの場合は3で

import { *** } from 'ionic-angular';

だったものが、4では

import { *** } from '@ionic/angular';

に変わっています。

プラグイン自体の名前が変わっているものがあるようで、「Content」は「IonContent」に変わっていました。さらに、ion-optionがion-select-optionに変わっているなど、タグの名前が変わっているものもあります。この種の変更はエラーが出た箇所を公式サイトで調べるしかありませんね。なんでプラグインの名前なんて変えるんでしょう。混乱するだけなのに。

ionViewDidLoadイベントが廃止に

ionViewDidLoadイベントが４から廃止されています。４の場合は、ngOnInit(){}の中に書くことになるようです。ionViewWillEnterはそのまま使えます。

最大の難関はルーティング！

ionic4で最も大きな変更が行われたのがルーティングです。今まではルーティングなどあまり意識せず、NavControllerを使ってpush、popしてページに飛んでいましたが、ionic4からangularのルーティングを利用するように一新されました。NavControllerを使った今までのページ遷移も一応残っているということになっていますが、私が試した限りはうまく動きませんでした。長くなるので、これについては次回書きたいと思います。