What's new in Angular CLI 13.0?

Angular CLI 13.0.0 is out!✨

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

Angular cache

The CLI now saves its cache on disk. It is enabled by default, so running ng serve creates a directory .angular/cache in your project root. Note that it is enabled only on your local machine by default, but this can be configured. To disable it, you can run ng config cli.cache.enabled false

Or you can update the configuration in your angular.json file, for example to enable it everywhere and in a different directory:

"cli": {
  "cache": {
    "enabled": true,
    "environment": "all", // or "local" or "ci"
    "path": ".angular-cache"
  }
}

The NG_PERSISTENT_BUILD_CACHE that we were talking about in our article about Angular CLI 12.1 is no longer useful and replaced by this cache configuration.

There is no command to clear the cache, just run rm -rf .angular/cache.

Differential loading removed

Differential loading had been introduced in Angular CLI 8.0, and used to output ES5 and ES2015+ variants of the application. As IE11 is no longer supported, there are now no officially supported browsers that require ES5 code. As a result, ng build no longer does differential loading, and only outputs ES2015+ code.

IE11 no longer being a concern, all the script tags that the CLI adds to your index.html file now have type="module" specified.

Automatic migrations

A few schematics will update your configuration files when upgrading to v13. As some options were removed like extractCss (after being deprecated in the previous versions), one of the schematics will remove them if you still had them in your angular.json file. Another schematics will remove the unneeded polyfills classlist.js and web-animations-js from polyfills.ts, as IE11 is no longer supported. .gitignore will also be updated to add /.angular/cache as a result of the new cache system.

As a side note, migrations are now required to be done one major version at a time. So if you want to update from Angular v11 to v13, you need to run:

ng update @angular/core@12 @angular/cli@12
# check that everything is ok
# then
ng update @angular/core@13 @angular/cli@13

Deprecations

The deployUrl option for ng build has been deprecated. It was previously introduced to handle applications that only store their assets on a CDN. It is now recommended to host the entire application on a CDN. It is still possible to achieve the same behavior as deployUrl by setting the baseHref to the CDN address while setting the APP_BASE_HREF to the application address.

ng serve

The dev server is now using webpack-dev-server v4, which means it relies on WebSockets to communicate changes to the browser to trigger a live-reload. If you’re using a proxy, remember to enable proxy on WebSockets as well.

As we’re talking about the proxy configuration, note that it is now possible to define its configuration as an ESM module (ending with .mjs), in addition to JSON and CommonJS:

export default {
  '/api/*': { target: 'http://localhost:8080/api" }
}

A ton of work has been done to improve the ESM support in the CLI and the framework Angular now ships as an ESM as well. The new Angular Package Format is now documented directly on angular.io if you’re curious. The CLI will now prefer the ESM version of a dependency if it finds it. This makes sense as ES modules are the future, recent NodeJS versions support them, and more and more projects are using them (tools like Vite for example, that the Angular team is considering as a possible future for the CLI).

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