Javascript 未捕获（承诺中）：错误：无法匹配任何路由：''；

我刚开始学习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']
})

@组件({
选择器：'我的应用'，//
提供者：[Wakanda]，
templateUrl:“./app.component.html”，
样式URL:['./app.component.scss']
})

我的登录组件.ts

@Component({
    selector:'login',
    template : `
    <h1>Login</h1>
    `
})

@Component({
    selector:'logout',
    template : `
    <h1>Login</h1>
    `
})

@Component({
    selector : 'home',
    template : `
    <h1>Login</h1>
    `
})

@组件({
选择器：'login'，
模板：`
登录
`
})

我的logoutComponent.ts

@Component({
    selector:'login',
    template : `
    <h1>Login</h1>
    `
})

@Component({
    selector:'logout',
    template : `
    <h1>Login</h1>
    `
})

@Component({
    selector : 'home',
    template : `
    <h1>Login</h1>
    `
})

@组件({
选择器：'logout'，
模板：`
登录
`
})

我的homeComponent.ts

@Component({
    selector:'login',
    template : `
    <h1>Login</h1>
    `
})

@Component({
    selector:'logout',
    template : `
    <h1>Login</h1>
    `
})

@Component({
    selector : 'home',
    template : `
    <h1>Login</h1>
    `
})

@组件({
选择器：“主页”，
模板：`
登录
`
})

my 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>

家


登录


注销

当我编译程序时，我得到一个错误

异常：未捕获（承诺中）：错误：无法匹配任何路由：“”

有人能帮我解决这个问题吗

---

提前感谢

我发现了问题所在，没有在RouterModule中添加默认路径

{
  path:'',
  redirectTo:'/login',
  pathMatch:'full'
} 

---

尝试设置一些基本全局路由，包括空路由和全覆盖路由

下面是一个示例

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 { }

import { AppRoutingModule } from './app-routing.module';
...

@NgModule({
    imports: [
    ...
    AppRoutingModule // Make sure this one is last
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

这是

app.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 { }

import { AppRoutingModule } from './app-routing.module';
...

@NgModule({
    imports: [
    ...
    AppRoutingModule // Make sure this one is last
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

只要路由与以前定义的任何路由不匹配且路径与空路由匹配（

localhost:4200/

），则

PageNotFoundComponent

将显示在

（它是一个基本组件）

您将希望最后导入

AppModule

中的

AppRoutingModule

，因为路由器按照注册的顺序匹配路由。通过最后导入“匹配任何内容”路由，您将确保首先检查所有其他路由

将路由设置为true，以帮助在开发时调试导航更改

这应该是一个好的开始