Error: Cannot match any routes. URL Segment: '

问题:

my page http: // localhost:4200 load correctly, but when i want to go to the link http: // localhost: 4200 /login it return to the link http: // localhost: 4200 and show error.

localhost: 4200 /login it return to the link http: // localhost: 4200 and show error.

routing-module.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule , Routes} from '@angular/router';
import { LoginComponent } from './components/login/login.component';
import { TaskManagerComponent } from './components/task-manager/task-manager.component';


const routes:Routes=[
   { path : 'login',component:LoginComponent },
   { path : 'task' ,component:TaskManagerComponent }
];

@NgModule({
  declarations: [
    LoginComponent

  ],
  imports: [
    CommonModule,
    RouterModule.forRoot(routes),
    RoutingModuleModule
  ],
  exports:[RouterModule]
})
export class RoutingModuleModule { }

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule , Routes} from '@angular/router';


import { AppComponent } from './app.component';
import { HeaderComponent } from './components/header/header.component';
import { FooterComponent } from './components/footer/footer.component';
import { TaskManagerComponent } from './components/task-manager/task-manager.component';
import { TaskFormComponent } from './components/task-manager/task-form/task-form.component';
import { TaskListComponent } from './components/task-manager/task-list/task-list.component';
import { TaskDetailComponent } from './components/task-manager/task-detail/task-detail.component';
import { TaskItemComponent } from './components/task-manager/task-list/task-item/task-item.component';

const appRoute:Routes = [
  {path:'' ,component:TaskManagerComponent}

]

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    FooterComponent,
    TaskManagerComponent,
    TaskFormComponent,
    TaskListComponent,
    TaskDetailComponent,
    TaskItemComponent,
  ],
  imports: [
    BrowserModule,
       RouterModule.forRoot(appRoute)

  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html

 <div class="row">
    <div class="col">
        <app-header></app-header>
    </div>
  </div>
  <hr>
  <div class="row mt-5 mb-5">
    <div class="col mx-auto">
      <router-outlet></router-outlet>
    </div>
  </div>
  <hr>
  <div class="row">
    <div class="col">
      <app-footer></app-footer>
    </div>
  </div>

回答1:

This is because you are declaring routes in the app.module.ts as well as routing-module.module.ts. Declare all your routes in the routing module instead. You can use @angular/cli to generate your routing module so it's created with a better name. If you create it using cli commands, set the name as routing as Angular will already add module for you. explicity adding module to your name will give you the redudant Module word in your class name (RoutingModuleModule).

Remove the routes created in your app.module.ts and import RoutingModule (or RoutingModuleModule in your case)

imports: [
  BrowserModule,
  RoutingModuleModule
]

Move the route from your app.module.ts to your routing.module.ts

const routes: Routes = [
   { path: '' , redirectTo: '/task', pathMatch: 'full' }
   { path: 'login', component: LoginComponent },
   { path: 'task' , component: TaskManagerComponent }
];