DEV Community

"Differential Loading" - A New Feature of Angular CLI v8

Suguru Inatomi on April 17, 2019

TL;DR Angular CLI understands browsers support range from browserslist configuration. If the application needs to support ES5 browsers ...

Read full post

Moussa • Oct 8 '19

how I can disable Differential Loading?

Suguru Inatomi • Oct 8 '19

open tsconfig.json and set target: "es5". Then Angular CLI builds your code with ES5 bundle only.

Moussa • Oct 8 '19

I found a package browserlist, and add to package.json :
"browserlist": [
"last 2 version"
];

What the difference?

Suguru Inatomi • Oct 8 '19 • Edited

"browserlist": [
"last 2 version"
];

With this configuration, the CLI can recognize all targeted browsers are compatible ES2015. so no differential loading happens. All browsers load es2015 bundles.

If you want to align bundles to es2015, that is correct.
If you want to align bundles to es5, setting target: "es5 is correct.

Moussa • Oct 8 '19

Thank you!

Moussa • Oct 8 '19

i added :

"browserlist": [
"last 2 version"
];

to package.json and got

An unhandled exception occurred: D:\AccFlex_Cloud_Front\accflex-erb contains both browserslist and package.json with browsers
See "C:\Users\m.mousa\AppData\Local\Temp\ng-XowNha\angular-errors.log" for further details.

Michaël Zwyssig • Oct 17 '19

either use the browserlist file or the browserlist entry in package.json. You can't use both.

yasuracreation • Oct 28 '19

Hi , can i remove the defer attribute from the index.html script tags , because that attribute is not supported to theamleaf resolver ,
or else if there any configuration to organize that defer attribute like

current script is like

....................... Expected <script src="runtime.js" defer="defer">

<br> .........</p> <p>thank you </p>

suriyasiva8 • Apr 29 '21

Hi did you found a solution for this. I'm also facing the same issue....

Amadou Sall • Apr 19 '19

Very nice and well written article Sugury.

Jovi De Croock • Apr 19 '19

Nice article, is the Safari 10.1 bug covered in the module-nomodule approach here? gist.github.com/samthor/64b114e4a4...

If so, how is double download in IE11 and triple download in Edge prevented?

Suguru Inatomi • Apr 21 '19

github.com/angular/angular-cli/blo...

Safari's problem is covered by CLI. I don't know about Edge.

:* • Oct 17 '19

Thank you for the article. I was worried about changing the target and supporting less browsers. Although I can't find any browser that doesn't support es2015 anymore.(other than ie). But still a relief.

My other( perhaps rather primitive) question would be, What is the difference between the browserList and polyfills ?, they seem to be doing the same thing..