Issue
I encountering a strange behavior among UI-Router hooks when executed by angular universal.
For the hooks (i.e. onEnter
, onExit
) declared within the UI-Router’ states, they’re executed as expected in both angular (on browser) and angular universal.
But, for instance in an angular singleton service watching TransitionService
hooks, they’re only triggered in angular (on browser); they’re ignored in angular universal.
Is this a bug or did I missed something?
The singleton service I used:
@Injectable()
export class SingletonService {
constructor(transitionService: TransitionService) {
transitionService.onEnter({}, this.onEnterStateChange.bind(this));
}
private onEnterStateChange(transition: Transition, state?: StateDeclaration): void {
// something here
// ✓ called on browser
// ✗ ignored on universal
}
}
Lib versions:
- angular + universal 5.2.6
- ui-router angular 1.0.1
Solution
We found the root of the problem and it’s not a bug but a misunderstanding of the interaction of UIRouter in universal environment.
During the server-side rendering, the component rendering is done after ui-router finished routing, deletated at the very end. In our code, the singleton was provided in the app-module, and it’s even too late; the hooks were registered too late.
It’s about this flag: deferInitialRender: true
.
The solution was to register and force to create the singleton service at the very beginning by injecting it in the constructor of the app-module.
Hope this could help someone else.
Answered By – Bérenger -appvizer-
Answer Checked By – Timothy Miller (AngularFixing Admin)