Ionic 3.0.1 / Angular 4 : Cannot read property 'childNodes' of null

[andy008]

Was running fine on Ionic 2.0.0-RC6 / Angular 2. after upgrade, throws error when calling.

My code:-

import circlr from 'circlr';

const el = document.querySelector('#test3d');    
circlr(el)
  .scroll(true)
  .interval(150)
  .play(23)
  .reverse(true)
  .on('show', n => {
  });

Error:-

ERROR TypeError: Cannot read property 'childNodes' of null
at Rotation.children (index.js:148)
at Rotation.start (index.js:50)
at new Rotation (index.js:14)
at Rotation (index.js:8)
at ItemPage.view360 (item.ts:55)
at Object.eval [as handleEvent] (ItemPage.html:33)
at handleEvent (core.es5.js:11852)
at callWithDebugContext (core.es5.js:13060)
at Object.debugHandleEvent [as handleEvent] (core.es5.js:12648)
at dispatchEvent (core.es5.js:8830)
at core.es5.js:9419
at platform-browser.es5.js:2674
at platform-browser.es5.js:3207
at t.invoke (polyfills.js:3)
at Object.onInvoke (core.es5.js:4145)

Tried updating to latest.

[andrepolischuk]

Are you sure that document.querySelector('#test3d') node is exists?

[andy008]

Yes and inspected DOM to confirm.

[andy008]

...and yet the querySelector is returning null. Back in my court. Thanks for pointing me in the right direction.

[andrepolischuk]

Hooray

[andy008]

I found the solution was to abandon the original querySelector method, Instead:-

import { ElementRef, ViewChild } from '@angular/core';

export class className{
@ViewChild('test3d') view3D: ElementRef;
}

ngAfterViewInit() {
circlr(this.view3D.nativeElement)
.scroll(true)
.interval(150)
.play(23)
.reverse(true)
.on('show', n => {
});
}