Lazy load auxilary #10981

I don't like to ask for an ETA but this issue is opened since august and it's really a problem to not be able to use auxiliary routes (within a lazy loaded module).

Is there any chance someone looks into it?

Any news on that?

It seems #13807 has a complete plunkr to repro this issue :)

What can we do to help fix it? :)

I have the same problem. Lazy modules don't work on aux routes

Any updates on this problem?

It seems that lazy load and auxiliary routes are not widely used together.
We can see a lot of demos, separated but that's it. It's like no one uses it in a medium/large app 😮

These 2 are killer functionalities and no one seems to care about that issue ¯\_(ツ)_/¯
It's been nearly 8 months now.

I don't want to put pressure on anyone and I know it's open source. So instead of asking for ETA someone should try to implement it. But the router doesn't seem to be the better things to start digging for the first time in Angular code base. Especially for an issue with lazy loading and auxiliary routes.

That said, I hope someone can take a look into that and I'm sure the 21 people who put a 👍 on my comment would send kudos to our savior 👼 ❤️

PS : I also created a stackoverflow question (when I thought I was missing something instead of a bug) and it has +100 views.

I don't think it wouldn't be wide used if it worked.

I have the same problem, using Angular@4.0.3 and I have to move forward, so I'm moving the component in question out to it's own separate module with no children paths, to be able to display it in the aux outlet, hopefully lazy-loaded. If that doesn't work I will even make it load normally.

When this is fixed I might change it back, if I have time

Update: It doesn't work with lazy loading because "Promise rejection: Invalid configuration of route 'liveAction': a componentless route cannot have a named outlet set".
It's almost as if they never even thought about using lazy loading and aux outlets together.

Huge chest bump to the Angular team but unfortunately I have to agree. I think the bar was set relatively low by targeting simple router-based apps with named outlets sprinkled in. Not only is lazy routing with named outlets not supported at this time but there is zero guidance on memory management (i.e. module unloading). Hopefully, this will be picked up for NG 5 or a patch. Angular team and community still rock in my world! 👍

Hello, any workaround to fix this issue ?

@gtzinos I tried to ask on Twitter this morning because I don't know what to do either after 8 months but no luck nor workaround yet

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.

Patching the following changes directly into the compiled version of the router (from node_modules) completely fixed the issue for me 🙌 #25483

It's definitely not the right way of doing things but it feels so much simpler in that case than breaking some of my routes or have non empty routes for a workaround.

I hope that PR gets merged at some point.

I created a further stackblitz as a further playground for this issue. Please fork it as you wish.

https://stackblitz.com/edit/angular-router-auxilary-issue

It moves between panel b and c in panel a. Thanks to several posters here it has helped solve my panel in panel problem.

Hey guys, I've created a workaround for loading a lazy module's component through custom named outlets routing. Please have a look and hope this is useful.

Repo: https://github.com/Jonathan002/route-master-example

I have a menu that opens modal windows, where each could contain quite a bit of code: my goal was to lazy load the modals on demand when needed, which I was able to get to work like so:

app.component:

    <router-outlet></router-outlet>
    <router-outlet name="modal"></router-outlet>

link:

<a [routerLink]="['', { outlets: { modal: ['tools', 'view-stuff'] } }]">View Stuff</a>

added this to the root routes:

{
  path: 'tools',
  outlet: 'modal',
  children: [
    {
      path: 'view-stuff',
      loadChildren: () => import('app/tools/view-stuff/tools-view-stuff.module').then(m => m.ToolsViewStuffModule)
    }
  ]
}

view-stuff-module

@Component({
  selector: 'app-view-stuff-launcher-component',
  template: ''
})
export class ToolsViewStuffLauncherComponent implements OnInit, OnDestroy {
  modal!: ModalInstance<ToolsViewStuffModalComponent>;

  constructor(private modalService: ModalService) {}

  ngOnInit() {
    this.modal = this.modalService.open(ToolsViewStuffModalComponent);
  }

  ngOnDestroy() {
    this.modal.dismiss();
  }
}

const routes: Routes = [
  {
    path: '',
    component: ToolsViewStuffLauncherComponent
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes), CommonModule, SharedModule],
  providers: [ModalService],
  declarations: [ToolsViewStuffLauncherComponent, ToolsViewStuffModalComponent],
  entryComponents: [ToolsViewStuffModalComponent]
})
export class ToolsViewStuffModule {}

Editing to include modal close logic when the outlet is set to null

@jayoungers that is awesome! Could you setup a StackBlitz for us?

Any updates on this?

I think I've got the same problem. The router-outlet doesn't work when I lazy-load its parent.

ToolsViewStuffModalComponent

@jayoungers
I tried your solution but strangely, I get "No component factory found for ToolsViewStuffModalComponent" even though it's defined in entryComponents. Any idea?

@patachon - I don't know which modal library you're using, but generally in order for them to work properly you need to add the modal service as a provider in your secondary module (even though you likely have it imported or provided in a primary module as well)

@jayoungers You're right! I'm using Angular Material and imported MatDialogModule in the lazy-loaded module as well. Now I can see the dialog opens!
Thank you very much! 👍

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