Change Angular base href with ngx-translate

I have already implemented ngx-translate succesfully. Now, I want to change the base href of my Angular project, depending on the language I choose from my header menu.

Currently, my URL looks like this: “localhost:4200”. Then, when you launch the project, it must show something like this: “localhost:4200/en” or like this: “localhost:4200/es”, depending on the choosen language.

My index html has this:

<base href="/"/>

And my header component ts file has a function that changes the language using ngx-translate. As you can see, I tried to use ‘replaceState’ to show the choosen language in the URL, and it worked, but it disappears once I navigate to another route.

import { Component, OnInit } from '@angular/core';
//For translate language
import { TranslateService } from '@ngx-translate/core'; 
import { Router, Event, NavigationStart, NavigationEnd } from '@angular/router';
import { Location } from '@angular/common';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss'],
})
export class HeaderComponent implements OnInit {


  constructor(private translate: TranslateService,
              private router: Router,
              private location: Location,
              ) 
    { translate.addLangs(['es','en']);
      translate.setDefaultLang('es'); 
    }

  ngOnInit(): void {



  }


  useLanguage(language: string): void {
    this.translate.use(language); 
    // alert(language);

    // location.replace("https://www.google.com");
    // return;


    const modified_path = language;
    this.location.replaceState(modified_path);

  } 
 

}