错误:无法匹配任何路由。URL段：“登录”

Question

我的页面http: // localhost:4200正确加载，但是当我想转到链接http: // localhost: 4200 /login时，它返回到链接http: // localhost: 4200并显示错误。

localhost: 4200 /login它返回到链接http: // localhost: 4200并显示错误。

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>

Answer 1

这是因为您在app.module.ts和routing-module.module.ts中声明路由。请在路由模块中声明所有路由。您可以使用@angular/cli生成路由模块，以便使用更好的名称创建它。如果您使用cli命令创建它，那么将名称设置为routing (角)将已经为您添加了module。将module添加到您的名称中将为您提供类名(RoutingModuleModule)中的红色Module单词。

删除在app.module.ts中创建的路由并导入RoutingModule (在本例中为RoutingModuleModule )

imports: [
  BrowserModule,
  RoutingModuleModule
]

将路线从app.module.ts移动到routing.module.ts

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