【Angular】V7 から V8 にアップデートして変更されたらしいところ

2020年2月7日

update方法

  1. 開発環境のAngular cli をグローバル、ローカル共にupdateする
  2. 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の時点で有効になる
  • ちなみにこのオプションの指定は一時的なものらしく、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対応のブラウザでは読み込みませんよ、というのを明示しています。

angular,プログラミング,開発Angular 8,update

Posted by naomiti3333