Ionic Uncaught (in promise): invalid link

Question

I have probably a problem with this.nav.push in Ionic. I have done a login/registration page but when I login, I get this error message. I have to add some code in login.ts and e.g home.ts (which is the main page) ?

Runtime Error
Uncaught (in promise): invalid link: HomePage

Error: Uncaught (in promise): invalid link: HomePage at d (http://localhost:8100/build/polyfills.js:3:3991) at l (http://localhost:8100/build/polyfills.js:3:3244) at Object.reject (http://localhost:8100/build/polyfills.js:3:2600) at NavControllerBase._fireError (http://localhost:8100/build/main.js:45465:16) at NavControllerBase._failed (http://localhost:8100/build/main.js:45453:14) at http://localhost:8100/build/main.js:45508:59 at t.invoke (http://localhost:8100/build/polyfills.js:3:11562) at Object.onInvoke (http://localhost:8100/build/main.js:4622:37) at t.invoke (http://localhost:8100/build/polyfills.js:3:11502) at n.run (http://localhost:8100/build/polyfills.js:3:6468) at http://localhost:8100/build/polyfills.js:3:3767 at t.invokeTask (http://localhost:8100/build/polyfills.js:3:12256) at Object.onInvokeTask (http://localhost:8100/build/main.js:4613:37) at t.invokeTask (http://localhost:8100/build/polyfills.js:3:12177) at n.runTask (http://localhost:8100/build/polyfills.js:3:7153)

@edit: The problem occurs when I want login to my app. Here is the code to login.

login.ts

public login() {
    this.showLoading()
    this.auth.login(this.registerCredentials).subscribe(allowed => {
      if (allowed) {        
       this.nav.push('HomePage');
      } else {
        this.showError("Access Denied");
      }
    },
      error => {
        this.showError(error);
      });
    }

auth-service.ts ( here is public function which executes my login and where I have password and email which I need to type in login )

  public login(credentials) {
    if (credentials.email === null || credentials.password === null) {
      return Observable.throw("Please insert credentials");
    } else {
      return Observable.create(observer => {
        // At this point make a request to your backend to make a real check!
        let access = (credentials.password === "pass" && credentials.email === "email");
        this.currentUser = new User('Simon', '[email protected]');
        observer.next(access);
        observer.complete();
      });
    }
  }

I don't know why this code is wrong. My home page in my app is home.ts and class is HomePage

Welcome to StackOverflow! In order for us to help you better, please update your question so that it shows all relevant code in a minimal, complete, and verifiable example. It would also be helpful if you could let us know what you have tried so far to solve your problem. For further information, please refer to the help article regarding how to ask good questions, and take the tour of the site :) — Obsidian Age

rylxes rylxes · Accepted Answer · 2017-07-06T17:15:13

what you need to do is to add @IonicPage() before '@Component' and import 'IonicPage' like this : import {NavController, IonicPage} from 'ionic-angular';

then you need to create a module for the homepage i.e in the home directory , create home.module.ts with the following contents

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { HomePage } from './home';

@NgModule({
  declarations: [
    HomePage
  ],
  imports: [
    IonicPageModule.forChild(HomePage),
  ],
  exports: [
    HomePage
  ]
})
export class HomePageModule {}

and reload the project

Ionic Uncaught (in promise): invalid link

5 Answers