'Angular Universal - Title is not seen in View Source but can be seen during Inspect

I have Angular 7 application with server side rendering using Angular Universal. (mainly followed tutorial https://blog.angular-university.io/angular-universal/)

Currently code is deployed and running on nodejs (4000 - with reverse proxy using apache2 server so that I can use port 80 - mentioning this in case this matters).

Inside my component (all my components are deeply nested), I am using code as below

....
constructor(private title: Title){}
....

ngOnInit() {
   this.title.setTitle('my title')
}

Please check (http://public.ecokrypt.com). If I click on 'Dashboard' I do see title changed on my browser. I also see the new title with 'Inspect'. But if I try 'View Source' it does not show me the new title. It always shows me the data from my first default page (login => title 'User'). Please not that my index.html contains 'EcokryptUiapp' as title, my first default login page contains 'User' as title. So first time it does render from server.

It seems after my first page, I never get any server side rendering. The same issue is with facebook/twitter meta tags as well.Due to this, if I try to debug facebook link / verify the twitter card, it gives me error.

I verified on my local development environment as well, view source always gives me first page, content never gets changed.

Am I missing any step ? I am stuck on this for last 3 days, just unable to find any solution. Any help is greatly appreciated.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source