以下のサイトを写経してみたい

https://www.joshmorony.com/building-a-notepad-application-from-scratch-with-ionic/

ソースコード

https://github.com/joshuamorony/ionic-notepad

C:/ionic4/　フォルダをVisualStudioCodeで開き、Ctrl+@　でターミナルを開き、以下を入力。

ionic start ionic-notepad blank --type=angular
// 何か聞かれたら、2回ともN + Enter とする。

C:/ionic4/ionic-notepad/　フォルダをVisualStudioCodeで開き、Ctrl+@　でターミナルを開き、以下を入力。

ionic serve

ionic g page Detail
ionic g service services/Notes

Ionic3とIonic4ではルーティングがだいぶ変わっている。

src/app/app-routing.module.ts

（変更前）

（変更後）

src/app/home/home.page.html

（変更前）

（変更後）

src/app/home/home.page.ts

（変更前）

（変更後）

src/app/interfaces/note.ts を新たに作成

（変更前）

（変更後）

ionic serve し直すと以下のようなエラー。

@ionic/storage を利用するためには、@ionic/storageをnpm install –saveする必要があるとのこと。

Ctrl+C ⇒ y + Enterでサーバ停止し、ターミナルで以下を入力。

npm install @ionic/storage --save

ionic serve しておく。

src/app/app.module.ts

(変更前)

(変更後)

src/app/home/home.page.ts

(変更前)

(変更後)

参考：https://beta.ionicframework.com/docs/api/alert/

src/app/home/home.page.html

(変更前)

(変更後)

https://devdactic.com/ionic-4-firebase-angularfire/

https://www.joshmorony.com/building-a-notepad-application-from-scratch-with-ionic/

ソースコード

https://github.com/joshuamorony/ionic-notepad