Angular Differential loading - How to generate only one polyfill.js file

Question

We just migrated from angular 7 to angular 9. My application targets to larger audience and i need to support legacy browsers like IE-11. Hence i have made the following change in tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "module": "esnext",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true
  }
}

The target is set to

"target": "es5",

which will target to legacy browsers as mentioned Here which will generate the build artifacts as folows

But if you see carefully, there are two polyfills that are gernerated,

chunk {2} polyfills.js (polyfills) 46.5 kB [initial] [rendered]
chunk {3} polyfills-es5.js (polyfills-es5) 129 kB [initial] [rendered]

But i want to generate only one polyfill which supports both modern and legacy browsers. Is there any way to generate only one polyfill (polyfills.js) file like how it used to happen before angular 8+ ?

Why do you want only one polyfill? It's better to let the client browser download the most appropriate one — David
– David, Commented Mar 16, 2020 at 9:23
I have a constraint where i do not use the angular generated index.html rather i havemy own over the backend. In that i cannot include two polyfills as we have some packaging constraints. — Vikhyath Maiya
– Vikhyath Maiya, Commented Mar 16, 2020 at 9:37
You can't add a task that just takes the correct polyfill? Or that deletes polyfill.js after the build ? — David
– David, Commented Mar 16, 2020 at 10:04
Thats what i am doing currently. Just wanted to know if there is a way around. — Vikhyath Maiya
– Vikhyath Maiya, Commented Mar 16, 2020 at 11:07

David · Accepted Answer · 2020-03-17 13:25:29Z

1

Edit: the solution below is a bit hacky and I'd recomment going with some post build process to remove the files that you do not want.

To have the build the way it was before angular 8, i.e. completely remove differential loading (even for polyfills), you need to:

set target to es5 in your tsconfig.json file
comment all the queries in your browserslist file, normally located at the root of your project
install core-js node module
Add core-js imports to your polyfill.ts, like the awy it was in angular 7

Note: deleting the browerslist file does not work, as it'll still generate 2 polyfill bundles

browserslist file

# You can see what browsers were selected by your queries by running:
#   npx browserslist
#> 0.5%
#last 2 versions
#Firefox ESR
#dead
#IE 9-11 # For IE 9-11 support, remove 'not'.

polyfill.ts

/****************************
 * BROWSER POLYFILLS
 */

import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/weak-map';
import 'core-js/es6/set';

edited Mar 17, 2020 at 13:25

answered Mar 16, 2020 at 10:15

David

34.6k13 gold badges90 silver badges124 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Vikhyath Maiya Over a year ago

Hmmm but ie10-11 related polyfills are not added by this solution !!!1

Vikhyath Maiya Over a year ago

The app doesnt load in IE !

David Over a year ago

@VikhyathMaiya I updated my answer. I tried on a really simple project and it does work

Vikhyath Maiya Over a year ago

yeah i known this will work. But since from angular 9, angular is supposed to handle the core js dependencies right. So there is no way of creating single polyfill js without adding core js as a dependency ?

David Over a year ago

Not that I know of

|

Collectives™ on Stack Overflow

Angular Differential loading - How to generate only one polyfill.js file

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related