Angular lazy loading with children for named outlets

Question

First of all let me mention that below mentioned is simplified example of my all routes. Just the part that is not working. I have an angular project (it's nativescript angular project actually, but I guess the problem is in angular actually). The version of angular used is 8.2.x.

I have following app-routing.module.ts, which basically redirects everything to HomeModule:

const routes: Routes = [
    { path: '', redirectTo: 'home', pathMatch: 'full' },
    { path: 'home', loadChildren: () => import('~/app/home/home.module').then((m) => m.HomeModule) }
];

Then comes home-routing.module.ts, which has following in it:

const routes: Routes = [
    {
        path: '',
        component: HomeComponent,
        children: [
            {
                path: '',
                component: Outlet1Component,
                outlet: 'outlet1',
            },
            {
                path: '',
                component: Outlet2Component,
                outlet: 'outlet2',
            },
        ],
    },
];

Now HomeComponent is successfully loaded and it has several named outlets in it and I want those outlets also to load their own components, that are configured in router. But that part is not working and I don't now how to fix that.

UPDATE

Here are 2 Nativescript playground examples:

The first version works correctly (per angular logic) and loads the components for outlets. The second version doesn't load the components for outlets.

Also nativescript repo issue for reference.

I think [this answer](https://stackoverflow.com/a/44591931/9632621) will be helpful. Maybe if you do the `this.router.navigate([{ outlets: ... }])` thing inside `HomeComponent`'s constructor, it should work. — Andrei Gătej, Nov 20 '19 at 18:42
Can you elaborate your problem statement, what exactly is not working. It doesn't load content on any outlet Or one of the outlet? Are you using `page-router-outlet` / `router-outlet`? What is holding your outlets, TabView or simple layouts? Also you seem setting redirect only to home component, you will have to set router path for each outlet in your redirect statement for routers to pick up the components upon launch. — Manoj, Nov 20 '19 at 19:30

score 0 · Answer 1 · answered Nov 20 '19 at 21:37

You just need to do some small changes.

change your app-routing.module.ts to

const routes: Routes = [
    { path: '', redirectTo: '/home/default/(outlet1:outlet1route//outlet2:outlet2route)', pathMatch: 'full' },
    { path: 'home', loadChildren: () => import('~/app/home/home.module').then((m) => m.HomeModule) }
];

and the home-routing.module.ts to

const routes: Routes = [
    {
        path: 'default',
        component: HomeComponent,
        children: [
            {
                path: 'outlet1route',
                component: Outlet1Component,
                outlet: 'outlet1',
            },
            {
                path: 'outlet2route',
                component: Outlet2Component,
                outlet: 'outlet2',
            },
        ],
    },
];

This it will navigate to home component and then it will load both Outlet1Component and Outlet2Component in each respective outlet.

This is just a workaround and a wrong one. `app-routing.module` doesn't need to know the specifics of `home-routing.module` routes. It breaks all the purpose of angular modules and encapsulation. — Arman P., Nov 21 '19 at 15:24

Angular lazy loading with children for named outlets

1 Answers1