Angular-CLI 6 版本新特性一览-JavaScript中文网-JavaScript教程资源分享门户

随着前端技术的不断发展，Angular框架也在不断更新和完善。Angular-CLI（命令行界面）作为一个命令行工具，可以帮助我们以更加高效、规范的方式创建和开发Angular应用程序。在Angular-CLI 6的新版本中，新增加了一些非常有用的特性，本文将为大家一一介绍。

Angular-CLI 6 的新特性

1. Schematics 工具集

Angular-CLI 6引入了Schematics工具集，这是一个基于模板的工具，可帮助你自定义或增强CLI的功能。它可以让你按照预定的格式生成代码，从而提高了项目的规范性和可复用性。

下面是一个示例代码，生成一个新的组件：

ng g c my-component

这个命令将生成一个新的组件，包括 .ts、.html 和 .css 文件，然后自动把组件导入到本地模块中。实现了复用和快速生成代码的效果。

2. 新的工作空间格式

在 Angular-CLI 6 中，工作空间格式得到了更新，它们现在位于单独的根目录下，这使得模块和组件等更容易维护。现在，一个 Angular 项目中可以有多个应用程序，这样就可以把一些公共的业务逻辑进行抽象和共享。

3. 自动生成 Service Worker

Service Worker 是一个浏览器的 API，它可以让你在客户端缓存文件，从而能够在离线时继续使用应用程序。在 Angular-CLI 6 中，Service Worker 的核心代码可以自动生成。只需运行以下命令即可生成一个自带 Service Worker 的应用程序：

ng add @angular/pwa

同时，你可以通过配置它来自定义你的 Service Worker，比如：缓存策略、预缓存和预取资源，进一步提升应用体验。

4. 预启动（Preloading）技术

预启动是一种优化技术，它可以在应用程序加载当中预加载某些内容，以提升用户体验。在 Angular-CLI 6 中，你可以根据你的需求配置预拉取优化。只需在路由上配置 preload 标记即可开启预拉取功能。

{
  path: 'admin',
  loadChildren: './admin/admin.module#AdminModule',
  data: {preload: true}
}

5. 新的文档站点

为了帮助开发者更好地了解 Angular-CLI 升级的内容和使用方法，Angular 团队推出了新的中英双语文档站点。这使得所有关于 Angular-CLI 的文档教程都能更加直观和易于理解，提供了丰富的代码示例和使用案例。

总结

Angular-CLI 6 带来了很多非常实用和有意义的新特性，如 Schematics 工具集、新的工作空间格式、自动生成 Service Worker、优化预拉取等，这些都极大地提高了 Angular 应用的可复用性和效率。同时，文档站点提供了非常优秀的指导和帮助。建议开发者及时从 Angular-CLI 5.x 系列升级到 6.x 系列，以便更好地利用这些新特性来开发更加优秀的Angular 应用。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/659fa3d5add4f0e0ff82f0b6