Feature Request:[router] Support for configuring Routes lazily & dynamically using a service

[ajayambre]

Use Case

An application has multiple modules and each module has multiple navigation menu items in it.
Both modules and navigation menu items are authorization driven and fetched using a module and menu service from the server after the user logs in.

Expected/desired behavior

Support for configuring Routes lazily and dynamically using a service after the user logs in.

[zoechi]

Routes are per component. I don't see how this should work.

[b-strauss]

You can load components lazily. Have you tried loading a component lazily that has a routeconfig?

[ajayambre]

@zoechi RouteMetaData was recently updated with component parameter now supporting string type.
https://github.com/angular/angular/blob/master/modules/%40angular/router/src/metadata/metadata.ts#L25

This was for lazy loading the components as you no longer require to add import statement for components.

The service could return an array of RouteMetaData with component name as string and the router could lazy load those components.

[ajayambre]

@b-strauss Even if I lazy load components, I will have to define all possible routes from that component in my code statically. I want the possible routes to be configured dynamically and loaded lazily based on the user authorizations .

[b-strauss]

The RouteConfig accepts a simple array object. Can't you load a module that has a function that gets a route config array and returns a component? I have not yet tried this myself.

export function getMyComponent(config: Array): Type {
  @Component({
    selector: 'my-component'
  })
  @RouteConfig(config)
  class MyComponent{
    constructor() {
    }
  }

  return MyComponent;
}

[ajayambre]

@b-strauss I have seen similar examples of creating components and it looks OK for sample apps.
But in a large scale enterprise application, the component will have complex templates and lots of other functions and logic associated to it.

I think we need a cleaner approach to handle this.

[b-strauss]

@ajayambre But how is that different to a "normal" component that isn't nested inside a function? If your component has that much code, it should be broken up into smaller parts anyway. I don't see whats "not clean" about this solution (if it really works):

[ajayambre]

@b-strauss Thanks for your inputs on this. I will give it a try to see if that works.
What if I have multiple such components? Do I need to have multiple getMyComponents?
Would prefer a public api though which handles this. :)

[b-strauss]

@ajayambre Well, unfortunately EcmaScript doesn't have configurable modules imports (few languages have). So yes. :) But I think this is a shortcoming of the language not angular.

Btw.: The only component you need to import like this is the one that sits at the top of your routes. Subroutes of that component can be imported normally again.

[ajayambre]

@b-strauss Have a look at this http://plnkr.co/edit/IwdcGvAokzFX8CxJEFpc?p=preview
You will get an idea of what I am trying to achieve.
The modules and screens have to be fetched based on user authorizations and links created dynamically. Each screen could be a different component with different view template and functions.

Thanks in advance :)

[ajayambre]

@mhevery I am on RC1 and wanted this feature in the new router. Is this already in plan for the new router? Why was this labelled comp:router-deprecated and not comp: router? Thanks.

[mhevery]

Yes, this will be part of the new router.

[sirajc]

Even, I have the similar use case. Building Menu from the data provided by service ,which is achievable. But assinging this data from service to @Routes is not. It would be good to have a public API for this on New Router

[dominikstrasser]

@mhevery Any news when this is planned? I need this feature in order to upgrade my projects to RC :)
ps: The label of this issue should be changed to the new router and not the router-deprecated.

[LennardWesterveld]

This would be awesome, is the solution that are comming also covering my problem @mhegazy? http://stackoverflow.com/questions/37361604/angular-2-pretty-routing-api-based

[vsavkin]

We are no longer maintaining the deprecated router to focus our efforts on making the new router solid.

This functionality is implemented in the new router. So I'm closing this 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.}