Angular 5功能模块嵌套路由

Question

我正在构建一个包含多个功能模块的Web应用程序（用于模块化）。 我很难让路由工作。 我目前有2个模块，一个根模块和一个登录模块。 登录模块包含一些组件：

• 基本组件（显示整个登录页面的布局）
• 登录表单组件（显示表单，要加载到基本组件中）
• 密码忘记表单组件（显示表单，也可以加载到基本组件中）
• 还有一些。

App.module.ts

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

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

APP-routing.module.ts

import {NgModule} from '@angular/core';
import {RouterModule, Routes} from '@angular/router';

const routes: Routes = [
  {
    path: 'login',
    loadChildren: './login/login-routing.module#LoginRoutingModule'
  }
];

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

登录-routing.module.ts

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

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

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

当我通过访问/ login url测试路由时，我被重定向到应用程序根目录，并在控制台中出现以下错误：

ERROR Error: Uncaught (in promise): TypeError: __webpack_require__.e is not a function
TypeError: __webpack_require__.e is not a function
    at webpackAsyncContext (eval at ./src/$$_lazy_route_resource lazy recursive (main.bundle.js:13), <anonymous>:19:29)

我被卡住了，我不知道如何继续。

任何想法将不胜感激！

Answer 1

从根模块中删除所有导入的延迟加载模块。

App.module.ts

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

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

您还想加载LoginModule而不是登录路由器模块

APP-routing.module.ts

import {NgModule} from '@angular/core';
import {RouterModule, Routes} from '@angular/router';

const routes: Routes = [
  {
    path: 'login',
    loadChildren: './login/login.module#LoginModule'
  }
];

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