Angular5.1新功能分享

本篇文章通过介绍angular5.1新特性给大家详细分享了的5.1改进和增加的内容，以下是全部内容：

新特性

angular material和cdk稳定版

cli中支持service worker

在cli中改进了universal和appshell的支持

改进了装饰器的错误信息

支持typescript2.5

有关功能和bug修复的完整列表，请参阅angular，material和cli的更新日志。

angular material和cdk稳定版

在发布了11个alpha版本，12个beta版本以及3个候选版本之后，我们很高兴现在能够标记angular material和angular cdk的5.0.0的稳定版。基于google的material design视觉设计语言，angular material提供了30个ui组件给你的angular应用。组合使用angular cdk，angular cdk（组件开发工具包）提供了一组构建模块，帮组您构建自己的定制组件，而不需要再次解决常见问题。这些组件已经被许多google应用程序（包括google analytics套件，google云平台开发人员控制台以及google shopping express）用于生产。

从这个版本开始，angular material将遵循与angular相同的语义化哲学，主版本的angular materital和angular cdk同时作为其它平台的主版本发布。bug修复的版本将按照每周的迭代进行，而次版本将在功能完成时发布。

访问matrial.angular.io获取文档，演示和我们的入门指南。你还可以在github上跟进我们的进度，因为我们将继续为框架添加更多类容。在接下来的几个月中，请关注诸如新的mat-tree，virtual scrolling，组件测试套件以及拖放功能。

cli1.6的service worker支持

性能一直是web开发人员的一个重要目标，在今天的局域网wifi和移动网络事件中，性能一直是一个重要的目标。现代浏览器有一个新的api用于构建可靠且快速加载的站点，称为service worker api。

angular5.0.0附带了一个为angular应用程序定制的新的service worker实现，而angular cli 1.6包含了支持利用这个新特性构建应用的功能。使用@angular/service-worker可以提升你的应用的加载性能在支持该api的浏览器中，以及使你的应用的加载体验更像是本地app。

在我们的文档网站中，学习更多关于angular service的内容。

cli1.6 改进universal和app shell支持

此外，随着angular cli1.6的发布，更好的通过schematics将universal添加到你现有的项目中，并为app shell提供支持。

angular universal

添加universal到你当前的cli项目中，你可以在你的项目目录下使用下面的命令：

npm generate universal <name>

用你想给你的应用程序的名字替换<name>。这将会采用你采用的应用程序，并创建一个通用的模块，并为你自动配置你的angular-cli.json文件。然后你可以跳到我们的指南中的第4步使用universal。

要构建你的universal应用，只需要运行以下命令：

ng build --app=<name>

app shell

额外添加的功能是对app shell的支持。现在你可以生成和构建一个应用shell，它使用universal来为你的应用构建一个静态的首次渲染在你的index.html页面中。当你的应用程序正在启动时，这会给用户更好的体验。

首先，确保在你的应用中的ngmodule中有一个routermodule的模块被导入，以及有一个<router-outlet></router-outlet>在你应用组件的模块中。app shell使用路由来渲染你的应用。

运行以下命令：

ng generate app-shell [ --universal-app <universal-app-name>] [ --route <route>]

通过传递app-shell参数，将对主应用程序的all shell的支持添加到你的angular-cli.json文件中。如果universal应用没有通过，则第一次运行universal schematic的时候会创建一个universal应用。路由参数指定了在生成应用期间生成的路由配置。（app shell需要有路由的支持）。默认是/shell。

完成这一步之后，只需要使用ng build就可以正常构建应用程序，index.html文件将包含自动渲染的路由。

改进的装饰器错误信息

由编译器产生的诊断已经得到了明显的改善，特别是当装饰器包含不支持或不正确的表达式的时候。

例如：调用一个函数来处理模板是不支持的。

@component({
 template: gentemplate()
})

这是以前会产生的错误：

error encountered resolving symbol values statically. calling function ‘gentemplate', function calls are not supported. consider replacing the function or lambda with a reference to an exported function, resolving symbol mycomponent in components.ts, resolving symbol mycomponent in components.ts

这个错误已经得到改善，并澄清了问题的来源和性质。

component.ts(9,16): error during template compile of 'mycomponent'.
 function calls are not supported in decorators but 'gentemplate' was called.

支持typescript 2.5

我们已经添加了typescript 2.5的支持，这是所有的开发人员推荐的。这个typescript版本包含了几个有用的高级功能。

你可以升级你的typescript通过yarn add typescript@'~2.5.3'或者npm install typescript@'~2.5.3'。

这个更新是可选的，typescript 2.4继续支持angular 5.x我们还不支持typescript 2.6。我们的计划实在未来的次版本中添加支持。

<stong>重要提示：</stong>如果你的代码使用injector.get(token)，token有静态成员，那么你将遇到typescript的问题，返回的类型是｛｝而不是token。你可以使用injector.get<token>(token)来获得争取的返回值。