Is it possible to have HTML titles and meta tags set with an Angular 8 component recognized by Googlebot without SSR?

Question

My component uses setTitle and updateTag to update the title and tags. Remaining data on the screen is updated via template binding to an object obtained via a host request. Google search console shows the correct screen data but the default title and meta tags.

Is there a way to address this issue without Universal?

constructor(private dataService: DataService, private route: ActivatedRoute, private meta: Meta,
  private title: Title, private canonicalService: CanonicalService) {}

ngOnInit() {
  this.canonicalService.setCanonicalURL();
  this.route.params.subscribe(
    params => {
      const id = +params['id'];
      this.getLicense(id);
    }
  );
  let list = sessionStorage.getItem('liclist');
  if (list) {
    this.licList = JSON.parse(list);
  }
  this.dataService.getEnum().subscribe((data: Enum[]) => {
    this.enums = data;
  });
}

getLicense(id) {
  this.dataService.getLicense(id).subscribe((data: License) => {
    this.license = data;
    this.licListPtr = this.licList.findIndex(x => x === id);
    this.meta.updateTag({
      name: "keywords",
      content: !!this.license.keywords ? this.license.keywords.toLowerCase().replace("~", ", ") : ' '
    });
    let desc = this.license.licDesc;
    if (!!this.license.occs) {
      this.license.occs.forEach(o => {
        desc += `\nOccupation ${o.occCode} ${o.occTitle.toLowerCase()}`;
      });
      this.meta.updateTag({
        name: "description",
        content: desc
      });
      this.title.setTitle(`Licensing for ${this.license.licTitle}`);
    }

  })
}

Answer 1

I do not think it's currently possible without SSR like Angular Universal.

I've had this same problem with a few projects. Your meta tags are indeed being updated, but the web crawler likely is only looking at them once. I've noticed the same limitation on crawlers for certain social networks as well. I think as SPAs become more prevalent, we might see crawlers start to adapt.

Answer 2

Check out @angular/platform-browser.

setTitle('blah blah') with a constructor:
  constructor(private titleService: Title) {
    const title = 'MyPage-Title'; // set from the server
    this.titleService.setTitle(title);
  }