Angular
ionic
Firebase
IonicDay 13

[非公式] Ionic v3でAngular 6を使う方法(追記あり)

Ionic v3の dependencies をみると、AngularとRxJSが5系であることに気づくと思います。これは、RxJS5 => 6で多くの破壊的変更があったことが理由にあります。大体は pipe オペレーター導入によるものです。

Ionic Native 5 が正式リリースしたら改善されるかなと思っているのですが、Firebaseの dependencies の関係上、AngularとRxJSのバージョンをあげたい!!という声をちらほら聞きますので、対応をまとめておきます。


アップデート方法


1. package.jsonのアップデート

まず、ionic-angular を非公式のGitレポジトリからとってくるように設定します。

"ionic-angular": "git://github.com/rdlabo/ionic-angular-v6.git",

私がつくったもので非公式ですので、中身が気になる方はGitHubのFile Changesをご覧ください。

続いて、Angular、RxJS、Ionic Nativeのバージョンをあげてください。Ionic Nativeはまだbeta版ですが、RxJS 6に対応したbeta版がリリースされているのでそれを使います。以下以外のパッケージをご利用の場合、それぞれアップデートください。

"@angular/common": "~6.1.10",

"@angular/compiler": "~6.1.10",
"@angular/compiler-cli": "~6.1.10",
"@angular/core": "~6.1.10",
"@angular/forms": "~6.1.10",
"@angular/platform-browser": "~6.1.10",
"@angular/platform-browser-dynamic": "~6.1.10",
"@angular/router": "~6.1.10",
"rxjs": "^6.2.2",
"@ionic-native/core": "5.0.0-beta.22",
"@ionic-native/splash-screen": "5.0.0-beta.22",
"@ionic-native/status-bar": "5.0.0-beta.22",

devDependenciesにアップデートします。TypeScriptのバージョンを2.9まであげるとAoTビルドでCannot find module "."とでることがありますので。動作確認ができてる2.8.3としておきます。参考

"@ionic/app-scripts": "3.1.7",

"typescript": "2.8.3"

設定が終わったら、 npm install でパッケージをインストールください。


2. Ionic Nativeのimport元の変更

Ionic Native 5では、Angular以外でも利用できるように仕様の変更が入ってます。具体的には、Angularで利用する時は、パッケージの ngx からインポートする必要があります。例えば、 SplashScreen をインポートするなら、上から下のように変更します。

- import { SplashScreen } from '@ionic-native/splash-screen'; 

+ import { SplashScreen } from '@ionic-native/splash-screen/ngx';

すべてのIonic Nativeで変更が必要です。


3. RxJSの変更

既存プロジェクトなら、RxJSを使われてるものが多いと思います。例えば

this.load().map((data: any) => {

なら、pipeオペレーターを使うようになるので

this.load().pipe(map((data: any) => {

と文法が変わります。ここらへんのアップデートにつきましては RxJS 6.0 変更点まとめ(適宜更新) が詳しいので、こちらをご参照ください。


4. Injectable の追記

@Injectable()

@Injectable({

providedIn: 'root',
})

に書き換えます。Angular 6で、InjectableがTree Shaking可能になったための変更なのですが、詳しくはAngular v6で導入されるTree-Shakable DIの紹介 をご覧ください。


まとめ

これで、Ionic v3で、Angular 6を使えるようになりました。Angular / RxJSのバージョンが最新なので、Firebaseであったり、最新のnpmパッケージを導入するのが簡単になるかと思います。

なお、Ionic Nativeがbeta版であること、非公式の方法であることをご留意いただけますと幸いです。

それでは、また。


おまけ:Angular 7にはあげれないの?

@ionic/app-scripts(Angularのビルドまわりを担当してるパッケージ)の依存関係の問題で、Angular 7にあげることはできません。

"@angular-devkit/build-optimizer": "0.0.35",

"@angular/compiler-cli": "5.0.3",
"@angular/core": "5.0.3",

ここあたりを整理しないといけないのですが修正範囲かなり広いんですよね・・・。Ionic 4がそろそろリリース前で落ち着いてきてるので、Angular 7以降を利用したい方はIonic 4へのアップグレードをご検討いただけましたら幸いです!