What's new in Angular CLI 11.1?

Angular CLI 11.1.0 is out!✨

If you want to upgrade to 11.1.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.1.0 for example), and it gives you a diff of all files created by the CLI: angular-cli-diff/compare/10.0.0…11.1.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.

TypeScript 4.1

As the framework supports TS v4.1, the CLI now also supports it and defaults to this version in a new project.

Webpack Ivy compiler plugin

Under the hood, a new Webpack plugin has been introduced for the Ivy compilation. You should see no visible differences, but the plugin is simpler, fixes a bunch of long-standing issues, reports errors in a coherent way, and provides a more incremental build and type checking 🚀.

Critical CSS inlining

When the browser renders a page, it has to wait for the CSS resources to be downloaded and parsed. It can give the (false) impression that the loading of your application is slow, and impacts the First Contentful Paint (FCP) time.

A common technique to avoid that is to inline the CSS directly in the HTML, to avoid an extra request (this is what Lighthouse recommends). But you don’t want to inline all your CSS, otherwise the time to download the HTML increases. You just want to inline critical CSS resources, the ones that blocks the rendering, and that your user will see (you can defer the rest of CSS). You can learn more about this topic on web.dev.

The CLI introduces a new option in v11.1 to help us with this: inlineCSS. It is opt-in for the moment, but will be enabled by default in a future version. You can give it a try by configuring it in your angular.json file:

"optimization": {
  "scripts": true,
  "fonts": {
    "inline": true
  },
  "styles": {
    "minify": true,
    "inlineCritical": true
  }
},

The CLI will then use critters under the hood to extract the critical CSS of your application, and inline them directly in the HTML.

Running ng build --prod with the above configuration produces an index.html file with a style element containing the critical CSS extracted, and the usual styles.xxxxx.css is loaded asynchronously using:

<link rel="stylesheet" href="styles.3d6bb69e3d075769b349.css" media="print" onload="this.media='all'">

Camel case arguments are deprecated

You now have a deprecation warning when using camel case arguments for a command:

Support for camel case arguments has been deprecated and will be removed in a future major version.
Use '--skip-install' instead of '--skipInstall'.

Karma

Karma has released a new 6.0 version. The CLI v11.1 has been updated to support this new version.

I18n

The enableI18nLegacyMessageIdFormat option, introduced in v11, is now added by default to a newly generated project with a false value. Check out our blog post about v11.0 if you want to refresh your memory about what this option does.

The big new feature is the new formats available for translation files! The CLI now allows to extract messages in JSON and ARB:

ng extract-i18n --format json
ng extract-i18n --format arb

The JSON translation file looks like:

{
  "locale": "en-US",
  "translations": {
    "home.title": "Welcome",
    ...
  }
}

The ARB file is similar but packs more info, like the description if you had one: { “@@locale”: “en-US”, “home.title”: “Welcome”, “@home.title”: { “description”: “the title of the home page”, “x-locations”: [ { “file”: “src/app/app.component.html”, “start”: { “line”: “9”, “column”: “24” }, “end”: { “line”: “9”, “column”: “31” } } ] }, … }

ES5 Polyfills

The polyfills that the CLI automatically add for legacy browsers have been enriched to support some common operations like includes, flat or flatMap on arrays, and Object methods like entries, values, fromEntries, and getOwnPropertyDescriptors. It means you can use them safely in older browsers like IE11.

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