We are pleased to announce the release of Angular5.1. This is a small release containing several minor features and bug fixes. We also released version 1.6 of Angular Cli and the first stable release of Angular Material.

New features

  • Angular Material and CDK stable
  • The CLI supports Service workers
  • Improved Universal and AppShell support in the CLI
  • Improved error messages for decorators
  • Support TypeScript2.5

For a complete list of features and bug fixes, see the Angular, Material, and CLI update logs.

Angular Material and CDK stable

After 11 alpha releases, 12 beta releases, and 3 release candidates, we are pleased to be able to mark the 5.0.0 stable version of Angular Material and Angular CDK. Angular Material provides 30 UI components for your Angular app based on Google’s Material Design visual Design language. 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 many GOogle applications, including the GOogle Analytics Suite, the GOogle Cloud Platform developer console, and GOogle Shopping Express.

Starting with this release, Angular Material follows the same semantically oriented philosophy as Angular, with major versions of Angular Materital and Angular CDK being released as major versions for other platforms. Bug-fixed versions will be released in weekly iterations, and later versions will be released when the functionality is complete.

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 new features such as mat-Tree, virtual scrolling, component test suites, and drag and drop.

Service Worker support for CLI1.6

Performance has always been an important goal for Web developers, and in today’s LAN WIFI and mobile networking 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.

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

Learn more about Angular Services on our documentation site.

CLI1.6 improves Universal and App Shell support

In addition, with Angular CLI1.6, it’s better to use Schematics to add Universal to your existing projects and support App shells.

Angular Universal

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

npm generate universal <name>
Copy the code

Replace

with the name you want to give your application. This will take your application, create a generic module, and automatically configure your Angular-cli. json file for you. Then you can skip to step 4 in our guide to use Universal.

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

ng build --app=<name>
Copy the code

App Shell

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

First, make sure you have a RouterModule imported from the NgModule of your application and a RouterModule imported from the module of your application components. The App Shell uses routing to render your App.

Run the following command:

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

Add support for the main application’s All shell to your Angular-cli. json file by passing the app-shell argument. If the Universal application doesn’t pass, a Universal application is created the first time you run Universal Schematic. Route parameters specify the route configuration to be generated during application build. (App Shell needs routing support). The default is /shell.

Once this is done, the application can be built normally using only ng build, and the index.html file will contain the automatically rendered routes.

Improved decorator error messages

Compiler-generated diagnostics have improved significantly, especially when decorators contain unsupported or incorrect expressions.

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

@Component({
  template: genTemplate()
})

Copy the code

This is a previous error:

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
Copy the code

The error has been corrected 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.
Copy the code

Support the TypeScript 2.5

We’ve added TypeScript 2.5 support, which all developers recommend. This TypeScript version 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 don’t support TypeScript 2.6 yet. Our plan is to add support in future releases.

Important: If your code uses Injector.get (Token) and Token has static members, then you will run into TypeScript problems that return type {} instead of Token. You can use injector.get (Token) to get the desired return value.

The original address: https://blog.angular.io/angular-5-1-more-now-available-27d372f5eb4e