DEV Community

loading...

Angular 11 Released

thisdotmedia_staff profile image This Dot Media Originally published at labs.thisdot.co on ・3 min read

I'm so excited to see the recent release of Angular v11.0.0!

There are lot of improvements especially with regards to tooling.

What's new in the release

CLI: Inlining of Google Fonts

First, contentful paint is always the critical part for performance. Eliminate render-blocking resources is an important guide to improve the FCP performance, and Angular is also working on following the guide to inline the blocking resources.

In Angular v11, the Google Fonts will be inline by adding the following options to the angular.json.

"optimization": {
  "fonts": true
}
Enter fullscreen mode Exit fullscreen mode

And without this option, your Google font importing looks like this.

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
Enter fullscreen mode Exit fullscreen mode

After activating this optimization, it looks like this.

<style>
  @font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/materialicons/v55/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2) format('woff2');
  }

  .material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
  }
</style>
Enter fullscreen mode Exit fullscreen mode

CLI: Hot Module Replacement Support

Angular supports HMR for a while, but to make it work requires configuration and code changes, which is not a good developer experience. From v11, it is simple to enable the HMR support by using

ng serve --hmr
Enter fullscreen mode Exit fullscreen mode

Now, the live reload will also keep the state of your application, so it is much easier to apply some small updates to your application.

CLI: Experimental Webpack 5 support

Webpack 5 supports many new features such as:

  • Module federation which is a new way to develop micro-frontend
  • Disk caching for faster build
  • Better tree shaking

Now, you can opt-in the Webpack 5 by adding the following section in the package.json file.

"resolutions": {
     "webpack": "5.4.0"
}
Enter fullscreen mode Exit fullscreen mode

CLI: ng build better output

Now, running ng build will generate more clear output.

ng-build-angular-11

CLI: ng serve ask for new port

It is a really nice feature! If the 4200 port is in use, ng serve will ask you for a different port without re-run with --port option.

? Port 4200 is already in use.
Would you like to use a different port? (Y/n)

**Angular Live Development Server is listening on localhost:60335, open your browser on http://localhost:60335/**
Enter fullscreen mode Exit fullscreen mode

CLI: Lint

Now, Angular uses TSLint as the default linter, and since TSLint is deprecated now, Angular uses angular-eslint to replace TSLint/Codelyzer. Here is the migration guide.

Features: Trusted Types support

Trusted Types is a new solution to prevent DOM-based cross-site scripting vulnerabilities.

Consider the following example:

anElement.innerHTML = location.href;
Enter fullscreen mode Exit fullscreen mode

With Trusted Types enabled, the browser throws a TypeError and prevent this behavior. To tell the browser this is a trusted safe operation, you need to do it like this:

anElement.innerHTML = aTrustedHTML;
Enter fullscreen mode Exit fullscreen mode

Note that the aTrustedHtml is a TrustedHtml object.

It looks similar to the DomSanitizer's functionality, so now Angular permits support to allow such an operation to return a Trusted Types.

Tooling

  • Typescript is updated to v4.0

Deprecations

  • IE 9,10 and IE mobile are no longer supported.
  • ViewEncapsulation.Native has been removed.
  • async test helper function is renamed to waitForAsync.

For the full deprecation list, please check here.

Triaging issues and PRs

The Angular team put forward a significant effort to go through all the issues/PRs now opened in the GitHub, and check/triage these issues to make sure that they are at the correct state. It greatly helps the community to get better/faster support and feedback. I am so honored to also take part in this process.

How to update to v11

It is very simple. Just use the Angular CLI.

ng update @angular/cli @angular/core
Enter fullscreen mode Exit fullscreen mode

You can find more information from update.angular.io/ and also from the official blog.

Discussion

pic
Editor guide