Page change "Onclick" always "invalid views to Insert"

Question

I would like you to click a button, change page.
I’m in inicio and would like to go to add-oferta.

top html.

<ion-fab bottom right >
    <button ion-fab color="secondary" (click)="addOferta()"><ion-icon name="add"></ion-icon></button>
</ion-fab>

home ts.

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { LOCALE_ID } from '@angular/core';
import { ServiceProvider } from '../../providers/service/service'
import { pageAddOferta } from '../add-oferta/add-oferta'

@IonicPage()
@Component({
  selector: 'PaginaInicial',
  templateUrl: 'inicio.html'
})
export class PaginaInicial {

    produtos: any;

  constructor(public navCtrl: NavController, public navParams: NavParams, public servidor: ServiceProvider) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad PaginaInicial');
  }

  getProdutos(ev: any) {
    const val = ev.target.value;
    if(val!=''){
        this.servidor.getProdutos(val)
        .subscribe(
            data => this.produtos = data,
            err => alert(err)
        );
    }
  }

  addOferta(){
    this.navCtrl.setRoot(pageAddOferta);
  }

}

But when triggering the desired function always appears the error below:

Uncaught (in promise): invalid views to insert

I don’t know where the mistake is or what I’m doing wrong. I saw that the function is called correctly, but never called the page I need.

Any suggestions?

Answer 1

Check that the pageAddOferta page has the "@Ionicpage()" on it. If you have vc you are calling the wrong "setRoot()" function.

That would be the correct way to call the next page:

  addOferta(){
    this.navCtrl.setRoot('pageAddOferta');
  }

Why does this happen? Your page is Lazyload (it contains the @Ionicpage() in it), meaning it is not stated in the app.module, so when you’re calling it "this.navCtrl.setRoot(pageAddOferta)", the angular does not recognize it as it is not declared.

When she is Lazyloading, you have to call her by passing the page name (string) "this.navCtrl.setRoot('pageAddOferta');"

If you want to remove Lazyloading from your page, remove "@Ionicpage()" from it, delete the "suapagina.module.ts" file and declare it in "app.module.ts".