Angular Universal initial load deployed app has empty page source (nothing inside app-root) unlike localhost
Question
I'm currently working on deploying Angular Unviversal app via Azure Pipelines. The page is up and running. But I've come accross an issue while trying to set dynamic meta tags. I'm using Angular's Meta to implement those.
Everything works fine on the localhost. I build the app and start main.js. Then I view page source, everything looks good, the meta tags are there, app-root is filled with appropriate HTML and Angular components:
<app-root ng-version="14.2.2" ng-server-context="other"><router-outlet></router-outlet><app-landing _nghost-sc182="" class="ng-star-inserted"><div _ngcontent-sc182="" class="flex min-h-[100vh] w-full flex-col">...</app-root> .
But when the app is deployed on Azure, page source is "empty".
Meta tags don't work, <title> inside <head> didn't update either and app-root has nothing in it and looks like this:
<app-root ng-version="14.2.2" ng-server-context="other"><router-outlet></router-outlet><!--container--></app-root>
No HTML/Angular components inside it.
Any idea what the issue could be?
2 answers
solution1
0 ACCPTED 2022-11-03 14:53:04
The issue was with Azure build pipeline. Angular Universal and its server side rendering doesn't behave as it should if the build pipeline is set up as everyone is saying online. I've only seen people say you need to copy main.js from the server folder of the project. Well the SSR doesn't work at all in that scenario. I copied the whole server folder and SSR works normally after that.
solution2
0 2023-01-26 12:24:29
I had the same issue when trying to run the app using npm run dev:ssr after a lot of search I find this
Shortly To solve this issue: You have to make <app-root> tag in index.html without attributes.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.