Menu
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
861
To lazy load Angular modules, use loadChildren (instead of component ) in your AppRoutingModule routes configuration as follows. content_copy const routes: Routes = [ { path: 'items', loadChildren: () => import('./items/items. module'). then(m => m.
Disadvantages of Lazy loading Firstly, the extra lines of code, to be added to the existing ones, to implement lazy load makes the code a bit complicated. Secondly, lazy loading may affect the website's ranking on search engines sometimes, due to improper indexing of the unloaded content.
If you want to check how lazy loading works and how lazy loading routing flow, then Augury is the best tool we have. Click on ctrl+F12 to enable the debugger and click on the Augury tab. Click on the router tree. Here, it will show the route flow of our modules.
Lazy loading helps to keep the bundle size small, which helps reduce load times. We must use the class decorator to create an Angular module @NgModule, and the decorator uses a metadata object that defines the module. The main properties are: import: Components of this module are used with Array with other modules.
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/
149
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
