从库中延迟加载功能模块答案

【问题标题】：lazy load a feature module from a library从库中延迟加载功能模块
【发布时间】：2020-06-30 00:12:31
【问题描述】：

我有一个 Angular 8 应用程序，我想从库中延迟加载功能模块。它在 ng serve 模式下工作，但 ng build --prod 失败。示例代码

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { AppGuardService } from './app-config/app-guard.service';
import { HomeComponent } from './home/home.component';

const routes: Routes = [
  {
    path: 'login',
    component: LoginComponent
  },
  {
    path: '',
    canActivate: [AuthGuardService],
    children: [
      {
        path: '',
        canActivate: [CustomerGuardService],
        component: AppComponent,
        children: [
          {
            path: '',
            pathMatch: 'full',
            redirectTo: 'home'
          },
          {
            path: 'home',
            component: HomeComponent
          },
          {
            path: 'featureModule',
            loadChildren: () => import('@custom/lib').then(m => m.AppModule)
          }
        ]
      }
    ]
  },
  {
    path: '**',
    redirectTo: '/'
  }
];

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

我可以为我的每个微应用程序考虑一个包装模块，但感觉不是一个干净的解决方案

【问题讨论】：

标签： lazy-loading angular8 angular-library

【解决方案1】：

只需在您的功能模块路由中的path 和loadChildren : () => 之前添加data: { preload: true }。像这样

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { AppGuardService } from './app-config/app-guard.service';
import { HomeComponent } from './home/home.component';

const routes: Routes = [
  {
    path: 'login',
    component: LoginComponent
  },
  {
    path: '',
    canActivate: [AuthGuardService],
    children: [
      {
        path: '',
        canActivate: [CustomerGuardService],
        component: AppComponent,
        children: [
          {
            path: '',
            pathMatch: 'full',
            redirectTo: 'home'
          },
          {
            path: 'home',
            component: HomeComponent
          },
          {
            path: 'featureModule',
            data: { preload: true }, //This will do lazy loading
            loadChildren: () => import('@custom/lib').then(m => m.AppModule)
          }
        ]
      }
    ]
  },
  {
    path: '**',
    redirectTo: '/'
  }
];

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

【讨论】：

【解决方案2】：

尝试将 Child 后面的 path='' 替换为有意义的路径，这样可能会在重定向时造成混乱。

【讨论】：