延迟从Angular 7中的编译库加载模块

Question

我正在尝试从库中延迟加载 NgModule。我有一个 ng 应用程序，其中包含一些库（项目）。这个库在其他一些项目中被重用。问题是我找不到适用于 jit 和 aot 以及已编译/未编译库的解决方案。

文件结构是这样的

app
-projects
--lib
---(lib files)
-src
--(app files)

AppModule 有路由，长这样

const routes: Routes = [
    {
        path: 'eager',
        children: [
            {
                path: '',
                component: LibComponent // component imported from lib
            },
            {
                path: 'lazy',
                loadChildren: 'lib/src/lib/lazy/lazy.module#LazyModule' // module i want to load lazily
            }
        ]
    }
];

如果我这样使用它，当我尝试导航到 jit 中的惰性路由时会出现运行时错误（aot 工作正常）： ERROR Error: Uncaught (in promise): TypeError: undefined is not a function TypeError: undefined is not a function

此评论 https://github.com/angular/angular-cli/issues/9488#issuecomment-370065452 建议不要将 LazyModule 包含到任何桶文件中，但如果我将其从库的 public_api 中排除，则会出现构建错误：

ERROR in ./projects/lib/src/lib/lazy/lazy.module.ts
Module build failed (from ./node_modules/@ngtools/webpack/src/index.js):
Error: C:\projects\lazy_minimal\lazy-minimal\projects\lib\src\lib\lazy\lazy.module.ts is missing from the TypeSc
ript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.
    at AngularCompilerPlugin.getCompiledFile (C:\projects\lazy_minimal\lazy-minimal\node_modules\@ngtools\webpac
k\src\angular_compiler_plugin.js:752:23)
    at plugin.done.then (C:\projects\lazy_minimal\lazy-minimal\node_modules\@ngtools\webpack\src\loader.js:41:31
)
    at process._tickCallback (internal/process/next_tick.js:68:7)

有什么办法让它同时适用于 aot 和 jit 吗？

Answer 1

Angular-CLI 中有一个关于以延迟加载方式在 node_modules 中加载编译库的问题here，它仍然打开。

最后提出的解决方法是：

这个话题是不久前打开的。拥有这样的 cmets 使人们很难在除最新 cmets 之外的任何内容中找到信息。但另一方面，我认为大多数人无论如何都不会经历所有的 cmets。看到这个帖子的新用户大多会阅读第一个和最新的 cmets，而在这期间会丢失一些内容。

因此，出于上述原因（大量 cmets、隐藏 cmets、难以报告和通知人们），我锁定此问题是为了防止此评论在新 cmets 出现时丢失。

感谢所有报告并帮助诊断问题并提供解决方法的人。

我们推荐的在角度工作空间或节点模块中延迟加载库的方法是使用代理/包装器模块。使用这种方法，延迟加载将在 JIT 和 AOT 模式下工作。还有其他仅在 AOT 模式下工作的解决方案，例如 tsconfig 导入，但是为了更好的开发体验，我们不鼓励这样做。

在下面找到推荐方法的示例；

第一个lazy/lazy.module.ts

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { LibModule, LazyComponent } from 'my-lib';

@NgModule({
  imports: [
    LibModule,
    RouterModule.forChild([
      { path: '', component: LazyComponent, pathMatch: 'full' }
    ])
  ]
})
export class LazyModule { }

然后app.module.ts

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {RouterModule} from '@angular/router';

import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
  ],
  imports: [
    RouterModule.forRoot([
      { path: '', component: HomeComponent, pathMatch: 'full'},
      { path: 'lazy', loadChildren: './lazy/lazy.module#LazyModule'},
    ]),
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

1 月 10 日与合作者的角度锁定和有限的对话