Search code examples
angularangular-universal

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.


Solution

  • After lots of trial errors, I found the issue. Some where deep inside my code, I was using windows location and was getting error at server side due to the same. So after first default page nothing was getting rendered from server. Everything was getting evaluated at browser side only.

    Hope someone might find this helpful.