why I am getting "SCRIPT5021: Invalid range in character set" and blank screen in IE11?

Viewed 1325

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

0 Answers
Related