how to turn off differential loading in Angular v8

问题:

Angular-CLI v8 implemented differential loading. But I don't need files built by es5. I want to decrease deploy quantity.

I tried below. But CLI has generated es5 files.

• set es5browsersupport: false in angular.json, and got error.
• exclude Chrome 41, IE 9-11 and ie_mob 11 from browserList.

回答1:

In Angular 8 the file browserlist have to be in project root folder. Following entries were needed on my project to disable differential loading:

> 0.5%
last 2 versions
Firefox ESR
not dead
not IE 9-11
not samsung 4
not android 4.4.3-4.4.4
not last 2 ie_mob versions
not last 2 op_mini versions
not last 2 op_mob versions
not last 2 baidu versions
not last 2 kaios versions
not last 2 and_uc versions
not last 2 and_qq versions
not last 2 edge versions
not chrome 49

回答2:

None of these answers worked for me on @angular/cli 8.3.8. Using the npx browserslist I could see that there were more browsers in the list than these StackOverflow answers were up-to-date for.

To keep it simple and ensure differential loading doesn't try to build for es5, you can set your browserslist to use just 1 older (but still es6/es2015 compliant) browser version

# we only want es2015 compliant browsers https://caniuse.com/#feat=es6
# just use one as representative for all
Chrome >= 61 

回答3:

I succeeded to build without es5 files in Angular v8-rc4.

set like below in browserList to make isEs5SupportNeeded false in build-angular.

> 0.5%
last 2 versions
Firefox ESR
not dead
not samsung 4
not android 4.4.3-4.4.4
not last 2 IE versions
not last 2 ie_mob versions
not last 2 op_mini versions
not last 2 op_mob versions
not last 2 baidu versions
not last 2 kaios versions
not last 2 and_uc versions
not last 2 and_qq versions
not last 2 edge versions

refer to this list. https://caniuse.com/#feat=es6-module

回答4:

try changing the tsconfig.json target from es2015back down to es5, this disables differential loading.

回答5:

Can add below env variables to disable differential loading features. The below works for Windows

"build:prod": "set NG_BUILD_DIFFERENTIAL_FULL=true && ng build --prod",

For Mac

"build:prod": "NG_BUILD_DIFFERENTIAL_FULL=true; ng build --prod",

回答6:

Fastest solution: Switch back to es5 as compilation target in your tsconfig.json.

"compilerOptions": {
        ...
        "target": "es5"
        ...
}

As mentioned on Angular official documentation (https://angular.io/guide/deployment#differential-loading):

To explicitly disable differential loading:

• Enable the dead or IE browsers in the browserslist config file by removing the not keyword in front of them.
• Set the target in the compilerOptions to es5.

回答7:

I was able to solve for my project using Angular 8.1.1 by adding the "browserslist" key in package.json. (Placed at top level, same as "name", "dependencies", etc.)

 "browserslist": [
    "last 2 Chrome versions"
  ]

This case works in specific cases where you only need the app to work in Chrome. If you need more browser compatibility check out other options in the implementation docs here: https://www.npmjs.com/package/browserslist

回答8:

At the moment many people have es5 bundle generated because @angular/cli does not consider latest Edge (i.e., Edge 18) to be es2015-modules compliant: https://github.com/angular/angular-cli/issues/14580.

A dirty fix is to exclude Edge from the list of browsers you support (in the browserslist file). This problem should be fixed if you upgrade to @angular/cli 8.1.0.

回答9:

in tsconfig.json set target to es2015 if you want to compile for new version first or set it to es5 to disable diffrential loading

"compilerOptions": {
    ...
    "target": "es2015",
    ...
}

and in angular.json change es5BrowserSupport to false

project => app => architect => build => 
"options": {
    ...
    "es5BrowserSupport": false
    ...
}