Angular Universal view page source not showing API data

Question

I have an Angular 6 application which is working fine on both local development environment as well as on production machine. The data is fed by an API to the application. Application is showing the data just fine by using observable, resolve and promise techniques.

I have made a Universal version of the application (Server Side Rendering or SSR) for SEO purposes which also works fine.

I just have one issue;

When I post my application to production, it displays the contents that are coming from the API just fine, however when I view the "Page Source" on the browser, I'm not able to see the contents that were rendered on the page.

Please note that I have the data coming through "Route Resolve" and it is not the case of async/await issue.

reza fard · Accepted Answer · 2019-05-06 20:21:40Z

1

Sorry for a late response since this was an issue from last year and because I figured out what the issue was, I never looked at this issue again. I try to explain here as much as I can.

The data was coming through an AWS API Gateway which was connected to the app via credentials and keys. The data was showing just fine on the page but not when I was looking at the page source. I thought that there is a problem with the API, but after spending days figuring out, I found out that the data is just getting received fine from the API.

I just used "inspect" on the page on Chrome (right click and inspect) and looked at "console" tab and realized a bunch of methods in the app throwing errors. When I investigated the errors I found out there are bunch of data type mismatches associated with the data types I was getting from the API.

As a result, the issue was with the app not the API. A silly issue like this took me almost a week to fix. I hope this would shed some light for you.

edited May 6, 2019 at 20:21

answered Aug 23, 2018 at 3:42

reza fard

113 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

abyrne85 Over a year ago

Can you elaborate on this? I'm having the same issue. However in my case some pages are rendering fine - the source is populated correctly, and other pages aren't showing anything in source at all.

Kalim ul Haq Over a year ago

Can you please explain how you fix this issue?

reza fard Over a year ago

I just re-typed the answer above. Sorry for a late response.

Mr X Over a year ago

@rezafard there are some pages which has no data types mismatch and still those pages are not showing API data in source file, however the localhost prod build is independent of the console data type mismatch error? Is is sth same that you were also facing?

reza fard Over a year ago

@MrAJ, I didn't have any other issue thereafter. In your prod version, have you taken a look at your browser console to find out what type of error you get?

|

Szymon · Accepted Answer · 2024-03-02 08:42:52Z

0

I had a similar issue, I tested a lot of solutions, and the solution was very simple. When hitting the API, I was using the path “/api”, I changed it to an absolute path, e.g., “https://example.com/api” or “http://localhost/api” and that solved the problem. The data fetched from the API is displayed in the browser's "view source" and is accessible to search engine bots.

answered Mar 2, 2024 at 8:42

Szymon

215 bronze badges

Collectives™ on Stack Overflow

Angular Universal view page source not showing API data

2 Answers 2

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related