How to properly lazyload component in angular?

Question

I am stuck with some simple route management in Angular : I have this first module :

import { NgModule } from '@angular/core';
import { Routes } from '@angular/router';
import { RouterModule } from '@angular/router';
import { LayoutComponent } from './ui/components/layout/layout.component';


const routes: Routes = [{ path: '**',
     component: LayoutComponent,
     children: [    { path: '', redirectTo: '/posts', pathMatch: 'full'},
    { path: 'posts',loadChildren: './posts/posts.module#PostsModule' }] }];

@NgModule({
  imports: [RouterModule.forRoot(routes)
     ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

And the "PostModule" which should show simple "it works" component :

import { NgModule } from '@angular/core';\n
import { Routes } from '@angular/router';\n
import { RouterModule } from '@angular/router';
import { PostsComponent } from './containers/posts/posts.component';
import { ProfileComponent } from './containers/profile/profile.component';

const routes: Routes = [{ path: '', component: PostsComponent },{ path: ':profileId', component: ProfileComponent },];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class PostsRoutingModule { }

But none of the route

http://localhost:4200/posts/

http://localhost:4200/posts/1

show the expected content

I suppose I have miss something simple my app.component look like this:

   <router-outlet>
      <router-outlet></router-outlet>
   </router-outlet>

I have read some poste on "lazy loading", but what I wrote seem coherent from what I learned until now, where is the mistake ?

Could you post your postModule.ts class? – Rafi Henig Nov 14 '19 at 16:42 — Rafi Henig, Nov 14 '19 at 16:42

score 2 · Accepted Answer · answered Nov 14 '19 at 17:01

The problem seems to be in the way you structured the routings. It should be configured like this:

const routes: Routes = [
  {
    path: '',
    component: LayoutComponent,
    children: [
      { path: 'posts', loadChildren: './posts/posts.module#PostsModule' }
    ]
  },
  { path: '**', redirectTo: '/', pathMatch: 'full' }
];

The idea of "path: '**'" is to handle any non-defined route you entered in the browser (i.e. /hello-world) and redirects to the root or any other defined route you choose.

So in the way you have it defined, the routing is always capturing the navigation and showing the LayoutComponent.

Rafi Henig · Answer 2 · 2019-11-14T17:05:30.850

Which Angular version are you using? Have you tried the following?

const routes: Routes = [{
  path: '**',
  component: LayoutComponent,
  children: [
    { path: '', redirectTo: '/posts', pathMatch: 'full' },
    { path: 'posts', loadChildren : () => import('./posts/posts.module').then(x => x.PostsModule) }
  ]
}];

Update:

The component added to a router outlet by the router is added below the outer router-outlet, therefore adding something inside the is pointless.

The inner router-outlet needs to be moved into LayoutComponent component, which is added to by the router.

Athanasios Kataras · Answer 3 · 2019-11-14T17:04:10.317

0

First try to do the following:

   <router-outlet>
      <p>Layout Component loaded</p>
      <router-outlet></router-outlet>
   </router-outlet>

Then, if something is written in your landing page, put the second router-outlet in your LayoutComponent.

In order to use multiple outlets side by side in one template, you need to use named router outlets.

edited Nov 14 '19 at 17:04

answered Nov 14 '19 at 16:47

Athanasios Kataras

25,191
4
32
61

I just mentioned it in case he needs for some reason to use it side by side. – Athanasios Kataras Nov 14 '19 at 17:03
Yes having a nested router outlet is pointless (it seems that we should avoid even space inside ?), you always will have the most inner router-outlet use, I have been using this just as I read an answer like this somewhere on this site.... – juanou Nov 14 '19 at 17:44
Nah, space won't do anything bad. – Athanasios Kataras Nov 14 '19 at 17:47

How to properly lazyload component in angular?

3 Answers3