What's new in Angular CLI 6.2?

Angular CLI 6.2.0 is out (in fact we even have a 6.2.1 available)!

If you want to upgrade to 6.2.1 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 (6.0.0 for example), and the target version (6.2.1 for example), and it gives you a diff of all files created by the CLI: angular-cli-diff/compare/6.0.0…6.2.1. You have no excuse for staying behind anymore!

Let’s see what we’ve got!

Linter

The first thing is not really a new feature, but rather a bugfix, but it was annoying me, so I’m glad it landed!

With the previous CLI versions, if you ran ng lint, the linter was executed on every application in the project (usually your main application and the e2e application). Now, TSLint comes with a super awesome option called --fix, which automatically fixes some of the issues it found, I love it. And you can use it with the CLI! But running ng lint --fix was failing with the previous versions because it couldn’t figure if you wanted to run it on your main application or the e2e application… So you had to run ng lint app --fix and then ng lint app-e2e --fix.

This is now solved, and if you run ng lint --fix, the task will be executed on all your applications!

The fix is slightly more general than that, and this kind of command will now execute on all your applications if it is possible.

You can also now simply run:

ng lint src/app/app.component.ts

if you want to lint just a file.

To conclude this part about the linter, an option that disappeared in CLI 6.0 but existed before is also back: --lint-fix. This option can be used with every schematic, and will automatically fix the lint issues in the new generated files. You might be wondering why that would be useful: aren’t the files generated by the CLI already correct? They are indeed, but they use the default tslint.json. So if you have defined a different preference for TSLint for example to use double quotes instead of single quotes for strings, then by using this option, the generated files will automatically use your preferences.

ng generate component pony --lint-fix

Watch mode for libraries

As you hopefully know if you read our article about the release of Angular CLI 6.0.0, it is now possible to have multiple applications and libraries in your CLI project. But, as I noted in the article, a slightly annoying thing was that, when you made a change to the library source, you had to rebuild it manually if you wanted the rest of the project to see it, because there was no watch mode for ng build in a library.

That’s now no longer the case, and you can use ng build --watch for a library too, so the rest of your project will see the modifications without any manual steps anymore!

Ivy support

Angular 7 is still some weeks/months away, but the CLI is getting ready for the big novelty of this release: the new Ivy renderer (check out our previous article about Ivy).

You can give Ivy a try by generating a new application with:

ng new my-app --experimental-ivy

This will generate a new application with a few options activated for Ivy. It mainly adds in tsconfig.app.json:

"angularCompilerOptions": {
  "enableIvy": "ngtsc"
}

to activate Ivy. Be warned though, this is still very experimental!

That’s all for this small release, but the CLI team is already working on CLI 7.0, with some cool features incoming (an interactive prompt for the command, a better minifier, support of Angular 7…). Stay tuned!

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