Angular 8的新特性介绍

2023-09-26 18:55:34

新功能

差分加载

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

SVG作为模板

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

@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中建议的那样，视图引擎仍然推荐用于新应用。

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版本的应用程序）。
向后兼容性。
我最喜欢的：你可以调试模板（我确信很多开发人员需要这个功能）。

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

资源搜索网站大全 https://www.renrenfan.com.cn 广州VI设计公司https://www.houdianzi.com

懒加载的变动

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

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

现在的使用方法如下：

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

码农公寓

新功能