angular 8 升级_Angular 8：升级和新功能摘要

青旅半醒 2022-11-27 04:27 260阅读 0赞

angular 8 升级

[Angular 8 has arrived][] and with it a bunch of workflow and performance improvements. Like we did for the [previous][] [few][] [releases][], let’s go over what’s new with Angular 8 as well as how to go about upgrading your Angular 7 apps over to Angular 8.

[Angular 8已经到来，][Angular 8 has arrived]并带来了许多工作流程和性能改进。 就像我们[之前][previous] [几个][few] [版本][releases]所做的一样，让我们看一下Angular 8的新功能以及如何将Angular 7应用程序升级到Angular 8。

## Angular 8发布亮点 **(**Angular 8 Release Highlights**)** ##

I’d say that the number of apparent new features in Angular 8 are limited, but there are still a few goodies indeed:

我会说Angular 8中明显的新功能数量有限，但是确实还有一些好处：

### 差分加载 **(**Differential loading**)** ###

Your Angular 8 apps will now be automagically more performant, thanks to differential loading.

由于差异加载，您的Angular 8应用现在将自动获得更高的性能。

With differential loading, two bundles are created when building for production: a bundle for modern browsers that support ES2015+ and a bundle for older browsers that only support the ES5 version of JavaScript. The correct bundle will be loaded automatically by the browser, thanks to the support of [ES6 modules in newer browsers][].

使用差异加载时，在为生产而构建时会创建两个捆绑软件：一个用于支持ES2015 +的现代浏览器的捆绑软件，一个用于仅支持ES5版本JavaScript的较旧浏览器的捆绑软件。 由于[较新的浏览器中][ES6 modules in newer browsers]支持[ES6模块，][ES6 modules in newer browsers]因此浏览器会自动加载正确的捆绑软件。

This new feature results in the largest single performance improvement for Angular v8. Newer browsers will be able to load less code and load a much smaller amount of polyfills.

这项新功能可最大程度地提高Angular v8的单一性能。 较新的浏览器将能够加载更少的代码，并加载更少的polyfill。

You don’t have to do anything special to benefit from differential loading, the `ng build` command with the `--prod` flag will take care of bundling everything so that differential loading is working out of the box:

您不必做任何特殊的事情来受益于差异加载，带有`--prod`标志的`ng build`命令将负责捆绑所有内容，以便差异加载开箱即用：

$ ng build --prod

### 懒惰路线的动态导入 **(**Dynamic imports for lazy routes**)** ###

[Lazy-loaded routes][] now use the standard [dynamic import][] syntax instead of a custom string. This means that TypeScript and linters will be better able to complain when modules are missing or misspelled.

[延迟加载的路由][Lazy-loaded routes]现在使用标准[动态导入][dynamic import]语法而不是自定义字符串。 这意味着当模块丢失或拼写错误时，TypeScript和linters将能够更好地进行投诉。

So a lazy-loaded import that looked like this:

因此，一个延迟加载的导入看起来像这样：

{ path: '/cart', loadChildren: './cart/cart.module#CartModule' }

Will now look like this:

现在将如下所示：

{ path: `/cart`, loadChildren: () => import(`./cart/cart.module`).then(m => m.CartModule) }

The change in syntax will be taken care of for you if you’re using the `ng upgrade` command to upgrade your app.

如果您使用`ng upgrade`命令来升级应用程序，那么语法更改将由您来解决。

### CLI工作流程的改进 **(**CLI workflow improvements**)** ###

The CLI is continuing to improve, and now the `ng build`, `ng test` and `ng run` are equipped to be extended by 3rd-party libraries and tool. For example, AngularFire already makes use of these new capabilities with a `deploy` command.

CLI仍在不断改进，现在可以通过第三方库和工具扩展`ng build` ， `ng test`和`ng run` 。 例如，AngularFire已经通过`deploy`命令利用了这些新功能。

### Ivy和Bazel呢？ **(**What about Ivy and Bazel?**)** ###

We’ll have to wait a little bit more for [Ivy][], the new rendering engine, and [Bazel][], the new build system, to be ready for official use with Angular. An opt-in preview of the two should be available shortly.

我们需要再等一会儿才能使用新的渲染引擎[Ivy][]和新的构建系统[Bazel][] ，以准备与Angular正式使用。 两者的选择启用预览应该很快就会出现。

## 从Angular 7升级到Angular 8 **(**Upgrading from Angular 7 to Angular 8**)** ##

As it has been the case for the previous few releases, upgrading an app from Angular 7 over to Angular 8 is a breeze. That’s especially true if you’ve already migrated over to using the new [HttpClient][] and to [RxJS 6][].

与以前的几个发行版一样，将应用程序从Angular 7升级到Angular 8轻而易举。 如果您已经迁移到使用新的[HttpClient][]和[RxJS 6的][RxJS 6]话，那就尤其如此。

In the simplest of cases, you only have one command to run to upgrade over to Angular 8:

在最简单的情况下，只有一个命令可以运行以升级到Angular 8：

$ ng update @angular/cli @angular/core

With that command, your lazy loaded route imports will be migrated to the new import syntax automatically.

使用该命令，您的延迟加载的路由导入将自动迁移到新的导入语法。

A few things to keep in mind about the upgrade process:

升级过程中要注意以下几点：

*  Some new syntax errors might pop out. That’s due to Angular now using TypeScript 3.4, which might surface some issues that were not highlighted before.
    
    可能会弹出一些新的语法错误。 这是由于Angular现在使用TypeScript 3.4，它可能会出现一些以前未突出显示的问题。
 *  You’ll want to make sure you’re using Node.js version 12 or later. You can check which version of Node you’re using by running `$ node -v`. And if you need to get the newest version, just head over to the [official download page][] for Node.
    
    您需要确保使用的是Node.js 12版或更高版本。 您可以通过运行`$ node -v`检查所使用的Node版本。 如果需要获取最新版本，请直接访问Node的[官方下载页面][official download page] 。

### 升级角材料 **(**Upgrading Angular Material**)** ###

If your app makes use of Angular Material, you’ll want to follow with this command:

如果您的应用使用了Angular Material，则需要遵循以下命令：

$ ng update @angular/material

This command will also take care of changing your Angular Material component imports to each specific component rather than importing from the global `@angular/material`.

此命令还将注意将Angular Material组件的导入更改为每个特定的组件，而不是从全局`@angular/material`导入。

If you’re trying to upgrade from a different version than Angular 7 you can use the official [Angular upgrade guide][] for instructions on how to proceed.

如果您尝试从Angular 7以外的其他版本升级，则可以使用官方的[Angular升级指南][Angular upgrade guide]获取有关如何进行操作的说明。

## 了解更多 **(**Learning More**)** ##

*  Angular 8 now depends on TypeScript 3.4. Check out the [release highlights][] to know what has changed with this new version of TypeScript.
    
    Angular 8现在取决于TypeScript 3.4。 查看[发行要点，][release highlights]以了解此新版本的TypeScript发生了什么变化。
 *  If your app uses Angular Material, I encourage you to have a glance at the [release notes for v8][].
    
    如果您的应用程序使用Angular Material，我建议您看一下[v8][release notes for v8]的[发行说明][release notes for v8] 。
 *  [Stephen Fluin][] from the Angular team has put together a [series][] [of][] [videos][] that demonstrate the new features in Angular 8.
    
    [斯蒂芬Fluin][Stephen Fluin]从角团队已建立了[一系列][series] [的][of] [影片][videos] ，展示在角8的新功能。

> 翻译自: [https://www.digitalocean.com/community/tutorials/angular-angular-8][https_www.digitalocean.com_community_tutorials_angular-angular-8]

angular 8 升级

[Angular 8 has arrived]: https://blog.angular.io/version-8-of-angular-smaller-bundles-cli-apis-and-alignment-with-the-ecosystem-af0261112a27
[previous]: https://alligator.io/angular/angular-7/
[few]: https://www.digitalocean.com/community/tutorials/angular-angular-6
[releases]: https://www.digitalocean.com/community/tutorials/angular-angular-5
[ES6 modules in newer browsers]: https://jakearchibald.com/2017/es-modules-in-browsers/
[Lazy-loaded routes]: https://www.digitalocean.com/community/tutorials/angular-lazy-loading
[dynamic import]: https://developers.google.com/web/updates/2017/11/dynamic-import
[Ivy]: https://blog.nrwl.io/understanding-angular-ivy-incremental-dom-and-virtual-dom-243be844bf36
[Bazel]: https://github.com/bazelbuild/bazel
[HttpClient]: https://www.digitalocean.com/community/tutorials/angular-httpclient-intro
[RxJS 6]: https://www.digitalocean.com/angular/angular-6/#upgrading
[official download page]: https://nodejs.org/en/download/current/
[Angular upgrade guide]: https://update.angular.io/
[release highlights]: https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-4.html
[release notes for v8]: https://github.com/angular/components/releases/tag/8.0.0
[Stephen Fluin]: https://twitter.com/stephenfluin
[series]: https://www.youtube.com/watch?v=RBzogbjk3t4
[of]: https://www.youtube.com/watch?v=jPXl7sCPCOA
[videos]: https://www.youtube.com/watch?v=lEmN5YpcFKQ
[https_www.digitalocean.com_community_tutorials_angular-angular-8]: https://www.digitalocean.com/community/tutorials/angular-angular-8