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%"
    ]

Answer 1

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