Angular universal Server Side Rendering, Meta tags

Question

I moved my site to Angular universal SSR, during my move I encountered some problems that I thought ng-universal would fix.

I want to add meta tags such as description,

Answer 1

To set meta tags for Angular Universal-SSR (tried only on Angular 2), you should use Renderer. To set for example title(or update it), you can do it on this way: Link for solution

To set meta tags, you need to: 1.Import Renderer and Document

import { Renderer } from '@angular/core';
import { DOCUMENT } from '@angular/platform-browser';

2.Add these dependencies to constructor:

@Inject(DOCUMENT) private document: any,
private renderer: Renderer

3.Add meta tags -example

//-- Create new meta element inside of head tag
let elem = renderer.createElement(document.head, "meta");

//-- Set meta attributes
renderer.setElementAttribute(elem, 'name', 'description');
renderer.setElementAttribute(elem, 'content', 'Some test decription');

4. When you open "view page source", it should result like this inside of head tag:

   < meta name="description" content="Some test description" >