Routing Localization extension for transloco
npm i @penleychan/ngx-transloco-router
`
Setup
Bare minimum setup
`
@NgModule({
imports: [
RouterModule.forRoot(routes),
LocalizeRouterModule.forRoot(routes)
],
exports: [RouterModule, LocalizeRouterModule],
providers: [
{
provide: LOCALIZE_ROUTER_CONFIG,
useValue: localizeRouterConfig()
}
]
})
export class AppRoutingModule {
}
`
Translate Route
Enable translate route:
`
providers: [
{
provide: LOCALIZE_ROUTER_CONFIG,
useValue: localizeRouterConfig({
...
translateRoute: true
})
}
]
`
Translate route only works at the root level of your translation files, does not support scoping.
By default the prefix for translating routes is ROUTES. In order for translating route to work you need to have ROUTES
on your translation files.
`
// en.json
{
...
"ROUTES": {
"home": "home",
"reports": "reports"
}
}
// fr.json
{
...
"ROUTES": {
"home": "accueil",
"reports": "rapports"
}
}
`
You can override the prefix by configuration
`
providers: [
{
provide: LOCALIZE_ROUTER_CONFIG,
useValue: localizeRouterConfig({
...
prefix: 'ROUTE_TRANSLATION.'
})
}
]
`
LOCALIZE_ROUTER_CONFIG
These are the configuration settings available and it's defaults
`
export const defaultConfig: LocalizeRouterConfig = {
translateRoute: false,
useCachedLang: true,
alwaysSetPrefix: true,
cacheMechanism: CacheMechanism.LocalStorage,
cacheName: LOCALIZE_CACHE_NAME,
defaultLangFunction: void 0,
cookieFormat: DEFAULT_COOKIE_FORMAT,
initialNavigation: DEFAULT_INITIAL_NAVIGATION,
prefix: 'ROUTES.',
escapePrefix: '!'
};
``