Setup: NgModule App

Deprecated

NgxTranslateRoutesModule is deprecated in v3. Migrate to provideNgxTranslateRoutes() — see the migration guide.

For Angular apps still using the classic NgModule architecture.

Basic Setup

app.module.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { HttpClient, provideHttpClient } from '@angular/common/http'
import { TranslateModule, TranslateLoader } from '@ngx-translate/core'
import { TranslateHttpLoader } from '@ngx-translate/http-loader'
import { NgxTranslateRoutesModule } from 'ngx-translate-routes'
import { AppRoutingModule } from './app-routing.module'
import { AppComponent } from './app.component'

export const httpLoaderFactory = (http: HttpClient) =>
  new TranslateHttpLoader(http)

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    AppRoutingModule,
    TranslateModule.forRoot({
      defaultLanguage: 'en',
      useDefaultLang: true,
      loader: {
        provide: TranslateLoader,
        useFactory: httpLoaderFactory,
        deps: [HttpClient],
      },
    }),
    NgxTranslateRoutesModule.forRoot(),
  ],
  providers: [provideHttpClient()],
  bootstrap: [AppComponent],
})
export class AppModule {}

With Custom Configuration

NgxTranslateRoutesModule.forRoot({
  enableRouteTranslate: true,
  enableTitleTranslate: true,
  enableLanguageInPath: false,
})

caution

Import NgxTranslateRoutesModule only once in your root AppModule. Importing it in feature modules will throw an error.

See Configuration for all available options.