Angular lazy loading not working with direct url

Question

I'm running .net Core + webpack 3 + Angular 4.

My lazy loading works just fine when used inside the app, Like thru the navbar, But fails when I try to access the lazy loaded url directly.

fail: Microsoft.AspNetCore.NodeServices[0]
      ERROR { Error: Uncaught (in promise): Error: Cannot find module './components/members/members.module.ngfactory'.
      Error: Cannot find module './components/members/members.module.ngfactory'.
          at /root/myApp/bin/Release/netcoreapp2.0/publish/ClientApp/dist/vendor.js:35933:9
          at ZoneDelegate.module.exports.ZoneDelegate.invoke (/root/myApp/bin/Release/netcoreapp2.0/publish/ClientApp/dist/vendor.js:92811:26)
          at Object.onInvoke (/root/myApp/bin/Release/netcoreapp2.0/publish/ClientApp/dist/vendor.js:14833:33)
          at ZoneDelegate.module.exports.ZoneDelegate.invoke (/root/myApp/bin/Release/netcoreapp2.0/publish/ClientApp/dist/vendor.js:92810:32)
          at Zone.module.exports.Zone.run (/root/myApp/bin/Release/netcoreapp2.0/publish/ClientApp/dist/vendor.js:92561:43)
          at /root/myApp/bin/Release/netcoreapp2.0/publish/ClientApp/dist/vendor.js:93238:57
          at ZoneDelegate.module.exports.ZoneDelegate.invokeTask (/root/myApp/bin/Release/netcoreapp2.0/publish/ClientApp/dist/vendor.js:92844:31)
          at Object.onInvokeTask (/root/myApp/bin/Release/netcoreapp2.0/publish/ClientApp/dist/vendor.js:14824:33)
          at ZoneDelegate.module.exports.ZoneDelegate.invokeTask (/root/myApp/bin/Release/netcoreapp2.0/publish/ClientApp/dist/vendor.js:92843:36)
          at Zone.module.exports.Zone.runTask (/root/myApp/bin/Release/netcoreapp2.0/publish/ClientApp/dist/vendor.js:92611:47)

... Is there a known fix to this problem or a workaround so I could mimic the way the router works inside the app and 'redirect' the request to the lazy loaded model

Have you tried { useHash: true } when configuring your routes? — Michael Kang
– Michael Kang, Commented Dec 16, 2017 at 2:20
Thanks that fixed it ! Though is there a way to make it work without it? — Doctor Strange
– Doctor Strange, Commented Dec 16, 2017 at 2:44

Michael Kang · Accepted Answer · 2017-12-16 02:51:33Z

1

Use the Hash location strategy:

RouterModule.forRoot([...], { useHash });

Why does this work?

In most web servers, including IIS, the part in front of the hash is treated as the path to the actual page on the server. But the route really only exists within the client-side application. The deep link will hit the server first, and of course the route doesn't exist, and so a 404 error appears. Using the # location strategy fixes that since the server ignores the part after the #, and so it resolves the page correctly from the server perspective. Angular does the rest to bring you to the right page.

You need to tell the web server that deep links into a SPA is ok. Here is a guide that looks pretty good: https://gingter.org/2017/03/20/deep-link-angular-spa-iis/

answered Dec 16, 2017 at 2:51

Michael Kang

53k16 gold badges108 silver badges138 bronze badges

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

Collectives™ on Stack Overflow

Angular lazy loading not working with direct url

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related