core.js:6228 ERROR TypeError: Cannot read property 'nativeElement' of undefined

[oliverandersencox]

I have copied examples listed, and this never works. Always gives this error.

  <ion-content>
<ngx-walkthrough
            [is-round]="true"
            [walkthrough-type]="'transparency'"
            [focus-element-selector]="'#focusItem'"
            [icon]="'single_tap'"
            [main-caption]="'This is some text'"
            [is-active]="true"
            [use-button]="true">
</ngx-walkthrough>
  </ion-content>

  <ion-content>
<ngx-walkthrough
            [is-round]="true"
            [walkthrough-type]="'transparency'"
            [icon]="'single_tap'"
            [main-caption]="'This is some text'"
            [is-active]="true"
            [use-button]="true">
<p>EVEN THIS ERRORS</p>
</ngx-walkthrough>
  </ion-content>

Looking at the error and where it occurs:

   setWalkthroughElements() {
        const holeElements = this.element.nativeElement.querySelectorAll(this.DOM_WALKTHROUGH_HOLE_CLASS);
        this.walkthroughHoleElements = holeElements[0];

   I cant see where the element value is event set?

[Altaba77]

Hello,

Did you add an attribut #focusItem on an element in Your HTML page ?

[oliverandersencox]

Yes I had an ion item with the id set as that and have also tried adding a hash reference

<ion-item #focusItem id="focusItem>...

[balu3679]

same problem.any solutions

[ariffromeo]

Can somebody solve this issue?

[Altaba77]

Do you use a version of angular > 8 ?

[Altaba77]

Because I think the problem is the viewchild.

Before angular 8 :

// query results sometimes available in ngOnInit, sometimes in ngAfterViewInit (based on template) @ViewChild('foo') foo: ElementRef;

After angular 8:

// query results available in ngOnInit @ViewChild('foo', {static: true}) foo: ElementRef;

OR

// query results available in ngAfterViewInit @ViewChild('foo', {static: false}) foo: ElementRef;

So the viewchild result is not present when the function is called if you used an angular version > 8 as the default behavior is static=false.

angular should be update in the lib to solve it.

[ariffromeo]

Do you use a version of angular > 8 ?

Because I think the problem is the viewchild.

Before angular 8 :

// query results sometimes available in ngOnInit, sometimes in ngAfterViewInit (based on template) @ViewChild('foo') foo: ElementRef;

After angular 8:

// query results available in ngOnInit @ViewChild('foo', {static: true}) foo: ElementRef;

OR

// query results available in ngAfterViewInit @ViewChild('foo', {static: false}) foo: ElementRef;

So the viewchild result is not present when the function is called if you used an angular version > 8 as the default behavior is static=false.

angular should be update in the lib to solve it.

Yes i use ionic 4 with angular 10..based on your answer above, how can i fix it? i need to modify it in your library or how..or i need to create @ViewChild('focusItem', {static: true}) focusItem: ElementRef; in my page.ts?

[Altaba77]

the typescript is compiled and I do not know how to solve this problem in a compiled file.

The easy way to solve it for you is to set the is-active input to true in your afterviewinit method (in the parent component) in order to be sure that the viewchild result will be defined at this time

[Altaba77]

ex: HTML : <ngx-walkthrough [is-round]="true" [walkthrough-type]="'transparency'" [focus-element-selector]="'#rocket'" [icon]="'single_tap'" [main-caption]="'This is some text'" [is-active]="isactive" [use-button]="true">

TS : isactive = false;

ngAfterViewInit() { this.isactive = true; }

[Altaba77]

You can also create a local component by copy/paste the sources and solve the issue in it, then used it instead of the lib