CODEWITHSUNDEEP
angulartypescriptmodulecomponents
Grigor Aleksanyan
Grigor Aleksanyan

Reputation: 550

Angular2: One instance of module in multiple modules

Let's make example for ng2-translate plugin.

I have root AppModule, and children TopPanelModule and PagesModule.

I configure ng2-translate for AppModule.

@NgModule({
  imports: [TranslateModule.forRoot({
    provide: TranslateLoader,
    useFactory: (http: Http) => new TranslateStaticLoader(http, '/assets/i18n', '.json'),
    deps: [Http]
  })],
  exports: []
})
export class AppModule {
  constructor(translateService: TranslateService) {    
  }
}

In AppComponent I set languages and basic configuration for TranslateModule.

@Component(...)
export class AppComponent {
  constructor(translateService: TranslateService) {
    translateService.addLangs(["en", "fr"]);
    translateService.setDefaultLang('fr');

    const browserLang = 'fr';
    translateService.use(browserLang.match(/en|fr/) ? browserLang : 'en');    
  }
}

And then I'm trying to use TranslateModule in children modules components - TopPanelComponent, PagesComponent. It does'n work. Pipe not exists error, no translate etc..

For resolving this problem, I create a separate module MyTranslateModule, configure TranslateModule on it, and use this module in my PagesModule and TopPanelModule.

@NgModule({
  imports: [TranslateModule.forRoot({
    provide: TranslateLoader,
    useFactory: (http: Http) => new TranslateStaticLoader(http, '/assets/i18n', '.json'),
    deps: [Http]
  })],
  exports: [TranslateModule]
})
export class MyTranslateModule {
  constructor(translateService: TranslateService) {
    translateService.addLangs(["en", "fr"]);
    translateService.setDefaultLang('fr');

    const browserLang = 'fr';
    translateService.use(browserLang.match(/en|fr/) ? browserLang : 'en');

    console.log('AdminTrModule: calling');
  }
}

and

@NgModule({
  imports: [MyTranslateModule]
})
export class PagesModule{

}

@NgModule({
  imports: [MyTranslateModule]
})
export class TopPanelModule{

}

This is important part. It works! But I think it creates a two instances of TranslateModule, so, when I change transalte langauge by calling in TopComponent translateService.use('en'), it change language in TopPanelModule, but not in PagesModule.

Upvotes: 1

Views: 1897

Answers (1)

user3170856
user3170856

Reputation: 83

You need to define a forRoot function in module 'MyTranslateModule'

export class MyTranslateModule {

static forRoot(): ModuleWithProviders {
    return {
      ngModule: MyTranslateModule ,
      providers: [TranslateService,TRANSLATION_PROVIDERS]
    };
  }

}

then import MyTranslateModule in appModule as following

@NgModule({
  bootstrap: [App],
  declarations: [
    App
  ],
  imports: [ // import Angular's modules
    BrowserModule,
    MyTranslateModule.forRoot(),
    PagesModule,
    TopPanelModule
  ],
  providers: [ // expose our Services and Providers into Angular's dependency ]
})

in this case translate service will be created as singleton "one instance along the application"

Upvotes: 1

Related Questions