Geekly articles weekly

准备：Angular 8已经关闭

该材料的作者（我们正在翻译的版本）建议谈论Angular8。在这里，我们将讨论在NgConf和Google I / O 2019活动中提出的一些特别热门的话题。因此，如果您对Angular感兴趣，但由于某些原因没有看到来自Angular的报告。在这些事件中，我们相信您会好奇知道Angular 8会带来什么。



重点


我敢肯定，您现在正在迫切等待Angular 8的发布，体验与我在NgConf 2019之后所经历的相同感受。Igor Minar的报告涉及许多预期的创新-从工具到差分加载等技术以及许多其他奇妙的东西。

让我们讨论所有这些因素如何影响您的项目。 即，我们将考虑新的机会，并讨论它们的出现是否会导致对现有机制的过时认识，或者是新的与旧的不兼容的事实。

新功能


▍差分加载


在应用差异加载技术时，Angular在项目的组装过程中可以为polyfills创建单独的捆绑包。 这取决于browserlist文件。 这是一般的样子。


以上是打包项目的新方法（ 来源 ）

使用此功能将减小包的大小。


通过差异加载节省成本（ 来源 ）

如何运作？

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属性boolean阻止脚本在支持ES6模块的浏览器中加载和执行。 此类浏览器会忽略此类脚本。 较旧的浏览器下载并执行它们。

▍SVG模板


现在，SVG文件可以用作模板。 到目前为止，嵌入式或外部HTML都可以用作模板。

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

我常春藤实验渲染引擎


常春藤引擎仍处于试验阶段。 Angular 8发行后，您可以在创建新应用程序时使用--enable-ivy标志进行测试。 相应的代码如下所示。 请记住，Ivy尚未准备就绪（它仍处于``选择接受预览''状态），并且正如Igor Minar在NgConf 2019上所说的那样，仍建议在创建新应用程序时使用View Engine。

为了在现有项目中启用Ivy，需要在angularCompilerOptions中将angularCompilerOptions的enableIvy option参数angularCompilerOptions为true ：

 "angularCompilerOptions": {"enableIvy": true}

您可以创建一个将使用Ivy的新应用程序：

 $ ng new my-app --enable-ivy

Ivy提供以下有用的功能，其中的前三个功能有望在Angular 9中使用：

  1. 编译速度更快。
  2. 改进了模板的类型检查。
  3. 减少捆的大小。 现在 ，如果您还没有看过的话，请使用Google I / O 19演示4.3 Kb应用程序。
  4. 向后兼容。
  5. 我最喜欢的功能是调试模板。 我敢肯定，像我一样，许多开发人员也需要这样做。

▍支持Ba


Bazel是Google已转移到开源市场的另一种工具。 伊戈尔·米纳尔（Igor Minar）说，长期以来，Bazel一直用于公司的内部需求，现在每个人都可以使用它。 要了解有关此项目构建器的更多信息，请查看文档并阅读如何将Bazel与Angular结合使用。

也许您现在想知道Bazel是否已准备好实际使用。 简要回答这个问题-尚未准备好。 现在，他处于“选择加入预览”状态。 让我引用Google Angular工具开发团队的负责人Alex Eagle的话：“如果您以前已经进入Bazel水域，您不禁会注意到有很多鲨鱼……现在我们已经管理了鲨鱼，但是水仍然可以冷。”

Bazel仍在制定中，预计将包含在版本9中的@angular/cli中。

以下是Bazel可以为我们提供的一些有用功能：

  1. 加快项目构建时间。 第一次构建需要一些时间，但是并行构建要快得多。 Angular已经使用了Bazel，现在CI例程在7.5分钟（而不是一个小时）内完成，比在Bazel之前要花一个小时。
  2. 增量项目组装。 不仅可以收集和部署整个应用程序，还可以收集和部署其中已更改的内容。
  3. 能够处理Bazel文件，默认情况下，这些文件是隐藏的。

您可以将Bazel支持添加到现有项目中，如下所示：

 ng add @angular/bazel

您可以使用Bazel创建新的应用程序：

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

▍API构建器


新版本的Angular允许您使用API​​ Builders，也称为Architect。 Angular使用构建器来执行基本操作： 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命令。

通常，收集器只是一个带有一组命令的函数，这些命令从@angular-devkit/architect包传递给createBuilder()方法：

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

您可以在此处查看内置的Angular构建器。 Angular博客上有关于它们的好东西。

la延迟加载的变化


Angular的新版本还将具有惰性模块加载系统的新版本，该模块的外观导致不赞成使用现有语法loadChildren:string 。

以前，它看起来像这样：

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

随着Angular 8的发布-像这样：

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

如果使用延迟加载机制时有许多模块要使用，并且希望将它们自动转换为新的操作模式，请查看此资料。

▍支持API $位置AngularJS


Angular开发团队致力于为使用AngularJS的人提供支持，并帮助他们切换到Angular。 结果，已在angular/common/upgrade包中将对$location服务的支持添加到系统中。 我们正在谈论以下功能：

  1. 从$location服务获取状态。
  2. 跟踪地址更改。
  3. 获取有关可以在AngularJS中获得的地址组成部分的相同信息（ hostname ， protocol ， port ， search ）。
  4. 使用MockPlatformLocation API测试服务。

▍网络工作者


Angular 8增加了对网络工作者的支持。 在他们的帮助下，您可以组织资源密集型代码的后台执行。 为了创建一个新的Web Worker，可以使用以下Angular命令行界面命令：

 ng g webWorker <name>

▍服务人员


由于最近渐进式Web应用程序的普及已大大增加，因此对服务人员进行了许多改进。 特别地，这些改进之一是增加了SwRegistrationOptions参数。 另一个改进是对同一域中的多个应用程序的支持。

在Angular文档的此部分中了解有关服务人员的更多信息。

▍表格改进


markAllAsTouched方法，该方法允许您将FormGroup所有元素标记为已touched 。 这在需要运行FormGroup中所有控件的验证的情况下非常有用。 在此之前，同样的事情是这样完成的：

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

在新的Angular中，您可以使用clear方法clear FormArray ，该方法将删除其中的所有元素。 以前，必须使用以下构造，在循环的每次迭代中删除第一个元素：

 while (formArray.length) { formArray.removeAt(0); }

您不必再这样做了。 现在，只需调用一个方法即可：

 formArray.clear()

using设置使用ViewChild和ContentChild指令时接收响应的时间


此新功能意味着使用static标志，该标志允许您指定由ViewChild或ContentChild指令定义的请求何时解析。

您可能遇到以下系统行为不一致的示例。 有时搜索结果在ngOnInit生命周期方法中可用，有时在调用ngAfterContentInit或ngAfterViewInit之前不存在。 这是使用static标志的方法：

 //          @ContentChild('foo', { static: false }) foo!: ElementRef; //          ngOnInit @ViewChild(TemplateRef, { static: true }) foo!: TemplateRef;

应当注意，这些功能不适用于ViewChildren和ContentChildren指令。 在执行更改检测之后，将执行相应的项目搜索查询。

当使用static: true务必小心，因为使用此标志将不允许您从动态模板（即* ngIf）中获取结果。 原理图规则已添加到系统中，使您可以翻译现有代码以使用新语法。 该语法将与Ivy一起使用。

→可在此处找到有关此功能的详细信息。

▍支持打字稿3.4.x


Angular现在使用TypeScript 3.4（Angular的第七版使用TypeScript 3.2.x）。 TS的新版本中没有太多重大更改。 它们可能不会导致不愉快的后果。

→有关TS 3.4创新的详细信息，请参见此处 。

▍绩效提升


在当前条件下， ServerRendererFactory2为每个请求创建一个新的DomElementSchemaRegistry实例，这在资源方面非常昂贵。 现在将组织共享DomElementSchemaRegistry的全局实例。

Fire在Firebase托管上部署Angular应用程序


如果您使用Firebase托管来部署Angular应用程序，那么您一定会喜欢这种创新。 关键是，现在在Angular CLI中有一个特殊的命令可以执行此操作：

 ng run [PROJECT_NAME]:deploy

→ 在这里您可以找到有关此功能的更多信息。

过时的API


with在使用TesBed.get时使用任何类型


TesBed.get方法具有两个签名。 一种是输入类型，第二种是接收和返回类型any 。 现在，不赞成使用类型any的方法签名。 您只能将这种方法用于特定类型的指示。 例如，这将影响使用字符串令牌（不支持）和其他一些令牌的情况。

先前使用的此类设计：

 TestBed.configureTestingModule({ providers: [{ provide: "stringToken", useValue: new Service() }], }); let service = TestBed.get("stringToken"); //  any

现在应用以下方法：

 const SERVICE_TOKEN = new InjectionToken<Service>("SERVICE_TOKEN"); TestBed.configureTestingModule({ providers: [{provide: SERVICE_TOKEN, useValue: new Service()}], }); let service = TestBed.get(SERVICE_TOKEN); //  Service

DO从斜角 /平台浏览器中删除DOCUMENT


已从@angular/platform-browser软件包中删除了DOCUMENT 。 如果您从此软件包中使用DOCUMENT ，则应该从@angular/common导入它。

▍卸载angular / http包


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

重大变化


code自动代码修复


很少有人知道使用tr和col HTML元素时Angular会自动纠正错误。

在tr的情况下，如果相应元素不在tbody ， tfoot或thead内，则会进行更正。 纠正包括将元素自动放置在tbody 。

对于col对其中该元素不在colgroup标记内的代码进行了更正。

Angular现在将这些错误的纠正留给开发人员来决定。 这样做是为了避免冲突和错误。 结果，那些习惯了此功能的人将需要自己照顾代码的正确性。

→有关详细信息，请参见此处 。

▍重命名角度材料


Angular Material项目已重命名为Angular Components。 软件包名称未更改。

总结


Angular 8将很快发布。 Angular开发团队做得很好。 他们努力的结果促进了使用Angular的人们的工作和生活。 特别是，例如，对于每个新版本的框架，从先前版本切换到该框架的过程变得越来越容易。 例如，这就是法航的样子。


升级到新版本的Angular所需的时间（ 源 ）

结果，我们希望从Angular 7过渡到Angular 8不会花费很多时间，也不需要认真的努力。

在这里，您可以找到有关升级到新版本Angular的分步教程。

大约一个月前，Igor Minar 表示 ，一切都表明Angular 8.0.0可能会在五月下旬问世。 Angular 8.0.0-rc.5已于5月24日发布。

Angular的未来看起来相当乐观。 其他一切都取决于我们。

亲爱的读者们！ 您对Angular 8有什么期望？

Source: https://habr.com/ru/post/zh-CN453584/

More articles:


All Articles