0

I have used Angular 11 in my single page application (SPA). I have used lazy load module in app-routing.module.ts. The issue is when I redirect to that module/component, it get the results from browser cache. As Lazy-loaded modules are loaded asynchronously and cached by the Angular router, so subsequent visits to the same route will load the module from the cache instead of making a new request to the server. Is there any way we can request a module forcefully from the server?

app-routing.module.ts

 children: [
      {
        path: 'dashboard', loadChildren: () => import('./pages/dashboard/dashboard.module').then(m => m.DashboardModule),
        data: { breadcrumb: 'Dashboard' }
      }
]

Any help or suggestions would be highly appreciated.

Thanks

Improve this question
4
  • I do not get why you would want to have such a behavior. Imho this sounds like a misconception. Whenever you edit the file angular should produce a new chunk with a slightly different name to ensure that the browser uses the new version. If there are no changes in your component there should be no reason to not cache it. Commented Jan 24, 2024 at 15:30
  • @SirOneOfMany - The scenario is, when I make any changes in file and do the deployment, at that time some clients has already open the app on their browser and without refresh they can't see the latest changes on lazy loading routing. Commented Jan 24, 2024 at 15:38
  • Yes I see the problem here. But this is normal behavior as the chunk name is baked into the source files during compilation and the router is intialized during bootstrap phase. Your intended behavior is afaik not possible without refreshing the whole application. A workaround I have seen so far is using WebSockets to inform the client that an update happened and then refresh the page (or let the user decide with a button) Commented Jan 24, 2024 at 15:42
  • Perhaps when a chunk is lost or updated after a deployment. medium.com/@kamrankhatti/… Commented Oct 10, 2024 at 20:02
Related questions
903
Angular 6 - Could not find module "@angular-devkit/build-angular"
352
Can't bind to 'routerLink' since it isn't a known property
1
Facing issue while Lazy loading a module ( Cannot find module)
Load 6 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.