이 기사에서는 Angular 10에 대한 심층 분석을 제공합니다.

이 기사에서는 Angular 10가지를 자세히 살펴보겠습니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

Angular의 최신 버전인 Angular 10이 방금 출시되었습니다. 어떤 새로운 기능이 있는지 살펴보겠습니다! 이 글에서는 새 버전에 언급할 가치가 있는 모든 새로운 기능에 대해 자세히 설명합니다. 포함된 내용을 빠르게 미리 보려면 Angular 공식 블로그로 이동하여 확인해 보세요.

Angular 10은 Angular 9가 출시된 지 4개월 만에 출시되었습니다. 이렇게 짧은 시간에 물론 많은 변경 사항은 없지만, 이 버전에는 여전히 언급할 만한 몇 가지 새로운 기능이 있으며 많은 결함이 수정되었습니다. 그런데 Angular 팀은 매년 2개의 주요 버전을 출시하려고 하므로 올 가을에 Angular 11이 출시되어야 합니다. [관련 튜토리얼 추천 : "angular tutorial"]

TypeScript 3.9.x 지원

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 'ModuleWithProviders<t>' requires 1 type argument(s).</t>

NGCC에서는 처리가 불가능하므로 작성자에게 연락하여 수리를 받는 것을 권장합니다. 먼저 skipLibChecks를 false로 설정하여 건너뛸 수도 있습니다. skipLibChecks设为 false来跳过。

其他重大变更

• Resolver：返回EMPTY的会取消导航，如果你想让导航顺利完成，必须保证resolver有返回值。
• Service worker：依赖不同header的资源的Service worker实现跟之前不一样了，不同的header会被忽略。建建议避免缓存这样的资源，可能会引起user agent不可预测的行为。由此，即使资源的header不用也可以检。缓存匹配选项可以在VGSW的配置文件里面配置。
• 属性绑定：比如[foo]=(bar$ | async).fubar这样，如果fubar的值跟之前一样，就不会触发变化检测。如果你想要触发变化检测，变通的方法就是让整个引用发生变化。
• 时间日期格式化：formatDate()和DatePipe 的格式化代码改了，之前的实现对于跨午夜的日期范围有问题
• UrlMatcher背后的方法utility type现在的返回类似可以是null
• ExpressionChangedAfterItHasBeenChecked 的报错新增了之前没检测到的场景
• Angular日志：模板里的未知元素/属性绑定从以前的warning输出级别提升到error输出级别
• 响应式表单：valueChanges 绑定到number类型的input时有个表单控制的bug，现在number的输入框不再监听change事件，而是监听input事件。记得修改你的测试样例。这个还打破了IE9的兼容性，不过也不影响了。
• minLength 和maxLength验证器：它的值保证包含数值类型的length属性，以前没有length属性的falsy值会引起验证错误。

迁移

参考迁移指南

기타 주요 변경 사항

• Resolver: EMPTY를 반환하면 탐색이 취소됩니다. 탐색을 성공적으로 완료하려면 다음 사항을 확인해야 합니다. 리졸버가 값을 반환합니다.
• 서비스 워커: 서로 다른 헤더를 가진 리소스에 의존하는 서비스 워커의 구현이 이전과 다르며, 다른 헤더는 무시됩니다. 사용자 에이전트의 예측할 수 없는 동작을 유발할 수 있는 이러한 리소스를 캐싱하지 않는 것이 좋습니다. 결과적으로, 리소스 헤더를 사용하지 않더라도 확인할 수 있습니다. 캐시 일치 옵션은 VGSW 구성 파일에서 구성할 수 있습니다.
• 속성 바인딩: 예를 들어 [foo]=(bar$ | async).fubar 이런 식으로 fubar 값이 이전과 같으면 변경 감지를 수행합니다. 발동되지 않습니다. 변경 감지를 트리거하려는 경우 해결 방법은 전체 참조를 변경하는 것입니다.
• 시간 및 날짜 형식: formatDate() 및 DatePipe 형식 코드가 변경되었습니다. 이전 구현에서는 자정까지의 날짜 범위에 문제가 있었습니다.
• UrlMatcher 뒤에 있는 메소드 유틸리티 유형은 이제 null을 반환할 수 있습니다.
• ExpressionChangedAfterItHasBeenChecked의 오류 보고서는 이전에 감지되지 않았던 새로운 시나리오를 추가합니다 코드 >
• Angular 로그: 템플릿의 알 수 없는 요소/속성 바인딩이 이전 경고 출력 수준에서 오류 출력 수준으로 업그레이드되었습니다.
• 반응형 형식: 있습니다. valueChanges가 숫자 유형의 입력에 바인딩될 때의 양식 제어 버그. 이제 숫자 입력 상자는 더 이상 변경 이벤트를 수신하지 않고 입력 이벤트를 수신합니다. 테스트 예제를 수정하는 것을 잊지 마세요. 이로 인해 IE9의 호환성도 손상되지만 영향은 없습니다.
• minLength 및 maxLength 유효성 검사기: 해당 값은 숫자 유형의 길이 속성을 포함하도록 보장됩니다. 이전에는 길이 속성이 없는 잘못된 값입니다. 유효성 검사 오류가 발생할 수 있습니다.

Migration

마이그레이션 가이드를 참조하세요: https://update.angular.io/#9.0: 10.0 l3

Summary

이 문서에서는 Angular 10의 새로운 기능, 더 이상 사용되지 않는 기능 및 주요 변경 사항을 살펴봅니다. 이 버전은 엄청난 블록버스터 릴리스는 아니지만 많은 버그를 수정하고 많은 보물을 가져왔습니다. Angular 팀과 커뮤니티에 감사드립니다!

원본 주소: https://medium.com/javascript-in-plain-english/angular-10-in-length-a48a3a7dd1a7

저자: Flavio Copes

번역자: Xiaobian🎜🎜🎜더 많은 프로그래밍 관련 지식 , 방문해주세요: 🎜프로그래밍 비디오🎜! ! 🎜

위 내용은 이 기사에서는 Angular 10에 대한 심층 분석을 제공합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!