我應該以什么順序在共享模塊中導入模塊

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://blog.angularindepth.com/avoiding-common-confusions-with-modules-in-angular-ada070e6891f

供應商優先

您應該知道所有提供程序都添加到同一個注入器中。（root或通過延遲加載創建）

當兩個導入的模塊同時加載時，列出具有相同令牌的提供者，第二個模塊的提供者“獲勝”。 當Angular尋找為該令牌注入服務時，它會創建並傳遞由第二個提供者創建的實例。

如果模塊A為令牌“X”提供服務並導入也為令牌“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

---

如果這些模塊僅包含組件，指令和管道，則如何訂購模塊沒有區別。 它們合並為傳遞模塊。

也可以看看：

• Angular 2使用另一個模塊中的組件

Answer 2

試試這樣：

在您的DependenciesModule中導出所有模塊並將其導入另一個模塊。

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
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';

import 'hammerjs';

@NgModule({
  imports: [],
  exports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule,
    MaterialModule,
    FlexLayoutModule,
    CoreModule
  ]
})
export class DependenciesModule { }