![](/img/trans.png)
[英]EXCEPTION: Error: Uncaught (in promise): Error: Cannot match any routes: ''"
[英]Uncaught (in promise): Error: Cannot match any routes: ' '
我刚开始学习 Angular2 并创建了一个示例项目,我需要在其中在三个页面之间进行路由。
我在 app.module.ts 中创建了一个 RouterModule,如下所示
@NgModule({
imports: [
BrowserModule,
HttpModule,
FormsModule,
RouterModule.forRoot([
{path:'login',component : loginComponent},
{path:'logout',component :logoutComponent},
{path:'home',component : homeComponent}
])
我的 app.component.ts 如下:
@Component({
selector: 'my-app', // <my-app></my-app>
providers: [Wakanda],
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
我的 loginComponent.ts
@Component({
selector:'login',
template : `
<h1>Login</h1>
`
})
我的 logoutComponent.ts
@Component({
selector:'logout',
template : `
<h1>Login</h1>
`
})
我的 homeComponent.ts
@Component({
selector : 'home',
template : `
<h1>Login</h1>
`
})
我的 app.component.html
<header>
<nav>
<div class="nav-wrapper">
<ul class="right hide-on-med-and-down">
<li>
<a routerLink ="./home">Home</a>
</li>
<li class="active">
<a routerLink="./login">LogIn</a>
</li>
<li>
<a routerLink="./logout">Log out</a>
</li>
</ul>
</div>
</nav>
</header>
<main>
<router-outlet></router-outlet>
</main>
当我编译程序时出现错误
异常:未捕获(承诺):错误:无法匹配任何路线:''
谁能帮我解决这个问题
提前致谢
尝试设置一些基本的全局路由,包括空路由和捕获所有路由。
这是一个示例app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { PageNotFoundComponent } from './page-not-found.component';
const appRoutes: Routes = [
{
path: '',
redirectTo: '/login',
pathMatch: 'full'
},
{ path: '**', component: PageNotFoundComponent }
];
@NgModule({
imports: [
RouterModule.forRoot(appRoutes, { enableTracing: true })
],
exports: [
RouterModule
]
})
export class AppRoutingModule { }
这是app.module.ts
import { AppRoutingModule } from './app-routing.module';
...
@NgModule({
imports: [
...
AppRoutingModule // Make sure this one is last
],
bootstrap: [AppComponent]
})
export class AppModule { }
PageNotFoundComponent
会显示在<router-outlet>
(它是一个基本组件)中,只要路由不匹配任何先前定义的路由并且''
路径匹配空路由( localhost:4200/
)。
你会希望你的AppRoutingModule
最后导入你的AppModule
,因为路由器按照它们注册的顺序匹配路由。 通过最后导入“匹配任何”路由,您将确保首先检查所有其他路由。
将路由的enableTracing
设置为 true 以帮助在开发过程中调试导航更改。
这应该是一个很好的起点
我想出了问题,我错过了在 RouterModule 中添加默认路径
{
path:'',
redirectTo:'/login',
pathMatch:'full'
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.