2022-11-16

What's new in Angular CLI 15.0?

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

Deprecations and breaking changes

The CLI now requires at least NodeJS v14.20 (as it relies on the crypto module). It now officially supports NodeJS v18 as well.

TypeScript 4.6 and 4.7 are no longer supported: you need to upgrade to TS v4.8.2+.

SCSS imports starting with a tilde, like @import '~font-awesome/scss/font-awesome';, are now deprecated. You’ll see a warning message when you build your application:

'src/styles.scss' imports '~font-awesome/scss/font-awesome' with a tilde. Usage of '~' in imports is deprecated.

The solution is to simply remove the tilde: @import 'font-awesome/scss/font-awesome';.

This was dictated by the migration to the modern Sass API and compiler, which is faster. You can still use the legacy API with NG_BUILD_LEGACY_SASS=1 ng build, but this will go away in the next versions.

Speaking of styles, the support of Stylus has been removed. It was deprecated since Angular CLI v12.

esbuild builder improvements

The new experimental builder that uses esbuild has been introduced in v14, but with some missing features.

Even if it is still not feature complete, the esbuild builder is making progress. You can now use the watch mode with --watch (and polling with --poll). The builder is now also able to rebuild incrementally as the webpack-based one!

The code and styles are now processed in parallel, so the bundling should be a bit faster.

The esbuild builder also supports fileReplacements, which was missing to really give it a try in an existing application.

To check it out in your project, replace @angular-devkit/build-angular:browser with @angular-devkit/build-angular:browser-esbuild, and run ng build. For a small application, on a cold production build (after ng cache clean), the build time went from 13s to 6s on my machine. For a larger application, the build time went from 1m12s to 32s 🤯.

New project simplifications

The CLI now generates fewer files in a new project:

the environment files are gone, so you’ll no longer see environment.ts and environment.prod.ts in your project. The fileReplacements configuration has been removed from the angular.json file. You can still use these files if you want, but they are not generated by default anymore: you have to manually create them and add the relevant fileReplacements configuration in the angular.json file.
the enableProdMode function call has been removed in main.ts. It was only used for JiT mode, which is not really used anymore. In AoT mode, the CLI already sets ngDevMode when building in production mode, which has the same purpose.
the .browserslistrc file has been removed. You can still add one, but the file is no longer generated by default. A migration will remove it from your project if you use the default one. Note that the default or custom .browserslistrc of your project is now used by the CLI to determine the ECMAScript version of the output generated from your TypeScript code (instead of relying on the target defined in tsconfig.json). That’s why the target is set to es2022 in new projects.
the polyfills.ts file has been removed. The polyfills option in angular.json now directly accepts an array of imports. To add zone.js to your application, the angular.json file now specifies polyfills: ["zone.js"].
the karma.conf.js file has been removed. Same here, you can add one to customize the unit test behavior, but it is not generated by default anymore.
the test.ts file has been removed, as it was bringing no special value. You can still add one and specify it in the angular.json file if you need to. A migration will run and simplify this file in your project (but not remove it, although you can).

Note that the default test.ts now uses:

getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting(), {
  errorOnUnknownElements: true,
  errorOnUnknownProperties: true
});

These options (added here and in the framework by this blog post author 🤓) check that all elements and properties used in your tests are known by Angular. See our blog post about Angular v14 for more details.