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
– Rafi Henig

2019-11-14 16:42:39 +00:00
Commented Nov 14, 2019 at 16:42 — Rafi Henig
– Rafi Henig, Commented Nov 14, 2019 at 16:42

Luis · Accepted Answer · 2019-11-14 17:01:32Z

2

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.

answered Nov 14, 2019 at 17:01

Luis

8745 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

juanou Over a year ago

you've nailed it !

Rafi Henig · Accepted Answer · 2019-11-14 17:05:30Z

1

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.

edited Nov 14, 2019 at 17:05

answered Nov 14, 2019 at 16:41

Rafi Henig

6,4502 gold badges22 silver badges41 bronze badges

Comments

Athanasios Kataras · Accepted Answer · 2019-11-14 17:04:10Z

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, 2019 at 17:04

answered Nov 14, 2019 at 16:47

Athanasios Kataras

26.7k5 gold badges40 silver badges67 bronze badges

3 Comments

Athanasios Kataras Over a year ago

I just mentioned it in case he needs for some reason to use it side by side.

juanou Over a year ago

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....

Athanasios Kataras Over a year ago

Nah, space won't do anything bad.

Collectives™ on Stack Overflow

How to properly lazyload component in angular?

3 Answers 3

1 Comment

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related