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
– Hemanth, Commented Sep 19, 2017 at 8:46
hey its working by adding "deployUrl" : "/path", in apps in .angular-cli.json — Hemanth
– Hemanth, Commented Sep 19, 2017 at 12:43
This may also work for you then: stackoverflow.com/questions/38112891/… — Zze
– Zze, Commented Sep 19, 2017 at 19:54

Sachin from Pune · Accepted Answer · 2019-01-15 11:24:31Z

10

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

answered Jan 15, 2019 at 11:24

Sachin from Pune

7369 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sachin from Pune Over a year ago

@KirillWarp can you please provide your issue in details

Chaster johnson · Accepted Answer · 2019-02-18 15:16:49Z

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, 2019 at 15:16

Chaster johnson

1832 silver badges7 bronze badges

Comments

Dhruv Patadia · Accepted Answer · 2020-02-25 06:06:46Z

3

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

answered Feb 25, 2020 at 6:06

Dhruv Patadia

1622 silver badges10 bronze badges

1 Comment

user739DamQ Over a year ago

This works for me. In my case this issue only occurs with firefox, chrome never show me this error with lazyload

Rupendra · Accepted Answer · 2020-05-18 02:29:39Z

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.

PariSh KhAn · Accepted Answer · 2021-02-15 18:28:36Z

0

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.

answered Feb 15, 2021 at 18:28

PariSh KhAn

6122 gold badges8 silver badges15 bronze badges

Comments

Hakan Fıstık · Accepted Answer · 2021-12-09 11:33:49Z

0

Checking Disable cache from the Developer tools

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

answered Dec 9, 2021 at 11:33

Hakan Fıstık

19.9k16 gold badges124 silver badges152 bronze badges

Collectives™ on Stack Overflow

Lazy loading issue : Loading chunk 0 failed

6 Answers 6

1 Comment

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related