Syntax error on IE11 with Angular 10(non-CLI)

Question

I'm currently making app in Angular 10 (not use Angular-cli).
This app is compiled and bundled using webpack 4 and @ngtools/webpack, then working fine on Chrome, but not working on IE11 with below error.

SCRIPT1002: Syntax error 
vendor.js (2, 5884)
function makeDecorator(name, props, parentClass, additionalProcessing, typeFn) {
    return noSideEffects(() => {
                         ^^^^^

How can I get rid of this error?

webpack.config.js (excerpt)

module.exports = {

    entry: {
        'polyfills': './app/polyfills.ts',
        'vendor': './app/vendor.ts',
        'app': './app/main.ts'
    },

    resolve: {
        extensions: ['.js', '.ts']
    },

    module: {
        rules: [
            {
                test: /(?:\.ngfactory\.js|\.ngstyle\.js|\.ts)$/,
                use: [
                    {
                        loader: '@ngtools/webpack'
                    }
                ]
            }
        ]
    }
    
    plugins: [
        new AngularCompilerPlugin({
            tsConfigPath: 'tsconfig.json',
            entryModule: 'app/app.module.ts#AppModule'
        })
    ]
}

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "es2020",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true,
    "types": ["node", "core-js"],
    "typeRoots": ["node_modules/@types"],
    "sourceMap": true,
    "plugins": [
      { "name": "@angular/language-service" }
    ],
    "lib" : ["es2015", "es2015.iterable", "dom"],
  },
  "exclude": [
    "node_modules",
  ],
  "angularCompilerOptions": {
    "enableIvy": true,
    "skipMetadataEmit" : true,
  }
}

polyfills.ts

import "core-js/es/array/index";
import "core-js/es/date/index";
import "core-js/es/function/index";
import "core-js/es/map/index";
import "core-js/es/math/index";
import "core-js/es/number/index";
import "core-js/es/object/index";
import "core-js/es/reflect/index";
import "core-js/es/regexp/index";
import "core-js/es/set/index";
import "core-js/es/string/index";
import "core-js/es/symbol/index";

import "core-js/features/reflect/index";
import "zone.js/dist/zone";

import "classlist.js";
import "web-animations-js";

if (!Element.prototype.matches) {
  Element.prototype.matches = (<any>Element.prototype).msMatchesSelector ||
    Element.prototype.webkitMatchesSelector;
}

package.json (dependencies)

"dependencies": {
  "@angular/animations": "10.2.0",
  "@angular/common": "10.2.0",
  "@angular/compiler": "10.2.0",
  "@angular/compiler-cli": "10.2.0",
  "@angular/core": "10.2.0",
  "@angular/forms": "10.2.0",
  "@angular/language-service": "10.2.0",
  "@angular/platform-browser": "10.2.0",
  "@angular/platform-browser-dynamic": "10.2.0",
  "@angular/router": "10.2.0",
  "@fortawesome/fontawesome-free": "5.15.1",
  "angular-in-memory-web-api": "0.11.0",
  "bootstrap": "4.5.3",
  "classlist.js": "1.1.20150312",
  "core-js": "3.7.0",
  "jquery": "3.5.1",
  "popper.js": "1.16.0",
  "rxjs": "6.6.3",
  "web-animations-js": "2.3.2",
  "zone.js": "0.11.2",
},
"devDependencies": {
  "@ngtools/webpack": "10.2.0",
  "@types/core-js": "2.5.4",
  "@types/jasmine": "3.5.14",
  "@types/node": "14.14.2",
  "@types/webpack": "4.41.23",
  "angular2-template-loader": "0.6.2",
  "awesome-typescript-loader": "5.2.1",
  "browserify": "17.0.0",
  "codelyzer": "6.0.1",
  "copy-webpack-plugin": "6.2.1",
  "copyfiles": "2.4.0",
  "css-loader": "5.0.0",
  "file-loader": "6.1.1",
  "glob": "7.1.6",
  "html-loader": "1.3.2",
  "html-webpack-plugin": "4.5.0",
  "istanbul-instrumenter-loader": "3.0.1",
  "mini-css-extract-plugin": "0.12.0",
  "nodemon": "2.0.6",
  "raw-loader": "1.0.0",
  "reflect-metadata": "0.1.13",
  "regenerator-runtime": "0.13.7",
  "remap-istanbul": "0.13.0",
  "rimraf": "3.0.2",
  "source-map-loader": "1.1.1",
  "style-loader": "2.0.0",
  "terser-webpack-plugin": "4.2.3",
  "to-string-loader": "1.1.6",
  "ts-helpers": "1.1.2",
  "ts-node": "9.0.0",
  "tslint": "6.1.0",
  "typescript": "4.0.3",
  "watchify": "3.11.1",
  "webpack": "4.44.1",
  "webpack-cli": "3.3.12",
  "webpack-dev-middleware": "3.7.2",
  "webpack-dev-server": "3.11.0",
  "webpack-md5-hash": "0.0.6",
  "webpack-merge": "5.2.0"
}

[IE 11 does not support arrow functions.](https://stackoverflow.com/q/40216015) You likely need to transpile your code with Babel to produce valid ES5 code that IE11 would understand. See also [Angular 2 / 4 / 5 not working in IE11](https://stackoverflow.com/q/35140718) — VLAZ, Nov 24 '20 at 11:59

score 0 · Answer 1 · answered Nov 24 '20 at 12:00

0

Check browserslist file. You should remove not before IE 9-11. Like this:

> 0.5%
last 2 versions
Firefox ESR
not dead
IE 9-11 # For IE 9-11 support, remove 'not'.

answered Nov 24 '20 at 12:00

michal.jakubeczy

8,221
1
59
63

Syntax error on IE11 with Angular 10(non-CLI)

1 Answers1