Angular8稳定版修改概述

时间 2019-11-16

标签 angular8 angular 稳定修改概述栏目 AngularJS 繁體版

原文原文链接

在今天早些时候Angular团队发布了8.0.0稳定版。其实早在NgConf 2019大会上，演讲者就已经说起了从工具到差分加载的许多内容以及更多使人敬畏的功能。下面是我对8.0.0一些新功能的简单介绍，但愿能够帮助你们快速了解新版本。javascript

新功能

差分加载

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

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

但这是如何工做的？git

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

<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属性是一个布尔属性，用于阻止脚本在支持模块脚本的用户代理中执行。这容许在现代用户代理和旧用户代理中的经典脚本中选择性地执行模块脚本.github

SVG做为模板

您如今能够将SVG文件用做模板。到目前为止，咱们只能选择使用内联HTML或外部HTML做为模板。web

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

Ivy渲染引擎实验

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

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属性npm

“angularCompilerOptions”： {“enableIvy”：true}

您也可使用新引擎建立新应用程序json

ng new my-app --enable-ivy

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

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

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

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构建器。

懒加载的变更

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

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

如今的使用方法以下：

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

若是你有不少的懒加载的模块，并但愿经过软件包作到这一点，能够点击此处参考

对AngularJS API中$location的支持

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

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

Web Worker

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

ng g webWorker <name>

Service Worker

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

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

表单改进

添加了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()

对Typescript 3.4.x的支持

Angular如今使用TypeScript 3.3（v7使用3.2.x）。没有太多突破性的变化 - 因此你可能应该作得很好。你能够在这里查看。

性能改善

为每一个请求ServerRendererFactory2建立一个新的实例DomElementSchemaRegistry，这是很是昂贵的。如今它将共享全局实例DomElementSchemaRegistry.

弃用的API

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

从@angular/platform-browser中移除了DOCUMENT。若是您使用DOCUMENT from @angular/platform-browser，则应今后处开始导入@angular/common。

@angular/http

@angular/http在Angular 5中不推荐使用package，但因为@angular/platform-server依赖于它，因此仍然可用。从如今它已从包列表中删除。

配置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以迁移现有代码。

Angular Material

Angular Material工程重命名为Angular Components。包仍是跟之前保持同样的。

结论

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