NullInjectorError: No provider for NavParams!

Ionic Framework ionic-v3
1

I’m creating an app with tabs in ionic3:

Ionic:

   ionic (Ionic CLI)  : 4.9.0 (C:\Users\_____\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework    : ionic-angular 3.9.2
   @ionic/app-scripts : 3.2.3

I have this code in my tabs.ts, which uses “NavParams” to keep track of the tab indices when navigating to a different page:

import { Component } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
import { IonicPage, NavParams } from 'ionic-angular';

import { Tab1Root, ......Tab5Root } from '../';

@IonicPage()
@Component({
  selector: 'page-tabs',
  templateUrl: 'tabs.html'
})
export class TabsPage {
  tab1Root: any = Tab1Root;
  ...
  tab5Root: any = Tab5Root;

  tab1Title = " ";
   ...
  tab5Title = " ";

  tabIndex: number;

  constructor(
    navParams: NavParams,
    public translateService: TranslateService
  ) {
    translateService.get(['TAB1_TITLE', ......., 'TAB5_TITLE']).subscribe(values => {
      this.tab1Title = values['TAB1_TITLE'];
      ....
      this.tab5Title = values['TAB5_TITLE'];
    });

    this.tabIndex = 0;

    if (navParams.data.index) {
      this.tabIndex = navParams.data.index;
    }
  }
}

In ‘app.comonent.ts’, I open the tabs with this function:

  openPage(page) {
    this.menu.close();
    this.nav.setRoot(page.component, {index: page.index});
  }

I have used the same code in an OLDER ionic project, where everything was working fine. For this newer project, I am getting following NullInjector Error:

ERROR Error: "Uncaught (in promise): Error: StaticInjectorError(AppModule)[TabsPage -> NavParams]: 
  StaticInjectorError(Platform: core)[TabsPage -> NavParams]: 
    NullInjectorError: No provider for NavParams!

As far as I remember, NavParams does not need importing/provision in ‘app.module.ts’. So where is this coming from?

Does anyone have any clue what I might be doing wrong?

2

Did u find a solution?

3

iam also facing a same problem, did you find the solution

4

You can use injector.
For this solution you must have a condition to validate if page is loading from a Modal or IonNav.

export class MyClass { 

    constructor(injector: Injector) {

        if(**My Condition**) {
            const navParams = injector.get(NavParams);
            console.log("My index", navParams.data.index);
        }
    }
   ...
}