Uncaught (in Versprechen): Fehler: Keine Routen gefunden: ''

Question

Ich habe gerade angefangen Angular2 zu lernen und ein Beispielprojekt erstellt, in dem ich zwischen drei Seiten routen muss.

habe ich eine RouterModule in den app.module.ts wie die folgende

@NgModule({ 
    imports: [ 
    BrowserModule, 
    HttpModule, 
    FormsModule, 

    RouterModule.forRoot([ 
    {path:'login',component : loginComponent}, 
    {path:'logout',component :logoutComponent}, 
    {path:'home',component : homeComponent} 

]) 

meine app.component.ts ist als der folgende:

@Component({ 
    selector: 'my-app', // <my-app></my-app> 
    providers: [Wakanda], 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.scss'] 
}) 

mein loginComponent.ts

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

mein logoutComponent.ts

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

mein homeComponent.ts

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

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

Wenn ich das Programm kompilieren i als

eine Störung erhalte

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

kann jemand helfen Ich bei der Lösung dieses Problems

Vielen Dank im Voraus

Answer 1

Versuchen Sie, einige globale Basisrouten einzurichten, einschließlich einer leeren Route und einer Catch-Route.

Hier ist ein Beispiel 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 { } 

Dies ist die app.module.ts

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

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

Die PageNotFoundComponent im <router-outlet> angezeigt (es ist eine grundlegende Komponente), wenn die Route nicht alle zuvor definierten Route überein und der Pfad '' entspricht der leeren Route (localhost:4200/).

Sie möchten, dass Ihr AppRoutingModule zuletzt in Ihrem AppModule importiert wird, da der Router die Routen in der Reihenfolge abgleicht, in der sie registriert sind. Durch den Import der Route "Matches anything" werden Sie sicher sein, dass alle anderen Routen zuerst überprüft werden.

Setzen Sie enableTracing auf true für Ihre Routen, um während der Entwicklung Navigationsänderungen zu debuggen.

Dies sollte ein guter Ausgangspunkt sein

Answer 2

ich das Problem gelöst, verpasste ich den Standardpfad in der RouterModule

{path: '', RedirectTo: '/ login', pathMatch: 'voll'} hinzuzufügen