ionic3から4への変更点まとめ

はじめに

ionic4を触ってみてionic3からionic4への変更点結構あったので備忘録的に纏めてみました！
何か間違っている点や他にもこんなん変わったよってのがあればコメントおねしゃす！！
公式ドキュメント

ionicアプリ作成コマンド"ionic start"

--typeオプションが追加されangularのフォルダ構造や古いionicのバージョン環境で始める事が可能。
--type=○○で実行。
公式ドキュメントionic start
例:angularの環境で始める場合
$ ionic start myApp blank --type=angular

フォルダ構造とファイル名が変更

ionic4では、pagesフォルダが無くなり、appフォルダ直下にページ用フォルダを作成するようになった。

<ion-button>の変更

これめんどくさかったのでgood
<button ion-button></button> // Ionic 3
<ion-button></ion-button> // Ionic 4

routingの変更

Ionic3では、NavControllerのpushなどを用いてページ遷移していたが、ionic4ではangularのルーティングを使用。app-routing.morule.tsでルーティング管理。
$ionic g page ○○で自動的にapp-routing.morule.tsにpathが下記の様に追加され、
{ path: ‘○○’, loadChildren: ‘./○○/○○.module#○○PageModule' }
loadChildrenという記法でLazy Loadingを実装している。

Ionic3で、NavCtrl.push() を用いたときのように、ページ遷移先で自動的に「戻る」ボタンは表示されない。

slot

ボタンやロゴの配置の設定をする。
下記以外にも色々とオプションがあるので公式をちぇきら。
この参考サイトでも良い感じに説明してくれてます。

例:ionic3の場合

<ion-item>
 <button ion-button item-right>home</button>
</ion-item>

例:ionic4の場合

<ion-item>
  <ion-buttons slot="end">
    <ion-button>hoge</ion-button>
  </ion-buttons>
</ion-item>

ion-navbarがion-toolbarに変更

へーって感じ。

RxJS5からRxJS6に変更

これは@pondayさんの記事に分かりやすく纏めてあったのでそちら見てみてください。
RxJS 6.0 変更点まとめ（適宜更新）

おまけ

今後 ionicは独自のフレームワークとしてAngular以外の主要フレームワークのReact、Vueでも使用可能にするとオフィシャルのブログで宣言してます。
現在ベータ版がリリースされている。
なんでこんな事が可能になったのかって記事書きましたので参考までに

ionicとstencilの関係性について