Does lazy loading require an almost empty component containing router outlet?

Question

I am looking to implement lazy loading, but the user component currently contains a grid displaying all users, and no < router-outlet > .

Consider an app folder such as this:

src
-- app
----user
------user.component.html
------user.component.ts
------userdetail
--------userdetail.component.html
--------userdetail.component.ts

and here are the routes:

{ path: 'user', component: UserComponent },
{ path: 'user/:id', component: UserDetailComponent },

When I switch the structure to the following:

src
-- app
----user
------user-routing.module.ts (new)
------user.component.html
------user.component.ts
------user.module.ts (new)
------userdetail
--------userdetail.component.html
--------userdetail.component.ts

new route:

{ path: 'user', loadChildren: 'app/user/user.module#UserModule'},

the user component lazy loads, but I can't navigate to userdetail, so I plan to move my user grid into a new component 'userlist' and have only < router-outlet > in the 'user' component.

Is it really necessary to have an almost empty component 'user' just for this router outlet? My goal is to lazy load not only the user grid component but user detail component as well.

Here is a plunk I began, but haven't finished yet - https://plnkr.co/edit/m5gYG40wySngiiNpIY7W?p=preview

Take a look at https://stackoverflow.com/questions/40293240/how-to-manually-lazy-load-a-module — Sonu Kapoor, Dec 07 '17 at 21:16
Thank you, but I am not interested in implementing the _manual_ lazy loading, — Uğur Dinç, Dec 07 '17 at 22:07

Haifeng Zhang · Answer 1 · 2017-12-07T21:19:15.900

0

I believe it is about the route you defined. You can define your UserDetailComponent as one of children like:

export const ROUTES: Routes = [
  {
    path: '',
    component: UserComponent,
    children: [
      {
        path: ':id',
        component: UserDetailComponent,
      }
    ]
  }
];

As you defined { path: 'user', loadChildren: 'app/user/user.module#UserModule'},, therefore you can use '' for your UserComponent

edited Dec 07 '17 at 21:19

answered Dec 07 '17 at 21:14

Haifeng Zhang

30,077
19
81
125

I am trying to make it look like your example, but my example is different. Otherwise, I would have had my first definition of routes also containing 'children'. This is not the case because I do not have a router outlet in UserComponent, and therefore my question. In other words, do I need 3 compoenents in total for lazy loading to work with my initial 2 components ( UserListComponent and UserDetailComponent)? – Uğur Dinç Dec 07 '17 at 22:05

Does lazy loading require an almost empty component containing router outlet?

1 Answers1