Why can't I import NavController and ViewController into Service or App?

Ionic Framework ionic-v3
1

I’m attempting to inject NavController and ViewController into either my app.js file or a custom service.

My objective is (or was) to pass the current view into a “LeftMenuManager” service class. Some pages I need the leftmenu to be disabled, others I do not. The LeftMenuManager service would be responsible for flipping the switch based on the view name.

However, I’m unable to inject these dependencies - I get an error about “No provider for NavController…”.

I get the sense that I’m doing something backwards, but I don’t know exactly what. As most people, I’m new at this.

I understand that I’m attempting to inject controllers into non-pages. If this is the case, is there a central “master” page that will be called each time outside of the app.html?

Can someone please help me understand why I can’t do this? Or, if it’s possible, what it is that I’m missing?

Thanks in advance.

3 Likes
2

I found an issue I was running into relating to the injection of a service into another service inside the FAQ:

3

@asteffes I’m getting the same error as you, but im doing a workaround.

export class myClass {
  app: IonicApp;

  constructor(app: IonicApp) {
     this.app = app;
     this.app.getComponent('nav').pop();
  }
}

I still can’t inject the NavController or ViewController, you found a way to do that?

1 Like
4

I got the same error

1 Like
5

Why don’t you post your code (whole class) and we’ll try to check it out.

1 Like
6

I used a workaround as well. I’ve started breaking the “tell, don’t ask” principle in all the areas that I needed to manage the menu.

7 
import {NotificationInterface} from "./notification.interface";  
import {Injectable} from "angular2/core";
import {Alert} from "ionic-framework/ionic";
import {NavController} from "ionic-framework/ionic";

@Injectable()
export class NotificationService implements NotificationInterface {
    private nav;

constructor(nav: NavController) {
    this.nav = nav;
}

alert(msg:string, title?:string) {
    console.debug("alert:" + msg);

    let alert = Alert.create({
        title: title,
        subTitle: msg,
        buttons: ['Dismiss']
    });

    this.nav.present(alert);
}

}

This causes the same error as op is having. (The interface is just to make sure it has the alert func for when I want to have different providers to show notifications.

Not sure if this helps?

Also, my service used to work fine. Then I had the issue of multiple instances of other services and moved everything to the @App. Maybe that’s the problem, there might be no NavController yet at that level.

I realised above when I was writing this, So when you have this service in your @App you won’t get a NavController, make sure you provide the service at Component level, not at App.

8

Replace it with:

import {NavController} from "ionic/ionic";
9

Allright, so the last lines I commented are faulty?

10

My mistake, sorry, I’ve justed tested:

import {NavController} from "ionic-framework/ionic";

and it work fine, just like:

import {NavController} from "ionic/ionic";

Regarding your other comments. You did well when you moved your service to root (app) level. Don’t forget also to import it in child components. And you are correct, NavController is not important for root component, as long as you set a this.root page.

Here’s a simple example how to add any service to root component and then reuse them in child components: GitHub - Gajotres/Ionic2ShareDataExample: Ionic 2 Share Data Example

11

Importing NavController isn’t the issue, the issue is when you attach it to the class with this.nav = nav in the constructor, weird thing is that it works in a Page component but not in an Injectable nor App component, is the @page decorator automatically including the NavController as a provider for each page?

4 Likes
12

This is exactly what is happening with me (inside of App.js), any resolution?

13

Well i’m using @ViewChild and a variable in the html nav component to get it inside of the app.ts, idk if this is a good approach to the issue but maybe you could use it as well:

<ion-nav id="nav" #rootNavController [root]="rootPage" #content>
</ion-nav>

In app.ts:

import {ViewChild} from 'angular2/core';
@App({
  templateUrl: 'build/app.html'
})
class MyApp {
  @ViewChild('rootNavController') nav: NavController;
  ...
}
4 Likes
14

I have faced the same problem…:dizzy_face: this is my code… Please help me…

import {Page,NavController} from 'ionic-framework/ionic';
import {addTodo} from '../addTodo/addTodo';
@Page({
  templateUrl: 'build/pages/home/home.html'
})

    export class HomePage {
    	constructor(nav: NavController) {
        	this.nav = nav;
        	this.items = [];
      	}
    	addItem(){
    		this.nav.push(addTodo);
    	}
    }

Below error i have faced.

Uncaught Error: Cannot find module “./pages/home/home”

1 Like
16

@Daveshirman Could you explain with sample code?

17

@praveenjp, my situation was similar to yours, I’ve solved using this post: Cannot resolve all parameters error?
Notice that the parameter now it’s just “nav”, cause you’re calling the one returned by the get parameters()

18

Does anybody managed to import NavController in service?

I need to display ionic alert from service and also cannot import NavController

19

This question is asked every week, at least once ) So I strongly recommend you use search. It’s bad practice to change a view from a service (broken MVC).
However, you could send events from services to the main controller, and the controller can use NavController (best way), or you could send NavController to your service like an attribute (not bad way…). Or you may need to create a component instead of using the service.

8 Likes
20

Thank you for this, I don’t know why I didn’t think of that earlier. Using events seems like by far the best way.

21

Agree. Best would be to use events but in my case I’m sending the NavController as a parameter to the Service. THX for the tip :wink:

1 Like