Question

我只是想知道这样做是否是一种安全和良好的做法：

@NgModule({
  import: [ ComponentANeedThisModule ],
  declarations: [ ComponentA ],
  exports: [ ComponentA ]
})
export class ModuleA

@NgModule({
  import: [ ComponentBNeedThisModule ],
  declarations: [ ComponentB ],
  exports: [ ComponentB ]
})
export class ModuleB

@NgModule({
  import: [ ModuleA, ModuleB ],
})
export class MainModule

// MainModule html
<app-component-a></app-component-a>
<app-component-b></app-component-b>

我的应用程序分为许多小的可重用模块。而且我不想有一个大的SharedModule。我更喜欢只导入我需要的这个模块，而不是整个SharedModule。

好吗？

Answer 1

我只是想知道这样做是否是一种安全和良好的做法：

这实际上是推荐的方法。将模块分解成较小的块，可以从摇树中获得最佳效果。

例如，诸如Angular Material之类的某些库将每个组件放置在单独的模块中，然后允许消费者仅导入其应用程序所需的模块。

Angular将仅捆绑已使用的模块。因此，尽管声明了许多模块，但仅将消耗的模块添加到捆绑中。

如果应用程序将始终消耗所有内容，则没有必要将它们分为多个模块。因此，推荐的方法是创建包含与单个功能有关的所有内容的功能模块。

https://angular.io/guide/feature-modules

因此，如果我有一个大的SharedModule（可导出约50个组件）并将此模块导入MyModule，但是在MyModule中，我仅使用一个组件-这意味着在构建过程中将仅捆绑这一个组件？

在模块的 exports 部分中声明的任何组件都不能从模块中删除。从摇摇欲坠的角度来看， exports 是模块提供的功能的契约。 Angular无法在模块范围之外进行搜索，以查看消耗这些 exports 的原因。因此，如果您的SharedModule要导出50个组件，则必须将它们全部捆绑在一起。

模块的引导程序部分中声明的任何组件都不能删除，因为这些组件已保留用于动态工厂创建。

模块 providers 部分中定义的所有内容都必须保留在包中。模块成为子模块的父提供者，但是模块可以覆盖以前声明的提供者。因此，Angular无法检查提供者的用法，并假设可以将其删除。

声明中定义的

从 exports 和 bootstrap 中排除的组件都可以进行树状摇动。话虽如此，我一直在努力寻找对Angular文档的可靠引用，指出确实如此。唯一可以确定的方法是建立生产并使用捆绑检查器。

https://coryrylan.com/blog/analyzing-bundle-size-with-the-angular-cli-and-webpack

在Angular 6及更高版本中，他们为服务的provideIn装饰器添加了@Injectable()参数。这增加了对服务的支持，因为它们现在可以搜索以查看是否有任何组件注入了服务。如果没有组件消耗服务，则可以将其从捆绑中删除。

我不知道它如何工作的全部细节，但是我找到了这个参考文献：

https://coryrylan.com/blog/tree-shakeable-providers-and-services-in-angular

Answer 2

这是做模块的一种方法。由于Angular在样式上相当自以为是，因此最一致的参考似乎是the Angular Style Guide。我已将您链接至他们的 LIFT 参考，但向下阅读几页，则对应用程序（和模块）结构提出了一些“好的”建议。

这基本上就是Angular Material library所做的。我实际上和您在一起，我更喜欢避免使用大型共享模块。原因之一是构建/测试速度更快。如果构建过程不必消除过多的未使用共享资源，则构建和测试将保持更快的速度。

cgTag's answer是本书写作的一部分。其余的说。

Angular-许多进出口模块，这样安全吗？

2 个答案: