What's new in Angular CLI 12.0?

Angular CLI 12.0.0 is out!✨

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

The CLI now uses Webpack v5 under the hood 🚀. There is nothing to do to enjoy it: just update your application to CLI v12. The automatic migration might rewrite a few imports if you use Web Workers when you run ng update, but that’s all.

Webpack v5 does have a visible impact on the file names of the JS bundles (with --named-chunks). In Angular v11, a lazy-loaded bundle had a name like users-users-module.js. In Angular v12, it is now src_app_users_users_module_ts.js. If you have a tool to track bundle sizes, for example, you’ll need to update it.

Webpack 4 support has been dropped.

On a related note, TypeScript now needs to be at least v4.2+ and targets es2017, and Node must be at least v12.

Devkit is now stable

@angular-devkit/build-angular is now stable! This means its version number is no longer 0.1200.0 but now 12.0.0 like the other packages! 🥳

View Engine support removed

The CLI v12 can no longer build applications with View Engine. You’ll have to migrate to Ivy if you did not already.

Strict by default

New applications generated with the CLI v12 are now strict by default. You no longer need to give the --strict option to ng new.

When enabling all the strict options in an existing application, one of the most impactful is strictPropertyInitialization for TypeScript. Indeed, with this option, TS checks that all the properties of a class are initialized, either when declared, or in the constructor. This makes sense, but is a bit painful in Angular for the fields decorated with @Input().

@Component(/**/)
export class UserComponent {
  @Input() user: UserModel; // TS is unhappy with `strictPropertyInitialization`
}

You have various ways to fix this:

• when possible, give it a default value: @Input() user: UserModel = defaultUser
• explicitly mark the field as possibly undefined: @Input() user: UserModel | undefined
• add a non-null assertion if you don’t want to bother: @Input() user!: UserModel

Production builds by default

ng build now uses the production configuration by default. You no longer need to pass the --prod option to the command. The --prod flag is deprecated, and we must now use --configuration production.

As you can see here, the angular.json configuration has changed to include a defaultConfiguration option for each task. The build task defaults to production whereas the serve task defaults to development.

A bunch of other options also have different values because of the default configuration change: optimization, aot, buildOptimizer, sourceMap and extractLicenses are now true, whereas namedChunks and vendorChunk are now false.

This migration is not by default but you can opt-in by using:

ng update @angular/cli --migrate-only production-by-default

after the regular ng update.

Farewell TSLint

New applications generated with the CLI v12 no longer have a lint task configured by default. TSLint has been deprecated for a while, and the CLI finally pulled the trigger. It’s a bit sad that there is no replacement by default, but you can add ESLint to your project (or migrate your existing ones).

As we had to migrate a bunch of our projects, we wrote a guide on how to do so: Migrating from TSLint to ESLint 🤗.

Farewell Protractor

New applications generated with the CLI v12 no longer have an e2e task configured by default. Protractor is not actively maintained and will be deprecated in the future. As for TSlint, it’s a bit sad that there is no replacement by default, but you can add another solution like Cypress to your project (or migrate your existing ones).

At Ninja Squad, we never really used Protractor in the first place, but chose to use Cypress. We wrote a guide on how easily integrate it in an Angular project: Migrating from Protractor to Cypress.

You can also check the first exercise of our online course to set up everything properly with CLI v12.

Styles

Inline styles are now processed

The CLI can now process the inline styles defined in a component, as it does for external stylesheets. For example, if you use SCSS in your application, a component can now have an inline style using SCSS:

@Component({
  // ...
  styles: ['$title-color: pink; h1 { color: $title-color; }']
})
export class UserComponent {

$title-color will be processed correctly, and the title will be pink!

Critical CSS inlining by default

The inlineCritical option added in CLI v11.1 is now enabled by default. Check out our article about CLi v11.1 to refresh your memory on what this option does.

Stylus support is deprecated

Stylus is not actively maintained, and its support in the CLI is deprecated and will be removed. The CLI now only supports Less and SCSS.

PostCSS Stage 3

The CLI now supports stage 3 features for PostCSS. This includes features like custom CSS properties, font-variant, gap properties, and media query ranges.

ng generate

ng generate enum profile now accepts a new option type to name the file profile.type.ts. It is empty by default, so not specifying anything ends up with profile.ts (it used to be profile.enum.ts).

ng add

ng add now asks for confirmation before installing a package, allowing to check the package and version. This can be skipped with --skip-confirmation.

Deprecations

A bunch of options have been deprecated or removed:

• The experimentalRollupPass option has been removed, as it was not performing as well as hoped. It had been introduced in Angular CLI v9 as an experiment (check out our article about that).
• showCircularDependencies was bad for performances, and has been deprecated as well.
• The deprecated i18nLocale and i18nFormat options for the extract-i18n command have been removed.
• The TS option emitDecoratorMetadata is no longer needed by Angular, and can be safely removed from tsconfig.json.

ng update will automatically remove these options from your configuration.

As Zone.js v0.10 is no longer supported, ng update will automatically migrate your zone.js imports to use the proper ones for v0.11.

Angular v12 no longer supports IE 11, so you’ll see a warning message in the CLI if you try to build an application for this browser: Warning: Support was requested for IE 11 in the project's browserslist configuration. IE 11 support is deprecated since Angular v12.

You can check what’s new in the framework for this v12 release in our other blog post.

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