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
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.)@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.
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.
@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.
@saash_me were you able to solve the problem? Perhaps post an answer in order to help future visitors solve it.