Angular 8 ES5 target is not fully transpiled to ES5, causing problems with IE11

Question

tldr;

Building app with target=es2015 and differential loading works in IE11 when running on standalone server.

Building it with target=es5 does not work in IE11

example reproducible code: https://github.com/thegreatanon/prism-ie-crash/tree/master

full details

The angular 8 app I'm building needs to be compatible with IE11. To ensure this, I need to test it from time to time during development.

With the differential loading now introduced in Angular 8, it will build an es2015 and an ES5 file when IE11 is enabled in the browserlist. When taking these generated files and running them on a stand-alone server, it will run fine in IE11. But this is cumbersome.

Using ng serve will only create the ES2015 versions, so that won't work in IE.

I'm then creating a different configuration to set the targetin the compilationOptions to es5 and running it as ng serve --configuration es5

When using this approach, I get the following error in the IE console once clicking on an item in my navigation (triggering lazy loading of a module).

SCRIPT1006: Expected ')' 
ERROR Error: Uncaught (in promise): ChunkLoadError: Loading chunk example-example-module failed.

Looking at the line where the error occurs, I see the following:

function ChangeDetection(detection = true, properties) {

Obviously the default argument in that function is the culprit, as this feature isn't supported by ES5.

As you can see that code is coming from Angular-package/change-detection, which is included because I'm using angular-package/prism.

It seems as if the external code just got included as-is and didn't get transpiled to ES5.

I'm getting the same errors btw when I'm just building for ES5, and running it in my standalone server. So it likely doesn't have anything to do with the ng serve command in itself.

Because when using the differential loading setup in Angular, the ES5 build does work, there seems to be some magic going on?

Can anybody tell me how to get these external resources to transpile to ES5?

tsconfig

{
    "compileOnSave": false,
    "compilerOptions": {
        "baseUrl": "./",
        "downlevelIteration": true,
        "outDir": "./dist/out-tsc",
        "sourceMap": true,
        "declaration": false,
        "module": "esnext",
        "moduleResolution": "node",
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "importHelpers": true,
        "target": "es5",
        "typeRoots": ["node_modules/@types"],
        "lib": ["dom", "es2018"],
        "strict": true,
        "paths": {
            "@mylib/angular-components": ["lib"],
            "@mylib/angular-components/*": ["lib/*"]
        }
    },
    "exclude": ["out", "node_modules", "dist", "lib"],
    "angularCompilerOptions": {
        "preserveWhitespaces": false,
        "fullTemplateTypeCheck": true
    }
}

browserlist

    "browserslist": [
        "last 5 Chrome version",
        "last 5 Safari version",
        "last 5 Firefox version",
        "last 5 Edge version",
        "last 5 iOS version",
        "last 5 ChromeAndroid version",
        "IE 11",
        "> 1%"
    ]

You are right, my bad. I have another tsconfig file that extends from this one which sets the es5 target. Didn't add that file here for brevity. I've modified the example above. (I've also tried it with setting it directly at that place, which gave the same results). — heisa, Aug 28 '19 at 13:45
Have you followed the steps in [this answer](https://stackoverflow.com/questions/56379067/how-do-i-support-internet-explorer-in-an-angular-8-application/56573079#56573079)? Please pay attention to **change yourAppName in `app:build:es5` to your app name**. If it still doesn't work, you could provide [a minimal,reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) in [stackblitz](https://stackblitz.com/) so that we could test it in our sides. — Yu Zhou, Aug 29 '19 at 03:17
Thx, I did try that at one point. This essentially makes the es5/es2015 target configurable. But I'm testing it on a much lower level right now, by setting the whole app directly to es5 (which should do the same). Stackblitz isn't an option I think because you'd need to build the code. Minimal example can be found in https://github.com/thegreatanon/prism-ie-crash/tree/master — heisa, Aug 29 '19 at 06:36
I reproduced the issue in my side. The error in my side occurs in `class PrismHoodClass {` and I can't build the app in prod mode either. There's also error in `vendor-es5.js`. I think the issue is more likely a bug of Angular or `ngx-prism`. I also found a similar issue [in github but with no solution](https://github.com/ngx-prism/core/issues/3). I think you could make a pull request or report a issue in angular's or ngx-prism's github. — Yu Zhou, Sep 02 '19 at 10:06
I got the same issue and the source was an external js library using '=>' (fat arrow) on code. I changed it and it worked. — winghei, Oct 01 '19 at 15:04

Matt Walterspieler · Answer 1 · 2019-08-28T13:47:03.240

0

In the browserlist file you have to remove the not to support IE11 at line not IE 9-11 # For IE 9-11 support, remove 'not'. to IE 9-11 # For IE 9-11 support, remove 'not'.

For more information: check this article at paragraph Differential loading https://blog.angularindepth.com/embrace-yourself-angular-8-is-coming-1bf187c8f0bf

edited Aug 28 '19 at 13:47

answered Aug 28 '19 at 13:44

Matt Walterspieler

2,073
2
21
34

1

That is the case. Otherwise the differential loading wouldn't work when building the app. I will add my browserlist to the op – heisa Aug 28 '19 at 13:46

Angular 8 ES5 target is not fully transpiled to ES5, causing problems with IE11

1 Answers1