Original Address: https: //blog.angular.io/version-8-of-angular-smaller-bundles-cli-apis-and-alignment-with-the-ecosystem-af0261112a27

Angular 8 - a smaller package, CLI API and consistent with the ecological

Angular 8 is now released! This is an important release across the entire platform, including the frame, Angular Material, synchronized with the master version of the CLI. This release improves application startup time on a modern browser, CLI provides a development of a new API, kept pace with the industry Angular ecological and more new Web standards.

How to upgrade to version 8

Access update.angular.io can get detailed information and guidance. For most developers, as long as one of the following commands to complete the upgrade:

update @ angular / angular @ cli / core

Default distinction load

Load distinction is a browser-based process their own abilities between modern or legacy JavaScript choice. Now, the default implementation of modern (es2015) and legacy (es5) to build your application, we can derive the benefits. When the user loads an application, which can be used to automatically build the package desired.

If you use the ng updatecommand, we will upgrade you tsconfig.jsonto help you benefit from it. We will check your CLI tsconfig.jsonin the targetJavaScript level to decide whether to benefit from the distinction Loading.

{
  "compilerOptions": {
  …
  "module": "esnext",
  "moduleResolution": "node",
  …
  "target": "es2015",
  …
},

When targetset es2015, we will generate and mark the two release package.

At runtime, the browser uses the <script>attribute on the element to load the correct package.

<script type="module" src="..."> Load modern version of JavaScript
<script nomodule src="..."> Load legacy version of Javascript

For angular.io , for a modern browser, we saved more than 40Kb initialization packet size. By feedback from the community, we hear the application typically saves 7--20% of the size of the gain acquired based on the characteristics of modern JavaScript.

Using dynamic routing imported configuration

We strongly recommend the use of routervarious parts of the delay in loading the application. This is done by using the routing configuration loadChildrento achieve keywords.

Formerly it looks like this:

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

The syntax is Angular tailoring syntax, and tool chain build together. In Angular 8, we moved to the industrial standard Dyanmic Imports .

Now, use this:

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

The CLI builder API

And Schematics allows you to take advantage of ng new, ng generate, ng adand ng updatein the same way, we released a new builder API, allowing you to use ng build, ng testand ng runto perform a build and release you would expect.

Please check 我们关于新 API 的博客

Or read:API 文档

We also have begun to benefit from cooperation with these API cloud providers. Now you can try the latest version of AngularFire , it adds a ng deploycommand, making the build and release to Firebase easier than ever:

the angular add @ / fire 
of my run-app: deploy

Once installed, the command will be deployed to build and distribute applications through AngularFire the same time.

CLI in the workspace API

Schematics developers previously used the older and have to manually modify their angular.jsonfiles to modify the workspace configuration. Use 8.0, we introduced a new API makes the document easier to read and modify.

Refer to the Workspace API

Web Worker Support

If you need to make any CPU-intensive processing time, Web worker is a great way to speed up the application. Web worker allows you to transfer the work to a background thread, such as image or video processing, we angular.io use Web worker search index within the application.

Now, you can generate a Web worker through the CLI. Add worker to the project, you can do:

WebWorker generate a my-worker

Once you have a Web worker, you can normally use it in an application, CLI can also help you pack it properly and code division.

const worker = new Worker('./my-worker.worker', { type: 'module'} );

Please read the web worker in the Angular CLI

AngularJS migration improvements

If you use the $ location service applications in AngularJS, Angular now available LocationUpgradeModule, allowing unified Location Services switch from AngularJS of Angular $ location to the Locationservice. This should be improved and need to use Angular AngularJS applications at the same time in the application.

Please refer Unified Angular Location Service

We have also provided information on the delay in loading Angular best practices document AngularJS application part, first makes use of common functions easily migrate your applications to load only a subset of AngularJS.

Please refer to Lazy Loading AngularJS

The new manual is not recommended

Maintain the stability of the semantic version we offer a higher level across major versions. For our Public API, we provide N + 2 support. This means that if a feature is not recommended to start from 8.1, we will continue to support in the next major release of two (9 and 10). For example, we do not recommend in version 8 platform-webworker.

We make it easier to find in the Angular not recommend the use of content and delete it. Not recommended for a list of all the functions, please refer to the new is not recommended to use manual

Ivy & Bazel

We know there are a lot of expectations for the coming of the optional preview. We will be individually updated in next week's blog,

Angular 8 release