この投稿は最初に公開されました 私のウェブサイト:https://dsebastien.net
この記事では、この新しいリリースで注目に値するすべてのことを(ほぼ)説明します。 以前の記事で行ったように、Angularの周りで何が変わったかについても強調します 角度のある11 & 角度のある10.
鳥瞰図を探しているだけの場合は、 公式リリース発表。 ここでは、リリースノートをさらに深く掘り下げます。
アイビーリーグに参加…
Angularチームは取り組んできました ツタ (新しいコンパイルとレンダリングのパイプライン)2018年から。Angular8でようやくリリースされました。Angular9以降、Ivyは新しいプロジェクトのデフォルトであり、エコシステムはゆっくりと移行しています。 Angular12を使用 古いViewEngineは正式に非推奨になりました。 将来のメジャーリリースで削除される予定です。 また、ViewEngineを使用して新しいアプリケーションを作成することはできません。 最後に、Ivyが新しいライブラリプロジェクトのデフォルトになりました。
この時点で、ライブラリの作成者は、おかげでViewEngineに依然頼ることができます。 ngcc
(Angularの互換性コンパイラ)が、ライブラリをIvyに移行できるかどうかを評価する時が来ました。 数週間前、ミンコ・ゲチェフが出版しました 記事 それを詳細に説明します。 また、関連するをチェックしてください RFC.
あなたが知らなかった場合のために ngcc
Angularプロジェクトを作成した後、または依存関係をインストールした後に実行される小さなプロセスです。 次のようなメッセージが表示されたら Compiling ... : es2015 as esm2015
、それは ngcc
その仕事をしています。 何 ngcc
Ivyがそれらを消費できるように、ViewEngineに依存するライブラリをコンパイルします。
私のように、あなたはおそらくそれに気づいたでしょう ngcc
実行には多くの時間がかかり、開発者のエクスペリエンスに非常に悪影響を及ぼします。 これが、Angularエコシステムができるだけ早くIvyに移行することが重要である理由です。 第二に、エコシステムの大部分が移動するまで、AngularチームはView Engineを維持する必要がありますが、これにはいくつかの理由で問題があります。 最後になりましたが、View Engineに依存するライブラリは、Ivyライブラリに依存できません。
ライブラリの作者はおそらくIvyにあまり速く移行することはできませんが、気が進まないユーザーにアップグレードを促す必要があります。 とにかく、今後の道はすべてのものをできるだけ早くアイビーに移行することです
アイビーについての素晴らしい記事があります あそこに.
さようなら分度器
XNUMX月、Angularチームはのサポートを終了する計画を発表しました 分度器 2022の終わりに。
Angular 12以降、Protractorはデフォルトで新しいプロジェクトに含まれません。 代わりに、AngularCLIは次のような他のソリューションを使用するためのオプションを提供します サイプレス, WebdriverIOまたは テストカフェ。 これは ng e2e
コマンドは今後も引き続きサポートされる予定です。
で説明したように 発表、2013年に分度器が作成されたとき、 webdriver ありませんでした 標準、およびエンドツーエンド(e2e)テストを作成するのは困難であり、維持するのは悪夢でした。 分度器はラッピングによって革新的なソリューションをもたらしました セレン-webdriver、および実行フローを制御する方法を提供しました。
もちろん、それ以来、多くのことが進化してきました。 私たちは今持っています WebDriver
API、 async
& await
(トップレベルでも await
、すごい)。 また、生態系も進化しています。 のようなソリューション サイプレス, 劇作家, 人形 多くの(当然の)人気を得ています。 たとえば、サイプレスのようなツールは、分度器よりもはるかに優れた開発者エクスペリエンスを提供し、最新の標準を活用し、(他の強力な機能の中でも)クロスブラウザーテストをサポートします。 現在の事実上のe2eテストツールのもうXNUMXつの利点は、フレームワークに依存しないことです。これは非常に価値があります。
簡単に言えば、分度器を維持することはAngularチームにとってあまり意味がありません。 進化する分度器は、今ではあまりにも多くの労力を必要とし、大量の破壊的な変化を引き起こします。 詳細についてはRFCを参照してください。興味深い読み物です。
タイムラインは、分度器でe2eテストを作成するために多くの時間とエネルギーを費やしたチーム/プロジェクトにとって重要です。 AngularチームはRFCを通じて収集されたフィードバックの評価にまだ忙しいので、おそらく今年の後半にもっと知るでしょう。
いずれかの方法; まだ行っていない場合は、サイプレスを試してみてください。失望することはありません。 ちなみに、私はみんなに使い始めることをお勧めし続けます Nrwl NX、Angular、React、Next.js、Cypressなどのサポートを含む素晴らしいソリューション
ヌルの合体
Angular 12には、 null合体演算子 Angularテンプレートで。 そして、これは素晴らしいです! その演算子はTypeScriptでサポートされています バージョン3.7以降.
この演算子について聞いたことがない場合は、簡単に説明します。 アイデアは、何かが起こった場合のフォールバック値を定義できるようにすることです。 null
or undefined
。 ここに例があります:
If foo
is null
or undefined
をタップし、その後、 x
に設定されます true
(つまり、フォールバック値)、そして私たちはそれを好きなように設定することができます。
この素晴らしいなしで ??
演算子、代わりにこれを書く必要があります:
let x = foo !== null && foo !== undefined ? foo : true;
Angularもそれをサポートするようになったので、最終的に次のような式を書くことができます。
{{ age ?? calculateAge() }}
古くてより冗長な代替手段の代わりに。 きちんと!
この変更について詳しく知ることができます こちら.
nullishの合体についての詳細は、 TypeScriptハンドブック と同様に DND.
TypeScript4.2のサポート
Angular12はのサポートを導入します タイプスクリプト 4.2、つまり、 トン 新しい素晴らしい言語機能の。 また、TypeScript4.0および4.1のサポートは終了しました。
TS4.2に含まれるものの概要は次のとおりです。
スマートタイプエイリアスの保存:予期されたタイプは、以前に発生した生のタイプではなく、コードエディターによって表示されます。 あなたはそれについてもっと学ぶことができます こちら.
タプルタイプのリーディング/ミドルレスト要素:タプル内のどこにでもレスト要素を含めることができるようになりました(いくつかの注意点があります)。 これは、時々タプルに依存している私たちにとってはかなりクールです。 それについてもっと知る こちら.
プロジェクト構造を理解する:TS4.2に含まれるもの 新しい旗 呼ばれます --explainFiles
、これは、ファイルがプログラムに含まれている理由に関する情報を出力するようにTypeScriptに指示します。 これはトラブルシューティングに非常に役立ちます。
呼び出されていない関数チェックの改善:TypeScriptは、関数が呼び出されていないケースをさらに検出できるようになりました。 例えば書くとき foo
foo()
。 詳細と例を見つけることができます こちら.
分解された変数を未使用として明示的にマークできるようになりました: let [_first, second] = getValues();
、これは素晴らしいです。 これ以上のエラーはありません noUnusedLocals
有効になっています!
より厳密なチェックのように、実際にはもっとたくさんあります in
演算子、およびあなたに影響を与える可能性のあるいくつかの重大な変更。 だから、必ずチェックしてください リリースノート.
Webpack5のサポート
Angular11は私たちをもたらしました Webpack5の実験的サポート。 Angular 12では、Webpack5のサポートが本番環境に対応しています。 w00t!
あなたが見ていない場合 ウェブパック 5、あなたは驚かれることでしょう。 Webpack 5は2020年XNUMX月にリリースされたため、現在はかなり安定しています。 Webpackは現在 バージョン5.37 (数日前にリリースされました)。
Webpack 5で何が変わったのか、そしてなぜ私がこれにとても満足しているのかについての簡単な説明があります🤩
まず、ご存知のように、Webpackは キー Angular CLIパズルのピースであり、バンドルサイズ、ビルドパフォーマンスなどに大きな役割を果たします。
第二に、Webpack5は理由からメジャーリリースです。 これには、いくつかの重大な変更が含まれています。これは、Angularとエコシステム内の膨大な数のユーティリティ/ライブラリのアップグレードに時間がかかった理由を説明しています。
リリースノートで、Webpackチームは、Webpack5が以下に焦点を当てていることを示しました。
- でビルドパフォーマンスを改善する 永続性 キャッシング
- より良いアルゴリズムとデフォルトで長期キャッシュを改善する
- より良いツリーシェイクとコード生成によるバンドルサイズの改善
- Webプラットフォームとの互換性の向上
- 内部構造のクリーンアップ
- 重大な変更(笑)が導入され、v5をできるだけ長く使用できるようになりました
Webpack5の最もクールな機能は モジュールフェデレーションのサポート、を容易にするために必要な基盤を提供します マイクロフロントエンドの作成。 この記事の範囲から少し外れていますが、モジュールフェデレーションを使用すると、さまざまなビルドを巨大な接続モジュールグラフのように動作させることができ、リモートビルドからモジュールをインポートして使用できます。 チェックアウト 公式文書 詳細をお知りに。
主な変更の中で、Webpack 5は、以前に非推奨になったものをすべて削除しました(たとえば、 NoEmitOnErrorsPlugin
, ModuleConcatenationPlugin
, NamedModulesPlugin
)、 と同様 IgnorePlugin
& BannerPlugin
.
また、以前に自動的に挿入されたNode.jsポリフィルは削除されました。 これは、そのリリースでの最大の変更点の5つです。 これらのポリフィルにより、Webpackは、ブラウザーでNode.js用に作成されたモジュールを使用できるようになりました。 それはクールでしたが、大きな欠点がありました。それは、バンドルが大きいことです。 さらに、これらのポリフィルは、ブラウザーと互換性のあるライブラリの代替手段またはブラウザーをサポートする特定のディストリビューションのいずれかがあったため、ますます有用性が低くなりました。 Webpack XNUMX以降、これらのポリフィルは自動的に追加されなくなるため、いくつかの驚きに遭遇する可能性があります。 たとえば、以前はWebpackのおかげで機能していたことに気付かずに、ブラウザでNode.js用に作成されたモジュールを使用する場合です。 あなたはそれについてもっと学ぶことができます こちら.
Webpack 5では、長期キャッシュのサポートが強化されています。 本番モードでは、デフォルトで新しいアルゴリズムが含まれるようになりました。
chunkIds: "deterministic"
moduleIds: "deterministic"
mangleExports: "deterministic"
値が示すように、これらのアルゴリズムは、決定論的IDをチャンクとモジュールに割り当て、決定論的名前をエクスポートに割り当てます。
Webpack 5は、エクスポートのネストされたプロパティへのアクセスを追跡することにより、ネストされたツリーの揺れを実行できます(Matrixへようこそ)。これにより、ツリーの揺れがさらに改善されます。 また、今ではできます モジュールのエクスポートとインポートの間の依存関係を分析します。 に改善点もあります CommonJSツリーの揺れ。 そして、トンがあります より多くの最適化.
Webpack 5には、開発者のエクスペリエンスを向上させるための多くの変更も含まれています。 たとえば、 新しい名前付きチャンクIDアルゴリズム これは、開発モードではデフォルトで有効になっています。 その新しいアルゴリズムは、人間が読める形式の名前をチャンクに与えます。 ザ・ target
プロパティも非常にされています 改善されました.
正直なところ、Webpack5で新しいものすべてをカバーするのに十分なスペースがここにはありません。 そこ〜の ただ 方法 あまりに ずっと。 だからここでやめます
Angular CLIを介して間接的にWebpackを使用するだけの場合、これのほとんどは「透過的」である必要があります。 しかし、あなたが使用している場合 カスタムWebpackビルド あなたのプロジェクトでは、おそらくあなたは見てみる必要があります 移行ガイド.
最後に、Webpackで次に何が行われるのか知りたい場合は、 2021年のロードマップ そしてもちろん 最新のリリースノート.
IE11のサポートは廃止されました
悲しいことに聞こえるかもしれませんが(私は誰をからかっていますか?😂)、Angular12はIE11のサポートを非推奨にしています。 Internet Explorerは私たちのほとんどにとって死んでいますが、残念ながら、多くの組織がまだ本番環境で使用しています。 したがって、IE11のサポートはAngular13によって削除されます。つまり、これらの組織はIEからの移行を開始する必要があります(とにかく良いことです)。 言い訳無用!
IEのサポートがなくなると、Angularはより小さく、より速くなり、私たち全員にとってより良いものになります。 また、レガシーブラウザーとの下位互換性を維持する負担がなくなると(IE11はそれらの最後です!)、Angularは最新のAPIを活用できるようになります(例: CSS変数, 交差点オブザーバー, CSSグリッド, プロキシ, Webアニメーション, 他には?).
IEのサポートがなくなるのが待ちきれません!
デフォルトでは厳密
はいはいはい🤩。 Angular 12の時点で、 Angularの厳密なモード CLIではデフォルトで有効になっています。 そして、これは素晴らしいです。
ご存知のように、私はTypeScriptのstrictモードだけでなく、Angularのstrictモードも大好きです。 詳細を知りたい場合は、チェックアウトしてください 去年書いた記事 とミンコゲチェフの 変更を説明する記事.
デフォルトで本番ビルド
今まで、 ng build
コマンドは開発ビルドを作成しました。 Angular12の時点で。 ng build
デフォルトで本番ビルドになります。
うまくいけば、それが一部のチームが開発ビルドをビルドして本番環境にデプロイするという間違いを避けるのに役立つでしょう。 しかし、私はその間違いを犯したチームがまだ対処すべき他の問題を抱えているのではないかと心配しています
インラインスタイルのSassサポート
Angularは非常に長い間Sassをサポートしていますが、これまでのところ、Sassは外部スタイルシートでしか使用できませんでした。 Angular 12では、Sassをインラインコンポーネントスタイルと一緒に使用できるようになりました(つまり、 styles
プロパティ)。
これは、新しいを設定して有効にする必要があります inlineStyleLanguage
プロパティへ true
in angular.json
.
追い風のサポート
追い風 現在、Angularによって正式にサポートされています。 実際、サポートはv11.2のAngularCLIで導入されました。
追い風は 世界を引き継ぐのに忙しい、特に今では radJITコンパイラ、そしてAngularに組み込みのサポートがあるのは素晴らしいことです。
以前は、AngularプロジェクトにTailwindを追加する必要がありました Webpackビルドのカスタマイズ。 もう違います! これで、Tailwindの追加は、パッケージをインストールして作成するのと同じくらい簡単です。 tailwind.config.js
使用してファイル npx tailwindcss init
、および有効にすることを確認してください TailwindのJITモード.
Httpの改善
Angular 12では、HTTPサポートに関する多くの改善が導入されています。
リクエストとインターセプターのメタデータ
まず、 HttpClient
リクエストのカスタムメタデータを保存および取得するために使用できるようになりました。 これは、HTTPインターセプターに特に役立ちます。 この機能は、新しい機能を通じて使用できます HttpContext
.
以前は、インターセプターにコンテキストを提供することは複雑でしたが、今でははるかに簡単になります。 さて、によって提供されるさまざまなHTTPメソッド HttpClient
新しいを含める context: HttpContext
オプション。これを使用してマップを渡すことができます。
ネタネルベーサル これについての記事を書いているので 詳細を知りたい場合はチェックしてください.
HttpParamsのappendAll
HttpParams
クラスに新しい appendAll
メソッド。パラメータのセットを一度に簡単に追加するために使用できます。
appendAll(params: {[param: string]: string|string[]}): HttpParams
パラメータを数値およびブール値として渡すことができるようになりました
以前は、数値とブール値をHTTPパラメーターとして直接使用することはできませんでした。 それらを文字列に変換する必要がありました。 もう違います!
HttpStatusCode
Angularは、定数の形式で、HTTPステータスコードの人間が読める形式の名前の独自のリストを導入しました。
以前は、人間が読める形式の名前が必要な場合は、独自のソリューションを導入する必要がありました。 この新機能のおかげで、代わりに使用できるようになりました HttpStatusCode
.
例:
if (response.status === HttpStatusCode.Ok) { ...
}
バックエンドとフロントエンドの両方でTypeScriptを使用している人にとって、これはあまり便利ではありません(おそらく、私たち全員がすでに独自の抽象化を持っているため)が、プロジェクトがフロントエンドでTypeScript / Angularのみを使用している場合は、素晴らしい改善。
Xhrファクトリー
XhrFactory
クラスは別のパッケージに移動されました。 今ではによって公開されています angular/common
angular/common/http
.
アップグレードには移行が含まれているため、実行しても気付かないことに注意してください ng update
ルーターの変更
AngularルーターはAngular12で少し変更されました。
まず、 routerLinkActiveOptions
ディレクティブが強化されました。 これで、CSSクラスをリンクに追加するために、URLのさまざまな部分に完全一致が必要かどうかを指定できます。
以前は、URL全体に完全に一致する(または一致しない)必要があるだけでした。
<a routerLink="/products/foo" routerLinkActive="highlight-product" [routerLinkActiveOptions]="{ exact: true }"
> foo
</a>
これで、代わりに、パス、クエリパラメーター、マトリックスパラメーター、およびフラグメントに対してきめ細かいマッチングルールを提供できます。
<a routerLink="/products/foo" routerLinkActive="highlight-product" [routerLinkActiveOptions]="{ paths: 'exact', queryParams: 'subset', matrixParams: 'ignored', fragment: 'ignored' }"
> foo
</a>
サポートされている値は exact
, ignored
& subset
、に使用できます queryParams
& matrixParams
。 パスの場合は、パスインすることができます exact
or subset
, exact
or ignored
fragment
.
なお、 isActive
ルーターのメソッドもこれらの新しいオプションを受け入れます。
フラグメントはnull許容です
今まで、 ActivatedRouteSnapshot.fragment
null許容ではありませんでした。 これはAngular12で変更されました。ただし、あまり心配しないでください。 ng update
あなたをカバーしてくれました。
フォーム
放出されたイベントのより詳細な制御
emitEvent
オプションがさまざまなメソッドに追加されました FormGroup
& FormArray
。 この変更のおかげで、より多くの場合にイベントを発行する必要があるかどうかを制御できるようになります。
たとえば、以前は、 removeControl
方法 FormGroup
、その後、イベントは常に発行されました。 この変更により、このような問題を回避できるようになります。
emitEvent
次のメソッドにオプションが追加されました FormGroup
:
addControl
removeControl
setControl
そして、次の方法に FormArray
:
push
insert
removeAt
setControl
clear
テンプレート駆動型フォームの最小および最大バリデーターのサポート
min
& max
Angularのバリデーターをテンプレート駆動型フォームで使用できるようになりました。
<input [(ngModel)]="foo.bar" [min]="min" [max]="42" />
以前は無視されていたため、これは重大な変更であることに注意してください。
i18n
Angularのi18nシステムは、このリリースで変更されました。
発表のブログ投稿で指摘されているように、現在、いくつかのレガシーメッセージID形式が使用されています。 これらは壊れやすく、空白、書式設定テンプレート、ICU式が原因で問題が発生する可能性があります。
Angular 12では、新しい正規のメッセージID形式(つまり、すべてを支配するXNUMXつの形式)が導入されています。 この形式は、より回復力があり、より直感的です。
この形式は、空白の変更などが原因で翻訳が一致しないアプリケーションで、不要な翻訳の無効化とそれに関連する再翻訳のコストを削減します。
v11以降、新しいプロジェクトは新しいメッセージIDを使用するように自動的に構成され、既存のプロジェクトを既存の翻訳で移行するためのツールが導入されました。 あなたが心配しているなら、あなたはそれを使うことができます localize-migrate
メッセージIDを移行するためのツール:
ng extract-i18n --format=legacy-migrate
npx localize-migrate --files=*.xlf --map-file=messages.json
あなたはより多くの情報を見つけることができます こちら.
パフォーマンスの向上
このリリースでは、パフォーマンスが大幅に向上しています。 最も明白なものはWebpack5へのアップグレードに付属していますが、それだけではありません。
多くの未使用のメソッドがから削除されました DomAdapter
。 そのメソッドはツリーシェイク可能ではなく、で説明されているように、すべてのAngularアプリケーションに含まれているのでクールです 対応するPR.
Angularは、安全なプロパティアクセスのために生成するコードが少なくなりました。 たとえば、次のようなテンプレート式の場合 a?.b
新しくサポートされたヌル合体: a ?? b
.
Angularコンパイラは、リダイレクトされたソースファイルが存在する場合でもインクリメンタルコンパイルをサポートするようになりました。 以前は、TypeScriptがソースファイルを重複排除した場合、以前のコンパイルからの作業を再利用できませんでした。 あなたはそれについてもっと読むことができます こちら.
Angularコンパイラは、ソースファイルのファイルシステムパスをキャッシュするようになりました。 以前は、繰り返し呼び出しました fs.resolve()
、これには時間がかかります。
getDirectives
機能が改善されました。 その変化とともに、 ng
名前空間も拡張され、新しい名前空間が含まれるようになりました getDirectiveMetadata
ユーティリティ。
そして、そこに もう少し.
ngAPIの改善
ng
デバッグAPI ブラウザの開発ツールから使用できるものは、Angular12で改善されました。
と呼ばれる新しい関数があります getDirectiveMetadata
、コンポーネントおよびディレクティブに関する情報を取得するために使用できます。 頻繁に必要になるとは思いませんが、将来の開発ツールの改善はおそらくこれに依存するでしょう。 あなたはもっと知ることができます こっちに.
と呼ばれる新しいプロファイラー関数 esetProfiler
も実装されており、本番モードでも使用できます。 この新しい関数は、さまざまなシナリオで呼び出すことができます。 たとえば、テンプレートの作成期間、テンプレートの更新、ライフサイクルフックの処理などを追跡するために使用できます。このAPIは、今後の開発ツールによって利用され、アプリケーションのパフォーマンスに関するより多くの洞察に満ちた情報を提供します。ランタイム。
これは現時点ではまだ実験段階ですが、これについては後で詳しく説明すると思います。 Sentryのようなツールが、有用なパフォーマンスダッシュボードを提供するために、この種の情報を収集するためのサポートを統合するかどうか、いつ統合するかを知りたいです。
Angular 12のリリースから数日後、Angularチームは 発表の GoogleChrome用の新しいAngularDevToolsの可用性。 あなたはそれらをダウンロードすることができます こちら.
その新しいブラウザ拡張機能を使用すると、開発中にAngularアプリケーションを簡単に検査できます。 それはサポートします:
- アプリケーションの構造を視覚化する(つまり、コンポーネントツリーを調べる)
- コンポーネントの探索と編集
- プロファイリングパフォーマンス
組み込みプロファイラーを使用して、変更検出イベントを記録し、発生時にプレビューすることができます。 変更検出サイクルごとに、そのサイクルがフレームドロップを引き起こしたかどうか、どのコンポーネントに最も時間がかかったかを確認できます。
Angularは以前、 鳥占い プロジェクト(これは新しいツールの基礎です!)ですが、それらはIvyと互換性がありませんでした。 ですから、これはAngularコミュニティにとって素晴らしいニュースです!
そして、もっと...
あり トン以上 このリリースでのマイナーな変更。 ここに簡単な概要があります。
APP_INITIALIZERがObservablesをサポートするようになりました
これまで、Observablesをで使用することはできませんでした APP_INITIALIZER
。 Angular 12の時点で、これが可能になり、よりクリーンなコードが可能になります。
Angularのこの機能についてまだ知らなかった場合は、 APP_INITIALIZER
is トークン これを使用して、アプリケーションの初期化中に実行する必要のある関数を定義できます。 その関数が非同期の場合、 Promise
または Observable
(new:p)、Angularはアプリケーションを開始する前にそれが完了するのを待ちます。
この変更は大歓迎です。これは、RxJSに「フォールバック」する代わりに、RxJSを使用してさらに多くのコードを記述できることを意味します。 Promise
APIです。
あなたはそれについてもっと読むことができます こちら.
アニメーションのランタイム制御
以前は、アニメーションを無効にする唯一の方法は、 NoopAnimationsModule
。 Angular 12以降、を使用してランタイム情報に基づいてアニメーションを無効にすることが可能になりました BrowserAnimationModule.withConfig
メソッド、そしてそれを渡す disableAnimations
ブールプロパティ。
位置情報サービスの新しいhistoryGoメソッド
LocationService
ofAngularに historyGo
現在のページに対する相対的な位置によって識別される、セッション履歴内の特定のページに移動するために使用できるメソッド。 このメソッドはネイティブに対応します window.history.go
方法。 MDNをチェックしてください いくつかの例について。
言語サービスの改善
IDEにAngularコードに関するすべての有用な洞察を提供する言語サービスも、このリリースで改善されました。
Angular 12では、言語サービスはデフォルトで有効になっています(以前はオプトインする必要がありました)。
Angular 12の時点で、次のことも検出します。 厳密なテンプレートタイプチェック 有効になっておらず、 それらを有効にするようにアドバイスします.
言語サービスには、パフォーマンスのトレースに使用できるパフォーマンストレース機能も含まれるようになりました。 これはVSCodeで有効にできます。 ここで説明されているように (これはかなり低レベルですが)。
言語サービスについてまだ知らない場合は、チェックしてください 公式ドキュメント、またはによって書かれた素敵なブログ投稿 忍者隊、またはこの ビデオイントロ.
HTMLテンプレートから直接lintルールを無効にする
AngularテンプレートコンパイラがHTMLコメントを追跡するようになりました。
以前は、Angularテンプレートコンパイラがコメントを無視したため、HTMLテンプレートからリンタールールを無効にすることはできませんでした。 回避策は、コンポーネントのコントローラーからテンプレート全体のこれらのルールを無効にすることでした。 この変更のおかげで、テンプレートからこれをより正確に行うことができるようになります。
<!-- eslint-disable-next-line @angular-eslint/template/no-any -->
<span>{{ $any(foo).bar }}</span>
よりクリーンなコードが必要です。
DatePipeは、ICU標準のスタンドアロン曜日をサポートするようになりました
以前は、 できませんでした DatePipeを使用して、日付をスタンドアロンの曜日にフォーマットします。
この変更のおかげで、フィンランドの日付フォーマットがサポートされるようになりました。Angularコミュニティの一部にとっては素晴らしいニュースだと確信しています😉
インジェクタブルデコレータのprovidedInフィールドでのforwardRefのサポート
使用できるようになりました forwardRef
中で providedIn
のフィールド @Injectable
デコレータ。
ResourceHostインターフェースの新しいtransformResourceフック
A transformResource
メソッドがに追加されました ResourceHost
インターフェース。 このおかげで、ツールがインラインスタイルのプリプロセッササポートを導入するなどのことができるようになりました。 これが、インラインスタイルでのSASSの新しいサポートを可能にするものです。
あなたはそれについてもっと学ぶことができます こちら & こちら.
カスタムルーターアウトレットの実装を作成することが可能
これまで、カスタムルーターアウトレットを作成することは可能でしたが、いくつかのフープを飛び越える必要がありました(つまり、カスタムアウトレットを ChildrenOutletContexts
).
Angular12は カスタムルーターアウトレットのよりクリーンなサポート.
バグ修正
いつものように、このリリースには膨大な数のバグ修正が含まれています。
リリースノートのコピーは次のとおりです。
- アニメーション: 一貫した遷移名前空間の順序を確認します(#19854)(01cc995)
- アニメーション: サポートされているノードバージョンの範囲を更新して、LTSバージョンのみを含めます(#41822)(e918250)
- アニメーション: ルートビューが削除されたときにDOM要素をクリーンアップします(#41059)(c49b280)
- アニメーション: Shadow DOMの要素でアニメーションを許可する(#40134)(お父さん42c8)、閉じます #25672
- アニメーション: ルートビューが削除されたときにDOM要素をクリーンアップします(#41001)(a31da48)
- バゼル: サポートされているノードバージョンの範囲を更新して、LTSバージョンのみを含めます(#41822)(8503246)
- バゼル: rules_nodejsの最新の変更に合わせてビルドツールを更新します(#40710)(696f7bc)
- バゼル: 使用する統合テストを更新する rules_nodejs@3.1.0 (#40710)(34of89a)
- バゼル: JSON.parseの使用法のために型キャストを更新します(#40710)(2c90391)
- ベンチプレス: JSON.parseの使用法のために型キャストを更新します(#40710)(e721a5d)
- 一般: HttpClientリクエストbody(を使用してブール値に適切なContentTypeを追加します#38924)(#41885)(922a602)
- 一般: サポートされているノードバージョンの範囲を更新して、LTSバージョンのみを含めます(#41822)(f2b6fd8)
- 一般: ビューポートスクローラーがShadowDOM内の要素を見つけられない(#41644)(c0f5ba3)、閉じます #41470
- 一般: 一時的に再エクスポートして非推奨
XhrFactory
(#41393)(7dfa446) - 一般: ルートビューが削除されたときのクリーンアップ場所変更リスナー(#40867)(38524c4)、閉じます #31546
- 一般: http paramsとして数値またはブール値を許可します(#40663)(91cdc11)、閉じます #23856
- 一般: NgTemplateOutletでコンテキストオブジェクトを変更しないようにします(#40360)(d3705b3)、閉じます #24515
- コンパイラ: @pageルールをカプセル化されたスタイルで保持します(#41915)(3e365XNUMXba)、閉じます #26269
- コンパイラ: スコープセレクターを
@font-face
ルール(#41815)(2a11cda)、閉じます #41751 - コンパイラ: サポートされているノードバージョンの範囲を更新して、LTSバージョンのみを含めます(#41822)(べ8126)
- コンパイラ: 部分コンパイルで誤って処理された非リテラルインラインテンプレート(#41583)(ab257b3)
- コンパイラ: 代替名前空間内でng-templateの更新命令を生成しない(#41669)(2bcbbda)、閉じます #41308
- コンパイラ: EmptyExprを後方スパンで解析しないでください(#41581)(e1a2930)
- コンパイラ: 大文字と小文字を区別するCSSカスタムプロパティを処理する(#41380)(e112e32)、閉じます #41364
- コンパイラ: 部分コンポーネント宣言のJITコンパイル中に使用されたコンポーネントを含める(#41353)(ff9470b)、閉じます #41104 #41318
- コンパイラ: 複数をサポート
:host-context()
セレクター(#40494)(07b7af3)、閉じます #19199 - コンパイラ: JSON.parseの使用法のために型キャストを更新します(#40710)(f728490)
- コンパイラ-cli: 間接テンプレートのソースマップURLには「」を使用します(#41973)(7a4d980)、閉じます #40854
- コンパイラ-cli: リンカーをBabelプラグインとして公開します(#41918)(8fdac8f)
- コンパイラ-cli: 参照エミッターでのエイリアスなしのエクスポートを優先します(#41866)(75bb931)、閉じます #41443 #41277
- コンパイラ-cli: リンカーが縮小されたブール値を処理できるようにします(#41747)(1fb6724)、閉じます #41655
- コンパイラ-cli: 一致文字列インデックス付き部分宣言(#41747)(f885750)、閉じます #41655
- コンパイラ-cli: サポートされているノードバージョンの範囲を更新して、LTSバージョンのみを含めます(#41822)(5b463f4)
- コンパイラ-cli: テンプレートのオートコンプリートリテラルタイプ。 ((#41456)(#41645)(8b2b5ef)
- コンパイラ-cli: コンポーネントにインラインスタイルがない場合でも、前処理でエラーが発生しないでください(#41602)(a5fe8b9)
- コンパイラ-cli: コンパイラが追跡することを確認します
ts.Program
s正しく(#41291)(deac74) - コンパイラ-cli: 増分再コンパイルでデフォルトのインポートが削除されないようにします(#41557)(7f16515)、閉じます #41377
- コンパイラ-cli: 解決する
rootDirs
絶対に(#41359)(3e0fda9)、閉じます #36290 - コンパイラ-cli: 加えます
useInlining
check configと入力するオプション(#41043)(09aefd2)、閉じます #40963 - コンパイラ-cli:
readConfiguration
既存のオプションはtsconfigのオプションをオーバーライドする必要があります(#40694)(b7c4d07) - コンパイラ-cli: 伸ばす
angularCompilerOptions
ノードからのtsconfig内(#40694)(5eb1954)、閉じます #36715 - コンパイラ-cli: rules_nodejsの最新の変更についてngcc統合テストを更新します(#40710)(d7f5755)
- コンパイラ-cli: JSON.parseの使用法のために型キャストを更新します(#40710)(b75d7cb)
- 芯: 動的にコンパイルされたコンポーネントとモジュールを保持しません(#42003)(1449c5c)、閉じます #19997
- 芯: ngOnDestroyライフサイクルフックの周りでプロファイラーを呼び出す(#41969)(e9ddc57)
- 芯: AsyncPipeがRxJS7と互換性を持つようになりました(#41590)(紀元前9759年)
- 芯: 式バインディングを使用して複数のi18n属性を処理します(#41882)(73c6c64)、閉じます #41869
- 芯: サポートされているノードバージョンの範囲を更新して、LTSバージョンのみを含めます(#41822)(f9c1f08)
- 芯: TS 4.2を使用してダウンレベルされた合成コンストラクターを検出します(#41305)(274dc15)、閉じます #41298
- 芯: スイッチ
emitDistinctChangesOnlyDefaultValue
真に(#41121)(7096246) - 芯: 重複したEMPTY_OBJ定数を削除します(#41066)(bf158e7)
- 芯: 重複したEMPTY_ARRAY定数を削除します(#40991)(e12d9de)
- 芯: EmbeddedViewRefコンテキストの更新を許可します(#40360)(a3e1719)、閉じます #24515
- 芯: DefaultIterableDifferが重複の順序を維持するようにします(#23941)(a826926)、閉じます #23815
- 芯: NgZone合体オプションはonStableを正しくトリガーする必要があります(#40540)(22f9e45)
- 要素: サポートされているノードバージョンの範囲を更新して、LTSバージョンのみを含めます(#41822)(4f5d094)
- 要素: JSON.parseの使用法のために型キャストを更新します(#40710)(efd4149)
- フォーム: サポートされているノードバージョンの範囲を更新して、LTSバージョンのみを含めます(#41822)(dc975ba)
- http: タイムアウト時にリクエストを完了します(#39807)(61a0b6d)、閉じます #26453
- http: XMLHttpRequest中止イベントでエラーを発行します(#40767)(3897265)、閉じます #22324
- 言語サービス: サポートされているノードバージョンの範囲を更新して、LTSバージョンのみを含めます(#41822)(9b6198c)
- 言語サービス: 増分コンパイルにはスクリプトバージョンを使用します(#41475)(78236bf)
- 言語サービス: テンプレートでAngularプロパティの補完のみを提供します(#41278)(0226a11)
- 言語サービス: strictTemplatesを強制するプラグインオプションを追加します(#41062)(e9e7c33)
- 言語サービス: IvyとViewEngineに単一のエントリポイントを使用します(#40967)(e986a97)
- ローカライズ: ターゲットが欠落していることを警告するためにエラーを緩和します(#41944)(35シード2)、閉じます #21690
- ローカライズ: サポートされているノードバージョンの範囲を更新して、LTSバージョンのみを含めます(#41822)(658ed1f)
- ローカライズ: JSON.parseの使用法のために型キャストを更新します(#40710)(4b469c9)
- ngcc: TS 4.2を使用してダウンレベルされた合成コンストラクターを検出します(#41305)(8d3da56)、閉じます #41298
- プラットフォームブラウザ: Shadow DOMカプセル化が使用されている場合、スタイルノードのメモリリークを防止します(#42005)(d555555)、閉じます #36655
- プラットフォームブラウザ: サポートされているノードバージョンの範囲を更新して、LTSバージョンのみを含めます(#41822)(ea05cfd)
- プラットフォームブラウザ: configure
XhrFactory
使用するBrowserXhr
(#41313)(e0028e5)、閉じます #41311 - プラットフォームブラウザ: JSON.parseの使用法のために型キャストを更新します(#40710)(7ecfd2d)
- プラットフォーム-ブラウザ-動的: サポートされているノードバージョンの範囲を更新して、LTSバージョンのみを含めます(#41822)(bc45029)
- プラットフォームサーバー: サポートされているノードバージョンの範囲を更新して、LTSバージョンのみを含めます(#41822)(4b9d4fa)
- ルーター: サポートされているノードバージョンの範囲を更新して、LTSバージョンのみを含めます(#41822)(0067edd)
- ルーター: 再利用戦略が再接続する必要があることを示している場合にのみ、保存されたルートを取得します(#30263)(a4ff071)、閉じます #23162
- ルーター: 空のパスの一致を再帰的にマージします(#41584)(1179dc8)、閉じます #41481
- ルーター: フラグメントはnullにすることができます(#37336)(b555160)、閉じます #23894 #34197
- ルーター: JSON.parseの使用法のために型キャストを更新します(#40710)(350ダダ)
- サービスワーカー: サポートされているノードバージョンの範囲を更新して、LTSバージョンのみを含めます(#41822)(6b823d7)
- サービスワーカー: JSON.parseの使用法のために型キャストを更新します(#40710)(4f7ff96)
- アップグレード: ngMocksが使用されているときに$ interval.flushを保持します(#30229)(87dc851)
- アップグレード: サポートされているノードバージョンの範囲を更新して、LTSバージョンのみを含めます(#41822)(10c4523)
ちなみに、気づきましたか AsyncPipe
されています パッチを当てた ベンレッシュによってRxJS6と7の両方と互換性がありますか? それはどれくらいクールですか?
変更を破る
いつものように、このリリースにはいくつかの重大な変更があります。
As 公式のリリースノート かなり明確です、私はここにそれらをコピー/貼り付けしています:
- 縮小されたUMDバンドルは、分散NPMパッケージに含まれなくなりました。
- アニメーション:ルートビューが削除されると、DOM要素が正しく削除されるようになりました。 SSRを使用していて、レンダリングにアプリのHTMLを使用している場合は、アプリを破棄する前に、HTMLを変数に保存する必要があります。 以前のテストで削除されなかった要素を見つけようとして、テストが誤って古い動作に依存している可能性もあります。 この場合、失敗したテストを更新して、依存する要素を初期化する適切なセットアップコードがあることを確認する必要があります。
- 一般的な:の方法
PlatformLocation
クラス、すなわちonPopState
&onHashChange
、戻るために使用void
。 これらのメソッドは、イベントハンドラーを削除するために呼び出すことができる関数を返すようになりました - 共通:の方法
HttpParams
クラスは今受け入れるstring | number | boolean
string
パラメータの値。 アプリケーションでこのクラスを拡張した場合は、これらの変更を反映するようにメソッドのシグネチャを更新する必要があります - コンパイラ-cli:リンクライブラリは、レガシーi18nメッセージIDを生成しなくなりました。 これらのメッセージの翻訳を提供するダウンストリームアプリケーションは、を使用してメッセージIDを移行する必要があります。
localize-migrate
コマンドラインツール - :Angularはノードv10のサポートを維持しなくなったため、開発環境で引き続き使用している場合は、アップグレードする必要があります。
- :以前は
ng.getDirectives
特定のDOMノードにAngularコンテキストが関連付けられていない場合(たとえば、関数がAngularアプリの外部のDOM要素に対して呼び出された場合)、関数はエラーをスローしました。 この動作は、以下の他のデバッグユーティリティと矛盾していました。ng
名前空間。例外を発生させることなくこの状況を処理しました。 今呼び出しますng.getDirectives
このようなDOMノードの関数を使用すると、その関数コアから空の配列が返されます。emitDistinctChangesOnlyDefaultValue
これにより、デフォルトの動作が変更され、誤った動作に依存する一部のアプリケーションが失敗する可能性があります
emitDistinctChangesOnly
フラグも非推奨になり、将来のメジャーリリースで削除される予定です
以前の実装では変更が発生します QueryList.changes.subscribe
いつでも QueryList
再計算されました。 これにより、再計算が行われる可能性があるため、人為的に多数の変更通知が発生しました。 QueryList
結果は同じリストになります。 いつ QueryList
再計算されるのは実装の詳細であり、変更イベントが発生する頻度を決定するものであってはなりません。
残念ながら、動作を完全に修正すると、既存のアプリケーションが多すぎて失敗しました。 このため、Angularはこの修正を重大な修正と見なし、にフラグを導入しました @ContentChildren
& @ViewChildren
、動作を制御します。
export class QueryCompWithStrictChangeEmitParent { @ContentChildren('foo', { // This option is the new default with this change. emitDistinctChangesOnly: true, }) foos!: QueryList<any>;
}
v12より前の下位互換性のためemitDistinctChangesOnlyDefaultValue
に設定されました false
。 この変化
デフォルトをに変更します true
.
- 芯: のタイプ
APP_INITIALIZER
トークンは、Angularによって処理される戻り値のタイプをより正確に反映するように変更されました。 以前は、各イニシャライザコールバックはany
、これは今ですPromise<unknown> | Observable<unknown> | void
。 万が一、アプリケーションがInjector.get
orTestBed.inject
注入するAPIAPP_INITIALIZER
トークンの場合、より厳密なタイプを考慮してコードを更新する必要がある場合があります。
さらに、TypeScriptは、次の場合にTS2742エラーを報告することがあります。 APP_INITIALIZER
トークンは、その推論されたタイプを.d.tsファイルに出力する必要がある式で使用されます。 これを回避するには、明示的な型注釈が必要です。これは通常、次のようになります。 Provider
or Provider[]
.
-
芯: サポートされる最小値
zone.js
バージョンは0.11.4
。 したがって、古いバージョンを使用している場合は、プロジェクトのzone.jsもアップグレードする必要があります。 -
フォーム:
emitEvent
以下にオプションを追加しましたFormArray
&FormGroup
メソッド: -
FormGroup.addControl
-
FormGroup.removeControl
-
FormGroup.setControl
-
FormArray.push
-
フォーム配列.挿入
-
FormArray.removeAt
-
FormArray.setControl
-
FormArray.clear
アプリに拡張するカスタムクラスがある場合 FormArray
or FormGroup
クラスをオーバーライドし、
上記の方法では、新しいオプションを取り入れるために実装を更新する必要があるかもしれません
アカウントを作成し、タイプの観点からオーバーライドに互換性があることを確認してください。
- フォーム: 以前に
min
&max
で定義された属性<input type="number">
Formsモジュールによって無視されました。 これらの属性が存在すると、
最小/最大検証ロジックをトリガーします(formControl
,formControlName
orngModel
ディレクティブは特定の入力にも存在します)および
対応するフォーム制御ステータスはそれを反映します。 - プラットフォームブラウザ:
XhrFactory
から移動されました@angular/common/http
〜へ@angular/common
.
前
import { XhrFactory } from '@angular/common/http';
後
import { XhrFactory } from '@angular/common';
- ルーター: 厳密なnullチェックは、フラグメントがnullである可能性があることを報告します。
移行パス:nullチェックを追加します。 - ルーター: のタイプ
RouterLinkActive.routerLinkActiveOptions
入力は
より微調整された制御を可能にするために拡張されました。 以前に読んだコード
このプロパティは、新しいタイプを考慮して更新する必要がある場合があります。
更新されたロードマップ
現在のAngularによると ロードマップ、チームは現在、次の改善で忙しいです。
- デバッグおよびプロファイリング中の開発者エクスペリエンスの向上。 これは、コンポーネントの構造(React Dev ToolsでReactが可能になると思います)を理解し、変更を検出するのに役立ちます。
- テスト時間の改善と自動ティアダウンによるデバッグ:これにより、テストとテスト時間の分離が改善されます。 ザ・ テストベッド また、各テストの実行後にテスト環境を自動的にクリーンアップおよび破棄するように変更されます
- デフォルトの出力としてES2017 +を使用する:デフォルトの出力言語をアップグレードできるように、障害物を特定して削除します
- MDCWebをAngularMaterialに統合する
- AngularMaterialコンポーネントのアクセシビリティの向上
- 変更検出、パフォーマンスプロファイリング、Zone.jsとの相互作用などの高度な概念に関するガイドの公開
- e2eテスト戦略の更新(上記のcfr)
- RxJS v7 +へのアップグレードの準備。 ご存知かもしれませんが、RxJS7は 最近リリースされた。 うまくいけば、すぐにアップグレードできるはずです
将来的には、Angularチームは次のことを計画しています。
- マイクロフロントエンドアーキテクチャを調べてください:Angularを使用してマイクロフロントエンドを簡単に作成する手段を導入する可能性があります
- Angularフォームの厳密な型指定で開発者のエクスペリエンスを向上させます(これがどうしても必要です)
- Zone.jsをオプションにします。これにより、フレームワークが簡素化され、デバッグが改善され、バンドルサイズが削減され、ネイティブのasync / await構文を利用できるようになります。
- Angularコンパイラを統合することでビルドパフォーマンスを向上させます(
ngc
)TypeScriptコンパイラプラグインとして - ホスト要素へのディレクティブの追加を許可します。 これも長い間コミュニティから要望がありました!
- 学習曲線を容易にするためにNgModulesをオプションにします
- コンポーネントレベルでコード分割を実装するためのより簡単な手段を提供してください
Angular Material&Angular CDK
Sassの移行
内部的には、AngularMaterialとCDKの両方が 新しいSassモジュールシステム.
アプリケーションがこれらのいずれかを使用している場合は、置き換えたことを確認する必要があります node-sass
by sass
:https://www.npmjs.com/package/sass。 ザ・ node-sass
パッケージはもうメンテナンスされていません!
この移行により、SassテーマAPIが強化され、Sassを利用できるようになりました。 @use
ユーティリティ。
のエントリポイントがXNUMXつになりました @angular/material
& @angular/cdk
.
最後に、わかりやすくするためにAPIも変更されました。 多くの関数、ミックスイン、変数は途中で名前が変更されました。
これらの変更の詳細については、新しいテーマガイド(https://github.com/angular/components/blob/master/guides/theming.md)を参照してください。 さらに、https://material.angular.ioのガイドは、新しいAPIを紹介するために書き直されており、説明が含まれていることに注意してください。
アップグレードプロセスにより、コードが新しいSassAPIに自動的に移行されます。 あなたは前/後の例を見つけることができます こちら.
角度CDKの変更
バージョン12には、いくつかの 変更 AngularCDKに。
ここでは、新機能のみをリストしますが、バグ修正とパフォーマンスの改善に関する詳細が必要な場合は、リリースノートを確認できます。
- ドラッグドロップ:ドロップされたイベントに
dropPoint
プロパティ。マウスが指している正確なポイントは、アイテムがドロップされたときでした。 より詳しい情報 こちら - ドラッグドロップ:プレビューコンテナ カスタマイズできるようになりました
- 表:新しいディレクティブにより、 リサイクルビューリピーターを有効にする、破棄された行をキャッシュし、データセットが変更されたときにそれらを再利用します。 これにより、パフォーマンスが向上します(待ち時間が短縮されます)。
- 表: 追加されました スティッキー要素のオフセット
StickyUpdate
インタフェース - ステッパー:ユーザーがステップから離れようとすると、
interacted
イベントは今 放出された - ステッパー:オリエンテーションは次のようになります 変更
- ユーザー補助:
FocusOptions
オブジェクト 合格できるようになりました さまざまなフォーカストラップ方法に - テスト:新しいWebDriverハーネス環境。 私はまだこれに飛び込んでいないので、これ以上は言えません。 チェックアウト 広報
角度のあるマテリアルの変更
いくつかの AngularMaterialの変更。 繰り返しになりますが、バグ修正の完全なリストについては、リリースノートを確認してください。
新機能:
- 日付ピッカー:依存しなくなりました ダイアログ上
- ステッパー:向きを動的に変更できるようになりました(CDKでのcfr同様の変更)
- ステッパー:コンテンツを許可する 怠惰にレンダリング
- メニュー:メニュー位置の更新を許可する プログラムで
- マットエラー:現在使用している
aria-live="polite"
role="alert"
. 詳細 こちら - タブ:メソッドを追加する プログラムで特定のタブにフォーカスを設定します
- リスト:から変更されたオプションを持つ配列を返すようになりました
selectAll
&deselectAll
メソッド。 チェックアウト 広報 詳細については - スライドトグル: に許可します デフォルトの色をグローバルに構成する プロバイダーを通じて
- ツールチップ:コンポーネントのクラスを通じてツールチップの有効な位置を公開するようになりました
- ラジオ, チェックボックス & スライダー:これらのコンポーネントの背景色をに含めます スタイルシートを印刷する
実験バージョンにもいくつかの変更があります:https://github.com/angular/components/blob/master/CHANGELOG.md#material-experimental。
角度ユニバーサル
Angular Universal12も オーブンから出たばかり.
このリリースで、Universal now デフォルトで重要なCSSをインライン化しますこれはかなりクールです。
ユニバーサルに新しいものが含まれるようになりました proxyConfig
カスタムプロキシ構成を提供するオプション ssr-dev-server
ビルダー。
このバージョンでは、と呼ばれる新しい(実験的な)SSRエンジンがあります クローバー (Javaエコシステムの高品質ツールを思い出させます)。 この新しいエンジンは有望なようです。 それは物事を単純化し、私たちを取り除くことを目的としています Window is undefined
エラー、SSR / prerenderの複数のビルドの必要性を排除し、追加のビルドなしでアプリケーションシェルを生成します。 おそらく後でもっと聞くでしょう。 興味があれば、チェックしてください 広報.
このバージョンには、 ビルダー これは、新しいユニバーサルクローバーアプローチを使用して静的ページを生成(つまり、事前レンダリング)するために使用できます。
最後に、このバージョンには TLSサポート 開発サーバー用。
Googleマップ
ご存知のように、AngularにはGoogleマップとYoutubeのコンポーネントが含まれています。 バージョン12は、Googleマップコンポーネントにいくつかの改善をもたらします。
- 今含まれています
icon
マーカーを簡単にカスタマイズするための入力 - 今放出します
clusterClick
クラスター時のイベント クリックされました - 含まれています ラッパー Google Maps Geocoder APIの周り、およびエクスポート
MapDirectionsResponse
、以前は公開されていませんでした - のサポートを導入します ヒートマップのレンダリング
- 追加されました
MapDirectionsRenderer
、地図上に方向をレンダリングできるようにし、MapDirectionsService
、ラップgoogle.maps.DirectionsService
計算する XNUMX点間のルート. - 新作
options
の入力 マーカークラスターラー、他のディレクティブと同様です。
アップグレード
いつものように、利用可能な完全なアップグレードガイドがあります。 ng update
あなたを助けるでしょう:https://update.angular.io/?l = 3&v = 11.0-12.0
あなたが使用している場合 Nrwl NX (本当にそうすべきです)、Nx12.3にはすでにAngular12のサポートが含まれていることに注意してください! それについてもっと知る こちら。 追加の利点として、NxはTSLintからESLintへの移行にも役立ちます(そして今がその時です!)
まとめ
この記事では、Angular12の新機能について説明しました。
いつものように、これはリリースです 英雄的 (他に何ができるでしょうか?!😎)。
アイビーは前進しており、うまくいけば、私たちは「すぐに」イライラすることが少なくなるでしょう ngcc
、生態系が移行するにつれて。 このリリースには素晴らしい変更がたくさんあるので、今すぐチェックしてアップグレードしてください!。
今日は以上です!
PS:製品/ソフトウェア/ Web開発について他にもたくさんのクールなことを学びたい場合は、 開発コンセプト シリーズ、(https://mailchi.mp/fb661753d54a/developassion-newsletter)[私のニュースレターを購読]、および Twitterでこんにちはと言ってください!
- SEO を活用したコンテンツと PR 配信。 今日増幅されます。
- Platoblockchain。 Web3メタバースインテリジェンス。 知識の増幅。 こちらからアクセスしてください。
- 情報源: https://www.codementor.io/dsebastien/angular-12-in-depth-1j62geeq5n
- 1
- 11
- 2018
- 2020
- 2022
- 7
- 9
- a
- できる
- 私たちについて
- それについて
- 上記の.
- 絶対の
- 同意
- 受け入れる
- アクセス
- 接近性
- 正確にデジタル化
- 実際に
- 追加されました
- 添加
- 高度な
- 利点
- 後
- 目指して
- 警告
- アルゴリズム
- アルゴリズム
- すべて
- 許可
- ことができます
- 一人で
- 既に
- 代替案
- 選択肢
- しかし
- 常に
- 間で
- &
- 角度の
- アニメーション
- 発表の
- お知らせ
- 別の
- どこにでも
- API
- API
- アプリ
- 現れる
- 申し込み
- アプローチ
- 4月
- 建築
- 周りに
- 配列
- 記事
- 物品
- 関連する
- 属性
- 著者
- オートマチック
- 自動的に
- 賃貸条件の詳細・契約費用のお見積り等について
- 利用できます
- バベル
- バック
- バックエンド
- 背景
- バー
- ベース
- 基礎
- なぜなら
- さ
- 恩恵
- より良いです
- の間に
- ビッグ
- 最大の
- ビット
- ブログ
- ブランド
- 真新しい
- 破壊
- もたらす
- た
- ブラウザ
- ブラウザ
- バグ
- ビルド
- ビルダー
- 建物
- 構築します
- 内蔵
- 一式販売
- 負担
- 呼ばれます
- 呼び出し
- 機能
- 場合
- 例
- 原因となる
- 生じました
- 変化する
- 変更
- チェック
- 小切手
- クロム
- 明瞭
- class
- クラス
- クリア
- はっきりと
- 閉じ
- クラスタ
- コード
- 収集
- カラー
- 到来
- 注釈
- コミュニティ
- 互換性
- 互換性のあります
- コンプリート
- 複雑な
- コンポーネント
- コンポーネント
- コンセプト
- 心配
- 結論
- 交流
- 考慮する
- 整合性のある
- 定数
- 消費する
- コンテナ
- コンテンツ
- コンテキスト
- 続ける
- コントロール
- コントローラ
- controls
- クール
- 基本
- 対応する
- 費用
- 可能性
- ここから
- カバー
- カバー
- 作ります
- 作成した
- 作成
- 創造
- 重大な
- クロスブラウザ
- 重大な
- CSS
- 興味深い
- 電流プローブ
- 現在
- カスタム
- カスタムプロパティ
- カスタマイズ
- 日付
- 中
- 日
- 死んだ
- 取引
- より深い
- デフォルト
- 依存
- 展開する
- 深さ
- 詳細
- 細部
- 検出
- 決定する
- 決定
- デベロッパー
- Developer
- 開発
- DID
- 異なります
- DIG
- ディレクティブ
- 直接に
- 配布
- ディストリビューション
- すること
- DOM
- ダウン
- ダウンロード
- 下側
- 落とした
- ドロップス
- 複製
- 間に
- 各
- 容易
- 簡単に
- エコシステム
- 効果的な
- 努力
- どちら
- 要素は
- 埋め込まれた
- enable
- 可能
- カプセル化
- 端から端まで
- エネルギー
- エンジン
- 強化された
- 十分な
- 確保
- エントリ
- 環境
- 環境
- エラー
- エラー
- 特に
- 等
- エーテル(ETH)
- 評価する
- さらに
- イベント
- イベント
- 誰も
- すべてのもの
- 進化
- 進化
- 例
- 例
- 優れた
- 例外
- 実行します
- 実行
- 既存の
- 拡大
- 予想される
- 体験
- 説明する
- 説明
- 説明
- 説明
- 説明
- 調査済み
- エクスプローラ
- 輸出
- 露出した
- 表現
- 伸ばす
- 外部
- 余分な
- 容易にする
- フェイル
- かなり
- 秋
- ファン
- スピーディー
- 速いです
- 恐怖
- 特徴
- 特徴
- フェデレーション
- フィードバック
- 少数の
- フィールド
- フィールズ
- File
- 最後に
- もう完成させ、ワークスペースに掲示しましたか?
- 発見
- 火災
- 修正する
- フロー
- フォーカス
- 焦点を当てて
- フォロー中
- 強
- フォーム
- 形式でアーカイブしたプロジェクトを保存します.
- フォーム
- フォワード
- 発見
- 財団
- 分数
- FRAME
- フレームワーク
- から
- フロントエンド
- フル
- function
- 機能
- さらに
- 未来
- 生成する
- 生成
- 生成
- 取得する
- GitHubの
- 与える
- 与えられた
- 与える
- 与え
- Go
- 行く
- 良い
- でログイン
- Google Chrome
- Googleマップ
- グラフ
- 素晴らしい
- ガイド
- ガイド
- ハンドル
- ハード
- 持って
- 聞いた
- 助けます
- こちら
- hi
- ハイ
- 特徴
- history
- フック
- うまくいけば
- host
- 認定条件
- HTML
- HTTPS
- 巨大な
- 人間が読める
- 私は
- アイデア
- 特定され
- 識別する
- 影響
- 実装する
- 実装
- 実装
- import
- 重要
- 輸入
- 改善します
- 改善されました
- 改善
- 改善
- in
- include
- 含まれました
- 含ま
- 間違って
- を示し
- 間接的に
- info
- 情報
- 当初
- 革新的な
- 洞察
- install
- インストールする
- を取得する必要がある者
- 説明書
- 統合する
- 統合
- 統合
- 相互作用
- 興味深い
- インタフェース
- 内部
- インターネット
- 紹介する
- 導入
- 紹介します
- 導入
- 直観的な
- 投資
- 分離
- 問題
- IT
- Java
- JIT
- ジョブ
- join
- JSON
- キープ
- 種類
- 知っている
- 言語
- より大きい
- 姓
- レイテンシ
- 最新の
- リーグ
- 漏れ
- LEARN
- 学習
- Legacy
- レベル
- 活用します
- ライブラリ
- 図書館
- LINE
- LINK
- リンク
- リスト
- 場所
- 長い
- 長い時間
- 長期的
- より長いです
- 見て
- 見
- 探して
- たくさん
- ロー
- 製
- 維持する
- 維持
- 主要な
- 大多数
- make
- 作る
- 作成
- 多くの
- 地図
- ゲレンデマップ
- 一致
- マッチング
- 材料
- マトリックス
- マックス
- 手段
- メモリ
- メニュー
- マージ
- メッセージ
- メッセージ
- 方法
- メソッド
- Microsoft
- かもしれない
- 移動します
- 移行
- 最小
- マイナー
- 行方不明
- ミス
- モード
- モダン
- モジュール
- モジュール
- 他には?
- 最も
- 移動する
- モジラ
- の試合に
- 名前付き
- すなわち
- 名
- ネイティブ
- ナビゲート
- 必要
- 必要
- ニーズ
- 負
- net
- 新作
- 新しい特徴
- ニュース
- ニュースレター
- 次の
- Next.js
- Node.js
- ノード
- ノート
- 注目に値する
- 通知
- 数
- 番号
- オブジェクト
- 明白
- 発生した
- 10月
- 公式
- 正式に
- 古い
- ONE
- オペレータ
- オプション
- オプション
- 注文
- 組織
- 元々
- その他
- アウトレット
- 外側
- 概要
- 自分の
- パッケージ
- パッケージ
- パラメーター
- パラメータ
- 特に
- 部品
- 渡された
- 通過
- path
- 実行する
- パフォーマンス
- 公演
- 実行
- 視点
- ピース
- パイプライン
- 場所
- プラン
- プラトン
- プラトンデータインテリジェンス
- プラトデータ
- プラグイン
- ポイント
- 人気
- 位置
- 可能
- ポスト
- :
- 強力な
- 正確に
- 好む
- プレゼンス
- 現在
- かなり
- 防ぐ
- プレビュー
- 前
- 前に
- 事前の
- 多分
- 問題
- プロセス
- 処理
- 生産
- プロファイリング
- 演奏曲目
- プロジェクト
- プロジェクト(実績作品)
- 有望
- 適切な
- プロパティ
- 財産
- 提供します
- 提供
- は、大阪で
- 代理
- 公表
- プッシュ
- パズル
- 品質
- クイック
- 調達
- 範囲
- Raw
- RE
- 反応する
- 読む
- 実現
- 理由
- 理由は
- 推薦する
- 記録
- 減らします
- 反映する
- 登録
- 関連する
- リリース
- リリース
- リモート
- 削除します
- 削除済み
- レンダリング
- 繰り返し
- 置き換え
- レポート
- 要求
- リクエスト
- 必要とする
- の提出が必要です
- 弾力性のあります
- 応答
- REST
- 結果
- 結果
- return
- 返す
- 収益
- 取り除きます
- ロードブロッキング
- 職種
- ルート
- ルート
- ルータ
- ルール
- ルール
- ラン
- ランニング
- 安全な
- 同じ
- サス
- Save
- シナリオ
- スコープ
- 二番
- と思われる
- センス
- シリーズ
- サービス
- セッション
- セッションに
- 設定
- Shadow
- ショート
- すべき
- ショーケース
- 署名
- 同様の
- 簡単な拡張で
- 簡素化する
- から
- 状況
- サイズ
- サイズ
- ゆっくり
- 小さい
- より小さい
- So
- これまでのところ
- 溶液
- ソリューション
- 一部
- 何か
- 音
- ソース
- スペース
- 特定の
- 安定した
- スタンド
- 標準
- 規格
- start
- 起動
- Status:
- 滞在
- 手順
- まだ
- Force Stop
- 店舗
- 保存され
- ストーリー
- 戦略
- 厳格な
- より厳しい
- 構造
- 申し込む
- そのような
- スーパー
- サポート
- サポート
- サポート
- 驚き
- スイッチ
- 追い風
- 追い風CSS
- 取る
- 取り
- 取得
- ターゲット
- チーム
- チーム
- template
- テンプレート
- test
- テスト
- テスト
- ソース
- アプリ環境に合わせて
- もの
- 物事
- 今年
- 介して
- 時間
- 時間がかかる
- タイムライン
- <font style="vertical-align: inherit;">回数</font>
- 〜へ
- 一緒に
- トークン
- トン
- トーン
- あまりに
- ツール
- 豊富なツール群
- トップレベル
- に向かって
- トレース
- トレーシング
- 追跡する
- 追跡
- 最適化の適用
- 遷移
- インタビュー
- トランスペアレント
- トリガー
- true
- タイプスクリプト
- 一般的に
- 下
- わかる
- ユニバーサル
- 未使用
- 今後の
- アップデイト
- 更新しました
- 更新版
- 更新
- アップグレード
- URL
- us
- 使用法
- つかいます
- ユーザー
- users
- 公益事業
- ユーティリティ
- バリデーター
- 貴重な
- 値
- 価値観
- さまざまな
- Ve
- バージョン
- 詳しく見る
- W3
- wait
- wanted
- 警告
- ウェブ
- Webpack
- 週間
- ウィークス
- 歓迎
- この試験は
- かどうか
- which
- while
- 誰
- 意志
- 以内
- 無し
- 勝った
- 素晴らしい
- 仕事
- 働いていました
- ワーキング
- でしょう
- 書きます
- 書き込み
- 書かれた
- X
- 年
- あなたの
- ユーチューブ
- ゼファーネット