Ionic TECHBLOG

Ionic 2.x.xからIonic 3.0.xへ移行する方法とIonic 3.0.0での変更点のまとめ

2017年4月7日にIonic 3.0のリリースがブログでアナウンスされました。Angular 4.0.0に正式に対応したり、Ionic Pageデコレータが追加されたりしています。ということでここではIonic 3.0での変更点と2.xからの移行方法をまとめました。

Ionic 3.0.0での変更点

Ionic 3.0.0での変更点をまとめると以下のようになります：

  • セマンティックバージョニングへ変更
  • Angular 4.0.0に対応
  • TypeScript 2.1と2.2への互換性
  • IonicPageデコレーターの追加

Angularではセマンティックバージョニングが採用されており、

  • メジャーバージョン：APIの変更に互換性のない場合
  • マイナーバージョン：後方互換性があり機能性を追加した場合
  • パッチバージョン：後方互換性を伴うバグ修正をした場合

でバージョン変更が行われるようになっています。IonicでもAngularのアップグレードに合わせてメジャー、マイナー、パッチバージョンが適用されるようになりました。

また、Angular 4.0.0ではAOTで生成されるコードサイズが多くの場合で60%ほど減ったり、animationパッケージが外部化されたりと大きな変更が加えられましたが、Ionic 3.0.0ではこのAngular 4.0.0に正式に対応しました。

Ionic 2.x.xから3.0.xへの移行

Ionic 2.x.xから3.0.xへの移行手順としては以下の通りです：

  1. package.jsonの更新とnpm install
  2. BrowserModuleをapp/app.module.tsに追加

1のpackage.jsonについてですが、Ionic 3.0.xになってAngular 4.0.0に対応したことにより、依存パッケージが更新されました。基本の依存関係はこんな感じになります：

"dependencies": {
    "@angular/common": "4.0.0",
    "@angular/compiler": "4.0.0",
    "@angular/compiler-cli": "4.0.0",
    "@angular/core": "4.0.0",
    "@angular/forms": "4.0.0",
    "@angular/http": "4.0.0",
    "@angular/platform-browser": "4.0.0",
    "@angular/platform-browser-dynamic": "4.0.0",
    "@ionic-native/core": "3.4.2",
    "@ionic-native/splash-screen": "3.4.2",
    "@ionic-native/status-bar": "3.4.2",
    "@ionic/storage": "2.0.1",
    "ionic-angular": "3.0.1",
    "ionicons": "3.0.0",
    "rxjs": "5.1.1",
    "sw-toolbox": "3.4.0",
    "zone.js": "^0.8.4"
},
"devDependencies": {
  "@ionic/app-scripts": "1.3.0",
  "typescript": "~2.2.1"
}

Ionic 2.x.xではBrowserModuleを読み込む必要がありませんでしたが、3.0.xからはこれをimportしておかないとコンパイル時に

Runtime Error
No provider for ApplicationInitStatus!

というエラーを吐きます。なのでapp/app.module.tsに

import { BrowserModule } from '@angular/platform-browser';

を追加し、@NgModuleに

imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
]

のようにBrowserModuleを追加する必要があります。また、Httpを使用しているアプリではHttpModuleも同じようにして

import { HttpModule } from '@angular/http';

でimportして、

imports: [
    BrowserModule,
    HttpModule,
    IonicModule.forRoot(MyApp)
],

で読み込む必要があります。

Ionic CLI v3 Betaのインストール

Ionic CLIもv3 Betaが利用できるようになっています。ターミナルから

npm install -g ionic@beta

でインストールできます。

Ionic CLI v3のコマンド一覧

ターミナルでionicと打つと、以下のようにコマンドリストが出力されます。

command description
docs Open the Ionic documentation website
generate Generate pipes, components, pages, directives, and tabs (ionic-angular >= 3.0.0) (alias: g)
info Print system/environment info
link Connect your local app to Ionic
login Login with your Ionic ID
serve Start a local development server for app dev/testing
signup Create an Ionic account
start Create a new project
upload Upload a new snapshot of your app
cordova build Build (prepare + compile) an Ionic project for a given platform
cordova compile Compile native platform code
cordova emulate Emulate an Ionic project on a simulator or emulator
cordova platform Add or remove a platform target for building an Ionic app
cordova plugin Manage Cordova plugins
cordova prepare Transform metadata to platform manifests and copies assets to Cordova platforms
cordova resources Automatically create icon and splash screen resources
cordova run Run an Ionic project on a connected device

大きな変更点としては、ionic buildやionic runがなくなったことです。コマンドラインでionic buildと打っても

The build command is no longer available. To find out more about the equivalent please run:

    ionic cordova build --help

と返されます。3.0.0からはionic cordova build iosのようにcordovaを挟む必要があります。

--helpオプションも分かりやすくなりました。例えばionic start --helpだと

のように表示されます。何が入力として必要で、どんなオプションがあってということが分かりやすく表示されます。

また、

ionic start newApp

を実行すると

のようにテンプレートを選択できるようになり、ここにconferenceが追加されています。conferenceアプリには実用的なアプリを制作するにあたって基本となる機能が実装されているため、初めて始める人はこのテンプレートで初めてソースコードを眺めるのがいいんじゃないかと思います。

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です