Angular 2 (Final): resetConfig to add routes to lazy loaded routes

[Andrea Bertoldo]

Hello, I have posted a question on Stackoverflow but it's not getting answers.

It's about dynamically adding routes to a lazy loaded module (with its own routes.config file) so as to load modules in multiple router outlets, something that isn't covered on the official documentation and doesn't seem to be a popular use case, and it seems strange to me...

I hope cross posting is not forbidden, in case I apologize in advance.

http://stackoverflow.com/questions/39572777/angular-2-final-resetconfig-to-add-routes-to-lazy-loaded-routes

[Sander Elias]

Hi Andrea,

Do you have a sample project for this, so I can give it a spin?

I have read into this, and as far as I can tell, you should be able to do a resetConfig in your module. I'm not sure though of that resets the module's router or the complete router.

A simple way is to examine and adjust the routers configuration and use the result of that in resetConfig. 

Regards

Sander

[Andrea Bertoldo]

Hi Sander,

sorry for the late reply. I've assembled this plunkr: http://plnkr.co/edit/6aV5n5K5wdqdiYo49lZv. It's the first time I use plunkr so I apologize if something's wrong (to me it's extremely slow... but it works).

So, with regard to the plunkr: what I am currently able to do is load components dynamically and add them to the application (see tab "Dynamic Modules").

What I've also done is to use multiple named router-outlets, despite not finding any official documentation (see tab "Dynamic Routed"). Despite the tab name, routes are known ahead of time.

What I want to do is: dynamically load a configuration (the dynamicRoutes array in the DynamicRoutesComponent) and only after create one router-outlet per dynamic route and use resetConfig (or what it takes) to have this configuration:

        {

 path: "dynamic-routed",

 component: DynamicRoutesComponent,

 children: [

   { path: "", component: EmptyComponent },

   { path: "component1", component: Component1, outlet: "component1" },

   { path: "component2", component: Component2, outlet: "component2" }

 ]

}

with one child per dynamic route.

Thanks in advance!

[Sander Elias]

Hi Andrea,

As I have been out to Angularconnect I did miss your response, this is one that will take me a bit more time, so I'm going to look at it when I'm back home. If you don't hear back from my by next Monday, shoot me a message. Otherwise, I might forget. This week has been a rollercoaster :)

Regards

Sander

[Andrea Bertoldo]

Ok thanks!
In the meantime I noticed that if I use a component to wrap the named router outlets it won't work, the router outlet must belong to the details component (see the plunkr). So I think I'll have to dynamically create the detail component's template as well as resetting the router configuration.

P.s.: are you part of the angular team?

[Andrea Bertoldo]

Too bad you couldn't help. Thanks anyway for your time.

[Sander Elias]

Hi Andreas,

I'm sorry, I did forget. Well I'm just returned from ngEurope, and will give it a go tomorrow! 

Regards

Sander

[Sander Elias]

Hi Andrea,

I just took a serious look at your plunker. (yes, it's a tad slow for ng2. but as you said, it works)

So if I understand your request correctly, you want to create a list of named router-outlets from within a component, and then create a router-config that matches. (and after that probably you want to auto-load those components..)?

Do I get that right? 

Curious about your use-case, is this a sort of widget-dashboard you are working on?

Regards

Sander

[Andrea Bertoldo]

Hi Sander,

this time I was away, at Lucca Comics, one of the biggest fairs on Comics and Games in Europe :)

Yes, I'm working on a sort of widget dashboard, you get that right!

Andrea

[Andrea Bertoldo]

...

On Monday, October 31, 2016 at 4:53:42 AM UTC+1, Sander Elias wrote: