1

I have an Angular2 app that uses the Router, with the standard setup pattern in app.routes.ts: 

const appRoutes: Routes = [
    {
        path: '',
        redirectTo: '/login',
        pathMatch: 'full'
    },
    {
        path: 'login',
        component: LoginComponent
    },
    ...other static routes...
];

export const Routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

But my App has some routes that are not in the static appRoutes array. They are loaded using an injectable Service called CmsService that runs as an APP_INITIALIZER and stores its result as a public property CmsService.pages on itself, according to How to pass parameters rendered from backend to angular2 bootstrap method and the comments below.

Now I am trying to figure out how to use this service in app.routes.ts, but I can't figure out what kind of animal this file actually is? The examples I can Google on how to use injectable services are all for Components, but app.routes.ts is something else and I am at loss on how to add the routes from CmsService.pages into the appRoutes array before the Router is initialized.

Community
  • 1
  • 1
Jesper We
  • 5,977
  • 2
  • 26
  • 40
  • You can't but you can reconfigure the router with `router.resetConfig()` after you got the response. – Günter Zöchbauer Oct 19 '16 at 10:02
  • Your answers are very fast, man :-) ! So I am trying this, but if I want access to the router object and try to inject the router into my CmsService, the App crashes with: `Cannot instantiate cyclic dependency! ApplicationRef_: in NgModule AppModule` – Jesper We Oct 19 '16 at 10:15
  • This time not so fast (just had launch). You can work around cyclic dependency by not injecting some dependency directly but instead inject the `Injector` and get the dependency using `injector.get(MyDependency)`. – Günter Zöchbauer Oct 19 '16 at 10:38
  • 1
    Ok, that worked much better. I get access to the Router inside my APP_INITIALIZER service and reconfigure it. BUT.... It's too late :-( If I enter the App at `http://host/route-xyz` where `route-xyz` is one of the routes from the CMS, Router throws `Cannot match any routes` and goes to `/` – Jesper We Oct 19 '16 at 11:16
  • You could add a catch-all route `path: '**', component: DummyComponent` and then after `router.reset()` navigate to the original path again (not tried myself yet). – Günter Zöchbauer Oct 19 '16 at 11:21
  • Ok, this is really HARD to get done, I must say. So I do a catch-all component. It renders a "loading..." template. Then I want to navigate to the ActivatedRoute *again* after the router has been reconfigured. But I can't figure how to trigger that navigation when the router has reconfigured? – Jesper We Oct 19 '16 at 12:04
  • I guess you need to capture the current route by injecting `Router` and `ActivatedRoute` to the `DummyComponent` and then there call `router.navigate(...)` – Günter Zöchbauer Oct 19 '16 at 12:08
  • Yes, I am doing this. My problem now is I can't call `.navigate()` until the Router has been reconfigured in the APP_INITIALIZER, and router.events is not well documented here: https://angular.io/docs/ts/latest/api/router/index/Router-class.html#!#events-anchor, and your answer here http://stackoverflow.com/questions/35912932/angular-2-router-event-listener shows only events related to navigation, not reconfiguring. – Jesper We Oct 19 '16 at 12:24
  • You can use an observable (BehaviorSubject) to notify when the router is reconfigured and in the dummy component subscribe to this observable. – Günter Zöchbauer Oct 19 '16 at 12:30
  • I did not understand that completely. Any pointers/example? – Jesper We Oct 19 '16 at 12:33
  • Not sure what you don't understand. You can communicate between service and component using a service with an observable. https://angular.io/docs/ts/latest/cookbook/component-communication.html – Günter Zöchbauer Oct 19 '16 at 12:35
  • 1
    OK, mission accomplished. Thx a lot. – Jesper We Oct 19 '16 at 13:01
  • Congrats :) . . . . – Günter Zöchbauer Oct 19 '16 at 13:02
  • 1
    @JesperWe Would you mind posting your solution and adding it as the accepted answer? i'm sure there are others who would like to see what your solution was. – Jnr Feb 08 '20 at 16:35
  • @JesperWe: Could you please post your solution? That would be very kind. – uruk Oct 23 '20 at 18:20

0 Answers0