2

我用 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”构建示例应用程序或从“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';

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

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

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

谢谢你的帮助！
斯蒂芬

4

1 回答 1

0

它按预期完美运行。您只需要构建库，将其放置在您需要的位置并import在另一个项目中使用动态方法，并使用相对路径引用您构建的库。

Angular-CLI 不构建块的原因是因为它对源代码中未引用的任何内容进行了树抖动处理。如果您的导入未指向惰性块，则它认为没有理由在应用程序上调用ng build或ng serve调用它时构建它。但ng build my-lib仍会显式构建模块。

于 2018-10-08T10:38:44.250 回答