I need a way to load the children path as LazyLoad from dashboard (parent component) as LazyLoad only if the user routes to that link

user_10845859 0
Viewed 42

I'm developping an angular application where i need most of the components to be Lazy Load, i've a dashboard component which is lazy load itself, in that dashboard I need other Lazy load component for example

  • Component 1
  • Component 2

the code down below is from file app-routing.mmodule.ts

const routes: Routes = [
  { 
    path: 'dashboard', loadChildren: () => import('./dashboard/dashboard.module').then(m => m.DashboardModule),
    children: [
{
      path: 'component1', loadChildren:() => import('./dashboard/component1_folder/component1/component1.module').then(m => m.Component1Module)
    },
      path: 'component2', loadChildren:() => import('./dashboard/component2_folder/component2/component2.module').then(m => m.Component2Module)
    }
]
  }
];

When i ran the code I got the following error:

main.ts:12 Error: Invalid configuration of route 'dashboard': children and loadChildren cannot be used together
    at validateNode (router.js:3398)
    at validateConfig (router.js:3367)
    at Router.resetConfig (router.js:4150)
    at new Router (router.js:3733)
    at Object.setupRouter [as useFactory] (router.js:5638)
    at Object.factory (core.js:11378)
    at R3Injector.hydrate (core.js:11289)
    at R3Injector.get (core.js:11111)
    at injectInjectorOnly (core.js:899)
    at Module.ɵɵinject (core.js:903)
(anonymous) @   main.ts:12
invoke  @   zone-evergreen.js:364
run @   zone-evergreen.js:123
(anonymous) @   zone-evergreen.js:857
invokeTask  @   zone-evergreen.js:399
runTask @   zone-evergreen.js:167
drainMicroTaskQueue @   zone-evergreen.js:569
Promise.then (async)        
scheduleMicroTask   @   zone-evergreen.js:552
scheduleTask    @   zone-evergreen.js:388
scheduleTask    @   zone-evergreen.js:210
scheduleMicroTask   @   zone-evergreen.js:230
scheduleResolveOrReject @   zone-evergreen.js:847
then    @   zone-evergreen.js:979
bootstrapModule @   core.js:28074
zUnb    @   main.ts:11
__webpack_require__ @   bootstrap:84
0   @   main.js:11
__webpack_require__ @   bootstrap:84
checkDeferredModules    @   bootstrap:45
webpackJsonpCallback    @   bootstrap:32
(anonymous) @   main.js:1

Can someone help me make this happen, because Angular is slow when it tries to load all component at once. I need a way to load the children path from dashboard only if the user routes to that link.

angular lazy-loading
1 Answers

A "path" can not have both: children and loadChildren. BTW, all the components can not be "lazy loaded" (really is a module which is lazy loaded). Almost the initial module must be "normal"

You can have as app-router.ts some like

    const routes: Routes = [
      {
        {path:'Home',Component},
        {path: 'dashboard', loadChildren: () => import('....').then(mod => mod.dashboard)}
      }
    ];

And dashboard.ts

    const lazyOneRoutes: Routes = [
      { path: '', component: dashboardComponent },
      {path:'component1',loadChildren:()=>import('...').then(mod=>mod.component1Module)},
      {path:'component2',loadChildren:()=>import('...').then(mod=>mod.component2Module)}

    ]

Or

      const routes: Routes = [
        {path:'Home',HomeComponent},
        {path: 'dashboard', loadChildren: () => import('....').then(mod => mod.dashboard)},
      {path:'dashboard/component1',loadChildren:()=>import('...').then(mod=>mod.component1Module)},
      {path:'dashboard/component2',loadChildren:()=>import('...').then(mod=>mod.component2Module)}
    ];
user_85581860
Related