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

Angular 5个功能模块嵌套路由

Angular 5 feature modules nested routing

angular

angular-router