この記事では、Angular 10 の詳細な分析について説明します。-jsチュートリアル-php.cn

この記事では、Angular 10 について詳しく説明します。一定の参考値があるので、困っている友達が参考になれば幸いです。

この記事では、Angular 10 の詳細な分析について説明します。

Angular の最新バージョンである Angular 10 がリリースされました。どのような新機能があるのか見てみましょう。この記事では、新しいバージョンで言及する価値のあるすべての新機能について詳しく説明します。何が含まれているかをすぐにプレビューしたい場合は、Angular 公式ブログにアクセスしてチェックしてください。

Angular 10 は Angular 9 のリリースから 4 か月後にリリースされました。非常に短い間隔なので、もちろん多くの変更はありませんが、このバージョンには言及する価値のある新機能がいくつかあり、多くの欠陥が修正されています。。ちなみに、Angular チームは年に 2 つのメジャーバージョンをリリースしたいと考えているため、Angular 11 はこの秋にリリースされる予定です。 [関連チュートリアルの推奨事項: "angular チュートリアル"]

TypeScript 3.9.xx

TypeScript を愛する人として、このバージョンは次のとおりだと思います。最も歓迎すべき機能は、TypeScript 3.9.x のサポートです。一方、Angular 10 では TS 3.6、3.7、および 3.8 のサポートが終了しました。これが障害にならないことを願っています。コンパイラ CLI のアップグレードと TS3.9 のサポートに基づいて、Angular 10 の型チェックは以前のバージョンよりも高速になり、これはほとんどのプロジェクト、特に大規模なプロジェクトにとって朗報です。

さらに、Angular 10 も TSLib 2.0 にアップグレードされました。 TSLib は、TypeScript ランタイムサポートメソッドを提供する公式ライブラリです。「tsconfig.json」の importHelpers タグと組み合わせて有効になります。importHelpers がオンになっていると、コンパイラは次のことを行うことができます。よりコンパクトで読みやすいコードを生成します。つまり、TSLib はあまり変わっていませんので、心配しないでください。

オプションの厳密な設定

厳密モードが最適です。

Angular 10 の厳密モードを使用すると、作成時に厳密なプロジェクトを取得できます。これは良い習慣であり、すべての新しいプロジェクトで使用する価値があります。次の名前付けを実行して、厳密に構成されたプロジェクトを作成します:

ng new --strict

ログイン後にコピー

它可以让你更快地检测到问题的存在（在构建时发现问题总比运行时发现问题好，对吧）。这个新的option：

开启TypeScript的严格模式（建议总是开启！），以及严格的Angular模板类型检测；
大大降低了“angular.json”的空间预算，鼓励新用户关注应用打包的大小；
强制使用更严格的TSLint配置，禁止使用“any”类型（“no-any”为true），还开启了codelyzer提供的几个有趣的规则。虽然这样做很严格，但TSLint可以让你走得更远。

我认为这个新的“strict”选项很棒，有点小可惜它只是个可选项而不是个默认选项。个人认为严格意味着更安全。如果你要创建新项目，建议使用严格模式哦。

新的TypeScript配置结构

新版本提供的默认TS配置有点变化，现在是同时提供了 “tsconfig.base.json” 、 “tsconfig.json”、“tsconfig.app.json” 和“tsconfig.spec.json”。

为什么要有这些配置文件？这是为了更好地支持IDE和构建工具查找类型和编译配置。新版里面，“tsconfig.json” 只包含TypeScript项目引用，这样可以提升编译时性能，而且更严格地隔离项目的不同部分： “tsconfig.app.json”管应用代码；“tsconfig.spec.json”管测试；“tsconfig.base.json” 里面的TypeScript配置只配置TypeScript编译器和Angular编译器选项，没有配置指定/排除编译哪些文件。那指定/排除编译哪些文件在哪里配置呢？答案是在“tsconfig.app.json”文件里面。

如果你现有的项目里没有用这个配置结构，最好检查下你的TypeScript配置以便保持一致。

NGCC

首先确保你的package.son文件里有postinstall脚本，在安装后执行NGCC。

在新版本里面，NGCC的可恢复性更强。放在以前，如果NGCC的某个工作进程崩了它不一定能恢复，现在应该没有这个问题了。此外NGCC还做了一些优化，包括性能相关的。

新的默认浏览器配置

Web浏览器发展迅速，Angular顺应潮流也更新了browserslist文件（.browserslistrc）。但正如官方博客里解释的那样，新配置带来了一个副作用，就是新项目默认禁用ES5构建。当然，现在生产ES5的代码已经没多少意义了，现代Web浏览器都至少支持ES2015了。如果你还在用IE浏览器，那就是时候告别过去了。

如果要获取具体支持的Web浏览器，可以在你的项目里执行下面的命令：

npx browserslist

ログイン後にコピー

它会基于根目录下的 “.browserslistrc” 文件输出结果。

Bazel

一个令人惋惜的消息：Angular Bazel已经离开Angular实验室了，所以Angular项目基本上不会再支持Bazel，Bazel再也不是Angular CLI的默认构建工具了。

@angular-devkit/build-angular 0.1000.0)

虽然这个包的命名很粗暴，但它包含了Angular应用构建的重要部分。最新版本的带来了几个很酷的特性：

如果你用SASS，build-angular会重新定义资源的相对路径。之前的版本里，在样式文件里引用或导入 url(./foo.png) 这样的路径，都会保留准确的URL，当引入的样式文件不在同一个目录下的时候就会崩掉。现在所有使用相对资源的路径都能找到了。
build-angular可以去掉Webpack无法处理的重复模块，这是通过自定义Webpack解析插件实现的。

增量式模板类型检查

新版的编译器CLI可以实现增量式模板类型检查。

CanLoad

以前，CanLoad guard 只能返回boolean值，现在可以返回 UrlTree 类型的值，匹配CanActivate 守卫的行为。注意，这不会影响预加载。

I18N/L10N

以前本地只能支持一个翻译文件。现在本地可以指定多个文件了，然后通过message id来合并。

Service Workers

默认的SwRegistrationStrategy有所优化。避免了之前可能会出现的 Service Worker从未注册的情况（比如有interval或递归timeout这样的长时间运行任务存在时）。

Angular Material

Angular Material 10 也跟着发布了，变化挺多的

大量的缺陷修复

Angular团队投入了大量的时间和精力去修复了积压的bug，解决了超过700个issue。

废弃特性

Angular打包格式不再支持ESM5/FESM5，因为构建过程的最后都会降级为ES5。如果你不用Angular CLI打包，你要自己想办法把Angular代码降级到es5。

IE 9、IE 10和移动端IE浏览器都不支持了。

以及一些废弃的元素，具体看官网博客。

不带Angular装饰器的class不再支持Angular的特性

直到Angular 9，你都可以在没有使用装饰器（比如 @Component，@Derective等）的类里面使用Angular的特性。Angular 10里面不行了，你必须加装饰器。如果你有用到组件继承，父子组件类里的其中一个没有加装饰器，就会有问题。

为什么要强制变更？简单来讲，Ivy编译器需要装饰器。

如果没有装饰器，Angular的编译器就不会添加依赖注入的额外代码。

如果父组件缺少了装饰器，那子类就会继承父类的constructor，但编译器不会生成对应的constructor信息（因为没装饰）。当Angular试图创建这个子类时，就没有正确的信息去创建了。在View引擎里面，编译器可以在全局范围里查找缺失的数据，但Ivy编译器会单独处理每个指令，这意味着更快的编译速度，但就没法像以前那样自动找到缺失的constructor信息了，只有显式添加装饰器才能提供这个信息。

如果子类缺少了装饰器，那它就会继承父类但是没有自己的装饰器，编译器也没法知道这个类是个@Derective还是个@Component，所以没法生成对应的指令信息。

这个变更带来的好处就是增强了Angular世界的一致性。如果你想用Angular特性，那就加上Angular装饰器。

ModuleWithProviders强制使用泛型

以前ModuleWithProviders也接受泛型，但不是强制的。NG 10里面，泛型参数是必需的，这样有利于类型安全。如果你遇到第三方库的报错：

error TS2314: Generic type &#39;ModuleWithProviders<T>&#39; requires 1 type argument(s).

ログイン後にコピー

NGCC では対応できないため、作者に修理を依頼することをお勧めします。最初に skipLibChecks を false に設定してスキップすることもできます。

その他の主な変更点

リゾルバー: EMPTY を返すとナビゲーションがキャンセルされます。ナビゲーションを正常に完了させたい場合は、リゾルバーが戻り値。
Service Worker: 異なるヘッダーを持つリソースに依存する Service Worker の実装は以前とは異なり、異なるヘッダーは無視されます。ユーザーエージェントの予期しない動作を引き起こす可能性があるため、このようなリソースのキャッシュは避けることをお勧めします。これにより、リソースヘッダが未使用であってもチェックできるようになります。キャッシュマッチングオプションは、VGSW 設定ファイルで設定できます。
属性バインディング: 例: [foo]=(bar$ | async).fubarこのように、fubar の値が以前と同じ場合、変更検出は行われません。引き金になった。変更検出をトリガーしたい場合の回避策は、参照全体を変更することです。
時刻と日付の書式設定: formatDate() および DatePipe 書式設定コードが変更されました。以前の実装では、日付範囲が午前 0 時をまたぐ問題がありました
#UrlMatcher の背後にあるメソッドユーティリティタイプは、null のようなものを返すことができるようになりました
#Angular ログ: テンプレート内の不明な要素/属性バインディングが、以前の警告出力レベルからエラー出力レベルに引き上げられます
レスポンシブフォーム: valueChanges はタイプ number の入力にバインドされますフォームコントロールのバグ。数値入力ボックスは、change イベントではなく、input イベントをリッスンするようになりました。テスト例を忘れずに変更してください。これにより IE9 の互換性も失われますが、影響はありません。
minLength
maxLength バリデータ: その値には、数値型の長さ属性が含まれることが保証されています。以前は、長さ属性のない偽の値は検証エラーを引き起こしていました。