Detailed interpretation of the new features of Angular5.1

This article mainly introduces the new features of Angular5.1 and related usage. Friends who need it can refer to it.

This article introduces the new features of Angular5.1 to share with you in detail the improvements and additions of 5.1. The following is the full content:

New features

Angular Material and CDK stable version

Support Service Worker in CLI

Improved support for Universal and AppShell in CLI

Improved error messages for decorators

Support for TypeScript 2.5

For a complete list of features and bug fixes, please See the changelog for Angular, Material and CLI.

Angular Material and CDK Stable

After releasing 11 alpha versions, 12 beta versions, and 3 release candidates, we are excited to now mark 5.0 for Angular Material and Angular CDK .0 stable version. Based on Google's Material Design visual design language, Angular Material provides 30 UI components for your Angular applications. Combined with Angular CDK, Angular CDK (Component Development Kit) provides a set of building blocks that help you build your own custom components without having to solve common problems again. These components are already used in production by many Google applications, including the Google Analytics suite, the Google Cloud Platform Developer Console, and Google Shopping Express.

Starting from this version, Angular Material will follow the same semantic philosophy as Angular, and the main version of Angular Material and Angular CDK will be released as the main version of other platforms at the same time. Bug fix releases will be made in weekly iterations, while minor releases will be released as features are completed.

Visit matrial.angular.io for documentation, demos, and our getting started guide. You can also follow our progress on Github as we continue to add more classes to the framework. In the coming months, keep an eye out for things like new mat-tree, virtual scrolling, component test suites, and drag-and-drop functionality.

Service Worker support for CLI1.6

Performance has always been an important goal for web developers, and in today's LAN WIFI and mobile network events, performance has always been an important goal. Modern browsers have a new API for building reliable and fast-loading sites called the Service Worker API.

Angular 5.0.0 comes with a new Service Worker implementation customized for Angular applications, and Angular CLI 1.6 includes support for building applications that take advantage of this new feature. Using @angular/service-worker can improve the loading performance of your application in browsers that support this API, and make the loading experience of your application more like a native app.

CLI1.6 Improved Universal and App Shell support

In addition, with the release of Angular CLI1.6, it is better to add Universal to your existing projects through Schematics and provide App Shell provides support.

Angular Universal

To add Universal to your current CLI project, you can use the following command in your project directory:

npm generate universal <name>

Replace 8a11bc632ea32a57b3e3693c7987c420 with the name you want to give your application. This will take your adopted application and create a common module and automatically configure your angular-cli.json file for you. You can then skip to step 4 in our guide to using Universal.

To build your Universal app, just run the following command:

ng build --app=<name>

App Shell

An additional added feature is support for App Shell . Now you can generate and build an application shell that uses Universal to build a static first render for your application in your index.html page. This gives the user a better experience when your application is launching.

First, make sure there is a RouterModule module imported in the NgModule in your application, and there is a b06060c1b765d597eda031c226772d27d643f9f2456fe4db0e530134a61924e2 in the module of your application component. App Shell uses routing to render your app.

Run the following command:

ng generate app-shell [ --universal-app <universal-app-name>] [ --route <route>]

Add support for all shells for the main application to your angular-cli.json file by passing the app-shell parameter. If the Universal application does not pass, a Universal application will be created the first time Universal Schematic is run. Routing parameters specify the routing configuration generated during application build. (App Shell requires routing support). The default is /shell.

After completing this step, just use ng build to build the application normally, and the index.html file will contain automatically rendered routes.

Improved decorator error messages

The diagnostics produced by the compiler have been significantly improved, especially when decorators contain unsupported or incorrect expressions formula time.

For example: calling a function to process a template is not supported.

@Component({
 template: genTemplate()
})

This is an error that would previously occur:

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 components.ts, resolving symbol MyComponent in components.ts

This error has been improved and the source and nature of the problem clarified.

component.ts(9,16): Error during template compile of 'MyComponent'.
 Function calls are not supported in decorators but 'genTemplate' was called.

Support for TypeScript 2.5

We have added support for TypeScript 2.5, which is recommended by all developers. This version of TypeScript includes several useful advanced features.

You can upgrade your Typescript by yarn add typescript@'~2.5.3' or npm install typescript@'~2.5.3'.

This update is optional, TypeScript 2.4 continues to support Angular 5.X. We do not yet support TypeScript 2.6. Our plan is to add support in a future minor release.

a7d71c5568cd0c774b4c2d188d23325cImportant note:a76bcb5cf2f22c4f8daeb0ab5ac42844If your code uses injector.get(Token) and Token has static members, then you will encounter TypeScript problems and the returned type is {} Instead of Token. You can use Injector.get42e4dd2825ec91a3f52b146cc8a24e44(Token) to get the desired return value.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Related usage of js array reduce

How to use the replace function in javascript

How to implement the audio playback function using JavaScript

How to implement the copy function using js code

How to implement js using tangram.js library Class

How to implement delayed loading of non-first-screen images in JS

How to prevent repeated rendering using React

How to implement directive function in vue

The above is the detailed content of Detailed interpretation of the new features of Angular5.1. For more information, please follow other related articles on the PHP Chinese website!