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

[chrillewoodz]

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

[chrillewoodz]

I'm not sure if it's worth noting but it's inside a subscription call and it can run several times. When I do a test like this outside the subscription call it works as expected:

const hello: string = 'Hello world';

this.metadata.setTitle('Blog - ' + hello);

[fulls1z3]

Hi @chrillewoodz, thanks for your inspections.

I’ll look into this as soon as possible and then pingback on this issue my findings.

[arjenbrandenburgh]

You can solve it for now to use the function like this:

this.metadata.setTitle('Blog - ' + hello, false, false);

This disables the deferred part of the function

[bjornharvold]

+1

[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.

[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 😄