Skip to content

Commit

Permalink
fix(ng2.UIRouterConfig): Allow new UIRouter() to finish before config…
Browse files Browse the repository at this point in the history 
…uring it

Execute `.config()` in a setTimeout() to allow the UIRouter constructor to fully complete.
  • Loading branch information
@christopherthielen
christopherthielen committed Jun 24, 2016
1 parent 4f53f81 commit a151f71
Showing 1 changed file with 8 additions and 6 deletions.
14 changes: 8 additions & 6 deletions src/ng2/providers.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,12 +74,14 @@ let uiRouterFactory = (routerConfig: UIRouterConfig, location: UIRouterLocation,

router.stateRegistry.stateQueue.autoFlush(router.stateService);

routerConfig.configure(router);

if (!router.urlRouterProvider.interceptDeferred) {
router.urlRouter.listen();
router.urlRouter.sync();
}
setTimeout(() => {
routerConfig.configure(router);

if (!router.urlRouterProvider.interceptDeferred) {
router.urlRouter.listen();
router.urlRouter.sync();
}
});

return router;
};
Expand Down

6 comments on commit a151f71

@ValentinFunk
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This causes some issues for me: In Angular2 when bootstrapping a component with the router the component is loaded fully before my states are registered, so that all of the hrefs on the ui-sref directive turn up as "null"

@christopherthielen
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same as this #2912 ?

Are your uiSref inside a routed component (uiView) or inside the root component?

@ValentinFunk
Copy link
Contributor

@ValentinFunk ValentinFunk commented on a151f71 Aug 14, 2016 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's inside of the root component so might be that issuse - i've stepped through the code and the states aren't yet defined when my Component loads so the href resolving fails.

bootstrap(AppComponent, [
    disableDeprecatedForms(),
    provideForms(),
    ...UIROUTER_PROVIDERS,
    ...HTTP_PROVIDERS,
    provide(UIRouterConfig, {useClass: MyUIRouterConfig}),
    provide(LocationStrategy, {useClass: PathLocationStrategy})
]);

// Inside my <app><navbar [states]="navStates" ></navbar> <ui-view></ui-view></app>
/*
App component defines the nav states: navStates: [{title: 'bla', state: 'app.home'}]
Navbar creates tabs in an ngFor with uiSref

The problem seems to be that the states are not yet registered because the configuration is only called later (see above setTimeout()) when app/navbar's uiSref are created.
*/

Quite new to Angular2 so problem might be that i'm not fully grasping the change detection yet - is there any way to listen to newly registered states? I've gone through the StateRegistry code but couldn't find any Observable or Event that I could listen to. Would allow to simply recreate the uiSrefs once the configuration is finished or has changed (maybe this is even the more desirable option).

@christopherthielen
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I see what you mean.
There isn't (yet) an event when a state is registered. I think it would be a good addition to the StateRegistry API.

@ValentinFunk
Copy link
Contributor

@ValentinFunk ValentinFunk commented on a151f71 Aug 14, 2016 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also 100% sure that this is causing the issue you linked, if you go into the plunker, set a breakpoint before the setTimeout and paste setTimeout = (f) => { f() } into the dev console the hrefs work fine.

I don't know the motivation for this feature, if it is to be kept i suppose to fix one could implement an Event/Observable for the StateRegistry and make uiSref and similar directives subscribe to it

@christopherthielen
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A workaround is to bootstrap a UIView, instead of your custom root element.

Please sign in to comment.