Best practices to creating ng shared module

279 Views Asked by At

I want to finally introduce different NgModules into the app. Currently we have one big AppModule that has everything, and for our new feature/page we want to create a new module. However, the question arises considering shared modules, components, fontawesome icons. What is the best way to share them?

Here is a snippet of the current 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)
    })
  }
}

It is ugly I know. Now with the new module VendorsModule , I need to export the share components, modules into a SharedModule so I can import it in both AppModuleand VendorsModule. Here is the SharedModule I attempted

@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)
    })
  }
}

Here is AppModule after using SharedModule.

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

Here is VendorsModule

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

My concern is, Is it efficient to have to import SharedModule in each new introduced module (cause I will defiantly need some of the shared components, icons), even though SharedModule includes components and fontawesome icons that may not be relevant to that module.

I have looked at several articles regarding shared modules but they seem to introduce only the basic use case.

This is more of a side question, I am not sure if this is the best way to import fontawesome icons (not-free) into the app.

0

There are 0 best solutions below