Angular是最受欢迎的网页开发框架之一。随着最新版本的发布，它为网页开发人员提供了更多功能。

众所周知，谷歌4月份发布了新版Angular。这是Google于2018年发布的第一个主要版本，主要侧重于工具链，并使用户更容易创建不同类型的应用程序。这个主要版本还包含一些新功能和升级。在最后阶段，这个版本证实了新的Angular版本更轻，更快，更容易。开发人员显然更喜欢它，因为它使开发更容易。另外，Angular 6支持TypeScript 2.7版本。因此，在新的TypeScript版本的帮助下，使用条件类型声明，默认声明和严格的类初始化进行编码要容易得多。

现在是时候讨论在Angular 6中做出的重大改变。

1.Angular元素

Angular是开发单页应用程序的完美框架。要创建可以包含在任何现有网页中的小部件或组件，在早期版本的Angular中不是一件简单的任务。但是在Angular 6中，它可以在Angular Elements的帮助下完成。实际上，Angular 6是第一款完全支持Angular Elements的Angular版本。Angular Elements是Angular的Rob Wormald的创意。Angular Elements包将使我们能够创建一个Angular组件，然后将该组件发布为可在任何HTML页面中使用的Web组件（即使该页面不使用Angular框架）。它实际上需要一个Angular组件，然后将其封装在一个自定义元素（如DOM元素）中，

2.服务工作者支持

服务工作人员基本上是在Web浏览器中运行并可以缓存应用程序的脚本。服务工作者首先在Angular 5中引入。在Angular 6中，服务工作者带来了一些错误修复，包括一些新的功能。因此，当我们部署最新版本的应用程序时，我们可能需要停用或卸载现有的服务工作人员。在Angular 5中，这样做并不是直截了当的选择，但Angular 6为这个功能带来了一个名为safety-worker.js的新脚本文件，这个文件实际上是生产包的一部分，它帮助我们取消注册现有的服务工作者S）。

Angular 6现在支持在服务人员中配置导航URL。服务工作人员会将不匹配任何源或数据组的导航请求重定向到指定的索引文件。现在，我们可以在包含所需URL的ngsw-config.json文件中提及一个可选的navigationUrls列表。例如，如果请求的URL与任何正面模式匹配且没有任何导航模式匹配，则它将被视为导航请求并由服务工作人员以正确的方式处理。在Angular 6中，除非服务器重新连接并更新工作，否则服务工作人员将保持当前模式。

3.再见模板元素

一年前，当Angular 4发布时，<template>元素被折旧了。现在是时候告别<template>了，因为它现在已经从Angular 6框架中移除了。我们现在需要使用<ng-tempalate>来代替使用<template>。

4. i18n

Angular 6的主要变化之一是国际化或国际化。在Angular 6中，i18n即将进行运行时渲染，因此不需要为每个语言环境构建一个应用程序。货币管道在Angular 6中得到了改进，因此它具有很大的意义，例如，它不会将每个货币值再加上两位数字。然后它会将货币汇总到合适的位数（例如，它可以是阿拉伯第纳尔的3位数字总结或智利比索的0总结）。如果我们想以编程方式检索这些值，那么我们需要使用i18n函数getNumberOfCurrencyDigits()。有它们也像公开曝光了一些其他的格式化功能 formatDate、 formatCurrency、 formatPercent 和 formatNumber。

5.Ivy：新的渲染引擎

在Angular 6中，Angular团队介绍了他们的第三个渲染引擎Ivy。常春藤是下一代Angular渲染引擎。在Angular以前的一些版本中（Angular 2到Angular 4），Angular使用了一个视图引擎来进行渲染。此渲染引擎体验的引入提高了应用程序的速度并缩小了应用程序的大小。Angular团队期望新的渲染引擎具有相同类型的体验。

Angular将我们的模板编译为等效的TypeScript代码，然后将TypeScript代码编译为JavaScript，然后将结果发送给我们的用户。因此，常青藤渲染器是新的渲染引擎，基本上旨在支持与现有渲染器的向后兼容性，然后专注于提高渲染速度，并优化最终包的大小。在Angular中，它不会是默认的渲染器，但我们可以使用编译器选项手动启用它。这个重要的功能并没有在Angular 6中完全发布，因为它处于实验模式; 除了Angular的下一个版本的完整版本。

6. ngModelChange

在Angular 6之前， ngModelChange 事件在所述表单控件更新之前发布。如果我们有ngModelChange 通过控件检查值的事件的事件处理程序， 则将返回旧值而不是更改的值。现在，在Angular 6中， ngModelChange 在窗体控件中更新了值之后发出了值。

7. ElementRef

在Angular以前的版本中，当我们想创建一个元素在模板中的参考，我们可以使用 @ViewChild 或 @ViewChildren 或直接注射使用ElementRef主机。但是，问题在于ElementRef的 nativeElement 属性类型与其他任何元素一样。但是现在在Angular 6中，如果我们想要，我们可以更严格地使用ElementRef类型。

@ViewChild('login') login: ElementRef<HTMLInputElement>;

ngAfterViewInit() {

this.loginInput.nativeElement.focus();

}

8. Bazel编译器

Bazel编译器实际上是一个构建系统或机制，用于在Google上构建几乎所有的软件。该编译器只重建构建所需的内容。由于源代码经常变化，因此对于每一个小小的变化重建整个应用程序没有任何意义。我们不是重建整个应用程序，而是仅构建实际更改的代码以及取决于这些更改的代码。因此，借助先进的本地和分布式缓存，优化的依赖关系分析和并行执行，我们可以实现快速增量构建。使用Angular 6，我们将拥有此编译器支持。

9. RxJS 6.0

Angular 6现在在内部使用RxJS 6。所以我们需要相应更新我们的应用程序。这些更改为开发人员提供了更高的性能，并且更容易调试AJAX调用堆栈并提高模块性，使其尽可能向后兼容。但RxJS改变了我们导入东西的方式。

在RxJS 5中，您可能正在写作：

import { Observable } from 'rxjs/Observable';

import 'rxjs/add/observable/of';

import 'rxjs/add/operator/map';

const squares$: Observable<number> = Observable.of(1, 2).map(n => n * n);

RxJS 5.5引入了管道操作员：

import { Observable } from 'rxjs/Observable';

import { of } from 'rxjs/observable/of';

import { map } from 'rxjs/operators';

const squares$: Observable<number> = of(1, 2).pipe( map(n => n * n));

RxJS 6.0将进口更改为：

import { Observable, of } from 'rxjs';

import { map } from 'rxjs/operators';

const squares$: Observable<number> = of(1, 2).pipe(map(n => n * n));

所以，根据上面的代码演示，我们需要在我们的Angular 6应用程序中更改RxJS的导入。但是我会说我们现在不需要改变它。因为RxJS发布了一个名为rxjs-compat的库，它允许我们使用旧版本语法的RxJS版本6.0。

10.Tree Shaking

Angular 6从引用服务的模块移动到引用模块的服务，以使Angular应用更小。抖动树是一个构建优化步骤，它试图确保任何未使用的代码不会在我们的最终包中使用。新渲染器将直接生成模板指令，而不是渲染模板数据并将其直接传递给知道如何处理所有内容的解释器。这导致更小的捆绑和更快的启动时间。

在Angular 6中有一种定义可注入服务的新方法。采用这种新方法，我们可以@Injectable() 使用新providedIn 属性直接在装饰器中 注册提供者 。它从我们的应用程序接受'root'作为值或任何模块名称。当我们使用'root'时，这意味着这个injectable将被注册为应用程序中的单例对象，我们不需要将其添加到根模块的提供者中。以同样的方式，如果我们使用 provideIdIn:LoginModule，那么可注射的注册作为提供者 LoginModules 而不添加到模块的提供者。

@Injectable({

providedIn: 'root'

})

export class UserService {}

因此，在上面的章节中，我们将讨论Angular 6的最重要特性。除此之外，还有几个特性，如：

1. 路由器有时会在路由实例化和新的导航请求到达时遇到竞争条件。Angular 6已经解决了这个问题。
2. 避免重写 ngInjectableDef 装饰器中存在的类型。
3. Angular Material Library使用提供30多个UI组件的组件开发工具包（CDK）。CDK还允许我们使用Angular Material构建我们自己的UI组件库。
4. Angular CLI使用称为Schematics的技术生成Angular artifacts。如果您决定创建自己的模板，那么Angular团队已经ng-add 在Angular-CLI中添加了该 命令，让用户可以在Angular应用程序中下载并安装新软件包。
5. 如果用户想要将他们的Angular应用程序从Angular 5升级到Angular 6，Angular团队增加ng-update 了对其Angular-CLI的支持， 这可以让用户更新和升级软件包。
6. Typescript的2.6版本resolveModuleName开始要求传入的路径由“ /' 分隔，而不是”能够处理\“。
7. 改进的装饰器错误消息。
8. 启用最小CLI命令render3应用程序的大小跟踪。
9. Angular团队决定将长期支持（LTE）扩展到从v4开始的所有主要版本。
10. Web pack模块捆绑器已更新至版本4，并提供Angular CLI支持。