Lazy loading issue : Loading chunk 0 failed

Question

components in -- lazy.module.ts

 const routes: Routes = [
   { path: 'memberdetails', component: MemberDetailsComponent },
   { path: 'leaves', component: LeavemanagementComponent },
  { path: 'attendance', component: AttendanceComponent }
 ];

app-routing.module.ts

 const routes: Routes = [
   { path: 'lazy', loadChildren: './lazy.module#LazyModule'},
 ];

It's working locally, but after hosting it when I click on any of these above links I am getting this error...

vendor.05d559e….bundle.js:1 ERROR Error: Uncaught (in promise): Error: 
Loading chunk 0 failed.
Error: Loading chunk 0 failed.
at HTMLScriptElement.r (inline.9786b27….bundle.js:1)
at HTMLScriptElement.L (polyfills.1a7da64….bundle.js:1)
at e.invokeTask (polyfills.1a7da64….bundle.js:1)
at Object.onInvokeTask (vendor.05d559e….bundle.js:1)
at e.invokeTask (polyfills.1a7da64….bundle.js:1)
at r.runTask (polyfills.1a7da64….bundle.js:1)
at t.invokeTask [as invoke] (polyfills.1a7da64….bundle.js:1)
at h (polyfills.1a7da64….bundle.js:1)
at HTMLScriptElement.d (polyfills.1a7da64….bundle.js:1)
at HTMLScriptElement.r (inline.9786b27….bundle.js:1)
at HTMLScriptElement.L (polyfills.1a7da64….bundle.js:1)
at e.invokeTask (polyfills.1a7da64….bundle.js:1)
at Object.onInvokeTask (vendor.05d559e….bundle.js:1)
at e.invokeTask (polyfills.1a7da64….bundle.js:1)
at r.runTask (polyfills.1a7da64….bundle.js:1)
at t.invokeTask [as invoke] (polyfills.1a7da64….bundle.js:1)
at h (polyfills.1a7da64….bundle.js:1)
at HTMLScriptElement.d (polyfills.1a7da64….bundle.js:1)
at u (polyfills.1a7da64….bundle.js:1)
at u (polyfills.1a7da64….bundle.js:1)
at polyfills.1a7da64….bundle.js:1
at e.invokeTask (polyfills.1a7da64….bundle.js:1)
at Object.onInvokeTask (vendor.05d559e….bundle.js:1)
at e.invokeTask (polyfills.1a7da64….bundle.js:1)
at r.runTask (polyfills.1a7da64….bundle.js:1)
at o (polyfills.1a7da64….bundle.js:1)
at t.invokeTask [as invoke] (polyfills.1a7da64….bundle.js:1)
at h (polyfills.1a7da64….bundle.js:1)

Folder Structure:

app-routing.module.ts { path: 'lazy', loadChildren: './lazy.module#LazyModule'}, — Hemanth, Sep 19 '17 at 08:46
hey its working by adding "deployUrl" : "/path", in apps in .angular-cli.json — Hemanth, Sep 19 '17 at 12:43
This may also work for you then: https://stackoverflow.com/questions/38112891/set-base-href-dynamically-angular-2-4/41949470#41949470 — Zze, Sep 19 '17 at 19:54

score 9 · Answer 1 · answered Jan 15 '19 at 11:24

9

Clean Your Cache or use CTRL + Shift + R combo key and try again!

answered Jan 15 '19 at 11:24

Sachin from Pune

547
6
16

@KirillWarp can you please provide your issue in details – Sachin from Pune Jan 17 '19 at 07:35

score 7 · Answer 2 · answered Feb 18 '19 at 15:16

7

The CTRL + Shift + R hard reload helped in my particular case because my issue was that I made design changes and needed the hard reload. Not sure if it will solve this error in all cases.

answered Feb 18 '19 at 15:16

Chaster johnson

135
1
6

score 2 · Answer 3 · answered Feb 25 '20 at 06:06

2

In my case The Ad Blocker Extension was creating this issue. Once i disabled it. The problem was solved

answered Feb 25 '20 at 06:06

Dhruv Patadia

112
10

This works for me. In my case this issue only occurs with firefox, chrome never show me this error with lazyload – user739DamQ Jan 19 '21 at 12:59

score 0 · Answer 4 · answered May 18 '20 at 02:29

We have faced the same issue recently in Angular builds. We are using Angular 7+. The reason was indeed the Cache. But in our case it was CloudFront based cache. So my suggestion is, if you face any such issue clean all types of cache as:

Domain specific ( e.g; CloudFlare)
Any CDN cache - e.g; CloudFront of AWS - Later we have implemented the solution where any new deployment pipeline will automatically refresh the CloudFront caching. Now there is no need of manual cache purging.
Web server based cache - Apache or IIS
User browser cache.

Some of the articles on Medium.com has mentioned about writing a service/directive to notify the build changes. we have not implemented it but it seems promising to me.

If this does not fix the issue, try to clean the package cache from the builder as well. Like we have GitLAb CI based pipelines that also creates such issues, to fix which, we have disabled the caching of the source code/packages at the GitLab runner.

score 0 · Answer 5 · answered Feb 15 '21 at 18:28

We experienced the same issue in our localhost server. The reason was an invalid certificate in chrome and other browsers. We changed an option in Chrome.

This option will only work for requests to localhost over HTTP.

In the Chrome address bar, type chrome://flags/#allow-insecure-localhost and then select the “Enable” link.

score 0 · Answer 6 · answered Dec 09 '21 at 11:33

0

Checking Disable cache from the Developer tools

Then press Ctrl + F5 and CTRL+SHIFT+R multiple times solved the problem

answered Dec 09 '21 at 11:33

Hakan Fıstık

14,367
10
94
117

Lazy loading issue : Loading chunk 0 failed

6 Answers6