CODEWITHSUNDEEP
javascriptangulartypescriptecmascript-6internet-explorer-11
Jean Silveira
Jean Silveira

Reputation: 149

SCRIPT1002 Syntax Error in vendor.js - Angular 8 IE11

Trying to get Angular to work in IE 11. I tried everything I found on the web already.

I'm getting the following errors:

SCRIPT1002: Syntax error

File: vendor.js, Line: 110874, Column: 40

Line 110874

args[0].replace(/%[a-zA-Z%]/g, match => {
    if (match === '%%') {
        return;
    }
    index++;
    if (match === '%c') {
        // We only are interested in the *last* %c
        // (the user may have provided their own)
        lastC = index;
    }
});

I have already made the recommended es5 configurations indicated by the angle and I am running with these configurations (https://angular.io/guide/deployment Configuring serves for ES5).

My polyfills.ts:

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

/** IE10 and IE11 requires the following for the Reflect API. */
import 'core-js/es6/reflect';
import 'web-animations-js';  // Run `npm install --save web-animations-js`.
import 'zone.js/dist/zone';  // Included with Angular CLI.

My tsconfig.json:

{
    "compileOnSave": false,
    "compilerOptions": {
        "baseUrl": "./",
        "outDir": "./dist/out-tsc",
        "sourceMap": true,
        "declaration": false,
        "module": "esnext",
        "moduleResolution": "node",
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "importHelpers": true,
        "target": "es2015",
        "typeRoots": [
            "node_modules/@types"
        ],
        "lib": [
            "es2018",
            "dom"
        ]
    }
}

My tsconfig.es5.json:

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

I'm using angular 8 and primeng; And I run with ng serve -- configuration es5;

Update: From what I discovered the problem occurs with the dependencies of the socket-io-client I am using. Researching a little it seems that the problem has to do with the socket-io-client's debug and babel dependencies. I really need to use the socket on my system so I am still looking for a solution. But if I remove the socket-io-client it will run normally.

I found the source of the problem through these two topics:

https://github.com/visionmedia/debug/issues/729

https://github.com/babel/babel/issues/10707

Upvotes: 4

Views: 10774

Answers (1)

Yu Zhou
Yu Zhou

Reputation: 12961

The issue is arrow functions not being transpiled successfully. Have you followed the steps in this answer to support Angular 8 in IE 11? If you have followed the steps and the problem still persistes, it might because you used external js library containing arrow functions.

Angular CLI doesn't transpile Javascript code. Third-party code is expected to be in the appropriate format. You should use an ES5 version of the library to make it compatible with IE 11.

You could also refer to this thread, set lib to "es5", "es6", "dom" to see if it works. If not working, just use an ES5 library version.

---------------------------------------------------------------------Edit-------------------------------------------------------------

You could use exclude property in webpack.config.js or babel.config.js to transpile modules. We could change this:

...
  exclude: /node_modules/,
...

into this:

...
  exclude: /node_modules\/(?!name-of-untranspiled-module)/,
...

Reference: How to handle npm modules which include es6

Upvotes: 2

Related Questions