Ionic Uncaught (in promise): invalid link

ionic3

Solution

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

Problem

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', 'saimon@devdactic.com'); 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

Original source