No provider for NavParams!

Hi, I created a basic tabbed application using :
ionic start myApp tabs --type=angular

My home.page.ts has :

import { Component } from '@angular/core';
import { TestPage } from '../test/test.page';
import { NavController, NavParams  } from '@ionic/angular';
@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss']
})
export class HomePage {
  constructor(public navCtrl: NavController, public navParams: NavParams) {}
  hello(){
    //this.presentAlert();
    //console.log("sdsadsadasdasdsadasdsad");
      this.navCtrl.navigateForward('/test');
  }
}

But i am getting the error as :

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

How to fix this:

my Ionic version is 4.0.0 beta 7

2 Likes

If you are looking into navigate to test page refer the below documentation for ionic navigation between pages.

Ionic Nav controller and add the pages you have created into imports in the app.module.ts

NavParams doesn’t exist in v4

2 Likes

This is not true. NavParams exists, but it can only be used on things like Modals

1 Like

yes true, modals and popovers

1 Like

Hope this link will helpful:

Hope this link will Help:

Hope this link will Help:

Thank you @AtiqurDhaka! This is good stuff. Proving that NavParams does indeed still exist, however there are now more streamlined ways of accomplishing this

Instead of NavParams, use router .
I think it’s work…!!! But I’m not sure.

Suddently the NavParams does not work anymore and throws the error: No Provider blah blah. Is this a pseudo error? Normally you can simply use the NavParams. Maybe there is a module not imported in the app.module.ts or modules of the component?

1 Like

The new method is more useful.

Send data to this page:

import { Router } from '@angular/router';

private route: Router

this.route.navigate(['products', { id: 128}]);

capture data on page:

import { ActivatedRoute } from '@angular/router';
  
private activatedRoute: ActivatedRoute

ngOnInit() {
    this.activatedRoute.params.subscribe((params) => {
      console.log('Params: ', params);
    });
  }

OR:
Service page old classic method:

navparam service:

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class NavparamService {

  private myParams: any;

  constructor() { }

  set param(l) {
    this.myParams = l;
  }

  get param() {
    const t = this.myParams;
    this.myParams = undefined;
    return t;
  }

}

Send data to another page

import { NavparamService } from '../navparam.service';

private navParam: NavparamService

  sendData() {
    this.navParam.param = {title: 'Example Title'};
    this.router.navigateByUrl('list');
  }

get data from another page:

import { NavparamService } from '../navparam.service';

private navparam: NavparamService

  ngOnInit() {
    console.log('Params: ', this.navparam);
  }

This is exactly why I hate magical getter functions. Who would ever expect that merely accessing a property would cause it to self-destruct?

importantThing: string;

constructor(np: NavparamService) {
  this.importantThing = np.param.wantedKey;
}

Now a bug appears where somebody has forgotten to properly pass the importantThing, and somebody else suggests making this snippet more defensive:

constructor(np: NavparamService) {
  if ("wantedKey" in np.param) {
    this.importantThing = np.param.wantedKey;
  } else {
    throw new Error("important thing is missing!");
  }
}

…and we instantly get the worst of all possible worlds: every single instantiation of this page fails in production (although it will work with the (sane) mocked-out NavparamService in testing), yet no error is thrown. How could this possibly be?

I don’t know very well, it was just an example. You can delete the topic.

Sorry, but can you explain what problem this is solving?