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 ...
Collapse
 
muhammedmoussa profile image
Moussa

how I can disable Differential Loading?

Collapse
 
lacolaco profile image
Suguru Inatomi

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

Collapse
 
muhammedmoussa profile image
Moussa

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

What the difference?

Thread Thread
 
lacolaco profile image
Suguru Inatomi • 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.

Thread Thread
 
muhammedmoussa profile image
Moussa

Thank you!

Thread Thread
 
muhammedmoussa profile image
Moussa

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.
Thread Thread
 
michaelz profile image
MichaΓ«l Zwyssig

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

Collapse
 
tasneemghorayeb profile image
:*

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..

Collapse
 
ahasall profile image
Amadou Sall

Very nice and well written article Sugury.

Collapse
 
jovidecroock profile image
Jovi De Croock

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?

Collapse
 
lacolaco profile image
Suguru Inatomi

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

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

Collapse
 
yasuracreation profile image
yasuracreation

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>

Collapse
 
suriyasiva8 profile image
suriyasiva8

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