Angular 5 (IE11) Error: Uncaught (in promise): Error: Cannot match any routes

Question

I am having trouble with IE11 in Angular 5 a couple of days. I have turned on polyfills:

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

and set meta tag for IE:

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

Everything is working when I start project with ng serve . But when I build project with --prod option, app is not working in IE11. Firefox and Chrome are working fine.

Console log:

    ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'gui/account'
    Error: Cannot match any routes. URL Segment: 'gui/account'
       at Anonymous function (http://localhost:8080/gui/main.d12ff1833b14b6308efb.bundle.js:1:401190)
       at e.prototype.error (http://localhost:8080/gui/main.d12ff1833b14b6308efb.bundle.js:1:386643)
       at e.prototype._error (http://localhost:8080/gui/main.d12ff1833b14b6308efb.bundle.js:1:7955)
       at e.prototype.error (http://localhost:8080/gui/main.d12ff1833b14b6308efb.bundle.js:1:7661)
       at e.prototype._error (http://localhost:8080/gui/main.d12ff1833b14b6308efb.bundle.js:1:7955)
       at e.prototype.error (http://localhost:8080/gui/main.d12ff1833b14b6308efb.bundle.js:1:7661)
       at e.prototype._error (http://localhost:8080/gui/main.d12ff1833b14b6308efb.bundle.js:1:7955)
       at e.prototype.error (http://localhost:8080/gui/main.d12ff1833b14b6308efb.bundle.js:1:7661)
       at e.prototype._error (http://localhost:8080/gui/main.d12ff1833

SCRIPT5011: Can't execute code from a freed script
File: polyfills.6460c1711c3b9abc371d.bundle.js, Line: 1, Column: 69035

When I try to debug it, I get some error in polyfills.bundle.js:

IE11 debug screenshot

Thank you a lot for your help.

Answer 1

I had the same issue only with IE11 using Angular 6 and Spring boot

I solved the problem using my own factory to provide the APP_BASE_HREF token based on the current location window.location.pathname :

{
    provide: APP_BASE_HREF,
    useValue: window.location.pathname,
}

I also removed the <base href > tag from index.html just to keep it concise.

See IE11 Route Issue with sub-folder relative base path

See my source code

Answer 2

I finally found out what caused this problem. I was serving Angular app from Spring application webapp/gui folder . This caused router to behave strange and solution was to change base href in index.html from

<base href="#/">

to

<base href="/gui/">

This way my Angular Spring controller will redirect link http://localhost:8080/gui/account to Angular index.html. Then Angular router will pick up this link and redirect to /account component.

This is maybe related to a defect https://github.com/angular/angular/issues/18176 .

I hope this will help you guys also.