Universal: (Angular 6) Angular Universal - Not waiting on content API call

[neghani]

(Angular 6) Angular Universal - Not waiting on the content API call

[neghani]

Angular CLI: 7.3.7
Node: 10.14.1
OS: darwin x64
Angular:
...

Package Version

@angular-devkit/architect 0.13.7
@angular-devkit/core 7.3.7
@angular-devkit/schematics 7.3.7
@schematics/angular 7.3.7
@schematics/update 0.13.7
rxjs 6.3.3
typescript 3.2.4

Universal packages:
"@nguniversal/common": "^6.0.0",
"@nguniversal/express-engine": "^6.0.0",
"@nguniversal/module-map-ngfactory-loader": "^6.0.0",

`export class NewsReadComponent implements OnInit {
id: number;
private sub: any;
public fullNews: any
constructor(private meta: Meta, private title: Title, private route: ActivatedRoute, private http: HttpClient, private router: Router) {
let query = window.location.search
query = query.substr(4, query.length)
this.getPostData(query);
}

ngOnInit() {

}
getPostData(id: string) {
this.http.get(environment.apiLink + "/getFullPost?id=" + id).subscribe((res: any) => {
if (res.article) {
this.fullNews = res.article;
this.setMeta(this.fullNews)
}
});
}`

[maddy2894]

Hey @neghani did you find any solution?

[neghani]

Nope still not working

On Mon, 16 Dec 2019 at 11:53 AM, Madhavan Sundararaj <
[email protected]> wrote:

Hey @neghani https://github.com/neghani did you find any solution?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/angular/universal/issues/1152?email_source=notifications&email_token=AAX2JX24JINYFKIU3BBDVLTQY4NFTA5CNFSM4HFZYYAKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEG5UXTQ#issuecomment-565922766,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AAX2JX6ZVHQAEXCYU5L47SLQY4NFTANCNFSM4HFZYYAA
.

>

Sent from my iPhone

[maddy2894]

I am using HttpClient to make API calls to backend DB (mongoDB), but Angular SSR fails before the data is fetched.

Error stack:

GET "/api/document/detail" failed in 2 ms.
[NetworkError]
Starting
1 5dcb470b9d2eef302f0c6ca0

As you can see, it throws an error before the route starts. 'Starting' states the start of route being called.

@vikerman @alan-agius4 Can you please provide any help?

[BruneXX]

Hi Guys, I'm experiencing the same issue with angular universal. I'm using angular 8.2.14 and when the page is rendered, the content fetched from API is not rendered in the page, is there any other alternative rather than use the router resolve to achieve this? any suggestion will be appreciated.

[Sparker73]

I have been dealing with this for over a week now and I can't find the right answer. I have tried everything but nothing works.
First, the way of doing an API call with HttpClient for Angular Universal should be not subscribing to the service call's observable but instead pipe(map) to work with the result and all of this should go inside a canActivate route guard so that the route is accessed only if you return true after the data arrived from server through pipe(map).
I have decoupled the component that handles the route I want SSR for from the module to import/declare it directly in the AppModule.
But guess what, nothing works, Angular SSR hardly had time to render styles into the "rendered page" but not SEO meta tags, I have to say that in the moment I use title & meta services I console-out the results and they are coherent but only applied to the virtual dom which makes me think that it is not waiting for the canActivate route guard to finish to produce the output because either a part of it was made but later overwritten or happened only in the client side on the second route visit, but the fact that a piece of the whole was rendered (styles because they went static inside the built bundle) and not the few things that should be rendered after the data comes from the server is a sign of asynchronism which is not what I need.
I really don't know how to overcome this issue.

[maddy2894]

Hey @Sparker73, I solved my issue by using absolute path for api call. If you have not tried it, give it a try.

If your using HttpClient, api call will wait for the data

[BruneXX]

Hi @Sparker73 I’ve managed to get this working, using angular resolvers. You should be able to use that instead of canActivate guard. IMHO, I think AU. Should has a better and single way to do this.

[Sparker73]

Hey @Sparker73, I solved my issue by using absolute path for api call. If you have not tried it, give it a try.

If your using HttpClient, api call will wait for the data

Nope, absolute paths is what I've always used and its not working, by the way, our APIs are different that our App server, so they forcefully need to be absolute anyways.

[Sparker73]

Hi @Sparker73 I’ve managed to get this working, using angular resolvers. You should be able to use that instead of canActivate guard. IMHO, I think AU. Should has a better and single way to do this.

Hmm, Ok, I'll give it a try, it sounds like a more robust way of getting into a route with already resolved data, I'll post here the result, thanks a lot.

[tskweres]

does anyone have a good example of making API calls to dynamically update meta tags ( ie: for social media links ) before the page is rendered?