• 技术文章 >web前端 >js教程

    一文带你深入解析Angular 10

    青灯夜游青灯夜游2021-05-26 11:17:45转载287
    本篇文章带你深入探索Angular 10。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

    Angular的最新版本Angular 10刚发布了,我们看看有什么新特性!本文会详细讲新版本里所有值得一提的新特性,如果你想快速预览有哪些内容,可以前往Angular官方博客查看。

    Angular 10 在 Angular 9 发布之后4个月就发了,相隔时间这么短,当然没有太多的变化,但这个版本还是有一些值得一提的新特性,以及修复了很多缺陷。顺便一提,Angular团队想要每年发布2个大版本,所以Angular 11应该会在今年秋季发布。【相关教程推荐:《angular教程》】

    支持 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:

    我认为这个新的“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应用构建的重要部分。最新版本的带来了几个很酷的特性:

    更多

    增量式模板类型检查

    新版的编译器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).

    建议联系作者修复,因为NGCC也没法处理。也可以先把skipLibChecks设为 false来跳过。

    其他重大变更

    迁移

    参考迁移指南:https://update.angular.io/#9.0:10.0l3

    总结

    此文探索了Angular 10的新特性、废弃特性,以及重大变更。尽管这个版本不是地震级的轰动发布,但也修复了很多缺陷,也带来很多宝藏。感谢Angular团队和社区!

    原文地址:https://medium.com/javascript-in-plain-english/angular-10-in-depth-a48a3a7dd1a7

    作者:Flavio Copes

    译者:晓编

    更多编程相关知识,请访问:编程视频!!

    以上就是一文带你深入解析Angular 10的详细内容,更多请关注php中文网其它相关文章!

    声明:本文转载于:掘金社区,如有侵犯,请联系admin@php.cn删除
    专题推荐:Angular
    上一篇:浅谈JavaScript中的事件委托 下一篇:jquery css怎么设置高度
    第16期线上培训班

    相关文章推荐

    • 详解Angular中的组件交互• 浅谈Angular中导入本地JSON文件的方法• 详解angular中为HTML元素添加css类的几种方式• 聊聊angular指令中的preLink和postLink函数• 浅谈Angular中的$injector对象

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网