在 Angular 6 库中动态导入

Question

我使用 Angular cli 创建了一个示例 Angular 6 库

1. ng 新的测试库
2. ng g 库 my-lib

这为我提供了角度库“my-lib”和示例应用程序“test-lib”的基本结构，我认为它可以用于测试目的。

在库内部，我想使用动态导入。我有一个应该延迟导入的类：

export class Lazy {
    print(): void {
        console.log('I am lazy');
    }
}

我有我的消费者组件：

export class MyLibComponent implements OnInit {

  async ngOnInit() {
    const lazyImport = await import(/* webpackChunkName: 'lazy' */ './lazy');
    new lazyImport.Lazy().print();
  }
}

差不多就是这样。我使用“ng build my-lib”将库编译到 dist 文件夹。在 tsconfig 中，我将“模块”更改为 esnext，以支持动态导入。

现在我想使用示例应用程序内的库，该库是由 cli 生成的。因此，在 app.module.ts 内部，我导入库的模块，并在 app.component.ts 的模板中添加相应的选择器。

当我现在使用“ng build”构建示例应用程序或从“ngserve”开始时，我可以看到没有生成“lazy chunk”。这只是普通的 main、polyfills、运行时、样式和供应商。我缺少什么？是否无法在库内部使用动态加载？

当我从编译的 dist 文件夹更改 app.module.ts 内部的导入路径时

import { MyLibModule } from 'my-lib';

到库源代码

import { MyLibModule } from '../../projects/my-lib/src/public_api';

惰性块已创建，一切都按预期工作。但这当然不是我想要的。我想在一个完全不同的项目中使用已编译的库，在该项目中我无法从打字稿源导入。

编辑：我的问题摘要
库本身可以执行动态加载吗？或者此功能仅适用于main-app来延迟加载应用程序的其他部分或其他库？！

编辑：问题的原因
我的库由数百个生成的打字稿类组成。每个用例只需要几个。这些应该按需加载。

感谢您的帮助！
斯蒂芬

Answer 1

它按预期完美运行。您只需构建库，将其放置在需要的位置，然后在其他项目中使用动态

import

方法，并使用相对路径引用您构建的库。

Angular-CLI 不构建块的原因是它会摇出源代码中未引用的任何内容。如果您的导入没有指向惰性块，那么当在应用程序上调用

ng build

或

ng serve

时，它认为没有理由构建它。但是

ng build my-lib

仍然会显式构建模块。