Angular 8的新特性介绍

在之前Angular团队发布了8.0.0稳定版。其实早在NgConf 2019大会上，演讲者就已经提及了从工具到差分加载的许多内容以及更多令人敬畏的功能。下面是我对8.0.0一些新功能的简单介绍，希望可以帮助大家快速了解新版本。

一、新功能

1、差分加载

根据您的browserlist 文件，在构建期间，Angular将为其创建单独的包polyfills。所以基本上你会有：

使用此功能将减小捆绑包大小。

但这是如何工作的？

基本上，Angular将使用polyfill构建其他文件，并且它们将注入nomodule 属性。

<body> <pp-root> </ pp-root>
<script type =“text / javascript”src =“runtime.js”> </ script> <script type =“text / javascript”src =“es2015- polyfills.js ” nomodule > </ script> <script type =“ text / javascript“src =”polyfills.js“> </ script> <script type =”text / javascript“src =”styles.js“> </ script> <script type =”text / javascript“src =”vendor .js“> </ script> <script type =”text / javascript“src =”main.js“> </ script>
</ body>

nomodule属性是一个布尔属性，用于阻止脚本在支持模块脚本的用户代理中执行。这允许在现代用户代理和旧用户代理中的经典脚本中选择性地执行模块脚本.

2、SVG作为模板

您现在可以将SVG文件用作模板。到目前为止，我们只能选择使用内联HTML或外部HTML作为模板。

@Component({selector: "app-icon",templateUrl: "./icon.component.svg",styleUrls: ["./icon.component.css"]
})
export class AppComponent {...}

3、Ivy渲染引擎实验

虽然早在angular 6的时候就提出了Ivy，但是Ivy仍处于试验阶段，通过Angular 8版本，您可以通过创建一个enable-ivy标志设置为true 的应用程序来测试它，如下所示。它不是完全正常运行（选择预览），正如Igor Minar在ngConf 2019中建议的那样，视图引擎仍然推荐用于新应用。

To enable Ivy in an existing project set enableIvyoption in the angularCompilerOptions in your project’s tsconfig.app.json
要在现有项目中使用Ivy的话，需要在tsconfig.app.json文件中设置angularCompilerOptions选项的enableIvy属性

“angularCompilerOptions”： {“enableIvy”：true}

您也可以使用新引擎创建新应用程序

ng new my-app --enable-ivy

Ivy将提供以下优势，Angular 9中预计前3个功能：

编译速度更快（V9）。
改进了模板的类型检查（V9）。
较小的捆绑尺寸（V9）（如果您错过了I / O 19，Vikram Subramanian显示了一个4.3 KB版本的应用程序）。
向后兼容性。
我最喜欢的：你可以调试模板（我确信很多开发人员需要这个功能）。

4、Bazel支持

Bazel是谷歌开源的另一款工具，“我们不喜欢谷歌”。正如Igor Minar所解释的那样，Bazel已经在内部使用了很长时间，现在可供所有人使用。您可以参考Bazel文档，并了解如何将其与Angular一起使用。
你可能想知道：“Bazel准备好了吗？”简答：还没有。目前，它处于“选择预览”模式。

Bazel可作为选择加入，预计将包含@angular/cli在第9版中。

Bazel将提供以下优势：

更快的构建时间（对于第一次构建需要时间，但并发构建将更快），Angular已经在使用它，现在CI在7.5分钟内完成，而不是在Bazel之前的60分钟。
增量构建：您将能够仅构建和部署已更改的内容而不是整个应用程序。
您可以弹出Bazel文件，默认情况下它们是隐藏的。

您可以使用以下命令添加Bazel支持：

ng add @ angular / bazel

或者，您也可以使用Bazel创建一个新的应用程序：

npm install -g @ angular / bazel
ng new my-app --colection = @ angular / bazel

5、Builders API

新版本允许我们使用Builders API，也称为Architect API。
angular使用builders进行主要操作：serve ，build ，test ，lint和e2e 。您可以在angular.json文件中查看使用过的构建器。

...
"projects": {"app-name": {..."architect": {"build": {"builder": "@angular-devkit/build-angular:browser",...},"serve": {"builder": "@angular-devkit/build-angular:dev-server",...},"test": {"builder": "@angular-devkit/build-angular:karma",...},"lint": {"builder": "@angular-devkit/build-angular:tslint",...},"e2e": {"builder": "@angular-devkit/build-angular:protractor",...}}}
}

从现在开始，我们可以创建自定义构建器。我认为这是gulp/grunt“旧时代”中的命令。

基本上，构建器只是一个带有一组命令的函数，您可以createBuilder()从@angular-devkit/architect包传递给方法。

import { createBuilder } from '@angular-devkit/architect';
function customBuild(options, context) { return new Promise((resolve, reject) => {// set of commands})
}
createBuilder(customBuild);

您可以在此处查看内置的Angular构建器。

6、懒加载的变动

新版本不推荐使用loadChildren:string 懒惰加载模块的语法。
在8.0.0之前，懒加载的使用方法如下：

loadChildren: './lazy/lazy.module#LazyModule';

现在的使用方法如下：

loadChildren: () => import('./lazy/lazy.module').then(m => m.LazyModule)

如果你有很多的懒加载的模块，并希望通过软件包做到这一点，可以点击此处参考

7、对AngularJS API中$location的支持

Angular团队希望为使用AngularJS的所有开发人员提供支持，并帮助他们升级到Angular。该团队现在在升级时添加了对$ location服务的支持。添加了angular/common/upgrade这个新包。

允许从位置服务检索状态的功能。
添加跟踪所有位置更改的功能。
它将允许您读取hostname protocol port searchAngularJS中可用的属性。
MockPlatformLocation 添加了API以测试位置服务。

8、Web Worker

Angular 8中添加了Web worker支持。现在，您可以添加Web worker并将要在后台运行的耗时进程委派给Web worker。运行以下命令以使用Angular CLI生成新的Web worker：

ng g webWorker <name>

9、Service Worker

随着PWA的使用日益增长，对Service Worker进行了许多改进。

一项改进是SwRegistrationOptions增加了选项。
在一个域中支持多个应用。
阅读Angular Doc上有关服务工作者的更多信息。

10、表单改进

添加了markAllAsTouched方法以标记所有的控件FormGroupas as touched。如果要触发一个表单组中所有控件的验证，这个方法将是非常有用的。之前我们不得不使用下面的代码片段来实现相同的功能：

validateFormAndDisplayErrors(form: FormGroup) {Object.keys(form.controls).map((controlName) => {form.get(controlName).markAsTouched({onlySelf: true});});
}

从FormArray中清除所有元素

以前要删除所有元素，formArray 我们必须循环删除第一个元素直到空：

while（formArray.length）{ formArray.removeAt（0）;
}

现在就不需要那样操作了，直接使用clear方法就可以完成：

formArray.clear()

11、对Typescript 3.4.x的支持

Angular现在使用TypeScript 3.3（v7使用3.2.x）。没有太多突破性的变化 - 所以你可能应该做得很好。你可以在这里查看。

12、性能改善

为每个请求ServerRendererFactory2创建一个新的实例DomElementSchemaRegistry，这是非常昂贵的。现在它将共享全局实例DomElementSchemaRegistry.

二、弃用的API

1、从 @angular/platform-browser中删除了已弃用的DOCUMENT

从@angular/platform-browser中移除了DOCUMENT。如果您使用DOCUMENT from @angular/platform-browser，则应从此处开始导入@angular/common。

2、@angular/http

@angular/http在Angular 5中不推荐使用package，但由于@angular/platform-server依赖于它，所以仍然可用。从现在它已从包列表中删除。

3、配置ViewChild / ContentChild查询的时间

使用此功能时，必须提供静态标志以定义何时需要解析ViewChild和ContentChild实例。

// Ensure Change Detection runs before accessing the instance
@ContentChild('foo', { static: false }) foo!: ElementRef;
// If you need to access it in ngOnInt hook
@ViewChild(TemplateRef, { static: true }) foo!: TemplateRef;

以上功能不适用于ViewChildren或ContentChildren。它们将在变更检测运行后解析。

需要注意的是，设置static: true将不允许您从动态模板分辨率（例如*ngIf）获得结果。

添加了原理图支持以将现有代码迁移到此语法，因为将使用此语法Ivy 。您可以运行ng update @angular/core以迁移现有代码。

4、Angular Material

Angular Material工程重命名为Angular Components。包还是跟以前保持一样的。

结论

以上就是angular 8版本的一些改动。总体来说变化不是很大，延续了angular每年一个稳定版的习惯。
原文链接

新增：Angular版本跟新说明

Angular8 - 稳定版修改概述(Angular 8的新特性介绍)相关推荐

红旗系统linux2.6.32屏保咋设置,红旗Linux桌面操作系统 V11社区预览版发布，附新特性介绍...
红旗Linux桌面操作系统 V11(英文名称为RedFlag Linux Desktop 11)社区预览版发布了,根据计划,该版本将开放给用户下载试用.以下将介绍它的新特性:良好的硬件兼容.丰富的外设 ...
ArchiCAD 24 Mac版3D建筑模型设计和分析软件新功能介绍
ArchiCAD 24 Mac破解版全新上线,有哪些新增功能?小编给大家带来了这篇ArchiCAD 24 Mac版3D建筑模型设计和分析软件新功能介绍的文章,希望可以帮到你.设计创建集成模型使用A ...
Redis 5.0 正式版发布了，19 个新特性
转载自 Redis 5.0 正式版发布了,19 个新特性 Redis 5.0 GA 正式版发布了! 下载地址: download.redis.io/releases/redis-5.0.0.tar. ...
android p preview_细数 Android P 开发者预览版中最不能错过的新特性
原标题:细数 Android P 开发者预览版中最不能错过的新特性 2018年安卓巴士全球开发者论坛-重庆站 [线下活动]春天到了跟小编一起去重庆嗨皮吧~ Android P 应用适配新特性1.Pr ...
easyui treegrid 获取新添加行inserted_IDEA 2020.2 稳定版发布，带来了不少新功能...
点击上方 "zhisheng"关注, 星标或置顶一起成长 Flink 从入门到精通系列文章 IntelliJ IDEA 2020.2 稳定版已发布,此版本带来了不少新功能,包括支 ...
IDEA 2020.2 稳定版发布，带来了不少新功能...
IntelliJ IDEA 2020.2 稳定版已发布,此版本带来了不少新功能,包括支持在 IDE 中审查和合并 GitHub PR.新增加的 Inspections 小组件(Inspections ...
python3 namedtuple_去年发布的Python 3.8 稳定版，帮你们来一波特性全面解读
早在之前关于 Python 新版本的文档在官方一就直处于更新模式中,就在昨日 Python 3.8 稳定版正式发布了,让我们来看看新版本有哪些新特性呢? Python 3.8.0 稳定版的新特性 1P ...
神经网络API、Kotlin支持，那些你必须了解的Android 8.1预览版和Android Studio 3.0新特性
曾仅用 55 秒发布会的 Android 8.0 Oreo 在时隔两个月后,Google 于今天在其官方网站上正式发布了 Android 8.1 首个开发者预览版,此次升级涵盖了针对多个功能的提升优化 ...
删库跑路？不可回滚？MySQL创建和管理表，修改清空表，MySQL8新特性DDL原子化，完整详细可收藏
文章目录 1.基础知识 2.创建和管理数据库 3.创建表 4.修改表 5.重命名表 6. 删除表 7.清空表 8.MySQL8新特性-DDL的原子化 1.基础知识 1.1 一条数据存储的过程存储数据 ...

Angular8 - 稳定版修改概述(Angular 8的新特性介绍)