What's new in Angular CLI 10.1?

Angular CLI 10.1.0 is out!✨

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

TypeScript 4.0

As Angular v10.1 now support TS 4.0, the CLI now also does, of course.

Reverting “Solution Style” TypeScript configurations

If you read our blog post about CLI v10.0, you may remember that this version included a migration to “Solution Style” TS configurations, a new feature from TS 3.9.

Well, it turned out to be not so great for big projects as it slowed down the compilation and tools… Couple this with a few other issues, and the CLI team decided to revert these changes. So, if you create a new project with CLI v10.1, then you’ll find a base tsconfig.json extended by the more specific ones, as it was before v10.

If you update your application using the ng update command, a schematics will automatically revert the changes introduced in v10 for you.

i18n

@angular/localize is getting better and better (check our Angular v10.1 blog post), and the integration with the CLI is improving.

If you run ng xi18n in one of your applications, you’ll see:

Ivy extraction not enabled but application is Ivy enabled. If the extraction fails, the `--ivy` flag will enable Ivy extraction.

This is because, until now, Angular relied on View Engine to extract the messages. Since v10.1, it now uses the new extractor from @angular/localize, if you run the command with --ivy (it’s explicit for the moment as it is still a work in progress, and there are some regressions).

A few things are better though: with the --ivy flag, the CLI now also extracts messages passed to the $localize function in the TypeScript files 🎉. Check out our article about localize to see what I’m talking about.

The Ivy extraction will become the default in the near future.

The CLI also allows specifying several translations files per locale, and will merge the messages when building the app:

"i18n": {
  "locales": {
    "fr": ["src/locale/messages.fr.xlf", "src/locale/messages-2.fr.xlf"]
  }
},

You’ll get a warning message if you have duplicated messages:

WARNING [src/locale/messages.fr.xlf]: Duplicate translations for message 'home.title' when merging

async() helper renamed

As explained in our Angular v10.1 article, the testing helper function async has been deprecated and renamed waitForAsync.

You can simply replace it everywhere and you’re good to go: there is no change in behavior between async() and the new waitForAsync().

My 2cts though: you may want to take this occasion to simply remove most of these calls as they often are unnecessary. And when they are necessary, rewriting them with fakeAsync and tick makes them more readable.

it('should ...', async(() => {
  somethingAsync()
    .then(() => expect(element.textContent).toBe(...));
}));

can be rewritten in a synchronous way:

it('should ...', fakeAsync(() => {
  somethingAsync();
  tick();
  expect(element.textContent).toBe(...);
}));

A lot of your async calls are probably from the code generated by the CLI as it used to generate this test setup for components:

beforeEach(async(() => {
  TestBed.configureTestingModule({
    declarations: [
      AppComponent
    ],
  }).compileComponents();
}));

In v10.1, the CLI switched to the async keyword:

beforeEach(async () => {
  await TestBed.configureTestingModule({
    declarations: [
      AppComponent
    ],
  }).compileComponents();
});

But a little known fact is that this is not necessary: you can remove compileComponents as the CLI takes care of it behind the scenes. And if you remove compileComponents, you can remove async:

beforeEach(() => TestBed.configureTestingModule({
  declarations: [AppComponent]
}));

This is something that have been bothering me for a long time, so I decided to open a PR to fix it in the CLI. You can show your support with a little 👍on https://github.com/angular/angular-cli/pull/18316 and maybe we’ll have this simplified setup in v11.

In the meantime you can probably remove a lot of async() calls in your application 😉.

build-ng-packagr deprecation

The @angular-devkit/build-ng-packagr package has been deprecated, and replaced by the @angular-devkit/build-angular:ng-packagr builder. You can remove it from your package.json, and update the task in the angular.json config to @angular-devkit/build-angular:ng-packagr.

Or you can wait for the automatic migration in v11 😃.

Hot Module Reloading

If you use HMR when developing your applications, you’ll be please to know that the CLI now supports CSS hot reloading, even when using the extractCss option. This option will in fact be deprecated in v11.

Strict applications

Angular v10.1 introduced a new compiler option strictInputAccessModifiers, and the CLI now includes it in your tsconfig.json if you generate an application with the --strict flag. You can of course add it to your existing application. Check out our blog post about Angular v10.1 to learn more about this option.

The next release will probably be v11, and bring some cool new features!

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