Angular 6 库中的动态导入

Question

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

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

这为我提供了 Angular 库“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”或从“ng serve”开始构建示例应用程序时，我可以看到没有生成“惰性块”。它只是普通的 main、polyfills、runtime、styles 和 vendor。我错过了什么？难道不能在库中使用动态加载吗？

当我从已编译的 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 仍会显式构建模块。