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
array.includes
import. That function is also not supported in IE.)