No provider for NavParams error is coming In Ionic App

Question

I am transferring parameters from one component to app.component.ts but the error is coming. Error: No provider for NavParams.

This is my app.component.ts:

import { FrontPage } from "./../pages/front/front";
import { Component, ViewChild } from "@angular/core";
import { Nav, Platform, NavController, NavParams } from "ionic-angular";
import { StatusBar } from "@ionic-native/status-bar";
import { SplashScreen } from "@ionic-native/splash-screen";
import { HomePage } from "../pages/home/home";
import { ListPage } from "../pages/list/list";
import { ProductPage } from "../pages/product/product";
import { LoginpagePage } from "../pages/loginpage/loginpage";

@Component({
  templateUrl: "app.html",
})
export class MyApp {
  @ViewChild(Nav) nav: Nav;
  menuclick: boolean = true;
  menuclick2: boolean = false;
  rootPage: any = FrontPage;
  uname: string;

  pages: Array<{ title: string; component: any; name2: string }>;

  constructor(
    public platform: Platform,
    public statusBar: StatusBar,
    public splashScreen: SplashScreen,
    public navParams: NavParams
  ) {
    this.initializeApp();
    this.uname = this.navParams.get("param1");
    this.pages = [
      { title: "Home", component: FrontPage, name2: "home" },
      { title: "Product Categories", component: ProductPage, name2: "basket" },
      { title: "Merchandise", component: ProductPage, name2: "man" },
      { title: "My Orders", component: ProductPage, name2: "cart" },
    ];
  }

  initializeApp() {
    this.platform.ready().then(() => {
      this.statusBar.styleDefault();
      this.splashScreen.hide();
    });
  }

  openPage(page) {
    this.nav.setRoot(page.component);
  }

  loginpage2() {
    this.nav.push(LoginpagePage);
  }

  logoutClicked() {
    console.log("Logout");
    this.nav.pop();
  }
}

In this component, I am getting the navparam value like this this.uname = this.navParams.get('param1');

This is my loginpage.ts:

import { Component } from "@angular/core";
import {
  IonicPage,
  NavController,
  NavParams,
  AlertController,
} from "ionic-angular";
import { RestapiProvider } from "../../providers/restapi/restapi";
import { ListPage } from "../list/list";
import { FrontPage } from "../front/front";
import { CartPage } from "./../cart/cart";
import { Validators, FormBuilder, FormGroup } from "@angular/forms";
import { MyApp } from "./../../app/app.component";

@IonicPage()
@Component({
  selector: "page-loginpage",
  templateUrl: "loginpage.html",
})
export class LoginpagePage {
  todo: FormGroup;
  responseData: any;
  userData = { username: "", password: "" };
  constructor(
    public navCtrl: NavController,
    public navParams: NavParams,
    public restProvider: RestapiProvider,
    private formBuilder: FormBuilder,
    private alertCtrl: AlertController
  ) {
    this.todo = this.formBuilder.group({
      username: ["", Validators.required],
      password: ["", Validators.required],
    });
  }

  ionViewDidLoad() {
    console.log("ionViewDidLoad LoginpagePage");
  }

  getloginUsers() {
    this.restProvider
      .getUsers(this.userData, "user_Login")
      .subscribe((data) => {
        console.log(data);
        if (data) {
          this.responseData = data;
          console.log(this.responseData.msg.name);
          if (this.responseData.status === "success") {
            this.navCtrl.push(MyApp, {
              param1: this.responseData.msg.name,
            });
          } else {
            this.presentAlert();
          }
        }
      });
  }

  presentAlert() {
    let alert = this.alertCtrl.create({
      title: "Incorrect Username Or Password",
      buttons: ["Dismiss"],
    });
    alert.present();
  }

  cardpage2() {
    this.navCtrl.push(CartPage);
  }
}

Error: No provider for NavParams is coming. Any help is much appreciated.

Answer 1

Can you please try adding.Hope it might work. If you provide me a project i can help you in a better manner.

@Component({
 selector: 'page-loginpage',
 templateUrl: 'loginpage.html',
 providers: [NavParams]
})

Answer 2

I found a solution Instead of adding navParams in constructor

Add public navParams = new NavParams

For example

export class LoginpagePage {
  public navParams = new NavParams();
  todo: FormGroup;
  responseData: any;
  userData = { username: "", password: "" };

  constructor(public navCtrl: NavController) {};
}