Question

如何安装一组Clarity的子模块？

我的应用程序启动时间过长。看来原因之一是我要在AppModule中导入ClarityModule，而ClarityModule具有许多子模块和依赖项。我只需要使用大约十二个Clarity的组件，因此我想尝试仅导入一小部分Clarity的子模块。仅导入子模块不起作用。因此，如果我将其放入AppModule：

import { ClrMainContainerModule } from '@clr/angular/layout/main-container';
...
@NgModule({
imports: [ClrMainContainerModule,
...

使用Typescript linter似乎很好，但是当我ng serve时，出现以下错误：

ERROR in ./src/app/Modules/AppModule.ts
Module not found: Error: Can't resolve '@clr/angular/layout/main-container' in 'c:\Users\jzabinski\repos\hachart-client\projects\hachart-view\src\app\Modules'

随后的研究表明，错误来自Webpack。我不知道我的目标是否可行，是否可能，是否可以在Typescript / Angular方面进行更改以使CLI满意，或者是否需要重新配置Webpack。

我做了一个Stackblitz example。 Stackblitz版本中出现的错误实际上涉及在AppComponent中使用子模块的组件，并且与我从CLI返回的错误有所不同，但根本原因似乎是相同的：我对如何导入不了解子模块。

预期：我需要一种方法来仅安装Clarity完整功能的一小部分实际：我不知道这样做的方法

Answer 1

假设您正在使用Angular CLI，则可以放心，Angular将以树形显示出Clarity中未使用的任何子模块。因此，您不应该手动导入单个子模块，否则可能会错过这里的情况。

您唯一一次要导入子模块是针对测试用例，因为通常没有将测试配置为进行构建优化，因此实际上，在不需要时，它会为每个测试引导整个ClarityModule 。

Answer 2

2019年9月17日更新：杰里米·威尔肯（Jeremy Wilken）在对其他答案的一些评论中回答了这个问题：“ ...我们确实将每个组件作为子模块提供，但是Angular CLI树摇晃会丢弃未使用的模块。我们公开导出所有子模块，因此...使用{{ 1}}，如果您真的只想导入一个组件模块。”我的错误在于尝试从子模块的文件夹（@ clr / angular / layout / main-container）而不是预期的文件夹（@ clr / angular）导入。
但是，如果您使用的是《提前的时间》编译，那么整个问题就显得有些争议了。参见下面的原始答案。

原始答案

除了这篇文章的其他有用的答案之外，我发现了我认为是真正的根本原因。令人尴尬的平凡。之所以编译ClarityModule，是因为我们无意中使用了Just In Time编译。由于我们使用import { ClrAccordionModule } from '@clr/angular';标志，因此我们的生产版本使用了Ahead of Time编译，但是我正在使用普通的旧--prod将我的开发版本用于测试。如the Angular documentation所述，默认情况下，它使用“及时”。

我认为这两个版本是相同的，但这是错误的，这就是为什么我们导航到该应用程序时会暂停一秒钟以上。一旦我使用ng serve而不是ng serve --aot，在为所有模板编译工厂对象时，CLI就会停顿很长时间，然后该应用程序开始运行得更快。

换句话说，我不能真正接受使用更精简的Clarity构建的可能性，因为它目前尚不可用，但是由于另一个原因，我缺乏高性能的软件。

Answer 3

那可能行不通，也不是应该如何工作。您基本上想绕开该库的“公共API”并直接使用一些内部组件。

即使随身带上了webpack，这也是冒险的并且容易破裂。例如，可能在主模块中有一些必需的提供程序。

您在这里有两个选择：

说服图书馆维护者独立导出子模块。
分叉/复制存储库，并仅添加所需的模块代码。

如何告诉Angular安装Clarity模块的子集？

3 个答案: