Angular 19 + ngx-translate-router: Language not detected from URL, always redirects to /en

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
})
),
],
};

Continue reading...