2

I have an Angular 14 app built with all the default settings of a new project. This is my .browserlistrc. The generated index.html doesn't load on Chrome 74 or earlier.

Chrome > 50
Android > 50
last 1 Firefox version
last 2 Edge major versions
last 2 Safari major versions
last 2 iOS major versions
Firefox ESR

Syntax error loading bundle in Chrome 74

Note, the default Angular 14 app does load in Chrome 80Loads successfully in Chrome 80

In addition to the default build, I tried the non-CLI polyfill recommendations as mentioned here.

That doesn't work either. Note also, the Angular 14 website refers to the deprecated Core-JS@2 library while the latest is Core-js@3.

I've previously built apps (non Angular 2) using webpack, and I would solve these issues by simply updating the build target to "es5" or @babel/preset-env.

In the tsconfig.json I noticed the target was set to es2020 (that's aggressive!). I updated to es5 and it gave out an error but the polyfills worked. ES2015 target and polyfills worked as well.

$ npx ng build --base-href="angular/test/dist/test/"
- Generating browser application bundles (phase: setup)...
    DEPRECATED: ES5 output is deprecated. Please update TypeScript `target` compiler option to ES2015 or later.
√ Browser application bundle generation complete.
√ Browser application bundle generation complete.
- Copying assets...
√ Copying assets complete.
- Generating index html...
√ Index html generation complete.

Initial Chunk Files           | Names         |  Raw Size | Estimated Transfer Size
main.7b49250bb40700d9.js      | main          | 141.52 kB |                39.53 kB
polyfills.c85a2de3019e0931.js | polyfills     |  37.35 kB |                11.70 kB
runtime.e09688b44ec1c7b7.js   | runtime       |   1.19 kB |               618 bytes
styles.ef46db3751d8e999.css   | styles        |   0 bytes |                       -

| Initial Total | 180.06 kB |                51.84 kB

Build at: 2022-10-26T15:39:21.007Z - Hash: 8c5f90cdcee46546 - Time: 20552ms

Question : are there any polyfills that work as is with Angular 14 (ES2020)?

Also, bigger problem, I have an Angular 14 project built with Webpack where the polyfills generated above don't work at all and neither do the polyfills mentioned on the Angular website.

adir
  • 21
  • 3

1 Answers1

2

It looks like this is related to this change in the how the js bundles are served from the index.html file where the Angular team has added type="module" to the <src> elements. One easy way to test if this is the issue is to build the static bundles for your app, then edit the index.html to remove those attributes.

BEFORE
<script src="runtime.e2a47074b9fe2cd5.js" type="module"></script>
AFTER
<script src="runtime.e2a47074b9fe2cd5.js"></script>

If your app loads correctly after that change, then you can automate removal of that attribute, or the linked github issue has some more complex solutions involving patching the Angular CLI code.

stefan2718
  • 1,071
  • 7
  • 6