[ionic入門] ionic4はionicをangular化することに成功しました🎉🎉🎉

angularで作られているionic!

しかし、蓋を開けてみるとionicって本当にAngularなの?

と思ってしまうようなフォルダ構成。

確かに、HtmlとTsとScssにわかれてるからAngularっぽくなっているけど。。。

とつい最近まで思っていました。

でも。。

Angular6 in ionic4

ionic start myApp tabs --type=angular

このコマンドを実行すればionicがAngularと同じファイル構成になります。

オプションで--type=angularをつける必要があるようです。

下のリンクにオプションコマンドなしの構成を置いておきました。

[ionic入門] ionicって何?サンプルプロジェクトを動かしてみた! – まんくつ

angular.jsonになっていることに気づいたかもしれません。

そう、これはAngular6搭載のionicです🎉🎉🎉

rxjsも6になってます!

ただ、ベータ版なので何かあってもご愛嬌って感じでしょうか・・・

パッケージバージョン

パッケージのバージョンを載せておきます!

package.json

{
  "name": "myApp2",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "~6.1.1",
    "@angular/core": "~6.1.1",
    "@angular/forms": "~6.1.1",
    "@angular/http": "~6.1.1",
    "@angular/platform-browser": "~6.1.1",
    "@angular/platform-browser-dynamic": "~6.1.1",
    "@angular/router": "~6.1.1",
    "@ionic-native/core": "5.0.0-beta.15",
    "@ionic-native/splash-screen": "5.0.0-beta.15",
    "@ionic-native/status-bar": "5.0.0-beta.15",
    "@ionic/angular": "4.0.0-beta.7",
    "core-js": "^2.5.3",
    "rxjs": "6.2.2",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular/cli": "~6.1.1",
    "@angular/compiler": "~6.1.1",
    "@angular/compiler-cli": "~6.1.1",
    "@angular/language-service": "~6.1.1",
    "@angular-devkit/architect": "~0.7.2",
    "@angular-devkit/build-angular": "~0.7.2",
    "@angular-devkit/core": "~0.7.2",
    "@angular-devkit/schematics": "~0.7.2",
    "@ionic/ng-toolkit": "^1.0.0",
    "@ionic/schematics-angular": "^1.0.0",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~10.9.2",
    "codelyzer": "~4.4.2",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~3.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.0",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "~2.9.2"
  },
  "description": "An Ionic project"
}

安定している?

していません。。。

Releases · ionic-team/ionic

今のローカルのバージョンは次の通り、

“@ionic/angular”: “4.0.0-beta.7”

4.0.0-beta.11 (2018-09-14)が今のところの最新バージョンのようです、いくつもバグ修正が入っているのでまだまだ安心して使えなさそうですね。

うまくいかなかったらまず、バグ情報を確認する必要がありそうです。

なんでAngular化?

ionicはangularを基に作られていました。

しかし、AngularのAngular CLI、ビルドツール、ルータには、多くの不安定さと不確実性があったようです。

そのため、Ionicはこれらのツールの多くを独自のバージョンで構築しなければなりませんでした。

angularがjsから2へ、そして4へ、6へバージョンアップしていくうちにAngularはすばらしいツールによってそのギャップを埋めるようになりました。そして、Ionicがこれを活用するに至ったようです。

Ionic 4以降、Angular CLIとRouterを完全に採用しています。これらのアップデートにより、ionic-app-scriptsとIonicのルータを、正式に整備されたAngularツールに置き換えることができます。

これは、Angular開発者がIonicアプリケーション用にAngular CLIを直接使用できることを意味し、Angularが進めている素晴らしい進歩を享受することを意味します。

上記は、Announcing the Ionic 4 Beta | The Official Ionic BlogAngular CLI & Router  A項の意訳

Summary

ionicもAngularも進化してて最高!

これまでのionicの流れはこのサイトで非常にわかりやすく書かれています。

Ionic 2 から 4 への、この2年間の進化を振り返る|リレーションデザイン研究所

シェアする

  • このエントリーをはてなブックマークに追加

フォローする