Angular4 报错 Error: Cannot match any routes. URL Segment: 'login'

Question

如题：
ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'login'

Error: Cannot match any routes. URL Segment: 'login'

错误出在哪里？

我上传了工程文件压缩包：
https://pan.baidu.com/s/10p5A_QM5RyS8S91cm9iiyg

说明：
没有在app.component中使用，所以建立了子路由login-routing.module.ts

目录结构：

1.app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AppComponent } from './app.component';

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

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class AppRoutingModule {}

2.app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { CoreModule } from './core/core.module';
import { MdSidenavModule } from '@angular/material';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    MdSidenavModule,
    CoreModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

3.login-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { LoginComponent } from './login/login.component';

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

@NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
})
export class LoginRoutingModule {}

4.login.module.ts

import { NgModule } from '@angular/core';
import { LoginComponent } from './login/login.component';
import { LoginRoutingModule } from './login-routing.module';
import { SharedModule } from '../shared/shared.module';

@NgModule({
  imports: [
    SharedModule,
    LoginRoutingModule
  ],
  declarations: [LoginComponent]
})
export class LoginModule { }

Answer 1

AppRoutingModule

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AppComponent } from './app.component';

const routes: Routes = [
    { path: '', redirectTo: '/login', pathMatch: 'full' },
    //自己填好LoginModule路径
    { path:'login',loadChildren:'login.module#LoginModule' }
];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class AppRoutingModule {}

LoginRoutingModule

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { LoginComponent } from './login/login.component';

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

@NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
})
export class LoginRoutingModule {}

Answer 2

如果login是单独module的话,app.module的路由不能直接找到，要先找到login.module之后找login.com

Answer 3

把login-routing.module.ts 贴到app-routing.module.ts 在加上{path: '', redirectTo: '/login', pathMatch: 'full'}

Answer 4

请问 你这个问题解决了吗？？
我遇到了同样的问题

Answer 5

你这个错误我解决了，就是你采纳的答案解决的，但是我的loginComponent组件在主页没有加载出来是为啥呀，代码跟你一样的，还有那个app-routing.module.ts里面引入的AppComponent没有被引用呀