Question: changing language

[Newan]

I wont to chnage the language over an select menu.
I add this to my topmenu an binding ist to this.lang.
addinitional load the translate servive like:

import { TranslateService } from '@ngx-translate/core';
constructor(private translate: TranslateService) {
}

this.lang response 'en' or 'de', both language works fine,

but if i wont change it on runtime with:

  public onChangeLang() {
    this.translate.use(this.lang);
  }

it changes only the menu and page title not the page content like the chartpage etc.
if i change the language under AppTranslationModule at runtine it change the global page:

    let timeoutId = setTimeout(() => {
      this.translate.use('en');
    }, 5000);

why? thanks for help.

[Newan]

i chnage to pure ngx-translate and now it works:

1. Delete app.translation.module.ts
2. app_module.ts

// AoT requires an exported function for factories
export function HttpLoaderFactory(http: Http) {
  return new TranslateHttpLoader(http);
}

....

  imports: [ // import Angular's modules
    BrowserModule,
    HttpModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [Http],
      },
    }),

3. app.component.ts:
   translate.setDefaultLang('en');
4. nga_module.ts

  imports: [
    CommonModule,
    RouterModule,
    FormsModule,
    ReactiveFormsModule,
    TranslateModule,
    NgUploaderModule,
    SlimLoadingBarModule.forRoot(),
  ],
  exports: [
    ...NGA_PIPES,
    ...NGA_DIRECTIVES,
    ...NGA_COMPONENTS,
    TranslateModule,
  ],

now have all components etc translation support without import in every module

[sridharan31]

its possible to change lang inside pages folder configuration.module
i imported

export function HttpLoaderFactory(http: Http) {
  return new TranslateHttpLoader(http);
}
  imports: [ // import Angular's modules
    BrowserModule,
    HttpModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [Http],
      },
    }),

settingsPage.component.ts

  constructor(private translate: TranslateService) {
   translate.setDefaultLang('en')

  }

translation not working

[Newan]

for me all works now with pure ngx-translate

[stekontar]

@Newan thanks for your input.
I made a comment on #1110 before check your solution.
It works fine at the moment.

Regards,
S.

[Tenmak]

I can confirm that Newan solutions works correctly.
They just didn't export the translateModule correctly to the components...

For those using Newan's solution :

Do not forget to delete the the AppTranslationModule from the dashboard.module.ts and pages.module.ts files, and then re-launch your ng serve or whatever you are using to rebundle the whole app.

[dancancro]

@Newan or @Tenmak

In this code, what is translate? Could you share the declaration of this variable?

app.component.ts:
translate.setDefaultLang('en');

Can you take a look at my project and see what I might be doing wrong? It is based on JHipster and so the language services are provided by way of JhiLanguageService in the ng-jhipster library which uses a JhiConfigService to configure ngx-translate without my needing to import and configure the TranslateModule in my app.module. So when I add TranslateModule.forRoot(...) to imports of AppModule as above, everything breaks.

I don't know how to make my lazy-loaded pages use the same translation instances as the eager-loaded part of the app so that changing the language in an eager component of the nav bar affects the language used by the lazy-loaded pages.

[Tenmak]

In the app.component.ts, it is the translateService's instance being injected into the component's class.

app.component.ts

constructor(
    ...
    private translateService: TranslateService
  ) { }

ngOnInit() {
    this.translateService.addLangs(['en', 'fr']);
    this.translateService.setDefaultLang('fr');
    this.translateService.use('fr');

    ...
  }

I don't know about the JHipster service or how it works, so I guess you'll have to find out on your own about this part, but anyway, the first module import needs to be at the base root of the application.

app.module.ts

    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [Http],
      }
    }),

Basically, in this project, we have the following structure :

AppModule
|__ NgaModule (Basically the SharedModule)
|__ PagesModule (FeatureModule)
   |__ DashboardModule (Lazy-loaded)
   |__ AnyOtherModule (Lazy-loaded)
   |__ ...

pages.routing.ts

  {
    path: 'pages',
    component: PagesComponent,
    children: [
      { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
      { path: 'dashboard', loadChildren: './dashboard/dashboard.module#DashboardModule' },
      { path: 'maps', loadChildren: './maps/maps.module#MapsModule' }
    ]
  }

The idea is to import the TranslateModule in the NgaModule and also to export it, so that all the Lazy-loaded modules such as DashboardModule or MapsModule which import the NgaModule will also import the TranslateModule.
And as the TranslateModule was initialized in the AppModule, all the lazy-loaded modules should use the same instance service.

Nga.module.ts

@NgModule({
  declarations: [
    ...NGA_PIPES,
    ...NGA_DIRECTIVES,
    ...NGA_COMPONENTS
  ],
  imports: [
    CommonModule,
    RouterModule,
    FormsModule,
    ReactiveFormsModule,
    TranslateModule,         // <= need that !
    NgUploaderModule
  ],
  exports: [
    ...NGA_PIPES,
    ...NGA_DIRECTIVES,
    ...NGA_COMPONENTS,
    TranslateModule          // <= need that !
  ]
})

Hope this helps.

[dancancro]

Thanks @Tenmak

I have all of that like you describe except for what's in app.component.ts and app.module.ts because JHipster does these things in another way. In my JHipster app (Great Big Example Application), AppModule imports GreatBigExampleApplicationSharedModule which imports GreatBigExampleApplicationSharedLibsModule. GreatBigExampleApplicationSharedLibsModule contains an import that sets some settings on a JHipster module that itself configures the ngx-translate module. Also my app.component.ts is actually called layouts/main/main.component.ts and my pages.module.ts is called features/features.module.ts.

I just read this.. JHipster uses a directive called JhiTranslateComponent to wrap the ngx-translate translate pipe because "the inbuilt translate directive from ngx-translate is too verbose and buggy"

[tcbuzor]

I am also having trouble getting the jhipster jhiTranslate directive to work with ng2 admin. The lazy loaded modules not able to resolve the keys.
Do you have a working solution with JHipster and ng2-admin