CODEWITHSUNDEEP
javascriptangulartypescriptionic2ionic3
elisa tramonti
elisa tramonti

Reputation: 251

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?

Upvotes: 0

Views: 83

Answers (2)

sebaferreras
sebaferreras

Reputation: 44659

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).

Upvotes: 2

Suraj Rao
Suraj Rao

Reputation: 29614

You are not passing the ChooseCharacterPage in the click event in your code:

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

You are actually passing a string literal which obviously is not a component. For passing objects you will not have any inner quotes. If the page component object is not present in the view you should directly import in the component side and call

this.navCtrl.push(ChooseCharacterPage)

without passing it as a parameter in the event function call. or in your Function

gotoPage(page:string){
switch(page){
  case "ChooseCharacterPage": 
    this.navCtrl.push(ChooseCharacterPage);
    break;
  //other cases
  }
}

Upvotes: 0

Related Questions