The magic of Angular 5.0

No, no, no, do you know Angular? While many people are not very familiar with Angular1, Angular5 has come out. Today I will give you a good introduction to Angular5. What changes have been made in previous versions?

Build Optimizer

Starting in 5.0.0, product builds executed via the CLI use the build optimizer by default.

The build optimizer is a tool in the CLI that can make the built package smaller based on our understanding of your Angular application.

Building an optimizer has two main tasks. First, mark certain parts of your application as pure so that existing tools can use it to improve the optimization effect of "tree shaking" and remove unnecessary things from the application.

Secondly, the build optimizer will remove Angular decorator code from your app. Decorators are only used by the compiler and are not used during runtime and can be deleted. Both of the above optimizations can reduce the size of the generated JS package and speed up application startup.

Angular Universal state transfer API and support for DOM

This makes it easier to share application state between the server and the client.

Angular Universal is a project that helps developers perform server-side rendering (SSR). The HTML generated by server-side rendering is friendly to spiders and crawlers that do not support JS, and helps improve user-perceived performance.

In 5.0.0, the development team added ServerTransferStateModule and the corresponding BrowserTransferStateModule. This module can help developers add relevant information to the content generated by server-side rendering and then send it to the client to avoid repeated generation. This is useful for scenarios where data is retrieved via HTTP. By transferring status from the server to the client, the developer does not have to make a second HTTP request. Documentation for the status transfer will be released in a few weeks.

The Angular Universal team also added the platform server Domino to the platform server. Domino supports more out-of-the-box DOM operations in a server-side environment, which can improve our support for non-server-side third-party JS and component libraries.

Compiler improvements

To support incremental compilation, we have improved the Angular compiler. As a result, rebuilding is accelerated, especially for product builds and AOT builds, and the effect is more obvious. We also enhanced the decorator to reduce package size by removing whitespace.

TypeScript conversion

Now, the underlying working mechanism of the Angular compiler is TypeScript conversion, making incremental rebuilds much faster. TypeScript conversion is a new feature of TypeScript 2.3 that allows us to dive into the standard TypeScript compilation pipeline.

With the AOT tag open, you can use the above mechanism by running ng serve.

ng serve --aot

I suggest everyone give it a try. This configuration will become the default for the CLI in the future. Many projects have performance issues involving thousands of components, and we hope projects of all sizes can benefit from these improvements.

When performing an incremental AOT build of https://angular.io, the new compiler pipeline can save 95% of the build time (test results on our development machine are from more than 40 seconds reduced to less than 2 seconds).

Our goal is to make AOT compilation fast enough for developers to use it for development. Now, we have broken into under 2 seconds, so AOT may be enabled by default in future CLIs.

As a transition step to this conversion, we no longer need genDir, and outDir has also changed: now, we will type all the files generated for the package into node_modules.

Keep whitespace

In the past the compiler would faithfully reproduce and include tabs, newlines, and whitespace in templates. You can now choose whether to include whitespace in components and applications.

This configuration can be specified in the decorator of each component, and the current default value is true.

@Component({
  templateUrl: 'about.component.html',
  preserveWhitespaces: false
}
export class AboutComponent {}

Or you can configure it globally in tsconfig.json, where the default value is also true.

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "baseUrl": "./",
    "module": "es2015",
    "types": []
  },
  "angularCompilerOptions": {
    "preserveWhitespaces": false
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ]
}

The general rule is that component-level configuration should override application-level configuration. The development team plans to change the default value to false in the future to save space for developers by default. Don't worry about your

 tags, the compiler will handle them intelligently. </p><p>Improved decorator support</p><p>Now supports <a href="http://www.php.cn/wiki/81.html" target="_blank">expression </a>lowering (expression lowering) in Lambda and object literal useValue, useFactory and data decorators. This makes it possible to use values ​​that can only be lowered in decorators that can be evaluated at runtime. </p><p>So now you can use Lambda functions instead of named functions. In other words, executing the code will not affect your d.ts or your external API. </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false">Component({
  provider: [{provide: SOME_TOKEN, useFactory: () => null}]
})
export class MyClass {}