cannot set data programmatically when the string contains a variable inside a subscription method

I’m submitting a … (check one with “x”)

[x] bug report => check the README and search github for a similar issue or PR before submitting
[ ] support request => check the README and search github for a similar issue or PR before submitting
[ ] feature request

Current behavior

I’m doing this:

this.metadata.setTitle('Blog - ' + this.post.title);
this.metadata.setTag('og:description', `Blog - ${this.post.title}`);

But only the Blog - part gets set, the rest is just gone. I’ve checked a number of times and the value is not null, undefined or anything like that. Because it shows fine in the template also.

Expected/desired behavior I expect the value not to be omitted.

Minimal reproduction of the problem with instructions See current behavior.

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

Please tell us about your environment:

• Angular version: 2.0.X 2.3.1 (Cannot update to latest angular as of this time because of CLI)

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ] All

• Language: [all | TypeScript X.X | ES6/7 | ES5] All

• Node (for AoT issues): node --version =
  6.7

[fulls1z3]

Hi @chrillewoodz, @cybey, @bjornharvold, I’ve tested the issue documented above, using the latest version (@nglibs/meta** v0.2.0-beta.4) on the @nglibs/example-app.

Without touching the default configuration (and also the meta properties at the routes), I’ve modified the src/app/+home/home.component.ts as follows:

// angular
import { Component, OnInit } from '@angular/core';

// libs
import { MetaService } from '@nglibs/meta';

@Component({
  template: `@nglibs home page<br/>
  Enjoy it!<br/>`
})
export class HomeComponent implements OnInit {
  constructor(private meta: MetaService) {
  }

  ngOnInit(): void {
    const luckyPerson = 'chrillewoodz';
    this.meta.setTitle('Today, the lucky person is: ' + );
  }
}

The output (page title) was exactly: Today the lucky person is: chrillewoodz | @nglibs example app

It worked when the title argument was a string concatenation.

Then I modified src/app/+home/home.component.ts further, using an observable:

// angular
import { Component, OnInit } from '@angular/core';

// libs
import { Observable } from 'rxjs/Observable';
import { MetaService } from '@nglibs/meta';

@Component({
  template: `@nglibs home page<br/>
  Enjoy it!<br/>`
})
export class HomeComponent implements OnInit {
  constructor(private meta: MetaService) {
  }

  private getTitle(): Observable<string> {
    return Observable.of('cybey');
  }

  ngOnInit(): void {
    this.getTitle().subscribe((res: string) => {
      this.meta.setTitle('Today the lucky person is: ' + res);
    });
  }
}

The output (page title) was exactly: Today the lucky person is: cybey | @nglibs example app

It worked also when part of the title argument was supplied from an Observable.

So, I could not reproduce the issue based the information you provided - using the official showcase app @nglibs/example-app with the development environment mentioned below:

• Angular version: 4.0.1

• Browser: Chrome 56.0.2924.87 (64-bit)

• Language: TypeScript 2.2.2

• Node (for AoT issues): node --version = 6.10.10

Please make sure you’re using the latest version of @nglibs/meta** (v0.2.0-beta.4 at the moment). If there’re any points you forgot to mention, or need more details feel free to ask again.

For now, I’m closing this issue.

Note: @bjornharvold, I didn’t forgot you. You’ll be featuring as the lucky person shown on the page title, just at the further issue 😄

[fulls1z3]

Hi guys, I’ve been working on universal (aka platform-server) integration, and seems like it will be resulted soon. Then, I’ll be able to release fixes for the listed bugs together with server-side rendering support.