Question

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

ng新的测试库
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，polyfill，运行时，样式和供应商。我想念什么？无法在库内部使用动态加载吗？

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

在Angle 6库中动态导入

1 个答案: