Lazy Loaded Module does not work with lazy routing

[Jonathan002]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ x ] Bug report  
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

Problem: I have a lazy module that needs to use the app popup router (secondary named outlet) in my app.component.html.

Expected behavior

Lazy module can use the popup router in my app.component.html.

Minimal reproduction of the problem with instructions

I have the following in my app component template:

src/app/app.component.html

    <!-- Primary Router -->
    <router-outlet id="main-router"></router-outlet>
    
    <!-- Popup Router -->
    <router-outlet name="app-popup"></router-outlet> <!-- <====== -->

My App Module and it's routes:

/src/app/app-routing.module.ts

const appRoutes: Routes = [
      { path: 'lazy',  loadChildren: 'app/lazy/lazy.module#LazyModule' }, // <--------
    ];
    @NgModule({
      imports: [
        CommonModule,
        RouterModule.forRoot(appRoutes),
      ],
      exports: [
        RouterModule
      ],
    })
    export class AppRoutingModule { }

/src/app/app.module.ts

    @NgModule({
      declarations: [AppComponent],
      imports: [
        BrowserModule,
        AppRoutingModule
      ],
      bootstrap: [AppComponent]
    })
    export class AppModule {}

My Lazy Module and it's routes:

/src/app/lazy/lazy.module.ts

    const lazyRoutes: Routes = [
      { path: 'lazy-popup', outlet: 'app-popup', component: LazyPopupComponent },
      { path: '', component: LazyComponent }
    ];
    @NgModule({
      imports: [
        RouterModule.forChild(lazyRoutes)
      ],
      exports: [
          RouterModule
      ]
    })
    export class LazyRoutingModule {}

/src/app/lazy/lazy.module.ts

    @NgModule({
      imports: [
        CommonModule,
        AppSharedModule,
        LazyRoutingModule
      ],
      declarations: [
        LazyComponent,
        LazyPopupComponent
      ],
      exports: [
        LazyPopupComponent,
        LazyRoutingModule,
      ]
    })
    export class LazyModule {}

How I navigate:

I navigate to the route like this:

/src/app/lazy/lazy.component.html

    <button [routerLink]=" [ '', { outlets: { 'app-popup': ['lazy-popup'] } }] "></button>

---

I can't seem to get it to work as I get this error:

    core.es5.js:1020 ERROR Error: Uncaught (in promise): Error: Cannot match 
    any routes. URL Segment: 'lazy-popup'.

Note that this works perfectly though if I import the LazyModule in AppModule below:

    @NgModule({
      declarations: [AppComponent],
      imports: [
        BrowserModule,
        AppRoutingModule,
        LazyModule // <-- The routes work now.. But.. this should be lazy.. : (
      ],
      bootstrap: [AppComponent]
    })
    export class AppModule {}

Although this defeats the purpose of it being a lazy loaded module. So how can I get the lazy loaded module use the secondary router-outlet named 'app-popup' that exist in the app components html template?

What is the motivation / use case for changing the behavior?

Getting a lazy module to use a single app wide secondary outlet as a popup.

Environment

Angular-Cli project

Angular version: 4.2.4


Browser:
- [ x ] Chrome (desktop) version 61.0.3163.100
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: XX  
- Platform:  Mac 

Others:

[codart1]

This issue is really anoying

[royling]

Duplicate with #10981

[mlc-mlapis]

@Jonathan002 ... use the equivalent solution like described here by using createEmbeddedView https://stackblitz.com/edit/adv-ng-left-nav

[jasonaden]

Closing as a duplicate as well as needing a reproduction (use Plunker or Stackblitz). If you would would like to create a repro that's different than #10981 and not solved by the referenced stackblitz above, please create a new issue.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}