What is New in Angular 10?
By: Levent Arman Özak
Tags: JavaScript, Angular, Software Development, Front End Development, Programming

Major Changes

TypeScript v3.9 Support [breaking change]

Angular 9 was released with TypeScript 3.7 support. Soon TypeScript 3.8 was released and Angular v9.1 supported it. Not long after, another TypeScript version, 3.9, is released and Angular responds with v10, keeping up, not only with TypeScript, but also with TSLib and TSLint.

That is great news. Angular stays up-to-date. First of all, TypeScript 3.9 has performance improvements, which means faster Angular builds, especially in larger projects. Second, all latest TypeScript fixes and features are available to Angular developers. Last, but not the least, Angular developers will be using a more elaborate TypeScript configuration.

Earlier versions of TypeScript are no longer supported, so you have to install v3.9 in your project. I believe a major reason behind this is the next feature I will describe.

“Solution Style” tsconfig.json Files

“Solution Style” tsconfig.json file support was introduced by TypeScript v3.9 to overcome issues with cases where a tsconfig.json existed just to reference other tsconfig.json files, known as a "solution". Angular 10 makes use of that concept and improves IDE support and, consequently, developer experience.

A new file called tsconfig.base.json is introduced and what was inside the root tsconfig.json before is carried to this new file. You can find further details about the "solution" configuration here, but basically the new tsconfig.json at root level, before and after adding a library to the project, looks like below.

BEFORE:

{

"files": [],

"references": [

{

"path": "./tsconfig.app.json"

},

{

"path": "./tsconfig.spec.json"

},

{

"path": "./e2e/tsconfig.json"

}

]

}

AFTER:

{

"files": [],

"references": [

{

"path": "./tsconfig.app.json"

},

{

"path": "./tsconfig.spec.json"

},

{

"path": "./e2e/tsconfig.json"

},

{

"path": "./projects/core/tsconfig.lib.json"

},

{

"path": "./projects/core/tsconfig.spec.json"

}

]

}

If you upgrade to Angular 10 using ng update , the CLI will migrate your workspace to this structure. Earlier versions of TypeScript does not support "solution style", so this may be the reason behind the breaking change described above.

Angular Package Format Changes & esm5/fesm5

Angular package format has changed, and the new format does not include esm5 and fesm5 distributions anymore. Angular packages (@angular/*) will not include them. Since Angular generates ES5 from ES2015 and ES2015 is the default language level consumed by Angular tooling, those code distributions had become obsolete. The format change is as follows:

BEFORE:

{

...

"main": "bundles/abp-ng.core.umd.js",

"module": "fesm5/abp-ng.core.js",

"es2015": "fesm2015/abp-ng.core.js",

"esm5": "esm5/abp-ng.core.js",

"esm2015": "esm2015/abp-ng.core.js",

"fesm5": "fesm5/abp-ng.core.js",

"fesm2015": "fesm2015/abp-ng.core.js",

...

} {

...

"main": "bundles/abp-ng.core.umd.js",

"module": "fesm2015/abp-ng.core.js",

"es2015": "fesm2015/abp-ng.core.js",

"esm2015": "esm2015/abp-ng.core.js",

"fesm2015": "fesm2015/abp-ng.core.js",

...

}

AFTER:

{

...

"main": "bundles/abp-ng.core.umd.js",

"module": "fesm2015/abp-ng.core.js",

"es2015": "fesm2015/abp-ng.core.js",

"esm2015": "esm2015/abp-ng.core.js",

"fesm2015": "fesm2015/abp-ng.core.js",

...

}

If your application depends on esm5/fesm5 files, you can relax, because they are still consumable by the build system. Likewise, you do not have to worry if your Angular library does not ship esm2015 or fesm2015 , because the CLI will fallback to others. However, in favor of bundle optimization and build speed, it is recommended to deliver ES2015 outputs.

Browserlist