Ionic-framework: property 'querySelector' of null at IOSTransition.init
Ionic version: (check one with "x")
[ ] 1.x
[x ] 2.x
[ ] 3.x
I'm submitting a ... (check one with "x")
[x ] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/
Current behavior:
When using
this.nav.push(myComponent);
Transition to next component in stack in our app fails on iOS (also Browser iOS emulation) with
ORIGINAL STACKTRACE:
ErrorHandler.handleError @ error_handler.js:62
next @ application_ref.js:285
schedulerFn @ async.js:88
SafeSubscriber.__tryOrUnsub @ Subscriber.js:238
SafeSubscriber.next @ Subscriber.js:190
Subscriber._next @ Subscriber.js:135
Subscriber.next @ Subscriber.js:95
Subject.next @ Subject.js:61
EventEmitter.emit @ async.js:78
NgZone.triggerError @ ng_zone.js:280
onHandleError @ ng_zone.js:254
t.handleError @ polyfills.js:3
e.runTask @ polyfills.js:3
invoke @ polyfills.js:3
error_handler.js:63 TypeError: Cannot read property 'querySelector' of null
at IOSTransition.init (transition-ios.js:141)
at NavControllerBase._trnsStart (nav-controller-base.js:630)
at IOSTransition._trnsStart (nav-controller-base.js:590)
at IOSTransition.Transition.start (transition.js:42)
at NavControllerBase._transition (nav-controller-base.js:608)
at NavControllerBase._postViewInit (nav-controller-base.js:454)
at NavControllerBase._viewTest (nav-controller-base.js:551)
at NavControllerBase._nextTrns (nav-controller-base.js:295)
at NavControllerBase._queueTrns (nav-controller-base.js:251)
at NavControllerBase.push (nav-controller-base.js:75)
ErrorHandler.handleError @ error_handler.js:63
next @ application_ref.js:285
schedulerFn @ async.js:88
SafeSubscriber.__tryOrUnsub @ Subscriber.js:238
SafeSubscriber.next @ Subscriber.js:190
Subscriber._next @ Subscriber.js:135
Subscriber.next @ Subscriber.js:95
Subject.next @ Subject.js:61
EventEmitter.emit @ async.js:78
NgZone.triggerError @ ng_zone.js:280
onHandleError @ ng_zone.js:254
t.handleError @ polyfills.js:3
e.runTask @ polyfills.js:3
invoke @ polyfills.js:3
Expected behavior:
Transition to next component in stack in our app. This works on Android (also Browser Android emulation)
Steps to reproduce:
Related code:
config.xml:
<feature name="CDVWKWebViewEngine">
<param name="ios-package" value="CDVWKWebViewEngine" />
</feature>
<preference name="CordovaWebViewEngine" value="CDVWKWebViewEngine" />
and
this.nav.push(myComponent)
Other information:
Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):
Your system information:
Cordova CLI: 6.5.0
Ionic Framework Version: 2.0.1
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.1.0
ios-deploy version: 1.9.1
ios-sim version: 5.0.13
OS: macOS Sierra
Node Version: v6.2.2
Xcode version: Xcode 8.3.1 Build version 8E1000a
stevek-pro
All 14 comments
Hello, thanks for using Ionic! Would you mind sharing a repo we can use to reproduce this?
jgw96
on 14 Apr 2017
Yes, I just gave you access to our repo at bitbucket to your gmail address at github.
stevek-pro
on 14 Apr 2017
Any news so far?
stevek-pro
on 15 Apr 2017
But you guys could access our repo? Please let me know.
stevek-pro
on 19 Apr 2017
hello，I also have this problem。
Sometimes it will appear，when using this.navCtrl.setRoot(LoginPage);
happened at web page
Why is that
If you know please tell me，Thank you；
TypeError: Cannot read property 'querySelector' of null
at IOSTransition.init (http://localhost:8101/build/main.js:149081:151)
at NavControllerBase._transitionStart (http://localhost:8101/build/main.js:45814:20)
at IOSTransition._trnsStart (http://localhost:8101/build/main.js:45775:19)
at IOSTransition.Transition.start (http://localhost:8101/build/main.js:21600:33)
at NavControllerBase._transitionInit (http://localhost:8101/build/main.js:45789:24)
at NavControllerBase._postViewInit (http://localhost:8101/build/main.js:45638:14)
at NavControllerBase._viewTest (http://localhost:8101/build/main.js:45734:25)
at NavControllerBase._nextTrns (http://localhost:8101/build/main.js:45477:25)
at NavControllerBase._queueTrns (http://localhost:8101/build/main.js:45427:14)
at NavControllerBase._setPages (http://localhost:8101/build/main.js:45354:21)
at NavControllerBase.setRoot (http://localhost:8101/build/main.js:45328:21)
at HomePage.openPage (http://localhost:8101/build/main.js:86518:30)
at CompiledTemplate.proxyViewClass.View_HomePage0.handleEvent_71 (/AppModule/HomePage/component.ngfactory.js:729:34)
at CompiledTemplate.proxyViewClass.
at HTMLElement.
huangenai
on 21 Apr 2017
After update to Ionic 3 - it did not resolve the issue for us. :/
stevek-pro
on 25 Apr 2017
also experiencing this error
mkaizen
on 8 May 2017
I have the same issue intermittently when attempting to logout. Using version 3.
hath74
on 23 Aug 2017
I was able to fix this issue using [hidden] instead of *ngIf on ion-navbar, suggested here https://github.com/ionic-team/ionic/issues/9499#issuecomment-265149381
luckylooke
on 11 Oct 2017
I had this exact same problem. I started from the conference app base with the following code in my tutorial.html:
html
<ion-header no-border>
<ion-navbar end *ngIf="showSkip">
<ion-buttons>
<button ion-button (click)="enterApp()" color="primary">Skip</button>
</ion-buttons>
</ion-navbar>
</ion-header>
I then changed only the *ngIf binding in the
html
<ion-navbar end [hidden]="showSkip">
and my problem was solved, just like @luckylooke
@manucorporat was his issue solved in 2.0.0-rc.5 as you mentioned in #9499 or is it a new issue?
I am using Ionic CLI 3.17.0
Here is my package.json:
json
{
"name": "myapp",
"version": "0.0.1",
"description": "An Ionic project",
"license": "Apache-2.0",
"repository": {
"type": "git",
"url": "https://github.com/ionic-team/ionic-conference-app.git"
},
"scripts": {
"build": "ionic-app-scripts build",
"clean": "ionic-app-scripts clean",
"lint": "ionic-app-scripts lint",
"ionic:build": "npm run build",
"ionic:serve": "npm run serve",
"ionic:lint": "npm run lint"
},
"dependencies": {
"@angular/common": "4.4.4",
"@angular/compiler": "4.4.4",
"@angular/compiler-cli": "4.4.4",
"@angular/core": "4.4.4",
"@angular/forms": "4.4.4",
"@angular/http": "4.4.4",
"@angular/platform-browser": "4.4.4",
"@angular/platform-browser-dynamic": "4.4.4",
"@ionic-native/core": "^4.3.1",
"@ionic-native/in-app-browser": "^4.3.1",
"@ionic-native/splash-screen": "^4.3.1",
"@ionic-native/status-bar": "^4.3.1",
"@ionic/cloud-angular": "^0.12.0",
"@ionic/storage": "^2.0.1",
"angular2-jwt": "^0.2.3",
"code-push": "^2.0.1-beta",
"cordova-android": "^6.3.0",
"cordova-ios": "^4.5.3",
"cordova-plugin-code-push": "^1.9.8-beta",
"cordova-plugin-compat": "^1.2.0",
"cordova-plugin-crosswalk-webview": "^2.3.0",
"cordova-plugin-device": "^1.1.6",
"cordova-plugin-dialogs": "^1.3.3",
"cordova-plugin-file": "^4.3.3",
"cordova-plugin-file-transfer": "^1.6.3",
"cordova-plugin-inappbrowser": "^1.7.1",
"cordova-plugin-ionic": "^2.0.3",
"cordova-plugin-ionic-keyboard": "^2.0.4",
"cordova-plugin-ionic-webview": "^1.1.16",
"cordova-plugin-splashscreen": "^4.0.3",
"cordova-plugin-statusbar": "^2.2.3",
"cordova-plugin-whitelist": "^1.3.2",
"cordova-plugin-zip": "^3.1.0",
"ionic-angular": "3.8.0",
"ionicons": "3.0.0",
"lodash": "^4.17.4",
"rxjs": "5.4.3",
"sw-toolbox": "3.6.0",
"zone.js": "0.8.18"
},
"devDependencies": {
"@ionic/app-scripts": "3.0.1",
"typescript": "~2.3.2",
"webpack-merge": "^4.1.0"
},
"config": {
"ionic_aot_write_to_disk": true
},
"cordova": {
"platforms": [
"android",
"ios"
],
"plugins": {
"cordova-plugin-crosswalk-webview": {
"XWALK_VERSION": "22+",
"XWALK_LITEVERSION": "xwalk_core_library_canary:17+",
"XWALK_COMMANDLINE": "--disable-pull-to-refresh-effect",
"XWALK_MODE": "embedded",
"XWALK_MULTIPLEAPK": "true"
},
"cordova-plugin-device": {},
"cordova-plugin-inappbrowser": {},
"cordova-plugin-splashscreen": {},
"cordova-plugin-whitelist": {},
"cordova-plugin-ionic-webview": {},
"cordova-plugin-statusbar": {},
"cordova-plugin-ionic-keyboard": {},
"cordova-plugin-code-push": {}
}
}
}
kentoj
on 9 Nov 2017
I can confirm that *ngIf inside _any element_ of the ion-header is what causes this error and it only happens on iOS, Android works fine. Not sure what's causing this.
<ion-header *ngIf="!initQuestionnaire">
<ion-navbar hideBackButton #navbar>
<ion-buttons left>
<button ion-button navPop icon-only>
<ion-icon class="arrow-back"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
Will throw:
vendor.js:1377 ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'querySelector' of null
When pushing another page into the stack.
<ion-header [hidden]="initQuestionnaire">
<ion-navbar hideBackButton #navbar>
<ion-buttons left>
<button ion-button navPop icon-only>
<ion-icon class="arrow-back"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
Works fine, tho.
mm44m6
on 29 Jan 2018
@kentoj
I then changed only the *ngIf binding in the :
<ion-navbar end [hidden]="showSkip">
worked for me !
Thanks
gilhardl
on 25 Feb 2018
This issue has been automatically identified as an Ionic 3 issue. We recently moved Ionic 3 to its own repository. I am moving this issue to the repository for Ionic 3. Please track this issue over there.
If I've made a mistake, and if this issue is still relevant to Ionic 4, please let the Ionic Framework team know!
Thank you for using Ionic!
![ionitron-bot[bot] picture](https://avatars1.githubusercontent.com/in/8640?v=4&s=40)
ionitron-bot[bot]
on 29 Nov 2018
Issue moved to: https://github.com/ionic-team/ionic-v3/issues/302
ionitron-bot[bot]
on 29 Nov 2018
Related issues
GeorgeAnanthSoosai
·
3Comments
fdnhkj
·
3Comments
manucorporat
·
3Comments
gio82
·
3Comments
alan-agius4
·
3Comments
Most helpful comment
I can confirm that *ngIf inside _any element_ of the ion-header is what causes this error and it only happens on iOS, Android works fine. Not sure what's causing this.
Will throw:
When pushing another page into the stack.
Works fine, tho.