Angular 8有那些更改

239 阅读6分钟


按照以往的版本更新,当前的版本总会有一些功能不太完善。 这一个版本也不例外,因为有一些功能在Angular 8里还不是很健全,所以并没有作为缺省选项发布,有可能这些在Angular9中完善以后,会正式作为缺省选项的。


Angular 8中一个重要的变化就是添加了对于Ivy的试验性支持, 之所以成为实验性支持是因为测试覆盖面和深度还不够,需要进一步观察。


我们来看一下Ivy能干些什么, Ivy是新的内部渲染显示引擎,会把你写的代码编译之后的结果如HTML, CSS, Javascript显示出来,之所以称之为内部渲染,就是说对于外部用户,像我们作为开发者,写代码的时候,对此部分无需关注,那么对于以前的代码我们也不需要变化。那么这个新的渲染引擎有什么好处呢?好处之一就是让程序包变得更小,程序加载速度更快。


类似这种显示引擎的升级,在前面的版本中并不常见。


这一次,内部的这个渲染引擎是重写的。所以改动很大,性能方面值得期待。


就像前面说的这个引擎的使用会使得你的整个程序包变得更小,但是现在这个产品还没有完全的完成开发, 如果要计划应用到生产环境中的话,还需要等一等。


当然,虽然没有完成,但是绝大部分的工作已经可以使用了。虽然正式版本不建议直接使用,但是如果你正在开发新的产品,是可以使用的,因为在整个的开发周期中,你可能会进行非常详尽的测试,这样会及早的发现问题,并解决问题,从而避免一些问题的发生。


当然,如果性能方面提升非常明显,并且可以重新全面的进行测试,生产环境下的发布也是可以的。


那么, 在Angular 8中, 这个功能如何使用呢?


如果是创建新程序的话,可以在命令行的后面加上一个标志--enable-ivy。这样,你的新的Angular程序就可以支持Ivy了。


如果你想在现有的程序中激活这个功能,可以到tsconfig.app.json中, 找到或者添加angularCompilerOptions, 在里面添加enableIvy等于true就可以了,如果停止使用这个功能的话就把这个选项设为false。






下一个比较重要的更新就是对于Bazel的支持,这是一个编译类工具,以前只在谷歌的内部使用,后来变成了开源的一个项目, 这个编译工具不是用来替代webpack,是一个编译的辅助工具, 用来管理webpack, typescript, javascript的编译工作。


安装bazel的过程也很简单,就是安装@angular/bazel这个包,你可以把它安装到你的工程项目录里面,也可以安装到全局目录里面。


上面这两个功能呢,还没有做到特别完善,以后还有进一步增强的空间。所以只有主动的设置和安装才能用到。






接下来的一个功能已经成为缺省项了,叫做区分加载, 这是Angular 8中的新功能。


这个新功能会自动的为生产环境下创建多个浏览器版本的程序包,这样做的目的是为了大大降低在现代浏览器中的加载速度,同时支持老版的浏览器,当然在老版浏览器中加载速度会低于新版浏览器。


有了这个功能以后, 你现在的程序包大小会减少百分之七到百分之二十之间,这是一个很大的提升,当然这是对于你的程序在现代浏览器上运行时的结果而言。




  • 升级Angular 8 以后可能会带来的程序崩溃。


如果你还在使用@Angular/http这个包,升级到Angular 8 以后就无法编译了。


在Angular8 中,这个包@angular/http已经完全被删掉了,不存在了,这个包在两年之前,也就是Angular 4的版本中标注为废弃, 现在是两年之后了,所以就删除了。如果你的程序中还在用这个包的话,请马上用@Angular/common/http来替代。

另一个升级Angular 8 以后可能会崩溃的代码部分。


如果你用ViewChild或者ContentChild的话,需要指定一个static标志。这个标志可以是true或者false,比如就是这样 @ViewChild({static:false}), 如果不指定这个标志的话,编译器也会报错。缺省设为false就可以了,如果你想在ngOnInit里面访问这些成员变量的话,那你就需要把static设成true。

  • 路径配置使用动态导入


我们强烈建议用户使用路由懒加载应用的一些部分。可以在路由配置中使用 loadChildren 键启用此功能。

旧版是这样的:

{path: '/admin', loadChildren: './admin/admin.module#AdminModule'}
1

这种语法是为 Angular 定制的,并内置到了我们的工具链中。在新版 8.0 中我们换成了符合行业标准的动态导入。

新版变成了:

{path: `/admin`, loadChildren: () => import(`./admin/admin.module`).then(m => m.AdminModule)}
1

这将改善 VSCode 和 WebStorm 等编辑器对 Angular 的支持能力,现在它们就能正确理解并为用户验证这些导入了。

如果你使用的是 ng update,Angular 将自动更新代码以应用新方式。

  • CLI 中的 Workspace API

以前,使用 Schematics 的开发者必须手动打开并修改 angular.json 来更改 workspace 配置。在 8.0 版本中我们引入了一个新的 API,使开发者能更容易地读取和修改这个文件

  • 支持 Web Worker

如果你需要运行一些 CPU 密集任务,使用 Web Workers就能很好地加快应用的运行速度。使用 Web Workers 可以将诸如图像或视频操作之类的任务挂载到后台线程。我们在 angular.io 上使用 Web Workers 进行应用内搜索索引。

你现在可以从 CLI 生成新的 Web Workers,要将新生成的 worker 添加到项目中,只需运行:

ng generate webWorker my-worker
1

添加了 Web Workers 后就可以在应用程序中正常使用了,CLI 能正确地绑定并拆分它的代码:

const worker = new Worker(`./my-worker.worker`, { type: `module` });

参考:

blog.angular.io/version-8-o…

zhuanlan.zhihu.com/p/73801237