Problem
I am using Angular 19 with ngx-translate-router
to handle localized routes. However, my app always redirects to /en
on startup, even when a different language is present in the URL.
For example:
- Navigating directly to
/ru
or/de
still results in a redirect to/en
. - The language should be detected from the URL and not overridden by the default.
StackBlitz & GitHub Source
- StackBlitz: https://stackblitz.com/~/github.com/neverlose-lv/angularv19-ngx-translate-router
(manually replace the tilda sign (~) in the url, otherwise stackoverflow is escaping this symbol and you will see 404 error) - GitHub: https://github.com/neverlose-lv/angularv19-ngx-translate-router
Code Setup
Here’s how I configure the router in app.config.ts
:
import { provideRouter, withDisabledInitialNavigation } from '@angular/router';
import { withLocalizeRouter, CacheMechanism, LocalizeParser, LocalizeRouterSettings } from '@gilsdav/ngx-translate-router';
import { provideTranslateService, TranslateLoader, TranslateService } from '@ngx-translate/core';
import { routes } from './app.routes';
import { Location } from '@angular/common';
import { HttpClient } from '@angular/common/http';
import { PLATFORM_ID, TransferState } from '@angular/core';
import { translateLoaderFactory } from '../translate-loaders/translate-loader-factory';
import { translateRouterLoaderFactory } from '../translate-loaders/translate-router-loader-factory';
export const appConfig: ApplicationConfig = {
providers: [
provideRouter(
routes,
withDisabledInitialNavigation(),
withLocalizeRouter(routes, {
parser: {
provide: LocalizeParser,
useFactory: translateRouterLoaderFactory,
deps: [
TranslateService,
Location,
LocalizeRouterSettings,
HttpClient,
PLATFORM_ID,
],
},
alwaysSetPrefix: true,
useCachedLang: false, // Tried false to ensure cache is not interfering
})
),
],
};