SOLUCIÓN ACTUALIZADA A CONTINUACIÓN La solución preferida es convertir a PWA

Tuve el mismo problema y encontré una solución bastante clara que no se menciona en las otras respuestas.

Utiliza el manejo global de errores y obliga a la aplicación a recargarse si fallan los fragmentos.

 import {ErrorHandler, Injectable} from '@angular/core'; @Injectable() export class GlobalErrorHandler implements ErrorHandler { handleError(error: any): void { const chunkFailedMessage = /Loading chunk [\d]+ failed/; if (chunkFailedMessage.test(error.message)) { window.location.reload(); } } }

Es una solución simple y aquí (Angular Lazy Routes y el fragmento de carga fallaron) está el artículo del que lo obtuve.

EDITAR: Convertir a PWA

Otra solución puede ser convertir su sitio Angular en una PWA (aplicación web progresiva). Lo que esto hace es agregar un trabajador de servicio que puede almacenar en caché todos sus fragmentos. Cada vez que se actualiza el sitio web, se carga un nuevo archivo de manifiesto desde el backend; si hay archivos más nuevos, el trabajador del servicio buscará todos los fragmentos nuevos y notificará al usuario sobre la actualización.

Aquí hay un tutorial sobre cómo convertir su sitio web Angular actual a un PWA. Notificar al usuario de nuevas actualizaciones es tan simple como:

 import { Injectable } from '@angular/core'; import { SwUpdate } from '@angular/service-worker'; @Injectable() export class PwaService { constructor(private swUpdate: SwUpdate) { swUpdate.available.subscribe(event => { if (askUserToUpdate()) { window.location.reload(); } }); } }

Puede usar GlobalErrorHandler personalizado en su aplicación. Todo lo que hace es simplemente verificar el mensaje de error si tiene un fragmento de carga [XX] fallido, y obliga a la aplicación a recargar y cargar los nuevos fragmentos nuevos.

Cree globalErrorHandler con el siguiente código

 import { ErrorHandler, Injectable } from "@angular/core"; @Injectable() export class GlobalErrorHandler implements ErrorHandler { handleError(error: any): void { const chunkFailedMessage = /Loading chunk [\d]+ failed/; if (chunkFailedMessage.test(error.message)) { if (confirm("New version available. Load New Version?")) { window.location.reload(); } } } }

Después de crear globalErrorHandler.ts , debe definir el ErrorHandler en app.module.ts

 @NgModule({ providers: [{provide: ErrorHandler, useClass: GlobalErrorHandler}] })

Mantengo mis fragmentos antiguos en su lugar durante un par de días después de una actualización solo con este propósito. Mi aplicación también consta de mini-SPA, por lo que, a medida que se mueven, es probable que recojan la nueva versión durante la carga de la página.