UIRouter transition Hooks not fired in angular universal

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)