title: Angular Uncaught (in promise): ChunkLoadError: Loading chunk XXXfailed
body: <p>I am using angular 12, and I use Service Worker to deploy new versions.</p>
  <p>It looks like each time I deploy a new version to production (and for some reason not on staging). Some user receive a bunch of error like</p>
  <blockquote>
  <p>Uncaught (in promise): ChunkLoadError: Loading chunk XXX failed.</p>
  </blockquote>
  <p>There is quite some post about this issue, but it appear to me the solution is case by case.</p>
  <p>The difference I have in production compare to stg is just.</p>
  <p>I call
  <code>enableProdMode();</code></p>
  <p>I have the service worker setup like this :</p>
  <pre><code>    ServiceWorkerModule.register('ngsw-worker.js', {
        enabled:
          environment.env === Environment.PRODUCTION || environment.env === Environment.STAGING,
        registrationStrategy: 'registerWhenStable:30000',
      }),
  </code></pre>
  <p>And My Config looks like</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;lazy&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>And this is how I show the updates (basically a banner that can be ignored) :</p>
  <pre><code>@Component({
    selector: 'app-live-update-notifier',
    templateUrl: './live-update-notifier.component.html',
    styleUrls: ['./live-update-notifier.component.scss'],
  })
  export class LiveUpdateNotifierComponent implements OnDestroy {
    hasUpdate = false;
    isIgnored = false;
  
    private subscription = new SubSink();
  
    constructor(
      @Inject(DOCUMENT) private document: Document,
      private swUpdate: SwUpdate,
      private appRef: ApplicationRef,
      private changeDetectorRef: ChangeDetectorRef
    ) {
      const appIsStable$ = this.appRef.isStable.pipe(first((isStable) =&gt; isStable === true));
      const everySixHours$ = interval(6 * 60 * 60 * 1000);
      const everySixHoursOnceAppIsStable$ = concat(appIsStable$, everySixHours$);
  
      if (swUpdate.isEnabled) {
        this.subscription.add(
          everySixHoursOnceAppIsStable$.subscribe(() =&gt; swUpdate.checkForUpdate()),
          this.swUpdate.available.subscribe((evt) =&gt; {
            if (evt.type === 'UPDATE_AVAILABLE') {
              this.hasUpdate = true;
              this.changeDetectorRef.detectChanges();
            }
          })
        );
      }
    }
  
    ngOnDestroy(): void {
      this.subscription.unsubscribe();
    }
  
    updateApp() {
      this.document.location.reload();
    }
  
    skipNotification() {
      this.isIgnored = true;
    }
  }
  </code></pre>
  <p>If you have any clue that could guide to the solution, thank you.</p>
  <p>EDIT :</p>
  <p>I have a bunch of lazy loaded module all across my app. I thought the reason was that some module where not loaded previous to a new version, and when user navigate to them after deploy they would have this chunk problem. But I tried to do emulate this issue by</p>
  <ul>
  <li>editing module A and B</li>
  <li>deploy</li>
  <li>navigate to module A</li>
  <li>editing module A and B</li>
  <li>deploy</li>
  <li>navigate to old module B from old A, so without updating the version of the APP
  RES : old B still load normally</li>
  </ul>
  <p>so I don't think it s this issue</p>