Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

In Angular 7 version Lazy Loading is not working

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)

app-routing.ts

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.

like image 413
Harleen Kaur Arora Avatar asked Nov 02 '18 14:11

Harleen Kaur Arora


People also ask

How to lazy load angular modules?

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.

Why does angular have so many libraries?

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.

How do I test if a module is lazy-loading?

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.

Why is my angular app loading multiple pages when I hit url?

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.


1 Answers

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.

like image 180
Harleen Kaur Arora Avatar answered Sep 19 '22 20:09

Harleen Kaur Arora