Ionic unclean (in promise): invalid reference
I have a possible problem with this.nav.push
Ionic. I made a login / registration page, but when I login I get this error message. I need to add code from login.ts and for example home.ts (which is the main page)?
Runtime Error Unprepared (in Promise): Invalid Link: Home Page
Error: impurity (in a promise): invalid link: Home at d ( http: // localhost: 8100 / build / polyfills.js: 3: 3991 ) at l ( http: // localhost: 8100 / build / polyfills.js : 3: 3244 ) to Object.reject ( http: // localhost: 8100 / build / polyfills.js: 3: 2600 ) to NavControllerBase._fireError ( http: // localhost: 8100 / build / main.js: 45465: 16 ) to NavControllerBase._failed ( http: // localhost: 8100 / build / main.js: 45453: 14 ) to http: // localhost: 8100 / build / main.js: 45508: 59 at t.invoke ( http: / /localhost:8100/build/polyfills.js:3:11562 ) to Object.onInvoke ( http: // localhost: 8100 / build / main.js: 4622: 37 ) at t.invoke (http: // localhost: 8100 / build / polyfills.js: 3: 11502 ) to n.run ( http: // localhost: 8100 / build / polyfills.js: 3: 6468 ) to http: // localhost: 8100 / build / polyfills.js: 3: 3767 to t.invokeTask ( http: // localhost: 8100 / build / polyfills.js: 3: 12256 ) to Object.onInvokeTask ( http: // localhost: 8100 / build / main.js : 4613: 37 ) to t.invokeTask ( http: // localhost: 8100 / build / polyfills.js: 3: 12177 ) to n.runTask ( http: // localhost: 8100 / build / polyfills.js: 3: 7153 )
@edit: The problem occurs when I want to login to my application. This is the login code responder.
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 a public function that does my belt and where I have a pass and email that I need to 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 application is home.ts and the class is HomePage
source to share
what you need to do is add @IonicPage () before "@Component" and import "IonicPage" like this:
import {NavController, IonicPage} from 'ionic-angular';
then you need to create a module for ie home page in home directory create home.module.ts with following content
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
source to share
The only problem in your code is when you write
this.nav.push('HomePage');
remove the quotes '' when calling any page and write like this.
this.nav.push(HomePage);
without quotes.
Above answer is for ionic2, there is lazy loading in ionic3 where you call this
this.nav.push('HomePage');
source to share