title: how to create an angular multilingual routing path
body: <p>I'm using the <a href="https://github.com/ngx-translate/core" rel="nofollow noreferrer">ngx-translate</a> library to add multilingual support to my lazy loaded Angular website.<br />
  I was wondering how to properly add multilingual logics to the angular routing system.</p>
  <p>Example</p>
  <pre class="lang-js prettyprint-override"><code>// HOME is my exported variable containing my routes
  export const routes: Routes = [{
   path: HOME, 
   loadChildren: () =&gt; import('app/pages/home.module').then((m) =&gt; m.HomeModule),
  }]
  </code></pre>
  <p>Now, when a user comes on my website, he should find the home pages with those URLs</p>
  <ul>
  <li>English : <code>my-domain/home</code></li>
  <li>French : <code>my-domain/acceuil</code></li>
  <li>German : <code>my-domain/startseite</code></li>
  </ul>
  <p>I know, I could create multiple <code>app-routing.module.ts</code> files, one for each language, but when the website have many pages and should be translated in many languages, it become overcomplicated to use this technique.</p>
  <h3>Edit</h3>
  <p>An other Idea was to reload the page, be even through this solution, I'll then have to change the url, what is also complicated in an nested routing system. like :</p>
  <ul>
  <li>English : <code>my-domain/en/products/my-product</code></li>
  <li>French : <code>my-domain/fr/produits/mon-produit</code></li>
  </ul>