This article introduces the new Angular 5.1 features to you and share with you in detail the 5.1 improvements and additions. The following is all content:
New Features
Angular Material and CDK Stable Edition
Support Service Worker in CLI
Improved support for Universal and AppShell in CLI
Improved decorator error message
Support TypeScript 2.5
For a complete list of features and bug fixes, see the update logs for Angular, Material, and CLI.
Angular Material and CDK Stable Edition
After releasing 11 alpha versions, 12 beta versions, and 3 candidate versions, we are happy to be able to mark the stable version of Angular Material and Angular CDK for now. Based on Google's Material Design visual design language, Angular Material provides 30 UI components for your Angular applications. Using the Angular CDK in combination, the 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 have been 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, with the major versions of Angular Material and Angular CDK being released as major versions of other platforms at the same time. The bug fix version will be carried out according to weekly iterations, while the subversion will be released when the feature is completed.
Visit to get documentation, demos and our get-start guide. You can also follow up on our progress on Github, as we will continue to add more class content to the framework. Over the next few months, please pay attention to new mat-tree, virtual scrolling, component test suites, and drag and drop features.
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, while Angular CLI 1.6 includes features that support building applications with this new feature. Use @angular/service-worker to improve the loading performance of your application in browsers that support the API, and to make your application loading experience more like a local app.
Learn more about Angular Service in our documentation website.
CLI1.6 Improves Universal and App Shell Support
Additionally, with the release of Angular CLI 1.6, it is better to add Universal to your existing projects through Schematics and provide support for the App Shell.
Angular Universal
Add Universal to your current CLI project, you can use the following command in your project directory:
npm generate universal <name>
Replace <name> with the name you want to give your application. This will take the application you adopt and create a common module and automatically configure your files for you. You can then skip to step 4 of our guide using Universal.
To build your Universal application, just run the following command:
ng build --app=<name>
App Shell
The additional 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 page. This will give the user a better experience when your application is starting.
First, make sure that in your application NgModule, there is a RouterModule module imported, and there is a <router-outlet></router-outlet> in the module of your application component. App Shell uses routes to render your app.
Run the following command:
ng generate app-shell [ --universal-app <universal-app-name>] [ --route <route>]
Add support for the main application's all shell to your file by passing the app-shell parameter. If the Universal application fails, a Universal application will be created when the Universal Schematic is run for the first time. The routing parameters specify the routing configuration generated during the generation of the application. (App Shell needs to have routing support). The default is /shell.
After completing this step, you only need to use ng build to build the application normally, and the file will contain the routes for automatic rendering.
Improved decorator error message
Diagnoses generated by the compiler have been significantly improved, especially when the decorator contains unsupported or incorrect expressions.
For example: calling a function to handle templates is not supported.
@Component({
template: genTemplate()
})
This is an error that was generated before:
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 , resolving symbol MyComponent in
This error has been improved and clarified the source and nature of the problem.
(9,16): Error during template compile of 'MyComponent'. Function calls are not supported in decorators but 'genTemplate' was called.
Support TypeScript 2.5
We have added support for TypeScript 2.5, which is recommended by all developers. This TypeScript version contains several useful advanced features.
You can upgrade your Typescript via yarn add typescript@'~2.5.3' or npm install typescript@'~2.5.3'.
This update is optional, TypeScript 2.4 continues to support Angular We do not support TypeScript 2.6 yet. Our plan is to add support in future subversions.
<stang>Important Tips:</stang>If your code uses (Token) and the Token has static members, then you will encounter the problem with TypeScript, and the returned type is {} instead of Token. You can use <Token>(Token) to get the winning return value.