0

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.

Lossan
  • 411
  • 1
  • 8
  • 16
  • If you need all components included inside sharedModule inside any other module, then its good to go with sharded module, But, If you want some in one module, and some in other module, then it will increase bundle size for you unnecessarily – GRD Dec 09 '21 at 11:08
  • I am having another issue now that I try to lazy-load the new module. It complains that some modules are imported twice, but when I remove the module from the `SharedModule` into `AppModule`, then the components in the SharedModule starting giving bunch of errors that it is missing imports. e.g. async pipe in known. I am not sure where the imports should go then? – Lossan Dec 09 '21 at 12:21
  • Can you share your live working demo ? – GRD Dec 09 '21 at 16:08
  • I figured it out, I had some missing imports :) – Lossan Dec 14 '21 at 08:28
  • Happy that you have figured it out. I am looking for work in angular related work, If you have or any reference then it will be more hlepful to me right now. Here is my email ID `grdtechlab@gmail.com` – GRD Dec 14 '21 at 09:25

0 Answers0