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

应用-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测试路由时，我被重定向到app root，并在控制台中出现以下错误：

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

从您的根模块中删除所有Lazy Loaded Module的导入。

<强> App.module.ts

@media (max-width: 640px)

您还想加载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 {}而非加载登录路由器模块

应用-routing.module.ts

LoginModule

Angular 5功能模块嵌套路由

1 个答案: