I have updated my angular 6 version to angular 7 version. Now I am getting error when I try to navigate to 'http://localhost:4200/pages'. I am use lazy loading route concept in my application.
Error:-
core.js:12584 ERROR Error: Uncaught (in promise): Error: Cannot find module './Pages/Test/Test.module' Error: Cannot find module './Pages/Test/Test.module' at $_lazy_route_resource lazy namespace object:5 at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:388) at Object.onInvoke (core.js:14143) at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:387) at Zone.push../node_modules/zone.js/dist/zone.js.Zone.run (zone.js:138) at zone.js:872 at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421) at Object.onInvokeTask (core.js:14134) at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420) at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188) at $_lazy_route_resource lazy namespace object:5 at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:388) at Object.onInvoke (core.js:14143) at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:387) at Zone.push../node_modules/zone.js/dist/zone.js.Zone.run (zone.js:138)
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Routes} from '@angular/router';
export const AppRoutes : Routes = [
{
path : '',
redirectTo: 'test',
pathMatch: 'full',
}
{
path: 'test',
loadChildren: './Pages/test/test.module#TestModule'
}
]
Tell me, how to solved this error.
To lazy load Angular modules, use loadChildren (instead of component) in your AppRoutingModule routes configuration as follows. In the lazy-loaded module's routing module, add a route for the component.
Since Angular creates a SPA (Single Page Application), all of its components are loaded at once. This means that a lot of unnecessary libraries or modules might be loaded as well.
A common error when lazy-loading modules is importing common modules in multiple places within an application. You can test for this condition by first generating the module using the Angular CLI and including the --route route-name parameter, where route-name is the name of your module.
We have an Angular app which is loaded when we hit its URL (say — Localhost:4200).Now, when the app which has multiple pages is loaded as we hit the URL, it is quite possible that a few pages from the app are heavy on bandwidth & content and may be mostly not required now by the user. What do we understand from this.
After trying many changes, I found that my app.routing.ts should be like this:-
import { TestModule } from './Pages/test/test.module';
export const AppRoutes : Routes = [
{
path : '',
redirectTo: 'test',
pathMatch: 'full',
}
{
path: 'test',
loadChildren: () => TestModule
}
]
After changes this works perfect for me.
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