elisa tramonti elisa tramonti - 26 days ago 7
Javascript Question

promise error in navTrl.push()

I'm trying to build a simple function that will let me navigate through different pages in my app. I want to be able to pass the name of the page where I want to go in my html code. What I did so far is

In my home.ts

`goToPage(test){
console.log('clicked! '+test);
this.navCtrl.push(test);
}`


In my home.html

<button ion-fab color="light" (click)='goToPage("ChooseCharacterPage")'>


Everything loads, but when I click I get

invalid page component: ChooseCharacterPage
convertToView @ nav-util.js:23
NavControllerBase.push @ nav-controller-base.js:54
HomePage.goToPage @ home.ts:19
View_HomePage0.handleEvent_13 @ /AppModule/HomePage/component.ngfactory.js:193
(anonymous) @ view.js:408
(anonymous) @ dom_renderer.js:276
t.invokeTask @ polyfills.js:3
onInvokeTask @ ng_zone.js:227
t.invokeTask @ polyfills.js:3
e.runTask @ polyfills.js:3
invoke @ polyfills.js:3
error_handler.js:47 EXCEPTION: Uncaught (in promise): false
ErrorHandler.handleError @ error_handler.js:47
IonicErrorHandler.handleError @ ionic-error-handler.js:56
next @ application_ref.js:272
schedulerFn @ async.js:82
SafeSubscriber.__tryOrUnsub @ Subscriber.js:223
SafeSubscriber.next @ Subscriber.js:172
Subscriber._next @ Subscriber.js:125
Subscriber.next @ Subscriber.js:89
Subject.next @ Subject.js:55
EventEmitter.emit @ async.js:74
NgZone.triggerError @ ng_zone.js:278
onHandleError @ ng_zone.js:257
t.handleError @ polyfills.js:3
e.runGuarded @ polyfills.js:3
r @ polyfills.js:3
i @ polyfills.js:3
invoke @ polyfills.js:3
error_handler.js:52 ORIGINAL STACKTRACE:
ErrorHandler.handleError @ error_handler.js:52
IonicErrorHandler.handleError @ ionic-error-handler.js:56
next @ application_ref.js:272
schedulerFn @ async.js:82
SafeSubscriber.__tryOrUnsub @ Subscriber.js:223
SafeSubscriber.next @ Subscriber.js:172
Subscriber._next @ Subscriber.js:125
Subscriber.next @ Subscriber.js:89
Subject.next @ Subject.js:55
EventEmitter.emit @ async.js:74
NgZone.triggerError @ ng_zone.js:278
onHandleError @ ng_zone.js:257
t.handleError @ polyfills.js:3
e.runGuarded @ polyfills.js:3
r @ polyfills.js:3
i @ polyfills.js:3
invoke @ polyfills.js:3
error_handler.js:53 Error: Uncaught (in promise): false
at s (polyfills.js:3)
at polyfills.js:3
at Object.ti.reject (nav-controller-base.js:187)
at NavControllerBase._queueTrns (nav-controller-base.js:197)
at NavControllerBase.push (nav-controller-base.js:52)
at HomePage.goToPage (home.ts:19)
at CompiledTemplate.proxyViewClass.View_HomePage0.handleEvent_13 (/AppModule/HomePage/component.ngfactory.js:193)
at CompiledTemplate.proxyViewClass.<anonymous> (view.js:408)
at HTMLButtonElement.<anonymous> (dom_renderer.js:276)
at t.invokeTask (polyfills.js:3)
ErrorHandler.handleError @ error_handler.js:53
IonicErrorHandler.handleError @ ionic-error-handler.js:56
next @ application_ref.js:272
schedulerFn @ async.js:82
SafeSubscriber.__tryOrUnsub @ Subscriber.js:223
SafeSubscriber.next @ Subscriber.js:172
Subscriber._next @ Subscriber.js:125
Subscriber.next @ Subscriber.js:89
Subject.next @ Subject.js:55
EventEmitter.emit @ async.js:74
NgZone.triggerError @ ng_zone.js:278
onHandleError @ ng_zone.js:257
t.handleError @ polyfills.js:3
e.runGuarded @ polyfills.js:3
r @ polyfills.js:3
i @ polyfills.js:3
invoke @ polyfills.js:3


What puzzles me is the promise problem since the variable is passed with the click of the button. SHouldn't a promise problem arise only if and when the var is undefined?

Answer Source

Just like @suraj says, you need to send a Component to the push method (and not a string). But maybe a simpler approach could be to declare a property in your ts code, assigning the ChooseCharacterPage component class:

public chooseCharacterPage: any = ChooseCharacterPage;

// ...

goToPage(test: any){
    this.navCtrl.push(test);
}

And then in your view you can use that variable:

<button ion-fab color="light" (click)='goToPage(chooseCharacterPage)'>

Please notice that in the html we're now using the property (the name starts with lowercase, and it's not between quotes).