Lazy load auxilary

I'm submitting a ... (check one with "x")

[ x] bug report => search github for a similar issue or PR before submitting
[ x] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

Expected/desired behavior

Reproduction of the problem
If the current behavior is a bug or you can illustrate your feature request better with an example, please provide the steps to reproduce and if possible a minimal demo of the problem via https://plnkr.co or similar (you can use this template as a starting point: http://plnkr.co/edit/tpl:AvJOMERrnz94ekVua0u5).

http://plnkr.co/edit/YmsQ4L1KKVPnRn72pq6N?p=preview

What is the expected behavior?

Can do this:

RouterModule.forChild([ { path: '', component: OffersDelete, outlet: 'actions' } ])

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

If you have multiple modules that are triggered by aux routing always You have to create a fake component to operate the first route

Please tell us about your environment:

Angular version: 2.0.0-rc.X
Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
Language: [all | TypeScript X.X | ES6/7 | ES5]

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 [email protected] 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

@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

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

Navigation Menu

Repository navigation

Lazy load auxilary #10981

112 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Lazy load auxilary #10981

Description

Activity

maxime1992 commented on Jan 8, 2017

victornoel commented on Feb 20, 2017

SoulOnFire commented on Apr 13, 2017

justkevsthlm commented on Apr 13, 2017

maxime1992 commented on Apr 13, 2017

vivanov-dp commented on Apr 24, 2017

chrisalexander55 commented on Apr 24, 2017

gtzinos commented on May 11, 2017

maxime1992 commented on May 11, 2017

nekkon commented on May 16, 2017

112 remaining items

maxime1992 commented on May 23, 2019

inthegarage commented on Jun 20, 2019

Jonathan002 commented on Jul 20, 2019

JohnYoungers commented on Jul 23, 2019

BenRacicot commented on Jul 23, 2019

asvishnyakov commented on Aug 7, 2019

Mark12870 commented on Aug 30, 2019

patachon commented on Sep 7, 2019

JohnYoungers commented on Sep 7, 2019

patachon commented on Sep 7, 2019

angular-automatic-lock-bot commented on Oct 8, 2019

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions