【Angular】V7 から V8 にアップデートして変更されたらしいところ
Contents
update方法
- 開発環境のAngular cli をグローバル、ローカル共にupdateする
- ng updateを実行する
// Angular cli update
// まずはインストールされているAngular cli を削除
npm uninstall -g @angular/cli
// 次にキャッシュをクリーンにする
npm cache verify
// グローバル環境にAngular cli の最新バージョンインストール
npm install -g @angular/cli@latest
// ローカルのAngular cli update
npm install @angular/cli@latest
// Angular UPDATE
ng update @angular/cli @angular/core
ソース上での変更点
lazy loadするときのloadChildrenの使い方
- 今までの書き方
{path: '/admin', loadChildren: './admin/admin.module#AdminModule'}
- これからの書き方
{path: `/admin`, loadChildren: () => import(`./admin/admin.module`).then(m => m.AdminModule)}
- VSCodeとかがこれらのインポート検証できるようになるために書き方変わるみたい。
- フォルダ構成とか変わったときにしっかり検証してくれるのでいいですね。
@ViewChild関連
- 今までの書き方
@ViewChild('btnF1') btnF1: ElementRef;
- これからの書き方例(とりあえず以下でエラー出ずに行けた)
@ViewChild('btnF1', {static: true}) btnF1: ElementRef;
- オプションの指定が必要になったみたい。
- 指定できるオプションは以下の通り
- static
- true:OnInitの時点で有効になる
- false:AfterViewInitの時点で有効になる
- static
- ちなみにこのオプションの指定は一時的なものらしく、ver9になったらまた指定が不要になるらしい。
Modern JS と Legacy JSのローディング対応
- ブラウザが対応しているJSのバージョン(es2015 or es5)に合わせて、ロードする際、自動的に必要最小限のバンドルサイズでロードできるようになりました。
- ビルドするときに、modernで必要な最小限のjsと、legacyで必要となる分のjsとを別で生成して、読み込ませる際に以下のようにすることで分けているみたいです。
<script type="module" src="…"> // Modern JS
<script nomodule src="…"> // Legacy JS
- nomoduleとつけることで、es2015対応のブラウザでは読み込みませんよ、というのを明示しています。