Angular UI with Bound Data Won't Show Until a Click happens

Issue

The UI of this Angular app will no longer display any bound data (menu, component info, etc) until a click is made on something that has a function. Quick video here that's big enough to see: https://drive.google.com/file/d/1Kn8L700whfCpDMnzX5iYDyrOgw424BbR/view

This is a working site with continuous integration and I just can't imagine what I've done that is now causing this to happen. I recently upgraded to Angular 10, and it was working fine after that, so I don't believe that's the issue. I've never seen this before and not even sure what to search on because I have been very unsuccessful so far. Any advice/ideas is greatly appreciated.

UPDATE: I've just went to production server and took last update from 7/15 and placed in staging area and it loads as expected. Went to DevOps to do a comparison between that commit and yesterday's commit (when this began) and I don't see anything in Angular project except for a couple new components, which are not part of any initial loading. Only other changes were in an API project and a docker file at base of solution. What else can I look into?

Solution

I'm not saying this is the answer, but after insurmountable amount of research and attempts to figure out what was going on, the only thing I was able to do to make it work was to add a change detector to my global template:

app

• default-layout.component - which holds the <router-outlet></router-outlet>

  ngAfterContentChecked() { ... this.ref.detectChanges(); }

It's not an answer I'm satisfied with because it doesn't tell me the reason why, or what was happening, but it is a solution that worked here. Thanks for the help and hope that may help someone.

Answered By - Briana Finney