Angular5.1新功能分享

本文为您深入了Angular 5.1的新功能及其相关应用。以下是为您详细解读的内容：

一、全新特性概述

随着Angular 5.1的发布，我们迎来了一系列激动人心的新特性，包括Angular Material和CDK的稳定版、CLI中支持Service Worker、改进了Universal和AppShell的支持、改进了装饰器的错误信息以及支持TypeScript 2.5等。

二、Angular Material和CDK的稳定版

在经历了多次alpha版本和beta版本的迭代之后，Angular Material和CDK终于迎来了5.0.0的稳定版。基于Google的Material Design视觉设计语言，Angular Material为开发者提供了30个UI组件，以便在Angular应用中使用。而Angular CDK则提供了一组构建模块，帮助开发者创建自定义组件，无需重复解决常见问题。值得一提的是，这些组件已经被广泛应用于Google的多个产品，如Google Analytics套件、Google云平台开发人员控制台以及Google Shopping Express等。

从Angular 5.1开始，Angular Material将遵循与Angular相同的语义化版本发布哲学。我们还关注新的mat-tree、虚拟滚动、组件测试套件以及拖放功能等未来更新内容。

三、CLI中的Service Worker支持

在现代浏览器中，Service Worker API已成为构建可靠且快速加载站点的新API。Angular 5.0.0带来了新的Service Worker实现，而Angular CLI 1.6则提供了支持这一新特性的功能。通过使用@angular/service-worker，可以在支持该API的浏览器中提升应用的加载性能，使加载体验更接近本地应用。有关Service Worker的更多内容，请查阅我们的文档网站。

四、CLI中改进了Universal和AppShell的支持

随着Angular CLI 1.6的发布，我们可以更好地将Universal添加到现有的项目中，并为App Shell提供支持。

对于Angular Universal，只需在项目目录中使用命令：npm generate universal ，将替换为您的应用程序名称。这将采用您的应用程序并创建一个通用模块，为您自动配置angular-cli.json文件。然后，您可以按照指南中的步骤使用Universal。要构建您的Universal应用程序，只需运行ng build --app=命令。

而对于App Shell，我们提供了对其的支持。现在，您可以生成并构建一个应用shell，它使用Universal为您的应用程序创建一个静态渲染，呈现在您的index.html页面中。这将在您的应用程序启动时为用户提供更好的体验。

Angular 5.1带来了许多令人兴奋的新特性和改进，旨在帮助开发者构建更高效、更可靠、更吸引人的Web应用程序。我们期待您在实践这些新特性时能够发现它们的价值，并为您的应用程序带来更好的用户体验。为了深入了解这些新特性和如何充分利用它们，请访问我们的官方网站、文档和GitHub页面，我们将持续为框架添加更多内容。确保你的Angular应用中的NgModule已经导入了RouterModule模块，并在组件模块的模板中包含了``。App Shell利用路由来动态渲染你的应用。

执行以下命令：

ng generate app-shell [ --universal-app ] [ --route ]

通过运行带有app-shell参数的命令，将为你的主应用程序添加对所有shell的支持到angular-cli.json文件中。如果未指定Universal应用，则在第一次运行Universal Schematic时将会创建一个。路由参数用于指定在生成应用期间所使用的路由配置。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 ponents.ts, resolving symbol MyComponent in ponents.ts

现在，错误信息已经得到了改善，更清楚地指出了问题的来源和性质：

ponent.ts(9,16): Error during template pile of 'MyComponent'.

Function calls are not supported in decorators but 'genTemplate' was called.

支持TypeScript 2.5

我们现已支持TypeScript 2.5，这是所有开发人员的推荐版本，包含了一些高级功能。你可以通过yarn add typescript@'~2.5.3'或npm install typescript@'~2.5.3'来升级你的TypeScript版本。这个更新是可选的，Angular 5.X仍然支持TypeScript 2.4。我们计划在未来的版本中支持TypeScript 2.6。