Title Service on Angular 5 with SSR

Question

Checking Angular Universal project I found that they state the following:

Support Title and Meta services on the server ( you can check that here ).

But the truth is, I can't find how to implement this on the server. I checked in @angular/platform-server and couldn't fine the Title service.

Any idea how to do this?

NOTE: I can make it work using the Title serivce in the browser. The problem is the server rendering

EDIT: setTitle works fine. The issue was coming form an incorrect usage of a subscription in the server

Answer 1

Yeah, they are right, it's not in '@angular/platform-server' but in '@angular/platform-browser'

Just create a service import this line

import { Meta, Title } from '@angular/platform-browser';

Pass in constructor Like

constructor(
    private meta : Meta, 
    private title : Title
){

Now you can create meta tags and title just create a method like below and use it wherever you want

addMetaTags(title, description) {
    //console.log(title, description);

    this.title.setTitle(title);

    this.addTag('description', description);
}
addTag(name, content) {
    //console.log(name, content);
    this.meta.addTags([{
        name: name,
        content: content
    }]);
}

You can also create og: tags for social media and other different type of metas just from about method. Ex:-

addOgTags(title, type, url, description, image, width, height){
        if(title){
            this.addPropertyTag('og:title', title);
        }
        if(description){
            this.addPropertyTag('og:description', description);
        }
        if(url){
            this.addPropertyTag('og:url', this.domain + url);
        }
        if(image){
            this.addPropertyTag('og:image', image);
            this.addPropertyTag('og:image:url', image);
        }
        if(type){
            this.addPropertyTag('og:type', type);
        }
        if(width){
            this.addPropertyTag('og:image:width', width);
        }
        if(height){
            this.addPropertyTag('og:image:height', height);
        }
    }
    addTwitterTags(card, title, description, image){
        //console.log(card, title, description, image);
        if(card){
            this.addTag('twitter:card', card);
        }
        if(title){
            this.addTag('twitter:title', title);
        }
        if(description){
            this.addTag('twitter:description', description);
        }
        if(image){
            this.addTag('twitter:image:src', image);
        }
    }

Answer 2

I think you misunderstood how angular universal works. From the screenshot you provided, it looks like you are expecting the metadata to be set "server side" for the http://localhost:4200 server. However, this server is probably your front server, served by ng serve or other.

To see the meta being set server side, you need to navigate to the url of the backend universal server (nodejs or asp.net core).

In the sample repo here , it is for instance port 4000 on the server where universal is running.

Once it's working, in production you will typically have a proxy server (nginx or other) on port 80 that transfers the request to your angular universal (nodejs or asp.net core, on port 4000 or whatever, not accessible from the outside), which in turn will do the server side rendering with correct meta