title: No provider for NavParams error is coming In Ionic App
body: <p>I am transferring parameters from one component to app.component.ts but the error is coming. Error: No provider for NavParams.</p>
  <p>This is my <strong>app.component.ts</strong>:</p>
  
  <pre class="lang-js prettyprint-override"><code>import { FrontPage } from &quot;./../pages/front/front&quot;;
  import { Component, ViewChild } from &quot;@angular/core&quot;;
  import { Nav, Platform, NavController, NavParams } from &quot;ionic-angular&quot;;
  import { StatusBar } from &quot;@ionic-native/status-bar&quot;;
  import { SplashScreen } from &quot;@ionic-native/splash-screen&quot;;
  import { HomePage } from &quot;../pages/home/home&quot;;
  import { ListPage } from &quot;../pages/list/list&quot;;
  import { ProductPage } from &quot;../pages/product/product&quot;;
  import { LoginpagePage } from &quot;../pages/loginpage/loginpage&quot;;
  
  @Component({
    templateUrl: &quot;app.html&quot;,
  })
  export class MyApp {
    @ViewChild(Nav) nav: Nav;
    menuclick: boolean = true;
    menuclick2: boolean = false;
    rootPage: any = FrontPage;
    uname: string;
  
    pages: Array&lt;{ title: string; component: any; name2: string }&gt;;
  
    constructor(
      public platform: Platform,
      public statusBar: StatusBar,
      public splashScreen: SplashScreen,
      public navParams: NavParams
    ) {
      this.initializeApp();
      this.uname = this.navParams.get(&quot;param1&quot;);
      this.pages = [
        { title: &quot;Home&quot;, component: FrontPage, name2: &quot;home&quot; },
        { title: &quot;Product Categories&quot;, component: ProductPage, name2: &quot;basket&quot; },
        { title: &quot;Merchandise&quot;, component: ProductPage, name2: &quot;man&quot; },
        { title: &quot;My Orders&quot;, component: ProductPage, name2: &quot;cart&quot; },
      ];
    }
  
    initializeApp() {
      this.platform.ready().then(() =&gt; {
        this.statusBar.styleDefault();
        this.splashScreen.hide();
      });
    }
  
    openPage(page) {
      this.nav.setRoot(page.component);
    }
  
    loginpage2() {
      this.nav.push(LoginpagePage);
    }
  
    logoutClicked() {
      console.log(&quot;Logout&quot;);
      this.nav.pop();
    }
  }
  </code></pre>
  <p>In this component, I am getting the navparam value like this this.uname = this.navParams.get('param1');</p>
  <p>This is my <strong>loginpage.ts</strong>:</p>
  <pre class="lang-js prettyprint-override"><code>import { Component } from &quot;@angular/core&quot;;
  import {
    IonicPage,
    NavController,
    NavParams,
    AlertController,
  } from &quot;ionic-angular&quot;;
  import { RestapiProvider } from &quot;../../providers/restapi/restapi&quot;;
  import { ListPage } from &quot;../list/list&quot;;
  import { FrontPage } from &quot;../front/front&quot;;
  import { CartPage } from &quot;./../cart/cart&quot;;
  import { Validators, FormBuilder, FormGroup } from &quot;@angular/forms&quot;;
  import { MyApp } from &quot;./../../app/app.component&quot;;
  
  @IonicPage()
  @Component({
    selector: &quot;page-loginpage&quot;,
    templateUrl: &quot;loginpage.html&quot;,
  })
  export class LoginpagePage {
    todo: FormGroup;
    responseData: any;
    userData = { username: &quot;&quot;, password: &quot;&quot; };
    constructor(
      public navCtrl: NavController,
      public navParams: NavParams,
      public restProvider: RestapiProvider,
      private formBuilder: FormBuilder,
      private alertCtrl: AlertController
    ) {
      this.todo = this.formBuilder.group({
        username: [&quot;&quot;, Validators.required],
        password: [&quot;&quot;, Validators.required],
      });
    }
  
    ionViewDidLoad() {
      console.log(&quot;ionViewDidLoad LoginpagePage&quot;);
    }
  
    getloginUsers() {
      this.restProvider
        .getUsers(this.userData, &quot;user_Login&quot;)
        .subscribe((data) =&gt; {
          console.log(data);
          if (data) {
            this.responseData = data;
            console.log(this.responseData.msg.name);
            if (this.responseData.status === &quot;success&quot;) {
              this.navCtrl.push(MyApp, {
                param1: this.responseData.msg.name,
              });
            } else {
              this.presentAlert();
            }
          }
        });
    }
  
    presentAlert() {
      let alert = this.alertCtrl.create({
        title: &quot;Incorrect Username Or Password&quot;,
        buttons: [&quot;Dismiss&quot;],
      });
      alert.present();
    }
  
    cardpage2() {
      this.navCtrl.push(CartPage);
    }
  }
  </code></pre>
  <p>Error: No provider for NavParams is coming. Any help is much appreciated.</p>