IE 11 throwing Syntax Error on chunk.js for Angular 7 app

Question

We are building an Angular 7 app which needs to support IE11. So this works fine in my local developer's box in IE. However, when deployed to higher environments, it is giving a Syntax Error on chunk.js due to which app is not rendering:

SCRIPT1002: Syntax Error
0.f7d1b3144b6e689b2f6b.chunk.js (1,1088655)

This works just fine in every other browser including EDGE. I have no idea how to debug/understand this error. Any help would be appreciated. I have added the following 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/es7/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/weak-map';
import 'core-js/es6/set';

/** IE10 and IE11 requires the following for NgClass support on SVG elements */
import 'classlist.js'; // Run `npm install --save classlist.js`.

/** Evergreen browsers require these. **/
import 'core-js/es6/reflect';
import 'core-js/es7/reflect';

/**
 * Required to support Web Animations `@angular/animation`.
 * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
 **/
import 'web-animations-js';  // Run `npm install --save web-animations-js`.

/***************************************************************************************************
 * Zone JS is required by Angular itself.
 */
import 'zone.js/dist/zone'; // Included with Angular CLI.

tsconfig-aot.json:

{
    "compilerOptions": {
        "target": "es5",
        "module": "es2015",
        "moduleResolution": "node",
        "sourceMap": false,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "removeComments": false,
        "noImplicitAny": false,
        "suppressImplicitAnyIndexErrors": true,
        "skipLibCheck": true,
        "outDir": "target/www/app",
        "lib": ["es7", "dom"],
        "typeRoots": [
            "node_modules/@types"
        ],
        "baseUrl": "./",
        "paths": {
            "app/*": ["src/main/webapp/app/*"]
        },
        "importHelpers": true
    },
    "angularCompilerOptions": {
        "genDir": "target/aot",
        "skipMetadataEmit" : true,
        "fullTemplateTypeCheck": true,
        "preserveWhitespaces": true
    }
}

tsconfig.json

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "moduleResolution": "node",
        "sourceMap": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "removeComments": false,
        "noImplicitAny": false,
        "skipLibCheck": true,
        "suppressImplicitAnyIndexErrors": true,
        "outDir": "target/classes/static/app",
        "lib": ["es7", "dom"],
        "typeRoots": [
            "node_modules/@types"
        ],
        "baseUrl": "./",
        "paths": {
            "app/*": ["src/main/webapp/app/*"]
        },
        "importHelpers": true,
        "allowJs": true
    },
  "include": [
    "src/main/webapp/app",
    "src/test/javascript/"
  ],
    "exclude": [
        "node_modules"
    ]
}

Besides adding the polyfill, have you run `npm install --save classlist.js` and so on to install the packages? Please refer to [this answer](https://stackoverflow.com/questions/57192843/angular-applications-throwing-syntax-errors-on-ie11-only/57193444#57193444) to make sure you have followed the steps to support Angular 7 in IE 11. I remember Angular 7 doesn't need to modify **tsconfig.json** to support IE 11. Besides, please compare the differences between your local environment and higher environment to see if there might be some differences can cause the issue. — Yu Zhou, Mar 25 '21 at 03:31

score 0 · Answer 1 · answered Mar 24 '21 at 08:31

0

You have a class keyword in your source and it is not supported by IE11 (which only supports ES5). You need to change the target property yo es5.

You can add a tsconfig-es5.app.json file like this:

{
    "extends": "./tsconfig-aot.json",
    "compilerOptions": {
        "target": "es5" 
    }
}

Then in your angular.json file, add an es5 configuration target:

"configurations": {
    "es5" : {
                  "tsConfig": "./tsconfig-es5.app.json"
                }
}

Then, you should be able to run: npm run build --configuration=es5

answered Mar 24 '21 at 08:31

Michael Desigaud

2,115
1
15
15

Sorry I forgot to add that the app works just fine in local developer's box. This only fails when we deploy them on higher environments on ICP. I have added tsconfig.json as well in the question. So I m already specifying target:"es5". Will your solution still be needed? and how is it that the code is working from local box but fails in higher environments. Deploying on ICP. – bidisha mukherjee Mar 24 '21 at 09:52
it is possible if you have many tsconfig.json file (tsconfig.json, tsconfig-app.json, tsconfig-aot.json, etc..). Maybe one of them is used and does not have an `es5` target – Michael Desigaud Mar 24 '21 at 09:54
We have tsconfig.json and tsconfig-app.json and I have posted both in the question. They both have es5 target – bidisha mukherjee Mar 24 '21 at 10:17

IE 11 throwing Syntax Error on chunk.js for Angular 7 app

1 Answers1