Since I have implemented my translate module in the shared/header.module.ts file, it mainly serves the purpose of handling language switching for the entire application.
In header.module.ts:
@NgModule({
imports: [
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useClass: CustomTranslateLoader,
deps: [HttpClient]
}
}),
exports: [
TranslateModule,
HeaderComponent
]
})
The module is then exported.
In leftnavigation.component.html, footer.component.html, and rightbar.component.html files, I import and successfully retrieve translation values.
In leftbarnavigation.ts, I also export the module:
@NgModule({
imports: [
TranslateModule,
RouterModule,
],
exports: [
TranslateModule,
]
})
No modifications were made in app.module.ts since the primary translate settings are defined in header.module.ts. Basic import and export operations are carried out there.
@NgModule({
declarations: [
AppComponent
],
imports: [
TranslateModule,
SharedModule,
],
exports: [
TranslateModule
],
providers: [],
bootstrap: [AppComponent]
})
In app-routing.module.ts, further import and export actions are performed:
const routes: Routes = [
{
path: "",
component: MainLayoutComponent,
data: { pageTitle: "Home" },
children: [
{
path: "dashboard",
loadChildren: "./dashboard/dashboard.module#DashboardModule",
}, {
path: "portfolio",
loadChildren: "./portfolio/portfolio.module#PortfolioModule",
},
]
},
];
@NgModule({
imports: [ TranslateModule, RouterModule.forRoot(routes, { useHash: true })],
exports: [ TranslateModule, RouterModule]
})
export class AppRoutingModule { }
Next is portfolio.module.ts:
@NgModule({
imports: [
TranslateModule,
PortfolioRoutingModule,
SharedModule,
],
exports: [
TranslateModule
]
})
export class PortfolioModule { }
Followed by portfolio-routing.module.ts:
const routes: Routes = [
{
path: 'portfolio-list',
component: PortfolioListComponent
}
];
@NgModule({
imports: [TranslateModule, RouterModule.forChild(routes)],
exports: [TranslateModule, RouterModule]
})
export class PortfolioRoutingModule { }
However, when attempting to access the page /portfolio/portfolio-list,
I notice that the translations do not take effect on this specific page.
It seems like the translation fails to be shared properly on this particular page.
I am currently using Angular 6.
Any suggestions on how to resolve this issue?