Непринятый (в обещании): Ошибка: не может соответствовать любым маршрутам: ''

Question

Я только начал изучать Angular2 и создал образец проекта, в котором мне нужно маршрутизировать между тремя страницами.

Я создал RouterModule в app.module.ts в следующем

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

Когда я скомпилировать программу я получаю сообщение об ошибке, как

EXCEPTION: Uncaught (in promise): Error: Cannot match any routes: ''

Может кто-нибудь помочь меня в решении этой проблемы

Заранее спасибо

Answer 1

Попробуйте настроить некоторые базовые глобальные маршруты, включая пустой маршрут и поймать весь маршрут.

Вот пример 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, потому что маршрутизатор соответствует маршрутам в том порядке, в котором они зарегистрированы. Импортируя последний маршрут «matches anything», вы будете уверены, что сначала будут проверены все остальные маршруты.

Установите enableTracing в соответствие с вашими маршрутами, чтобы помочь отлаживать изменения навигации во время разработки.

Это должно быть хорошее место для начала

Answer 2

я вычислял проблему, я пропустил, чтобы добавить путь по умолчанию в RouterModule

{путь: '', RedirectTo: '/ Войти', pathMatch: 'полный'}