title: Browser sees old version of Angular app after new version is deployed, even after clearing cache
body: <p>I have an Angular 11 app that I'm building for deployment in production with the following commands:</p>
  <pre><code>npm install
  npm run build -- --prod --outputHashing=all
  </code></pre>
  <p>The problem I am having is that, once deployed, when I go the app's URL with my browser, I still see an older version of the application.</p>
  <p>I initially thought this was a cache issue, even though I was compiling with the <code>--outputHashing=all</code> option (it seems to be working from what I can tell, the output files in the <code>dist</code> folder have seemingly random filenames). And it seemed to be the case: if I refresh the page after disabling the cache in Chrome's dev options it now shows the updated app.</p>
  <p>However, here is the problem: if I close the browser and open it again... I go back to seeing the old app! So, clearing the cache seems to somehow be a temporary solution.</p>
  <p>After further investigation, my suspicion is that it has something to do with angular's <code>service workers</code>, since when I load the page with Chrome's dev tools open I can see a lot of network calls are marked as <code>Served from service worker</code>.</p>
  <p>However, I'm not enough of an expert in Angular to know how to diagnose further. I've read the documentation about service workers on angular's website, but it didn't help me in figuring out where the problem lies exactly. Can anyone point me in the right direction? Here is my service worker config file, it was automatically generated when the application was created. Let me know if there are other files I should provide:</p>
  <pre><code>{
    &quot;$schema&quot;: &quot;./node_modules/@angular/service-worker/config/schema.json&quot;,
    &quot;index&quot;: &quot;/index.html&quot;,
    &quot;assetGroups&quot;: [
      {
        &quot;name&quot;: &quot;app&quot;,
        &quot;installMode&quot;: &quot;prefetch&quot;,
        &quot;resources&quot;: {
          &quot;files&quot;: [
            &quot;/favicon.ico&quot;,
            &quot;/index.html&quot;,
            &quot;/manifest.webmanifest&quot;,
            &quot;/*.css&quot;,
            &quot;/*.js&quot;
          ]
        }
      },
      {
        &quot;name&quot;: &quot;assets&quot;,
        &quot;installMode&quot;: &quot;lazy&quot;,
        &quot;updateMode&quot;: &quot;prefetch&quot;,
        &quot;resources&quot;: {
          &quot;files&quot;: [
            &quot;/assets/**&quot;,
            &quot;/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)&quot;
          ]
        }
      }
    ]
  }
  </code></pre>
  <p>If it makes any difference, the app is hosted inside a .NET Core service running the embedded Katana webserver, but it don't see how that would make any difference, it's just serving the files without further manipulation.</p>