How to make the angular application to run on IE 11 ? Got Error when trying to achieve

Question

I have tried possible ways to make my angular 7 application to work (changed polyfills file) on IE 11 but none is worked. Is there anything I am missing. How should I make it work.Kindly please help me on this.

changed polyfills file and installed npm that are referred in polyfills.ts file Is there anything to change with index.html

Facing Error as
SCRIP1014 Invalid character Error
In vendor.js file

Here is the tsconfig.json file

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "es2015",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ],
    "paths": {
      "@app/*": [
        "src/app/*"
      ],
      "os":[
        "src/empty.ts"
      ],
      "@env/*": [
        "src/environments/*"
      ]
    }
  }
}

What version of ES are you using? You can see it in the tsconfig file. — Jacopo Sciampi, Nov 08 '19 at 13:39
We'll need the vendor.js file that you're trying to use; or a minimal reproduction of that same file that causes the problem. Try an angular bootstrapped project and see if it still happens. — George Stocker, Nov 08 '19 at 13:39
@JacopoSciampi I have updated my question with tsconfig. could u please check it — Ramyachinna, Nov 08 '19 at 13:43
Thank you. Is that a brand new project? Because usually if the errors come from the vendor.js file it's made by a library — Jacopo Sciampi, Nov 08 '19 at 13:46
According to this -> https://stackoverflow.com/questions/57425517/internet-explorer-says-invalid-character-in-vendor-js I would try importing few libraries at time to find which one is causing the error — Jacopo Sciampi, Nov 08 '19 at 14:04
(1) Add a new tsconfig-es5.app.json file. (2) Update angular.json configuration. (3) Run your application: ng serve --configuration es5. I recommend to add a run script in package.json for convenience. Ref: https://medium.com/better-programming/how-to-fix-your-angular-app-when-its-not-working-in-ie11-eb24cb6d9920 — Deepak-MSFT, Nov 11 '19 at 02:09
From your last comment, it looks like you found the solution for your issue. I suggest you to post your solution as an answer and try to mark your own answer as an accepted answer for this question after 48 hrs, when it is available to mark. It can help other community members in future in similar kind of issues. Thanks for your understanding. — Deepak-MSFT, Nov 21 '19 at 11:34

score 0 · Accepted Answer · answered Nov 22 '19 at 09:40

Below is the solution..

In normal angular 7 application , If it doesn't work on IE11

Have to update the polyfills.ts file as below
And Have to set target as es5 in tsconfig.json file

here are the files You have to change like below

polyfills.ts file

/**
 * This file includes polyfills needed by Angular and is loaded before the app.
 * You can add your own extra polyfills to this file.
 *
 * This file is divided into 2 sections:
 *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
 *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
 *      file.
 *
 * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
 * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
 * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
 *
 * Learn more in https://angular.io/guide/browser-support
 */

/***************************************************************************************************
 * BROWSER POLYFILLS
 */

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

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/regexp';
import 'core-js/es6/map';
import 'core-js/es6/weak-map';
import 'core-js/es6/set';

import 'core-js/es6/array';
import 'core-js/es7/array';

import 'core-js/es6/reflect';
import 'core-js/es7/reflect';
import 'core-js/es7/object';


/**
 * Web Animations `@angular/platform-browser/animations`
 * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
 * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
 */
import 'web-animations-js';  // Run `npm install --save web-animations-js`.

/**
 * By default, zone.js will patch all possible macroTask and DomEvents
 * user can disable parts of macroTask/DomEvents patch by setting following flags
 * because those flags need to be set before `zone.js` being loaded, and webpack
 * will put import in the top of bundle, so user need to create a separate file
 * in this directory (for example: zone-flags.ts), and put the following flags
 * into that file, and then add the following code before importing zone.js.
 * import './zone-flags.ts';
 *
 * The flags allowed in zone-flags.ts are listed here.
 *
 * The following flags will work for all browsers.
 *
 * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
 * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
 * (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
 *
 *  in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
 *  with the following flag, it will bypass `zone.js` patch for IE/Edge
 *
 *  (window as any).__Zone_enable_cross_context_check = true;
 *
 */

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


/***************************************************************************************************
 * APPLICATION IMPORTS
 */

tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "es2015",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "target": "es5",
    "lib": [
      "es2018",
      "dom"
    ],
    "paths": {
      "@app/*": [
        "src/app/*"
      ],
      "@env/*": [
        "src/environments/*"
      ]
    }
  }
}

And the thing is I have used angular component as node package In that also I have set the target in tsconfig as es2015. then it works fine for me

Note: Have to run npm install --save classlist.js and npm install --save web-animations-js

How to make the angular application to run on IE 11 ? Got Error when trying to achieve

1 Answers1