title: How To Use LOCALE_ID In Angular i18n Router Module
body: <p>Im building a small Angular Application with Angular's i18n setup. Everything ist working fine, except for the translations of the url paths and slugs. I tried a possible solution with providing a routing module per language (as described here), but this did not work.</p>
  
  <p>I thought that I could do something like the following, but I can't figure out where to inject <code>LOCALE_ID</code>:</p>
  
  <p><strong>app-routing.module.ts</strong></p>
  
  <pre><code>import { LOCALE_ID, NgModule } from '@angular/core';
  import { Routes, RouterModule } from '@angular/router';
  import { MainComponent } from './main/main.component';
  
  const i18nRoutes = {
      de: {
          main: 'inhalte',
          // ...
      }, 
      fr: {
          main: 'contenu',
          // ...
      }
  }
  
  const currentLanguage = i18nRoutes[ LOCALE_ID ]; // &lt;-- Apparently not working, since I have to inject LOCALE_ID. But where?
  
  const routes: Routes = [
      {
          path: '',
          redirectTo: currentLanguage.main,
          pathMatch: 'full'
      },
      {
          path: currentLanguage.main + '/:key',
          component: MainComponent
      }
      // ...
  ];
  
  @NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
  })
  export class AppRoutingModule { }
  </code></pre>
  
  <hr>
  
  <h2>Update for clarification</h2>
  
  <p>in <code>angular.json</code>, I set configurations for the building process in each language (taken from <a href="https://medium.com/@feloy/deploying-an-i18n-angular-app-with-angular-cli-fc788f17e358" rel="noreferrer">here</a>, with a view modifications for 2018)</p>
  
  <p><strong>angular.json</strong></p>
  
  <pre><code>{
      // ...
      "projects": {
          "my-app": {
              // ...
              "architect": {
                  "build": {
                      // ...
                      "configurations": {
                          // ...
                          "de": {
                              "i18nFile": "src/i18n/de.xliff",
                              "outputPath": "dist/de",
                              "i18nFormat": "xlf",
                              "i18nLocale": "de",
                              "baseHref": "/de/"
                              // ...
                          },
                          "fr": {
                              "i18nFile": "src/i18n/fr.xliff",
                              "outputPath": "dist/fr",
                              "i18nFormat": "xlf",
                              "i18nLocale": "fr",                            
                              "baseHref": "/fr/",
                              // ...
                          }
                     }
                }
            }
       }
  }
  </code></pre>
  
  <p>For building all apps at once, I then enter <code>npm run buildall</code>, which executes the following in <code>package.json</code>:</p>
  
  <p><strong>package.json</strong></p>
  
  <pre><code>{
      "name": "my-app",
      // ...
      "scripts": {
          // ...
          "buildall": "for lang in de fr;do ng build --configuration=$lang; done"
      }
  }
  </code></pre>
  
  <p>which generates all apps in a subdirectory in the <code>dist</code> folder just fine.</p>
  
  <p><strong>So, to come back to my original question:</strong> The provided <a href="https://stackoverflow.com/a/52333393/1107529">answer by Exterminator</a> does not fit my needs, since</p>
  
  <ul>
  <li>I cannot set a fixed locale while bootstrapping</li>
  <li>Injecting <code>LOCALE_ID</code> in the constructor is too late since I need the value in <code>app-routing.module.ts</code></li>
  </ul>
  
  <p>I hope I explained enough. <strong>But maybe I misunderstood something completely.</strong> In any case, thanks in advance for any help. I am still learning and I must admit that a few concepts are still blurry to me.</p>