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 {}