Angular Universal displays comments instead of dynamic component data

Question

PROBLEM DESCRIPTION

Angular Universal does not display the dynamic data of my "Posts" component when I click on "View Page Source". Although, what is a little weird, is that I will see it sometimes... I think it's a timing/delay thing. If I load a page and let it sit for 10 mins or so, and then click "View Page Source" again, then I will see the missing dynamic content that was not there before. Doesn't happen consistently every time, though!

PROBLEM EXAMPLE

See the comment tags below (i.e.: )? That's where the data/content should be!

<div _ngcontent-sc413="" class="post"><!----></div><!----><!----></div></app-post-detail-page><!----></app-root>

ANGULAR VERSIONS

"@angular/cdk": "^14.2.3"
"@nguniversal/express-engine": "^14.2.0"

WHAT I'VE TRIED

I set up Angular Universal by following two excellent tutorials:

This YouTube tutorial from Codeible;
The "Angular Universal In Depth (Angular 15)" course from Udemy;
In terms of trying to fix my problem, I've done a bunch of desperate Googling. Nothing I've tried has worked (although I haven't tried everything yet). It seems the likeliest culprits might be:
- I might need to use Angular Resolve (See this stackoverflow)
- I might have to look into TransferHttpCacheModule (See this stackoverflow)
- I might have to make sure I set up TransferState (See this YouTube video)
  - Sidenote: Not sure if "TransferState" is the answer...we do have "BrowserTransferStateModule" in place ... although VSCode is now yelling at me and telling me this is deprecated; visiting Angular itself explains that we can now just use TransferState without injecting the BrowserTransferStateModule.

So, I haven't really tried anything, so much as researched a bunch of things, without knowing which is the correct path to follow.

What's even more confounding is that some posts/articles state that Angular Universal does not display dynamic data automatically, while others say that it does.

You've shown the client-side code here, but what does it look like before being rendered on the server side? — miken32, Jan 09 '23 at 21:17
I should have included more code ... but I finally just figured out the issue, and have answered this below. I sure hope it helps anyone else who might be struggling with the same scenario! — Miss Henesy, Jan 25 '23 at 02:47

score 0 · Answer 1 · answered Jan 25 '23 at 02:38

I can now finally answer my own question.

The problem was that the server was pointing to the wrong environment, so it wasn't retrieving any information.

You see, we have 2 Firebase environments:

Staging
Production

So, STAGING somehow thought its environment was PRODUCTION on the server side. It would try to go to the PRODUCTION database, and use a STAGING id it received from the client to try to get data.

I .... this took forever to figure out!

Everything is now working swimmingly in my STAGING environment, thanks to a tiny update to the angular.json file. In the "server" section, the "defaultConfiguration" is set to "production". I simply changed it to "development".

angular.json file, with "defaultConfiguration" updated to point to development

"server": {
          "builder": "@angular-devkit/build-angular:server",
          "options": {
            "outputPath": "dist/my-project/server",
            "main": "server.ts",
            "tsConfig": "tsconfig.server.json",
            "optimization": false,
            "sourceMap": true,
            "extractLicenses": false
          },
          "configurations": {
            "test": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.test.ts"
                }
              ]
            },
            "production": {
              "outputHashing": "media",
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "sourceMap": false,
              "extractLicenses": true
            },
            "development": {}
          },
          "defaultConfiguration": "development"
    },

I still need to use either a Resolver or a "waitFor" on the main parts of the data that I need to see in "View Page Source", but it works now, because it's reading from the correct database.

YEESH.

I hope this helps someone out there :)

Angular Universal displays comments instead of dynamic component data

1 Answers1