title: Angular 6 variable not resolved in Google Chrome (web component)
body: <p>Using Angular 6 I created a web component that is integrated from another application. Everything works on all browsers when running without an integration. When the web component is integrated in an other application it works on IE, Safari, FF but not on Chrome.</p>
  
  <p>I managed to identify the problem. The first call gets some configuration data from my backend. It's supposed to be written into the var <code>this.conf</code>, but that does not happen in Chrome when being integrated.</p>
  
  <p>My component:</p>
  
  <pre><code>public conf: any;
  
  ngOnInit() {
    this.getData();
    console.log('Conf ngOnInit:', this.conf);
  }
  
  getData() {
    return this.partnerService.getData(this.name)
      .subscribe(
        (partner: any) =&gt; {
          console.log('partner: ', partner);
          this.conf = {
            id: partner['id'],
            name: partner['name']
          }
          console.log('conf:', this.conf);
       )
  }
  </code></pre>
  
  <p>Partner Service:</p>
  
  <pre><code>@Injectable()
  export class PartnerService {
  
    constructor(public http: HttpClient) {
    }
  
    getData(name: string) {
      return this.http.get(environment.apiUrl + 'partners/conf/' + name)
        .map(resp =&gt; resp['partner']);
    }
  }
  </code></pre>
  
  <p>My view:</p>
  
  <pre><code>&lt;pre&gt;Conf: {{ conf | json }}&lt;/pre&gt;
  </code></pre>
  
  <p>Console output:</p>
  
  <pre><code>Conf ngOnInit: undefined
  partner: {id: 1, name: "xxx", booking_name: "xxx", …}
  conf: {id: 1, name: "xxx"}
  </code></pre>
  
  <p>The var did not get resolved in the view. What could this be? </p>