Angular translate service doesn't works on separated routes

Question

I'm developing an application with Angular, and my project supports multiple languages. I separated the admin routes from the app.module.ts file and created them in a different file. However, due to this separation, the translate service is not working on these pages. Here are my codes:

app.module.ts

@NgModule({
  declarations: [
    AppComponent,
    AdminLayoutComponent
  ],
  imports: [
    BrowserAnimationsModule,
    BrowserModule,
    FormsModule,
    HttpClientModule,
    ComponentModule,
    RouterModule,
    AppRoutingModule,
    NgxDatatableModule,
    ButtonModule,
    NgbModule,
    ToastrModule.forRoot(),
    // ngx-translate and the loader module
    HttpClientModule,
    TranslateModule.forRoot({
        loader: {
            provide: TranslateLoader,
            useFactory: HttpLoaderFactory,
            deps: [HttpClient]
        }
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
// required for AOT compilation
export function HttpLoaderFactory(http: HttpClient): TranslateHttpLoader {
  return new TranslateHttpLoader(http);
}

admin-layout.routing.ts

export const AdminLayoutRoutes: Routes = [
    { path: 'Configuration/:name',component: ConfigurationComponent, canActivate: [authGuard]},
    { path: 'Account/Change-Password',component: ChangePasswordComponent, loadChildren: () => ChangePasswordModule, canActivate: [authGuard]},
];

admin-layout.module.ts

@NgModule({
  declarations: [
    ConfigurationComponent,
    ConfigurationSidebarComponent
  ],
  imports: [
    CommonModule,
    RouterModule.forChild(AdminLayoutRoutes),
    FormsModule,
    NgbModule,
    NgxDatatableModule,
    AuthenticationModule,
    ToastrModule.forRoot(),
    TranslateModule.forRoot(),
    ButtonModule,
    SidebarModule
  ]
})
export class AdminLayoutModule { }

change-password.module.ts

@NgModule({
  declarations: [
    ChangePasswordComponent,
  ],
  imports: [
    CommonModule,
    NgbModule,
    FormsModule,
    ReactiveFormsModule,
    TranslateModule.forRoot(),
  ],
  exports: [
    ChangePasswordComponent,
  ]
})

export class ChangePasswordModule {
}

What is the reason for the translate service not working in admin routes, and how can I fix it? I want to learn the answers to these questions. I have done a lot of research on the internet and shared the code I tried, but none of them worked.

score 0 · Accepted Answer · answered Jul 14 '23 at 12:15

0

In App Component You already initialize TranslateModule with forRoot() method. If you need to import it in other module - import it in a normal way, without redundant forRoot(). It's purpose is to load it in a global way and You would like to initialize it only once, so You should change initialization in AdminLayoutModule, from TranslateModule.forRoot() to TranslateModule

For further research: https://angular.io/guide/singleton-services

answered Jul 14 '23 at 12:15

Adam Zabrocki

351
2
8

I did what you say, but unfortunately it didn't worked. – Fatih EGE Jul 14 '23 at 12:17
For futher debug, please provide a minimal sample code within some online editor, like https://stackblitz.com/ I cannot see the connection between AdminLayoutModule and other parts of system – Adam Zabrocki Jul 14 '23 at 12:27
https://stackblitz.com/edit/stackblitz-starters-pbrfqm – Fatih EGE Jul 14 '23 at 12:30
Please verify also ComponentModule TranslateModule.forRoot() statement. I am able to inject translate pipe on upper level - into AdminLayoutComponent. – Adam Zabrocki Jul 14 '23 at 13:36
I did that too but it still didn't work. – Fatih EGE Jul 14 '23 at 14:48
please update stackblitz to make it compilable - on my simplified version of Your code I can successfully trigger translate pipe also on nested components, like navbar – Adam Zabrocki Jul 14 '23 at 20:07
I noticed that I used `TranslateModule.forRoot()` in another file that I didn't send you, when I deleted that too, it is fixed. Thank you! – Fatih EGE Jul 17 '23 at 06:48

Angular translate service doesn't works on separated routes

1 Answers1