title: Browser keep a confusing cached version of angular app on root index.html hosted with azure app service
body: <p>We currently have 2 versions of our Angular application on Azure/App services to support internalization.</p>
  
  <p>There are hosted in the same place but on different folders <strong>/en</strong> and <strong>/fr</strong>.
  Our folders tree looks like this </p>
  
  <pre><code>-&gt; 
  wwwroot/index.html
  wwwroot/web.config
  wwwroot/en/index.html
  wwwroot/en/..
  wwwroot/fr/index.html
  wwwroot/fr/..
  </code></pre>
  
  <p>We do have a web.config rewrite rules which works perfectly. See below :</p>
  
  <pre><code>&lt;configuration&gt;
  &lt;system.webServer&gt;
      &lt;rewrite&gt;
          &lt;rules&gt;
              &lt;rule name="Angular Routes fr" stopProcessing="true"&gt;
                  &lt;match url="fr/.*" /&gt;
                  &lt;conditions logicalGrouping="MatchAll"&gt;
                      &lt;add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" /&gt;
                      &lt;add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" /&gt;
                  &lt;/conditions&gt;
                  &lt;action type="Rewrite" url="fr/" /&gt;
              &lt;/rule&gt;
              &lt;rule name="Angular Routes en" stopProcessing="true"&gt;
                  &lt;match url="en/.*" /&gt;
                  &lt;conditions logicalGrouping="MatchAll"&gt;
                      &lt;add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" /&gt;
                      &lt;add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" /&gt;
                  &lt;/conditions&gt;
                  &lt;action type="Rewrite" url="en/" /&gt;
              &lt;/rule&gt;
          &lt;/rules&gt;
      &lt;/rewrite&gt;
  &lt;/system.webServer&gt;
  &lt;/configuration&gt;
  </code></pre>
  
  <p>Here is the twist; we do provide a root index.html in case the user navigate to <code>www.app.com/*</code> instead of <code>www.app.com/en</code>.
  In this case the root index.html is triggered and we run some js script to redirect using "window.location.href" the user depending on the local storage language.</p>
  
  <p>For some reason, when we are querying the url from the root <code>www.app.com</code>
  the browser link and cached a first version to this url.</p>
  
  <p>If we are querying the url with a resource like this <code>www.app.com/en/*</code>
  the browser link ANOTHER version to this path despite the same domain.</p>
  
  <p>The problem is that each time we deploy a new version only the path with any resources is being updated ex: <code>www.app.com/en/*</code> or <code>www.app.com/fr/*</code> but the root url <code>www.app.com</code> stay attached with an old version and never update.</p>
  
  <p>If the user use the root url it will be redirected to an old version of the app only available in memory or disk.</p>
  
  <p>Note that <code>www.app.com/en/*</code> or <code>www.app.com/fr/*</code> is working perfectly</p>
  
  <p>At this point i don't know if the problem is our rewrite rules or our js script redirection.</p>
  
  <p>Here is the angular build script for /en -> <code>ng build --output-path=dist/en --prod --base-href /en/ --i18n-locale en-CA --i18n-format=xlf</code></p>
  
  <p>Here is our root index.html code :</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" /&gt;
      &lt;meta http-equiv="Pragma" content="no-cache" /&gt;
      &lt;meta http-equiv="Expires" content="0" /&gt;
      &lt;script&gt;
          var edRedirectManager = (function () {
              var _this = {};
  
              _this.storageLocaleKey = "EDLocale";
  
              _this.locale = "";
              _this.init = function(){
                  _this.locale = (_this.getUserLanguage());
              } 
  
              _this.redirect = function () {
                  var currentUrl = new URL(window.location.href);
  
                  var lgPrefix = _this.getUrlPrefixByLanguage();
                  currentUrl.pathname = _this.insert(currentUrl.pathname,lgPrefix,0);
  
                  window.location.href = currentUrl.href;
              }
  
              _this.getUserLanguage = function () {
  
                  try {
                      _this.locale = localStorage.getItem(storageLocaleKey);
                  } catch (error) {}
  
                  if (!this.locale) {
  
                      if (navigator.language.toUpperCase().indexOf("FR") !== -1)
                          this.locale = "fr-CA";
                      else
                          this.locale = "en-CA";
  
                      localStorage.setItem(this.storageLocaleKey, this.locale);
  
                  }
  
                  return _this.locale;
              }
  
              _this.getUrlPrefixByLanguage = function(){
                  var lgPrefix = "/fr";
  
                  if(this.locale.indexOf('en') !== -1){
                      lgPrefix = "/en";
                  }
  
                  return lgPrefix;
              }
  
              _this.insert = function (main_string, ins_string, pos) {
                  if (typeof (pos) == "undefined") {
                      pos = 0;
                  }
                  if (typeof (ins_string) == "undefined") {
                      ins_string = '';
                  }
                  return main_string.slice(0, pos) + ins_string + main_string.slice(pos);
              }
  
  
              return _this;
          })();
      &lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
      &lt;script&gt;
          // self executing function here
          edRedirectManager.init();
          edRedirectManager.redirect();
      &lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>