Language in Path

Prepend the active locale code to every URL: /about → /es/sobreNosotros.

Enable

provideNgxTranslateRoutes({
  enableLanguageInPath: true,
})

By default the default language is not included in the path (so /en/about stays as /about). To always include it:

provideNgxTranslateRoutes({
  enableLanguageInPath: true,
  includeDefaultLanguageInPath: true,
})

Result

Locale	URL
en (default)	/about
en (with includeDefaultLanguageInPath)	/en/about
es	/es/sobreNosotros

App Component

Persist the selected language to storage and restore it on load:

@Component({ /* ... */ })
export class AppComponent implements OnInit {
  private readonly translate = inject(TranslateService)

  ngOnInit() {
    const saved = localStorage.getItem('lang') ?? 'en'
    this.translate.use(saved)
  }

  switchLanguage(lang: string) {
    localStorage.setItem('lang', lang)
    this.translate.use(lang)
  }
}

Back navigation

When the user presses the browser Back button, the library automatically maps the translated URL back to the Angular router's original path.