We are using Lazy Loading for Router Modules .
{
path: 'users',
loadChildren: 'app/users/users.module#UsersModule',
},
But when we update version of our app (upload new bundle to the server) it's always broken: old app (that user has already downloaded) tries to get old chunk file that is not on the server anymore.
Live example : https://alexshakura.github.io/chunk-error/ (I've just rename the chunk to highlight the error)
What is the correct way to handle this error?
Let me describes the steps:
You can try using the ng service worker to do this for you.
The service worker will have its own manifest that will enable the worker to keep track of app versions and cached assets. Every time a user reloads the page, the cached version of the app will be served. Then, in background, the service worker will fetch the current manifest, parse it and if there is a version change, it will cache the new app version in the background. The next user's reload will display the new version of the app.
You can enable the service worker functionality by putting "serviceWorker": true
to your .angular-cli.json
into your app section.
Then create a ngsw-config.json
file in your src
dir. The defaults should look like this:
{
"index": "/index.html",
"assetGroups": [{
"name": "app",
"installMode": "prefetch",
"resources": {
"files": [
"/favicon.ico",
"/index.html"
],
"versionedFiles": [
"/*.bundle.css",
"/*.bundle.js",
"/*.chunk.js"
]
}
}, {
"name": "assets",
"installMode": "lazy",
"updateMode": "prefetch",
"resources": {
"files": [
"/assets/**"
]
}
}]
}
And finally, put NGSW module initialization into your app.module
:
@NgModule({
// ...
imports: [
// ...
ServiceWorkerModule.register('/ngsw-worker.js', { enabled: environment.production })
]
})
export class AppModule {}
Running ng build --prod
will provide all the rest for you.
You can find more about service workers in the official docs .
Update for 2021.
I had the same issueas OP, but I solved it by making it the app a PWA, according to @Heehaaw's tips.
However, I would not recommend @Heehaaws approach for making it an Angular PWA. Instead one should follow Angulars official guide https://angular.io/guide/service-worker-getting-started
Run this command inside your project, or follow the guide above.
ng add @angular/pwa
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.