====== Ionic3からIonic4への変更点 ====== VersionUpは非常に面倒ですが、なるべくキャッチアップしていきたいと思います。 ===== Ionic4公式ドキュメント ===== https://beta.ionicframework.com/docs/ 2018年7月にIonic 4 betaが公開されました。まだ正式版ではないので、様子見がよいと思いますが、随時、上記公式ドキュメントが更新されていくと思われます。 ===== ionicアプリ作成コマンド"ionic start" ===== ionic4では、コマンドブロンプトで以下のコマンドを入力して、ionic4アプリを作成します（アプリの名前を''myApp''とする場合）。


ionic start myApp blank --type=angular

http://twosquirrel.mints.ne.jp/?p=26519 ===== フォルダ構造とファイル名が変更 ===== pagesフォルダが無くなり、appフォルダ直下にページ用フォルダを作成例えば、ionic g page contactとすると、src/app/ フォルダの中に、contact/ フォルダが作成されます。さらに、contact/ フォルダの中に、以下の5個のファイルが作成されます。


contact.module.ts
contact.page.html
contact.page.scss
contact.page.spec.ts
contact.page.ts

http://twosquirrel.mints.ne.jp/?p=26519 参考:https://beta.ionicframework.com/docs/cli/generate =====

 // Ionic version 3
    // Ionic version 4

===== routingが大幅変更 ===== https://www.joshmorony.com/converting-ionic-3-push-pop-navigation-to-angular-routing-in-ionic-4/\\ {{:pasted:20180615-075901.png}} routingを試してみたので、以下に記載してみました。 http://twosquirrel.mints.ne.jp/?p=26533 http://twosquirrel.mints.ne.jp/?p=26825 ===== slot ===== Ionic4では、

のように、ボタンなどの配置を設定します。以下のサイトが分かりやすいです。(英語) https://www.joshmorony.com/understanding-how-slots-are-used-in-ionic-4/ 上記サイトによると、例えば、ページのヘッダーは、以下のように記載するとのことです。(ちなみに、ion-navbarではなく、ion-toolbarを用いる。)



  
    The Title

ionic3

ionic4



  
  
    Forget

===== ion-navbarがion-toolbarに変更 ===== 上記のコードを参考にしてください。 ===== RxJS5からRxJS6に変更 ===== 非同期通信のためのRxJSですが、大幅変更が行われています。 [[RxJS6(Ionic4-Angular6)での変更点]] ===== PWA化が面倒に ===== ionic3では、index.htmlの一部分のコメントを外すだけでPWA化できたのですが、コマンドブロンプトで、@angular/pwaをインストールする必要があります。しかし、2018/8/1現在、うまくいきません。[[https://github.com/angular/angular-cli/issues/11640|参考外部リンク]] http://twosquirrel.mints.ne.jp/?p=26777 https://www.joshmorony.com/create-a-pwa-with-angular-service-workers-in-ionic-4/ ===== リンク ===== https://www.joshmorony.com/what-to-expect-when-ionic-4-is-released/\\ 2018年5月時点（Ionic公式ではVersion4は未発表）でのIonic4での変更点の予想が分かりやすく記載されています（英語）。 https://blog.ionicframework.com/announcing-ionic-4-beta/ 2018年7月に、Ionic 4.0.0-beta.0がリリースされました。まだ、beta版なので、様子見でよいと思います。 https://ionicthemes.com/tutorials/about/ionic-4-tutorial-mastering-web-components-in-ionic-4 https://github.com/ionicthemes/ionic-4-custom-components ===== Ionic3でお勧めの本 ===== 以下のサイトが非常に分かりやすいです。 https://github.com/Ionic-jp/handbook Ionic3入門の本は、以下がお勧めです。