Translation inside feature modules

[Shiroh1ge]

So I'm trying to make the translation to work globally, but I don't seem to get how it works. It might be my lack of understanding of how modules/services in Angular 2 work. Following the guide here I have the following setup right now:

  bootstrap: [AppComponent],
  declarations: [
    AppComponent,
    HomeComponent
  ],
  imports: [ 
    LocaleModule.forRoot(), // New instance of LocaleService.
    LocalizationModule.forRoot(), // New instance of LocalizationService.
    CoreModule,
    CoursesModule
    ....
  ],
})
export class AppModule {}

And my AppComponent:

@Component({
  selector: 'app',
  encapsulation: ViewEncapsulation.None,
  styleUrls: ['./app.component.scss'],
  templateUrl: './app.component.html'
})
export class AppComponent extends Locale implements OnInit {


  constructor(
    public appState: AppState,
    public locale: LocaleService,
    public localization: LocalizationService
  ) {
    super(locale, localization);

    this.locale.addLanguages(['en', 'es']);
    this.locale.definePreferredLocale('en', 'US', 30);
    this.locale.definePreferredCurrency('USD');
    this.localization.translationProvider('/locale/locale-');
    this.localization.updateTranslation();
  }
}

And then in my CoursesComponent, I have set it as the guide for Lazy routing:

@NgModule({
    imports: [
        ...
        LocaleModule, // LocaleService is singleton.
        LocalizationModule.forChild() // New instance of LocalizationService.
    ],
    declarations: [CoursesComponent]
})

The translation works in my HomeComponent, but not in my CoursesComponent. What's weird is that if I import LocalizationModule only and not LocalizationModule.forChild(), translation works. Does that mean that it is creating an instance for the first time and the instance created from AppModule is not injected inside CoursesModule? Do I need to export the service through the CoreModule? I'm confused, any help is appreciated!

[robisim74]

If you are using lazy loaded modules with the router, there are two scenarios:

1. You want to use the same translation files for the whole application.

You must not call the forChild method, because it creates a new instance of the service. So you have to use:

    imports: [
        ...
        LocaleModule, // LocaleService is singleton.
        LocalizationModule // LocalizationService is singleton.
    ]

2. You want to use different translation files for each module.

You must call the forChild method:

    imports: [
        ...
        LocaleModule, // LocaleService is singleton.
        LocalizationModule.forChild() // New instance of LocalizationService.
    ]

But you have to reinitialize LocalizationService with new providers, as explained here: https://github.com/robisim74/angular2localization/blob/master/doc/spec.md#5
Also the List module/component of the sample app is built in this way: https://github.com/robisim74/angular2localization/tree/gh-pages

[Shiroh1ge]

Thanks for the quick response. I have been trying to do the first option you mentionted and I don't seem to get it to work. I have moved the modules to my CoreModule and have created a HomeModule for my HomeComponent. This should allow it to use any services from the CoreModule, right? This is my CoreModule:

imports...

@NgModule({
  imports: [  
    SharedModule,
    RouterModule,
    LocaleModule, //  LocaleService is singleton.
    LocalizationModule, // LocalizationService is singleton.
  ],
  declarations: [],  
  exports: [],   
  providers: [
    UserService,
    LocaleService,
    LocalizationService
  ]
})

export class CoreModule {}

My AppComponent is the same. So, shouldn't LocaleService and LocalizationService be available everywhere? Right now, my Home page is not getting translated, unless I import the LocaleModule and LocalizationModule inside the HomeModule. Is this how it works and must I import these modules in every feature module or am I doing something wrong elsewhere?

[robisim74]

Sorry, but I don't understand what you are trying to do. However: for the first option, in the AppModule you have to use:

  imports: [ 
    LocaleModule.forRoot(), // New instance of LocaleService.
    LocalizationModule.forRoot(), // New instance of LocalizationService.
    ....
  ],

so you create the new instances of the services.

In all the other sub-modules, you have to use:

    imports: [
        ...
        LocaleModule, // LocaleService is singleton.
        LocalizationModule // LocalizationService is singleton.
    ]

and remove from the providers:

    LocaleService,
    LocalizationService

otherwise you create other instances.

[Shiroh1ge]

Sorry, but I don't understand what you are trying to do.

Neither do I, lol! Anyway, I've been doing it wrong, thanks for your help, everything is clear to me now and it works. I just couldn't comprehend how it all works I guess. Thanks a lot for the help!

[robisim74]

You'll never know until you try... :)

[robisim74]

@Shiroh1ge I'm closing this issue. If you need, open a new issue. Greetings