网站搜索

javascript - Angular 5 (IE11) 错误:未捕获(在 promise 中):错误:无法匹配任何路由


我在使用 Angular 5 时,过去几天在 IE11 上遇到了问题。我已经开启了 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';

并为 IE 设置元标签:

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

当我使用 ng serve 启动项目时,一切正常。但当我使用 --prod 选项构建项目时,应用在 IE11 上无法正常工作。Firefox 和 Chrome 都可以正常使用。

控制台日志:

    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

当我尝试调试它时,我在 polyfills.bundle.js 中收到一些错误:

IE11 调试截图

非常感谢你的帮助。

答案#1

我也遇到了同样的问题,只是在使用 Angular 6 和 Spring Boot 的 IE11 上

我使用自己的工厂来提供 APP_BASE_HREF 令牌,基于当前的位置 window.location.pathname,从而解决了这个问题:

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

我还从 index.html 中删除了 <base href> 标签,只是为了保持简洁。

查看 IE11 子文件夹相对基础路径的路由问题

查看我的源代码

答案#2

我终于找到了导致这个问题的原因。我是从 Spring 应用程序的 webapp/gui 文件夹 提供 Angular 应用程序的。这导致路由行为异常,解决方案是在 index.html 中将 base href 从

<base href="#/">

到

<base href="/gui/">

这样我的 Angular Spring 控制器将把链接 http://localhost:8080/gui/account 重定向到 Angular 的 index.html。然后 Angular 路由器将捕捉该链接并重定向到 /account 组件。

这可能与一个缺陷有关 https://github.com/angular/angular/issues/18176 。

我希望这也能帮助你们大家。