I'm currently working on an Angular application that has multi-language support. To better organize my project, I decided to separate the admin routes from the app.module.ts file and place them in a separate file. However, after doing this, I encountered an issue where the translate service is not functioning properly on these admin pages. Below are snippets of the code I used:
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 {
}
I am seeking insight into why the translate service is not functioning as expected on the admin routes and how I can resolve this issue. I have explored various solutions online and tested different codes, but none seem to work. Any advice or suggestions would be greatly appreciated.