Set titles, Meta tags and canonical are not updated in angular 9.0 prerender

Hi, My web site name is www.devass.netlify.app
I am using prerendering for angular 9. I have done the google search console crawling, my pages are indexed.

I have set up the title, meta, and canonical in 2 components, app.component and another component.
My title, meta and canonical are work as expected when I rout to any URL in my local host, however, once it goes to netlify only app.component update the title, meta and canonical, any other components other than app.component will not be updated.

my canonicalService :

import { Injectable, Inject } from '@angular/core';

import { DOCUMENT } from '@angular/common';

@Injectable({

  providedIn: 'root'

})

export class CanonicalService {

  constructor(@Inject(DOCUMENT) private dom) { }

  

  setCanonicalURL(url?: string) {

    let canURL = url == undefined ? this.dom.URL : url;

    let link: HTMLLinkElement = this.dom.createElement('link');

    link.setAttribute('rel', 'canonical');

    this.dom.head.appendChild(link);

    link.setAttribute('href', canURL);

  }}

my app component code :

constructor( , private metaTagService: Meta, 
      private canonicalService: CanonicalService )

ngOnInit() {

    this.canonicalService.setCanonicalURL();

    this.formMeta();

  }
formMeta() {

    this.metaTagService.addTags([

      // Google 

      { itemprop: 'name', content: 'DevAss' },

      { itemprop: 'description', content: 'DevAss is A soloution to change complex concepts to simple, understandable and stupid' },

      { itemprop: 'image', content: 'DevAss' },

      { name: 'description', content: 'DevAss is A soloution to change complex concepts to simple, understandable and stupid' },

      // FB 

      { property: 'og:url', content: 'https://devass.netlify.app' },

      { property: 'og:type', content: 'website' },

      { property: 'og:title', content: 'DevAss' },

      { property: 'og:description', content: 'DevAss is A soloution to change complex concepts to simple, understandable and stupid' },

      { property: 'og:image', content: '' },

      // Twitter 

      { name: 'twitter:card', content: 'summary_large_image' },

      { name: 'twitter:title', content: 'Devass' },

      { name: 'twitter:description', content: 'DevAss is A soloution to change complex concepts to simple, understandable and stupid' },

      { name: 'twitter:image', content: '' },

      { charset: 'UTF-8' }

    ]);

  }

My other component :

question;
 questoinid;

 constructor(
private route: ActivatedRoute,
private questionService: QuestionService,
private meta: Meta,
private title: Title,
)

this.route.paramMap.subscribe(params => {

            this.questoinid = params.get('id');
            this.questionService.getQuestionByID(this.questoinid).subscribe(result => {
            this.formMetaData(this.question);
            });

        });




formMetaData(result){

        

        this.title.setTitle(result.question);

        // Google 

        this.meta.updateTag({ 'itemprop': 'name', 'content': result.question });

        this.meta.updateTag({ 'itemprop': 'description', 'content': result.Answers[0]?.text.substr(0, 160) });

        this.meta.updateTag({ 'itemprop': 'image', 'content': '' });

        this.meta.updateTag({ 'name': 'description', 'content': result.Answers[0]?.text.substr(0, 160) })

        // FB

        this.meta.updateTag({ 'property': 'og:url', 'content': 'https://devass.netlify.app' });

        this.meta.updateTag({ 'property': 'og:type', 'content': 'website' });

        this.meta.updateTag({ 'property': 'og:title', 'content': result.question });

        this.meta.updateTag({ 'property': 'og:description', 'content': result.Answers[0]?.text.substr(0, 160) });

        this.meta.updateTag({ 'property': 'og:image', 'content': '' });

        // Twitter 

        this.meta.updateTag({ 'name': 'twitter:card', 'content': 'summary_large_image' });

        this.meta.updateTag({ 'name': 'twitter:title', 'content': result.question });

        this.meta.updateTag({ 'name': 'twitter:description', 'content': result.Answers[0]?.text.substr(0, 160) });

        this.meta.updateTag({ 'name': 'twitter:image', 'content': ''});

    }

Is there anything missed?

Thanks :slight_smile:

Hi, what kind of prerendering do you use - SSR/SSG, Universal, Scully?

Hi, thanks for your reply :slight_smile:
I am using “builder”: “@nguniversal/builders:prerender”, it will just send the html and no SSR involved, does netlify support SSR for free tire ?