Argthtjtr

Probably one of the most common questions, while the documentation and some other questions I found try to clear up things for me, yet I am still not sure how to fix this.

So this is my structure:

• App module is of course the main module that is bootstrapped


• Countryselector module: takes care of loading the default country(based on IP) and takes care of deciding what language to use based on the browser. It basically is the core functionality of deciding what country/language is used + it contains a dropdown for a user to change the country/language.


• Checkout module, selection module, payment module are all lazy-loaded with routing.

AppModule

export function HttpLoaderFactory(http: HttpClient) {

  return new TranslateHttpLoader(http);

}



@NgModule({

  declarations: [

    AppComponent

  ],

  imports: [

    HttpClientModule,

    BrowserModule,

    AppRoutingModule,

    ContrySelectorModule,

    TranslateModule.forRoot({

      loader: {

        provide: TranslateLoader,

        useFactory: HttpLoaderFactory,

        deps: [HttpClient]

      }

    })

  ],

  export class AppModule { }

CountrySelectorModule

@NgModule({

  declarations: [CountryselectorComponent],

  imports: [

    CommonModule,

    TranslateModule.forRoot({

      loader: {

        provide: TranslateLoader,

        useFactory: HttpLoaderFactory,

        deps: [HttpClient]

      }

    })

  ],

  exports: [

    CountryselectorComponent

  ]

})

export class ContrySelectorModule { }

Selection module:

@NgModule({

  declarations: [SelectionComponent],

  imports: [

    CommonModule,

    SelectionRoutingModule,

    UspblockModule,

    TranslateModule.forChild({//or forRoot, no idea how to configure this

      loader: {

        provide: TranslateLoader,

        useFactory: HttpLoaderFactory,

        deps: [HttpClient]

      }})

  ],

})

export class SelectionModule { }

Now the problem is that I don't want to do the language configuration again within the lazy-loaded modules, because the country selector module already takes care of this. I am not sure now how to correctly configure the lazy-loaded modules (and actually not sure if countrySelectorModule is done correctly). Using the standard github documentation I was not able to pull this off. I've tried messing around with .forChild() but no luck so far.

Do I need a share module? Do I need to import countrySelectorModule everywhere (not preferred)? Custom loader? t.b.h. I have no idea and the documentation is a bit short for more advanced scenarios.

I solved this by doing the following:

1. Create a CoreModule (basically a shared module), with below code

CoreModule

export function HttpLoaderFactory(http: HttpClient) {

  return new TranslateHttpLoader(http);

}



@NgModule({

  declarations: ,

  imports: [

    CommonModule,

    TranslateModule.forChild({}) //for root is done in app module, this core module is loaded in other lazy-loaded modules.

  ],

  exports: [TranslateModule],

})

export class CoreModule {



  static forRoot(): ModuleWithProviders {

    return {

      ngModule: CoreModule,

      providers: [ShoppingCartService, AccountService]

    }

  }

}

This one also solved making sure that ShoppingCartService and AccountService are only one instance and not every lazy-module creating a separate service.

2. Inside the CountrySelectorModule keep the imports the same, just add CoreModule to the imports.




3. Change AppModule:

AppModule

@NgModule({

  declarations: [

    AppComponent

  ],

  imports: [

    HttpClientModule,

    BrowserModule,

    AppRoutingModule,

    CoreModule.forRoot(),//notice this call

    ContrySelectorModule,



  ],

  providers: [    ],

  bootstrap: [AppComponent]

})

export class AppModule { }

4. Any lazy loaded module just has to import CoreModule and TranslateModule without any method calls.