What's new in Angular CLI 10.0?

Angular CLI 10.0.0 is out!✨

If you want to upgrade to 10.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 (8.3.8 for example), and the target version (10.0.0 for example), and it gives you a diff of all files created by the CLI: angular-cli-diff/compare/8.3.8…10.0.0. It can be a great help along 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 10 and TypeScript 3.9

This new release supports Angular 10 of course, and now requires TypeScript 3.9.

One of the new features is the support for “Solution Style” tsconfig.json files. This allow IDEs to more easily find which project a TS file belongs to, when you have several tsconfig files (it’s better explained in the release post if you want to learn more 🤓).

As an Angular CLI project does have several tsconfig files, this improvement is useful to us! The CLI now generates projects with a base tsconfig, extended by the the app one, the unit tests one, and the e2e tests one. The tsconfig.json file now only references the others. If you update your application using the ng update command, a schematics will automatically do this refactor for you.

Evergreen applications by default

New applications are now only targeting evergreen browsers by default. This means that the browserslist configuration now only includes the latest releases of each major browser when generating a new application. It also means that a newly generated application does not have differential loading, so it does not build twice! Differential loading was introduced in Angular CLI v8.0, and is great if you need to support older browsers. If you want to have differential loading in a new application, you can generate your application using the new --legacy-browsers flag:

ng new my-app --legacy-browsers

Or you can manually update the browserslist config to finely tune which browsers you want to support (--legacy-browsers adds IE9-11 to the config), and the CLI will automatically build your application once or twice accordingly.

Note that if you only target modern browsers, the resulting JS files are no longer suffixed with es2015.

Stricter applications

The --strict flag introduced in version 9.1 for ng new now goes further:

• it enables strict: true in your tsconfig.base.json, and adds a bunch of others flags (forceConsistentCasingInFileNames, noFallthroughCasesInSwitch and noImplicitReturns)
• it adds strictTemplates and strictInjectionParameters to angularCompilerOptions in your tsconfig.base.json
• it generates an extra package.json file with sideEffects: false (see below)
• it lowers the budgets for initial load and component styles in angular.json, and adds the strict settings to the application schematics
• it adds the no-any rule to your tslint.json

Bundle optimizations

If you generate a new application with the --strict flag, you’ll see that an extra package.json file is now present in src/app. It does not contain any dependencies, only:

{
  "name": "my-app",
  "private": true,
  "description": " ... ",
  "sideEffects": true
}

The long description explains that this file is only useful for bundlers, to signal if our code has non-local side effects or not. You can probably safely change the value of the sideEffects option to false, and the CLI/Webpack will optimize the generated bundle more aggressively. You can of course manually add this file to your application to give it a try. I didn’t spot any stellar improvements in bundle sizes for my applications though…

Warnings when depending on CommonJS packages

Bundlers like Webpack have a hard time optimizing CommonJS packages. The CLI now warns you when you build or serve your application if you use CommonJS dependencies:

WARNING in src/app/chart/chart.component.ts depends on chart.js. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

If you want to learn more about this, check out this article, it’s very well explained.

If you can’t do otherwise, you can add the following option to your angular.json file to remove the warning:

"build": {
  "builder": "@angular-devkit/build-angular:browser",
  "options": {
    // ...
    "allowedCommonJsDependencies": ["chart.js"]
  }

Deprecations and removals

A few deprecated commands and options have been removed:

• ng get/set no longer exist: use ng config instead.
• the es5BrowserSupport, elementExplorer, evalSourceMap, vendorSourceMap, profile, skipAppShell and typescriptMismatch options are removed as well.

A schematic takes care of updating the angular.json file for you.

Note that you can also remove the @angular/language-service package from your package.json. This package was needed by VSCode extension to have autocompletion/type-checking in the templates. It is no longer necessary to install it ourselves, as the extension now directly embeds it (and I think most IDE extensions do).

Automatic migrations in v10

When running ng update @angular/cli, some schematics are going to update your code. The command:

• renames browserslist to .browserslistrc.
• changes the target for TypeScript from esnext to es2020, which is currently the same thing, but using es2020 makes sure there is no changes in behavior when es202x comes out.
• removes the deprecated builder options in angular.json (see above).
• refactors the tsconfig files as explained in the first section
• adds the deprecation rule to your TSLint config if you don’t have it.
• bumps a few dependencies

As you can see, this 10.0 release has some interesting new features!

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