Internet Explorer上的angular 2意外路由 [英] angular 2 unexpected routing on Internet Explorer
本文介绍了Internet Explorer上的angular 2意外路由的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我的spring-boot / angular 2应用程序（在嵌入式tomcat上托管）在Chrome，Safari，Opera和Edge上运行良好。
但是在IE上，应用程序直接路由到PageNotFound组件。
为index.html添加了垫片，但仍然没有运气。
提前谢谢
index.html
<！doctype html>
< html>
< head>
< meta charset =utf-8>
< title> < /标题>
< base href =。>
< meta name =viewportcontent =width = device-width，initial-scale = 1>
< link rel =icontype =image / x-iconhref =./ res / images / favicon.ico>
<！ - 最新编译和缩小的CSS - >
< link rel =stylesheethref =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.cssintegrity =sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va + PmSTsz / K68vbdEjh4u
crossorigin =anonymous>
<！ - application css - >
< link href =./ res / styles / app.css =stylesheet/>
< script type =text / javascriptsrc =https://cdn.ywxi.net/js/1.jsasync>< / script>
< script src =https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.33.3/es6-shim.min.js>< / script>
< script src =https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.20/system-polyfills.js>< / script>
< script src =https://npmcdn.com/angular2/es6/dev/src/testing/shims_for_IE.js>< / script>
< / head>
< body>
< app-root>UygulamaYükleniyor...< / app-root>
< / body>
< / html>
app-routing.module.ts
<$来自'@ angular / core'的p $ p>
rt {NgModule};
从'@ angular / router'导入{Routes，RouterModule};
从'./ortak/ortak-list.component'导入{OrtakListComponent};来自'./login/login.component'的
import {LoginComponent};来自'./page-not-found.component'的
import {PageNotFoundComponent};来自'./guards/auth.guard'的
import {AuthGuard};来自'./login/forgot-password.component'的
import {ForgotPasswordComponent};
const routes：Routes = [
{path：''，pathMatch：'full'，redirectTo：'login'，}，
{path：'ortak /：id '，component：OrtakListComponent，canActivate：[AuthGuard]，loadChildren：'。/ ortak / ortak.module＃OrtakModule'}，
{path：'login'，component：LoginComponent}，
{path： 'forgotpassword'，组件：ForgotPasswordComponent}，
{路径：'**'，pathMatch：'完整'，组件：PageNotFoundComponent}，
];
@NgModule（{
进口：[RouterModule.forRoot（路线）]，
出口：[RouterModule]
}）
导出类AppRoutingModule {}
export const routableComponents = [
LoginComponent，
PageNotFoundComponent，
ForgotPasswordComponent，
];
解决方案
您使用的是哪个版本的IE。除非您的浏览器支持History pushState，否则它将无效。
My spring-boot/angular 2 app(hosted on embedded tomcat) works fine on Chrome,Safari,Opera and Edge. However on IE the app directly routes to PageNotFound component. Added shims for IE to index.html but still no luck. thank you in advance
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> </title>
<base href=".">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="./res/images/favicon.ico">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<!-- application css -->
<link href="./res/styles/app.css" rel="stylesheet" />
<script type="text/javascript" src="https://cdn.ywxi.net/js/1.js" async></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.33.3/es6-shim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.20/system-polyfills.js"></script>
<script src="https://npmcdn.com/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
</head>
<body>
<app-root>Uygulama Yükleniyor...</app-root>
</body>
</html>
app-routing.module.ts
rt {NgModule} from '@angular/core';
import {Routes,RouterModule} from '@angular/router';
import {OrtakListComponent} from './ortak/ortak-list.component';
import {LoginComponent} from './login/login.component';
import {PageNotFoundComponent} from './page-not-found.component';
import {AuthGuard} from './guards/auth.guard';
import {ForgotPasswordComponent} from './login/forgot-password.component';
const routes:Routes =[
{path:'' , pathMatch:'full' , redirectTo:'login',},
{path:'ortak/:id', component:OrtakListComponent,canActivate:[AuthGuard],loadChildren:'./ortak/ortak.module#OrtakModule'},
{path:'login' , component:LoginComponent},
{path:'forgotpassword',component:ForgotPasswordComponent},
{path:'**',pathMatch:'full',component:PageNotFoundComponent},
];
@NgModule({
imports:[RouterModule.forRoot(routes)],
exports:[RouterModule]
})
export class AppRoutingModule{}
export const routableComponents = [
LoginComponent,
PageNotFoundComponent,
ForgotPasswordComponent,
];
解决方案
Which version of IE are you using. It will not work unless your browser supports History pushState.
这篇关于Internet Explorer上的angular 2意外路由的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
