What's new in Angular CLI 11.0?

Angular CLI 11.0.0 is out!✨

If you want to upgrade to 11.0.0 without pain (or to any other version, by the way), I have created a Github project to help: angular-cli-diff. Choose the version you’re currently using (10.0.0 for example), and the target version (11.0.0 for example), and it gives you a diff of all files created by the CLI: angular-cli-diff/compare/10.0.0…11.0.0. It can be a great help along with the official ng update @angular/core @angular/cli command. You have no excuse for staying behind anymore!

Let’s see what we’ve got in this release.

Webpack 5 (work in progress)

The CLI team is working hard to make the CLI compatible with Webpack 5. The current version still uses Webpack 4, but the CLI repository now runs with both versions. We can hope for webpack 5 compatible CLI in a near future. You can force the dependency to Webpack 5 if you want to give it a try.

ng build

The build output is now more nicely formatted (and closer to the Webpack 5 output):

✔ Browser application bundle generation complete.
✔ Copying assets complete.
✔ Index html generation complete.

Initial Chunk Files               | Names         |      Size
main.28cb3ea4da7f9d7cca5e.js      | main          | 447.23 kB
styles.3d6bb69e3d075769b349.css   | styles        | 170.20 kB
polyfills.cb1c880f671635c7d16a.js | polyfills     |  36.39 kB
runtime.b605f61c0872277488c4.js   | runtime       |   2.28 kB

                                  | Initial Total | 656.11 kB

Lazy Chunk Files                  | Names         |      Size
5.74427874f6e2fd08679b.js         | -             | 550.16 kB
6.463ca2fcc18840f22c31.js         | -             |  30.00 kB
common.dfb6790dca96592ade3e.js    | common        | 310 bytes

Some work has been done to inline external fonts in the build results. If your application uses an external font like Google Fonts, the build task will fetch it, and inline it in the build result (only when optimizations are enabled, like with –prod).

Then at runtime, your users won’t be blocked by the font loading (as it is already inlined). But you do need to have a network access when building the application. This can be deactivated by adding the following option to your configuration:

"optimization": {
  "fonts": false
},

ng serve

The serve command is now smarter and offers to start on another port than 4200 if the port is already used.

? Port 4200 is already in use.
Would you like to use a different port? (Y/n)
** Angular Live Development Server is listening on localhost:54567

Hot Module Replacement

The biggest news for ng serve is the out-of-the-box support for HMR! The CLI has been supported ng serve --hmr for quite some time, but it used to require to change code in your application to make it work. As a result, very few people used it.

It’s now as simple as running ng serve --hmr 😍. You can now enjoy tweaking your components without losing the state of your application on the live-reload.

Custom headers

It is now possible for ng serve to send custom HTTP headers. This is part of the effort to support Trusted types in Angular (check out our post about Angular v11 to learn more), as one of the ways to collect violations is to add a custom CSP header to your document.

It is now possible to configure the CLI to add this custom header:

"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    "browserTarget": "my-app:build",
    "headers": {
      "Content-Security-Policy-Report-Only": "require-trusted-types-for 'script'; report-uri //my-csp-endpoint.example"
    }
  },

Configuration

The styles and scripts options in your angular.json configuration now allow to reference a package directly:

• before: "styles": ["../node_modules/bootstrap/dist/css/bootstrap.css"]
• after: "styles": ["bootstrap/dist/css/bootstrap.css"]

The extractCss has now a default value of true and has been deprecated: you can remove it from your angular.json config (or let the schematic do it for you when upgrading). This means we no longer have a styles.js when building the application.

Some other options previously deprecated have been removed,. You probably don’t use them anymore, but if you still do, the migration schematic will replace them with the proper alternative.

ng test

The Karma configuration now uses karma-coverage instead of karma-coverage-istanbul-reporter in new projects as it is better supported. You can update your own project by updating the karma.conf.json file (see the changes at angular-cli-diff/compare/10.2.0…11.0.0).

ng e2e

The generated Protractor tests are now using native promises with async/await. That removes the need for the @types/jasminewd2 package in a new CLI project.

ng lint

TSLint is deprecated and the CLI now warns us, and offers to try ESLint as an alternative, with angular-eslint as an alternative for codelyzer.

But there is no migration tool yet, so you have to do this manually. I tried on a few projects and the migration is not that painful, but ESLint feels waaaaaay slower than TSLint (roughly doubles the time of the lint task, which was already quite slow). It’s a bit sad, but I think we need to get used to it… 🐌

ng generate

We can now generate resolvers \o/

ng generate resolver users

The command generates a resolver and its test. You can also use ng g r users.

Not that the --lint-fix flag of the generate command has been deprecated: it is now recommended to run ng lint --fix manually after generating something.

ng extract-i18n

The ng xi18n command has been deprecated and renamed ng extract-i18n.

The command is now able to extract messages from your libraries, yay!

It is also no longer necessary to specify the --ivy option if you are in an Ivy application to use the Ivy extraction.

Also, as explained in our post about Angular v11, the new enableI18nLegacyMessageIdFormat option can be added to a project with a false value.

ng new

The --strict option no longer generates the weird extra package.json file in src/app. You can read more about this when it was introduced in Angular CLI v10.0 in our dedicated blog post. It turns out it generated more problems than it solved, so it is no longer generated. The no-any rule is also no longer generated in the tslint.json file.

All our materials (ebook, online training and training) are up-to-date with these changes if you want to learn more!