Angular Universal (SSR) and router animation first load / trigger

Question

I've got a problem with Angular Universal and router animations. My case is very simple yet hard to resolve (at least for me). Universal renders an HTML document and sends it to the browser. Then angular browser app is being downloaded and when it does and fires, the router outlet animation is triggered. It looks bad, as if component is being reloaded/refreshed. It's only a case with that first initial animation trigger.

I've created a repo to reproduce this issue: https://github.com/BazylPL/angular-ssr-router-test

To get it going I use "npm run dev:ssr" command. The problem is very easy to spot when using network throttling, eg "fast 3g"

Does anyone have an idea if I'm doing something wrong or is it an internal design issue?

Answer 1

This is more of a hack, but you could only enable animations once the first navigation has ended.

component.ts

public enableAnimation = false;

constructor(private router: Router)
{

    router.events.subscribe(ev => {
      if (ev instanceof NavigationEnd && !this.enableAnimation)
      {
        setTimeout(() => this.enableAnimation = true, 10);//settimeout to not trigger animation right at the end of this cycle
      }
    }):
}

component.html

<div [@routeAnimations]="o.isActivated && enableAnimation? o.activatedRoute : ''">
    <router-outlet #o="outlet"></router-outlet>
</div>