错误:无法匹配任何路线.网址段:“登录" [英] Error: Cannot match any routes. URL Segment: 'login'

问题描述

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

localhost:4200/登录，它返回链接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>

解决方案

这是因为您在app.module.ts和routing-module.module.ts中声明了路由.而是在路由模块中声明所有路由.您可以使用@angular/cli生成路由模块，以便使用更好的名称进行创建.如果使用cli命令创建它，请将名称设置为routing，因为Angular已经为您添加了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 }
];

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>

解决方案

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 }
];

这篇关于错误:无法匹配任何路线.网址段:“登录"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！