VersionUpは非常に面倒ですが、なるべくキャッチアップしていきたいと思います。

https://beta.ionicframework.com/docs/

2018年7月にIonic 4 betaが公開されました。まだ正式版ではないので、様子見がよいと思いますが、随時、上記公式ドキュメントが更新されていくと思われます。

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

<button ion-button></button> // Ionic version 3
<ion-button></ion-button>    // Ionic version 4

https://www.joshmorony.com/converting-ionic-3-push-pop-navigation-to-angular-routing-in-ionic-4/

routingを試してみたので、以下に記載してみました。

http://twosquirrel.mints.ne.jp/?p=26533

http://twosquirrel.mints.ne.jp/?p=26825

Ionic4では、<ion-buttons slot=“end”>のように、ボタンなどの配置を設定します。

以下のサイトが分かりやすいです。(英語)

https://www.joshmorony.com/understanding-how-slots-are-used-in-ionic-4/

上記サイトによると、例えば、ページのヘッダーは、以下のように記載するとのことです。(ちなみに、ion-navbarではなく、ion-toolbarを用いる。)

<ion-toolbar color="primary">
  <ion-title>
    The Title
  </ion-title>
  <ion-buttons slot="end">
    <ion-button (click)="addTodo()">
      <ion-icon slot="icon-only" name="add-circle"></ion-icon>
    </ion-button>
  </ion-buttons>
</ion-toolbar>

ionic3では、index.htmlの一部分のコメントを外すだけでPWA化できたのですが、コマンドブロンプトで、@angular/pwaをインストールする必要があります。

しかし、2018/8/1現在、うまくいきません。参考外部リンク

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://github.com/Ionic-jp/handbook

Ionic3入門の本は、以下がお勧めです。