Problem: invalid link

Ionic Framework ionic-v3
#1

Hey all,

im completely new to Ionic. So I read a little bit about it and started my first project :slight_smile:

Now I got some problems with the navigation to an other page.

I got an login site (welcome page) and after a successful http request I want to change the page but I get this error: Error: Uncaught (in promise): invalid link: HomePage — polyfills.js:3:13545

my app.module

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';
import { WelcomePage } from '../pages/welcome/welcome';
import { HomePage } from '../pages/home/home';
import { AuthServiceProvider } from '../providers/auth-service/auth-service';
import { HttpModule } from '@angular/http';


@NgModule({
  declarations: [
    MyApp,
    WelcomePage,
    HomePage
  ],
  imports: [
    BrowserModule,
    HttpModule,
    IonicModule.forRoot(MyApp),

  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    WelcomePage,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    AuthServiceProvider
  ]
})
export class AppModule {}

I read a little bit that it could fix my problem with adding IonicPageModule but it didn’t help

my welcome.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, AlertController, LoadingController, Loading } from 'ionic-angular';
import { AuthServiceProvider } from '../../providers/auth-service/auth-service';
import { HomePage } from '../../pages/home/home';
/**
 * Generated class for the WelcomePage page.
 *
 * See http://ionicframework.com/docs/components/#navigation for more info
 * on Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-welcome',
  templateUrl: 'welcome.html',
})
export class WelcomePage {

  loading: Loading;
  registerCredentials = { email: '', password: '' };

  constructor(private nav: NavController, private auth: AuthServiceProvider, private alertCtrl: AlertController, private loadingCtrl: LoadingController) { 
  this.nav = nav;}

 	public login() {
    this.showLoading()
    this.auth.login(this.registerCredentials).subscribe(allowed => {
      if (allowed) {        

        this.nav.push('HomePage');
      } else {
        this.showError("Der Benutzername oder das Passwort ist falsch");
      }
    },
      error => {
        this.showError(error);
      });
  }
 
  showLoading() {
    this.loading = this.loadingCtrl.create({
      content: 'Bitte warten...',
      dismissOnPageChange: true
    });
    this.loading.present();
  }
 
  showError(text) {
    this.loading.dismiss();
 
    let alert = this.alertCtrl.create({
      title: 'Fehler',
      subTitle: text,
      buttons: ['OK']
    });
    alert.present(prompt);
  } 

}

I also tried to this.nav.setRoot but no changes…

my home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { AuthServiceProvider } from '../../providers/auth-service/auth-service';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  username = '';
  email = '';
  
  constructor(private nav: NavController, private auth: AuthServiceProvider) {
    let info = this.auth.getUserInfo();
    this.username = info['name'];
    this.email = info['email'];
  }
 
  public logout() {
    this.auth.logout().subscribe(succ => {
      this.nav.setRoot('LoginPage')
    });
  }
}

So it would be nice if someone could help me with this problem ! :slight_smile:

#2

Hello,

maybe there is a problem declaring the page. In app.module.ts you declare your HomePage in normale way (I don’t know in the moment the correct term), but in WelcomePage you use it in push like a ‘lazy loaded page’.

navigating with normale pages : this.nav.push(HomePage);
navigating with ‘lazy loaded pages’: this.nav.push(‘HomePage’);

in upper example its a object, in lower example with ‘’ its a string.

If you want use lazy loaded pages and how declare it take a look to internet.

I hope it helps, because I am too a bloody beginner.

Best regards, anna-liebt

2 Likes
#3

That’s a great description and does seem to be what’s happening. Here’s some more detail.

1 Like
#4

Thanks for your help! I have found my problem :slight_smile:

#5

Thank you, that was my problem as well, using this.nav.push(‘SomePage’) instead of this.nav.push(SomePage).

#6

This is because you are not using LazyLoading, so this will not work.

When you use it you need to have a decorator in your page component, it will only work if you have IonicPage decorated component to use LazyLoading for pages:

import { Component } from '@angular/core';
import { NavController, IonicPage } from 'ionic-angular';
import { AuthServiceProvider } from '../../providers/auth-service/auth-service';

// HERE
@IonicPage()
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

this.nav.setRoot('LoginPage');

And if this decorator is not present, you will need to import page and then set root without string by passing this imported component page, like:

import { LoginPage } from '../pages/login/login';


....

goToLogin () {
    // passing component reference by importing without LazyLoading
    this.nav.setRoot(LoginPage)
}
1 Like