angular - 我应该以什么顺序在我的共享模块中导入模块

Question

我创建了一个共享模块，如下所示。我在某处读到进口订单很重要，但我现在找不到该链接。在某些地方它工作正常但在其他地方我收到错误。我想知道这些模块的顺序以避免任何错误。

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import 'hammerjs';

import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { MaterialModule } from '@angular/material';
import { FlexLayoutModule } from '@angular/flex-layout';
import { CoreModule } from './core/core.module';

// NOTE: The import order matters.
const modules = [
  CommonModule,
  CoreModule,
  ReactiveFormsModule,
  FormsModule,
  HttpClientModule,
  MaterialModule,
  FlexLayoutModule,
];

@NgModule({
  imports: modules,
  exports: modules
})
export class DependenciesModule { }

Answer 1

应用范围的单例提供者

首先，我强烈建议不要在共享模块中包含应用范围的单例providers。导入该共享模块的延迟加载模块会创建自己的服务副本。

CoreModule(如果它包含应用范围的提供程序)和 HttpClientModule 不应在 SharedModule 中。

另见:

• https://angular.io/guide/ngmodule-faq#why-is-a-service-provided-in-a-lazy-loaded-module-visible-only-to-that-module

• https://indepth.dev/posts/1056/avoiding-common-confusions-with-modules-in-angular

供应商优先级

你应该知道所有的提供者都被添加到同一个注入(inject)器。(根或通过延迟加载创建)

当同时加载的两个导入模块列出具有相同 token 的提供者时，第二个模块的提供者“获胜”。当 Angular 希望为该 token 注入(inject)服务时，它会创建并交付由第二个提供者创建的实例。

如果模块 A 为 token “X”提供服务并导入也为 token “X”提供服务的模块 B，则模块 A 的服务定义“获胜”。

根 AppModule 提供的服务优先于导入模块提供的服务。 AppModule 总是获胜。

另见:

• https://angular.io/guide/ngmodule-faq#what-if-two-modules-provide-the-same-service

路由

配置中路由的顺序很重要，这是设计使然。

路由器在匹配路由时采用先匹配为胜的策略，所以更具体的路由应该放在不太具体的路由之上。

这也意味着如果您有两个带有路由配置的模块，您应该以正确的顺序导入它们。

另见:

• https://angular.io/guide/router#configuration

---

如果模块只包含组件、指令和管道，那么您对模块的排序方式没有区别。它们被合并到传递模块。

另见:

• Use component from another module