Angular 9 アップデート(゚∀゚)キタコレ!!

Angular 9が正式にリリースされたようですね(゚д゚)(。_。)(゚д゚)(。_。) ウンウン
各詳細は下記記事で確認してください。
ここ3年ぐらいで1番のアップデートとかどっかに載ってた気がするけど、
確かに良い感じになった気がするъ(゚Д゚)グッジョブ!!

大きく進化した「Angular」バージョン9、次世代レンダリングエンジン「Ivy」を中心に機能紹介

https://codezine.jp/article/detail/12057

【ng update】Angular 9 へバージョンアップする方法|Angular 8 やさしい勉強会

https://note.com/3832/n/nda0b10d91a34

Upgrade to Angular 9 — Within 10 Minutes

https://levelup.gitconnected.com/upgrade-to-angular-9-within-10-minutes-671c6fd6174b

Angular 公式で用意されているアップデート・チェックツール

https://update.angular.io/

上記記事の内容を箇条書きで書くと下記のとおりです。

アップデート内容

  • Angular 9正式版リリース。高速かつ軽量なレンダリングエンジン「Ivy」がデフォルトに
  • 次世代レンダリングエンジン「Ivy」が正式リリース
  • ファイルサイズの縮小
  • デバッグに利用できる「ng」変数
  • CSSクラス/スタイルのバインディングに関する改善
  • テンプレートのより厳密な型チェック
  • わかりやすいビルドエラー
  • 速度の向上とAOTビルドのデフォルト化
  • 「ng update」の改善
  • 「providedIn」のオプション追加
  • Component harnesses
  • YouTubeとGoogle Mapsを表示する新コンポーネント
  • 開発環境の改善
  • TypeScript 3.7のサポート
  • HammerJS が削除
  • 遅延読み込み( loadChildren )の記述が変更
  • Angular Materialのimport時の記述が変更

この記事に書かれていないもので自分が(・∀・)イイネ!!って思ったのが下記です。

SSR 開発時によるホットリロード機能

今までSSRを利用した開発を行う際には、ホットリロードの機能が無かった?のでSSRの動作確認をするためには一度 npm run build:ssr でビルドしたものを利用して確認する必要がありました。

しかもこのビルドには時間がかかるため、
ちょっと修正しただけでも確認するのに数分時間がかかるとか・・・(; ・`д・´)

それがAngular 9になってからはいつのまにか npm run dev:ssr
というコマンドが追加されていて、これを使うと ng serve みたいな感じでホットリロード状態でSSR時の開発が出来るようですキタ━━━━(゚∀゚)━━━━!!

個人的には神アップデートやで( ´∀`)bグッ!

他にもSSR関係で利用していた npm run のコマンドが変更されているようでした。

Angular 8 の場合(一部抜粋)

"compile:server": "webpack --config webpack.server.config.js --progress --colors",
"serve:ssr": "node dist/server",
"build:ssr": "npm run build:client-and-server-bundles && npm run compile:server",
"build:client-and-server-bundles": "ng build --prod && ng run ssr-test:server:production --bundleDependencies all",
"build:ssr-dev": "npm run build:client-and-server-bundles-dev && npm run compile:server",
"build:client-and-server-bundles-dev": "ng build && ng run ssr-test:server",
"serve:ssr-dev": "node dist/server"

Angular 9 の場合 (一部抜粋)

"dev:ssr": "ng run ssr-angular9:serve-ssr",
"serve:ssr": "node dist/ssr-angular9/server/main.js",
"build:ssr": "ng build --prod && ng run ssr-angular9:server:production",
"prerender": "ng run ssr-angular9:prerender"

となっていて、Angular 9 の方がだいぶスッキリしている内容に変更されていました。

SSR開発時のホットリロード npm run dev:ssr

SSR用のサーバー側だけを起動する npm run serve:ssr

事前に画面をレンダリングするプリレンダリングnpm run prerender

Angular 8 から Angular 9 へのアップデート

既存プロジェクトをアップデート

8系の最新版にアップデート

ng update @angular/[email protected] @angular/[email protected]

typescriptの最新版をインストール

npm install [email protected]

最新版のAngularにアップデート

ng update @angular/core @angular/cli

Angular Material のアップデート

ng update @angular/material

SSRのアップデート

ng update @nguniversal/express-engine

nodistを利用するnode.jsのバージョンを変更する。(必要であれば)

nodist + v12.16.1

v12.16.1を利用する (必要であれば)

nodist local v12.16.1

新規プロジェクト用に グローバルのAngular Cli をアップデート

既存を削除

npm uninstall -g @angular/cli

インストール

npm install -g @angular/cli

nodistを利用するnode.jsのバージョンを変更する。 (必要であれば)

nodist + v12.16.1

グローバルで利用するnode.jsのバージョンをv12.16.1にする (必要であれば)

nodist global v12.16.1

SSRの構成が変更されている?

マルチプロジェクト構成でSSRを利用している場合に、以前はプロジェクト直下にあったserver.tsが無くなっていた。
その代わり、SSRで指定したプロジェクト直下にserver.tsが配置されている。
server.tsの中身も変更されていた。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です