javascript - ng 共有モジュールを作成するためのベスト プラクティス

Question

最終的に、さまざまな NgModules をアプリに導入したいと考えています。現在AppModule、すべてを備えた大きなものがあります。新しい機能/ページのために、新しいモジュールを作成したいと考えています。ただし、共有モジュール、コンポーネント、fontawesome アイコンを考慮すると、疑問が生じます。それらを共有する最良の方法は何ですか?

ここに現在のスニペットがありますAppModule

@NgModule({
  declarations: [
    AppComponent,
   ... a lot more components here
  ],
  imports: [
    BrowserModule,
    .. more imports here
  ],
  providers: (
    [
      TitleCasePipe,
      TranslocoDatePipe,
    ]
  )
  bootstrap: [AppComponent],
})
export class AppModule {
 

  constructor(library: FaIconLibrary) {
   //  FONTAWESOME_ICONS is a const array with long list of icons
    FONTAWESOME_ICONS.forEach((icon) => {
      library.addIcons(icon)
    })
  }
}

それは私が知っている醜いです。新しいモジュールVendorsModuleを使用して、共有コンポーネントのモジュールを にエクスポートして、SharedModuleと の両方にインポートできるようにする必要がAppModuleあり VendorsModuleます。これがSharedModule私が試みたものです

@NgModule({
  declarations: [
    DomainComponent,
    .. more components
  ],
  imports: [
    ApiModule,
    .. more modules
  ],
  providers: (
    [
      TitleCasePipe,
      TranslocoDatePipe,
    ]
  )
  exports: [
   .. all the shared components and modules
  ],
})
export class SharedModule {

  constructor(library: FaIconLibrary) {
    FONTAWESOME_ICONS.forEach((icon) => {
      library.addIcons(icon)
    })
  }
}

AppModule使用後はこちらSharedModule。

@NgModule({
  declarations: [
    .. other app components
  ],
  imports: [SharedModule, VendorsModule, BrowserModule],
  bootstrap: [AppComponent],
})
export class AppModule {}

ここはVendorsModule

@NgModule({
  declarations: [VendorsComponent],
  imports: [SharedModule],
  exports: [VendorsComponent],
})
export class VendorsModule {}

私の懸念は、SharedModule新しく導入されたモジュールごとにインポートする必要があるのは効率的ですか (共有コンポーネント、アイコンの一部が必要になるため)、SharedModuleそのモジュールに関連しない可能性のあるコンポーネントとフォントの素晴らしいアイコンが含まれている場合でもです。

共有モジュールに関するいくつかの記事を見てきましたが、それらは基本的な使用例のみを紹介しているようです。

これは副次的な質問です。これが fontawesome アイコン (無料ではない) をアプリにインポートする最良の方法であるかどうかはわかりません。