How to set meta tags programmatically on the server side?

[gianpaj]

I'm submitting a ... (check one with "x")

[x] Support request

Current behavior When setting meta tags programmatically at the client side, e.g. in a component, those tags are obviously not set at the server side, at first render.

How do I run a http request to retrieve data from an API and then, for example, set the correct og:image?

Minimal instructions in mycomp.component.ts

this.meta.setTag('og:image', `${item.photo}`);

Would be great if the would be a callback or function that can be run in order to generate any meta tags at the server side level for each page, route or component.

What is the motivation / use case for changing the behavior?

For Social sharing purposes

[linusbrolin]

I would also like to know how to do this. Specifically for routes with an :id parameter:

{ path: ':id', component: ProductComponent, data: { meta: { title: 'PRODUCT_TITLE', description: 'PRODUCT_DESCRIPTION' 'og:image': 'PRODUCT_IMAGE' } }, canActivate: [MetaGuard] }

I can't just use a http service for this that resolves the 'PRODUCT_TITLE' variable for example, because I have no idea which product to read the title from. I need to access the :id parameter in the route itself in order to know which product to read the title from.

How do I resolve the :id parameter before the route has been activated (since we have a CanActivate MetaGuard on it)?

[gianpaj]

I made a new angular 5 app cloning this: https://github.com/angular/universal-starter

Installed ngx-meta and then ran npm run build:ssr && npm run serve:ssr.

and it worked 🎉

[chozharajan]

my project work well in local. but once deployed in server. i got view source (cntrl + U) but meta update not happening. i used npm run build:prerender cmd for build the project. and i placed dist/browser files in root directory. here is my project link. so how to make meta update possible. NOTE: in local am getting meta update for npm run build:ssr cmd. i think am wrongly doing the build cmd. so how to deploy the universal project in IIS server. thanks in advance

[Thommas]

https://angular.io/guide/universal

You won't be able reference browser-only native objects such as window, document, navigator or location. If you don't need them on the server-rendered page, side-step them with conditional logic.

Conclusion you can't update server side and expect it to work...

I'm also looking for a solution.

As I'm going to prerender with pupeeter, a dirty hack would be to set meta for each page at the prerender level instead of inside the angular app.

[jaythakur]

I would also like to know how to do this. Specifically for routes with an :id parameter:

{ path: ':id', component: ProductComponent, data: { meta: { title: 'PRODUCT_TITLE', description: 'PRODUCT_DESCRIPTION' 'og:image': 'PRODUCT_IMAGE' } }, canActivate: [MetaGuard] }

I can't just use a http service for this that resolves the 'PRODUCT_TITLE' variable for example, because I have no idea which product to read the title from. I need to access the :id parameter in the route itself in order to know which product to read the title from.

How do I resolve the :id parameter before the route has been activated (since we have a CanActivate MetaGuard on it)?

I have the same task to do. did you get your answer?