Angular 6 variable not resolved in Google Chrome (web component)

Question

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.

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 this.conf, but that does not happen in Chrome when being integrated.

My component:

public conf: any;

ngOnInit() {
  this.getData();
  console.log('Conf ngOnInit:', this.conf);
}

getData() {
  return this.partnerService.getData(this.name)
    .subscribe(
      (partner: any) => {
        console.log('partner: ', partner);
        this.conf = {
          id: partner['id'],
          name: partner['name']
        }
        console.log('conf:', this.conf);
     )
}

Partner Service:

@Injectable()
export class PartnerService {

  constructor(public http: HttpClient) {
  }

  getData(name: string) {
    return this.http.get(environment.apiUrl + 'partners/conf/' + name)
      .map(resp => resp['partner']);
  }
}

My view:

<pre>Conf: {{ conf | json }}</pre>

Console output:

Conf ngOnInit: undefined
partner: {id: 1, name: "xxx", booking_name: "xxx", …}
conf: {id: 1, name: "xxx"}

The var did not get resolved in the view. What could this be?

score 2 · Accepted Answer · answered Jul 18 '18 at 15:36

2

Inject the ChangeDetectorRef in the constructor of the view component:

constructor(private cd: ChangeDetectorRef) {
}

In the subscribe function try:

this.conf = {};
this.conf.id = partner['id'];
this.conf.name = partner['name'];
this.cd.detectChanges();

It could be an issue with the timing/change detection tick, that's only showing in Chrome. At the very least it will rule that out of the equation

answered Jul 18 '18 at 15:36

Drenai

11,315
9
48
82

1

Thank you very much Dave, I didn't know about this ChangeDetectorRef :) – nimrod Jul 19 '18 at 08:58
No problem:-) The ngOnInit is called when the data is first set e.g. it is null to start with. Angular then sets this value in the view. It then runs a check to make sure that those values have not been updated after the view has been set. Calling detectChanges lets angular know that you have changed something, and the view should be updated again – Drenai Jul 19 '18 at 10:26
1

This was the ultimate fix for me: https://www.npmjs.com/package/elements-zone-strategy – nimrod Jul 25 '18 at 05:34

Daniel Segura Pérez · Answer 2 · 2018-07-16T14:35:05.547

0

Edit: New Solution. try:

<pre *ngIf="conf && conf.id && conf.name">Conf: {{ conf | json }}</pre>

edited Jul 16 '18 at 14:35

answered Jul 13 '18 at 09:06

Daniel Segura Pérez

1,087
7
12

if you put
```
Conf: {{ conf.id }}
```
is data rendered?
– Daniel Segura Pérez Jul 13 '18 at 09:16
No unfortunately not. – nimrod Jul 13 '18 at 09:26
you should do a runneable piece of your code on some website like stackblizt. then we can help you, without more code, i cant do more :S – Daniel Segura Pérez Jul 13 '18 at 09:31
A runnable piece of code is almost impossible in this case. There would have to be one that creates the webcomponent (and releases it) and one that uses this released web component. How should this be done? – nimrod Jul 16 '18 at 12:55
i dont know if you are getting problems with render of html, can you try the new solution and let me know if works for you? – Daniel Segura Pérez Jul 16 '18 at 14:33
It's still not shown in Google Chrome, same as before. I don't think its a render problem, it must be a watch problem or a Google bug :( – nimrod Jul 17 '18 at 08:25

score 0 · Answer 3 · answered Jul 13 '18 at 12:11

0

I think you-re problem is for the async flow ... when you consol.log your console.log('Conf ngOnInit:', this.conf); in nginit ..it is not yet filled with result of the this.partnerService.getData(this.name)

try this>

public conf: any;

ngOnInit() {
      this.getData().subscribe(()=>{
     console.log('Conf ngOnInit:', this.conf);
});


}

getData() {
  return Observable.From(this.partnerService.getData(this.name)
    .subscribe(
      (partner: any) => {
        console.log('partner: ', partner);

        this.conf = {};
         this.conf.id = partner['id'];
          this.conf.name: partner['name'];
        console.log('conf:', this.conf);
     ))
}

answered Jul 13 '18 at 12:11

federico scamuzzi

3,708
1
17
24

I know that the console.log is not filled due to async, however, due to data-binding I would expect the view to be notified when the this.conf var is set. Correct? – nimrod Jul 13 '18 at 12:12
What do you mean with webcomponent? It is not visible from your example that a webcomponent is involved. Do you use OnPush change detection strategy? that would explain the problem. – Thomas Jul 18 '18 at 11:21
No the 2 way binding wil not update the value .. maybe if yu use | $async it could be .. or use the subscribe like my example.. give a try!! – federico scamuzzi Jul 18 '18 at 12:20

Angular 6 variable not resolved in Google Chrome (web component)

3 Answers3