错误:无法匹配任何路线.网址段:“登录"

本文介绍了错误:无法匹配任何路线.网址段:“登录"的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

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

localhost:4200/登录，它返回链接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/loginponent'; import { TaskManagerComponent } from './components/task-manager/task-managerponent'; 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 './appponent'; import { HeaderComponent } from './components/header/headerponent'; import { FooterComponent } from './components/footer/footerponent'; import { TaskManagerComponent } from './components/task-manager/task-managerponent'; import { TaskFormComponent } from './components/task-manager/task-form/task-formponent'; import { TaskListComponent } from './components/task-manager/task-list/task-listponent'; import { TaskDetailComponent } from './components/task-manager/task-detail/task-detailponent'; import { TaskItemComponent } from './components/task-manager/task-list/task-item/task-itemponent'; 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 { }

appponent.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/loginponent'; import { TaskManagerComponent } from './components/task-manager/task-managerponent'; 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 './appponent'; import { HeaderComponent } from './components/header/headerponent'; import { FooterComponent } from './components/footer/footerponent'; import { TaskManagerComponent } from './components/task-manager/task-managerponent'; import { TaskFormComponent } from './components/task-manager/task-form/task-formponent'; import { TaskListComponent } from './components/task-manager/task-list/task-listponent'; import { TaskDetailComponent } from './components/task-manager/task-detail/task-detailponent'; import { TaskItemComponent } from './components/task-manager/task-list/task-item/task-itemponent'; 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 { }

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