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 yourtsconfig.base.json
, and adds a bunch of others flags (forceConsistentCasingInFileNames
,noFallthroughCasesInSwitch
andnoImplicitReturns
) - it adds
strictTemplates
andstrictInjectionParameters
toangularCompilerOptions
in yourtsconfig.base.json
- it generates an extra
package.json
file withsideEffects: false
(see below) - it lowers the budgets for initial load and component styles in
angular.json
, and adds the strict settings to the applicationschematics
- it adds the
no-any
rule to yourtslint.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: useng config
instead.- the
es5BrowserSupport
,elementExplorer
,evalSourceMap
,vendorSourceMap
,profile
,skipAppShell
andtypescriptMismatch
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
toes2020
, which is currently the same thing, but usinges2020
makes sure there is no changes in behavior whenes202x
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!