5

I am using Angular 9, All code is working fine in chrome but not in IE11 , I am no where using any Regex and mostly I am using back tics.

Below error is coming in Polyfills-es5.js as on page load:

ERROR Error: Uncaught (in promise): SyntaxError: Invalid range in character set

Below error is coming after I click on any lazy loaded routing buttons

ERROR Error: Uncaught (in promise): TypeError: Unable to get property 'ɵmod' of undefined or null reference TypeError: Unable to get property 'ɵmod' of undefined or null reference

Routes.ts:

const routes: Routes = [
  {
    path: 'home',
    canActivate: [AuthGuard],

    children: [
      {
        path: '',
        //loadChildren: () => DashboardModule,
        loadChildren: () => import('./dashboard/dashboard.module').then(m => m.DashboardModule),
      },
      {
        path: 'create',
        canActivateChild: [AuthGuard],
        //loadChildren: () => HomeModule,
        loadChildren: () => import('./home/home.module').then(m => m.HomeModule),
      },
      {
        path: 'inquiry',
        canActivateChild: [AuthGuard],
        //loadChildren: () => InquiryModule,
        loadChildren: () => import('./inquiry/inquiry.module').then(m => m.InquiryModule),
      },
      {
        path: 'noaccess',
        component: NoAccessComponent
      },
    ]
  },
  {
    path: 'login',
    component: LoginComponent
  },

  {
    path: '**', redirectTo: 'home/dashboard'
  }
];

I am not sure on what mistake I have done.

Polyfills.ts:

import 'core-js/es/symbol';
import 'core-js/es/object';
import 'core-js/es/function';
import 'core-js/es/parse-int';
import 'core-js/es/parse-float';
import 'core-js/es/number';
import 'core-js/es/math';
import 'core-js/es/string';
import 'core-js/es/date';
import 'core-js/es/array';
import 'core-js/es/regexp';
import 'core-js/es/map';
import 'core-js/es/weak-map';
import 'core-js/es/set';
import 'core-js/modules/es.array.includes'

import 'core-js'
import 'classlist.js';  // Run `npm install --save classlist.js`.
import 'core-js/es/reflect';
import 'web-animations-js';
import 'zone.js/dist/zone';

tsconfig.ts:

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "module": "esnext",
    "moduleResolution": "node",
    "importHelpers": true,
   // "target": "es2015",
    "target": "es5",
    "typeRoots": ["node_modules/@types"],
    "lib": ["es2018", "dom"],
    "paths": {
      "@app/*": ["src/app/*"],
      "@environments/*": ["src/environments/*"],
      // "@assets/images/*": ["src/assets/images*"]
    }
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true
  }
}

angular.json:

{
  "projects": {
    "my-app": {
      "architect": {
        "build": {
          "configurations": {
            "es5" : {
              "tsConfig": "tsconfig.app.es5.json"
            }
          }
        },
        "serve": {
          "configurations": {
            "es5": {
              "browserTarget": "my-app:build:es5"
}}}}}}}

browserslist:

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

tsconfig.app.es5.json:

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

I have already tried:

ng serve --configuration es5
npm run build
npm run startES5

error screen shots:

Blank on pageload in IE11

Error on Console log of IE11

emod error

5
  • 1
    Apparently some code that runs, when you enter a module uses some function that is not supported by IE. Might not even be your own code, but could also be a library function. (Aside from this pointing to regex, I also see an array.includes import. That function is also not supported in IE.)
    – Gunnar B.
    Commented Aug 26, 2020 at 11:06
  • 1
    @GunnarB Thank you, I have removed array.includes but no change in the error. I am receiving Error: SCRIPT5021: Invalid range in character set on page load in IE11.
    – saash_me
    Commented Aug 26, 2020 at 14:47
  • 2
    Try to click on the line number and check on which line error occurs maybe you have syntax error there. Other then that try to make sure that you had assigned all objects properly. Try to check and make sure that you had added the polyfills for IE properly and they are compatible. Commented Aug 27, 2020 at 3:05
  • 1
    @Deepak-MSFT thanks for the advice! In my case it was because of named groups in a regular expression, which IE 11 does not support.
    – bgh
    Commented Nov 18, 2020 at 5:59
  • 2
    @saash_me were you able to solve the problem? Perhaps post an answer in order to help future visitors solve it.
    – bgh
    Commented Nov 18, 2020 at 6:01

0