Angular 5.1 & More Now Available

Go to the profile of Stephen Fluin
Stephen Fluin

We are pleased to announce version 5.1.0 of Angular. This is a minor release containing several smaller features and bugfixes. We are also releasing v1.6 of the Angular CLI, and the first stable release of Angular Material.

New Angular releases to celebrate the holidays!

What’s new?

  • Angular Material & CDK Stable Release
  • Service Worker support in the CLI
  • Improved Universal & AppShell Support in the CLI
  • Improved decorator error messages
  • TypeScript 2.5 support

For the complete list of features and bugfixes please see the Angular, Material, and CLI changelogs.

Angular Material & CDK Stable Release

After 11 alpha releases, 12 beta releases, and three release candidates, we’re happy to now mark the full 5.0.0 release of Angular Material and the Angular CDK, and the graduation of the CDK from Angular Labs. Based on Google’s Material Design visual language, Angular Material offers 30 UI components for your Angular applications. Conjointly, the Angular CDK (Component Dev Kit) provides a set of building blocks to help you build your own custom components without having to solve common problems all over again. These components are already used in production by a number of Google applications, including Google Analytics Suite, Google Cloud Platform Developer Console, and Google Shopping Express.

Starting with this release, Angular Material will be following the same SemVer philosophy as Angular, with major versions of Angular Material and Angular CDK releasing at the same time as major versions of the rest of the platform. Patch releases will follow a weekly cadence, while minor feature releases will become available as features are completed.

Visit material.angular.io for documentation, demos, and our getting started guide. You can also follow our progress on GitHub as we continue to work on further additions to the library. In the coming months, keep an eye out for features like a new mat-tree, virtual scrolling, component test harnesses, and drag-and-drop helpers.

CLI 1.6 Service Worker Support

Performance has always been an important goal for web developers, and it’s especially important in today’s world of flaky WiFi and mobile connections. Modern browsers have a new API for building sites that load reliably and quickly, called the Service Worker API.

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

Learn about getting started with the Angular Service Worker on our documentation site.

CLI 1.6 Improved Universal & App Shell Support

Also with the release of Angular CLI 1.6 comes better support for adding Universal to your existing projects via Schematics, as well as bringing App Shell support.

Angular Universal

To add Universal in your current CLI application, you can now use the following commands in your project:

ng generate universal <name>

Replacing <name> with the name you want to give your universal app. This will take your current application and create a Universal module, and configure your angular-cli.json file automatically for you. You can then skip to step 4 in our guide to using universal.

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

ng build --app=<name>

App Shell

The other feature added is App Shell support; you can now generate and build an application shell, which uses a special universal build to create a static first render of your application in your index.html. This gives users a better experience while your application is being bootstrapped.

First, make sure you have a RouterModule imported in your application’s NgModule, and a <router-outlet></router-outlet> in your application component’s template. App Shell uses the router to render your application.

Then run the following command:

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

This will add support for the app shell to your angular-cli.json main application, using the universal application passed in argument. If the universal app isn’t passed in, it will create a universal application by running the universal schematic first. The route argument specify the route to generate during build (router is required for App Shell support). By default this is /shell.

After this step, simply build your application as normal using ng build and the index.html file will include the route from your application automatically rendered for you.

Improved decorator error messages

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

For example, calling a function to produce a template is not supported:

This would previously produce an 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

This error has been improved and clarifies the source and nature of the problem:

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

TypeScript 2.5 support

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

You can upgrade TypeScript by running yarn add typescript@'~2.5.3'or npm install typescript@'~2.5.3'.

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

Important Note: if your code uses Injector.get(Token) where Token has static members, you’ll run into an issue with TypeScript where the returned type is {} rather than Token. You can instead use Injector.get<Token>(Token) to get the correct return type.