Route each locale in angular universal app

Question

I followed the Angular documentation to built a separate distributable copy of my angular universal app for each locale.

Steps:

• created a translation file for each language and

• define the locales in the build configuration in the angular.json.

• set "localize" and "aot" option to true in the build section of angular.json workspace build configuration file.

• npm run build:ssr

  dist/my-app/browser/
   |-- fr
   |-- en
  

• modified the server.ts:

   export function app(lang: string): express.Express {
      const server = express();
      const distFolder = join(process.cwd(), 'dist/my-app/browser' + lang);
      //rest as default
    }
    function run(): void {
      const port = process.env['PORT'] || 4000;
      const appFr = app('/fr');
      const appEn = app('/en');
      const server = express();
      server.use('/fr', appFr);
      server.use('/en', appEn);
      server.use('', appEn);
      server.listen(port, () => {
    console.log(`Node Express server listening on http://localhost:${port}`);
      });
    }
  

Now I can open http://localhost:4200/en for english- and http://localhost:4200/fr for french version in the browser.

How to navigate between both url (languages) within my app.component.ts?

Are there other options than:

 if (isPlatformBrowser(this.platformId)) {
    window.location.href = url;
  }