title: Angular 2 routes - redirect to different app
body: <p>I'm generating various versions of my app in alternate languages. I'm using AOT (ahead of time) compilations, so I end up with static deployable sites in a structure that looks like this:</p>
  
  <pre><code>dist -
    index.html -- entry file for the default (English language) app
    -fr
      index.html -- entry file for French language version
    -de
      index.html -- entry file for German language version
  </code></pre>
  
  <p>I can currently switch between the main language websites using a dropdown where the user can select their preferred language, and I then load the main entry file for the required site using plain JavaScript like this:</p>
  
  <pre><code>const baseUrl = window.location.origin;
  window.location.href = baseUrl + '/' + requestedLanguage + '/index.html'; // e.g. requestedLanguage = 'fr'
  </code></pre>
  
  <p>This works, as it seems that requesting the actual <code>index.html</code> file means Angular won't interpret the request <code>href</code> as an Angular route.</p>
  
  <p>What I want to happen though is that when the user enters a URL that already contains the language version in the path, I want that language version to be served. I also want the URL path preserved so that the Angular routing loads the appropriate component for the requested URL.</p>
  
  <p>For example:</p>
  
  <ul>
  <li><p>user enters <code>myDomain.com/fr/myPage</code></p></li>
  <li><p>the app under the <code>/fr/</code> subdirectory is loaded, and the Angular routing in that app loads the related component for <code>MyPage</code></p></li>
  </ul>
  
  <p>Currently if I enter a URL <code>myDomain.com/fr/myPage</code>, the Angular routing tries to interpret the desired subfolder <code>fr</code> as a route, which doesn't exist, so I get the following error:</p>
  
  <pre><code>Error: Cannot match any routes. URL Segment: 'fr/instruments'
  </code></pre>
  
  <p>How can I load the required app and the correct component? There must be a way of getting Angular to recognise that the <code>fr</code> in the URL refers to a different app. Maybe I'm missing a build configuration or something? Here's my script in <code>package.json</code> for building the French language version:</p>
  
  <pre><code>"build:fr": "ng build --aot --output-path=dist/fr --base-href /fr/ --i18nFile=src/locale/messages.fr.xlf --i18nFormat=xlf --locale=fr",
  </code></pre>