Adding language id automatically to every route

I have a large Angular application with over 50 pages. I use ngx translate for multi language support.

My app.module.ts look similar to this :

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule,Routes } from '@angular/router';
import { HttpClientModule, HttpClient } from '@angular/common/http';
import {TranslateLoader, TranslateModule, TranslateService} from '@ngx-translate/core';
import {TranslateHttpLoader} from '@ngx-translate/http-loader';


import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomepageComponent } from './homepage/homepage.component';
import { HeaderComponent } from './header/header.component';
import { AboutpageComponent } from './aboutpage/aboutpage.component';
import { ProductspageComponent } from './productspage/productspage.component';
import { SigninpageComponent } from './signinpage/signinpage.component';

const routes: Routes = [

  {path:'',component:HomepageComponent},
  {path:'about',component:AboutpageComponent},
  {path:'products',component:ProductspageComponent},
  {path:'signin',component:SigninpageComponent},

   ];

@NgModule({
  declarations: [
    AppComponent,
    HomepageComponent,
    HeaderComponent
    AboutpageComponent,
    ProductpageComponent,
    SigninpageComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    RouterModule.forRoot(routes),
    HttpClientModule,
    TranslateModule.forRoot({
        loader: {
            provide: TranslateLoader,
            useFactory: HttpLoaderFactory,
            deps: [HttpClient]
        }
}),
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
export function HttpLoaderFactory(http: HttpClient) {
    return new TranslateHttpLoader(http,'./assets/i18n/', '.json');
}

My app.component.html look like this :

<router-outlet></router-outlet>

What i want to achieve is that i want every route to have the language id as a parameter without changing all of the routerLinks in html and router navigate in every component's ts files.

1 answer

  • answered 2020-05-22 20:01 Aakash Garg

    implement a canactivate route guard and use it with all routes.