Lazy loading a named router outlet

Question

So far I have not found a working demo with lazy loading in a named router outlet e.x. <router-outlet name="view"></router-outlet>. I have made a plunkr to find a way to make it work without success. Any help would be much appreciated.

https://plnkr.co/edit/EW3PZUMC63euf2QYxtW5?p=preview

In the example above View1, View2 and View3 are lazy loaded in the default router-outlet. View3_1 and View3_2 are lazy loaded in the named router-outlet without success.

Updated your plunkr to https://plnkr.co/edit/bhPyG3?p=preview since it had some error. — ShivangiBilora, May 17 '17 at 10:42
Possible duplicate of [Angular 4 Lazy loading with named router-outlet not working](https://stackoverflow.com/questions/47482230/angular-4-lazy-loading-with-named-router-outlet-not-working) — mohit uprim, Nov 27 '17 at 02:29

score 0 · Answer 1 · answered Aug 28 '17 at 13:22

I had tried to do it, but got :

Promise rejection: Invalid configuration of route 'yourRouteName': a componentless route cannot have a named outlet set

When we use named router-outlet it need component, not a module. I think it's impossible =( But i so need it.

score 0 · Answer 2 · answered Nov 23 '17 at 14:37

There is a proxy component workaround: We have this

 {
        path: 'me',
        outlet: 'hub',
        component: ProxyRouteComponent,
        children: [
            {
                path: '',
                loadChildren: 'hub#HubModule',
            },
        ],
    },

Where proxy route component is simply

import { Component } from '@angular/core';

@Component({
    selector: 'b-proxy-route',
    template: '<router-outlet></router-outlet>',
})
export class ProxyRouteComponent {
}

That seems viable. Any insights/caveats after doing this? Would love to see a plunker. — nullsteph, Jan 11 '18 at 04:02

Lazy loading a named router outlet

2 Answers2