Angular 5 app.component can't add NavController

Question

**So, I've got app.html with my main menu, and I want to add (click)="page()" links, but I can't since I get error :

Error: StaticInjectorError[NavController]: StaticInjectorError[NavController]: NullInjectorError: No provider for NavController!

all project : https://github.com/AndriusdevLa/test

<ion-nav [root]="rootPage" #mainNav></ion-nav>
<ion-menu [content]="mainNav" type="overlay">
  <ion-content>
   <ion-list>
      <ion-item menuClose>
        <ion-buttons right>
        <button ion-button>
        <ion-icon name="close"></ion-icon>
        </button>
        </ion-buttons>
      </ion-item>
      <ion-item><button ion-button (click)="menuProfile()">Fails</button></ion-item>
      <ion-item>Profile</ion-item>
      <ion-item>Messeges</ion-item>
      <ion-item>Support</ion-item>
    </ion-list>
  </ion-content>
</ion-menu>

app.component.ts :

import { Component } from '@angular/core';
import { NavController, Platform} from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { LoginPage } from "../pages/login/login";

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage:any = LoginPage;


  constructor(public navCtrl : NavController,
    platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {


    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      statusBar.styleDefault();
      splashScreen.hide();
    });
  }
  menuProfile(){
    this.navCtrl.push('ProfilePage');
  }

}

How to fix that ?

Answer 1

Error is descriptive, NullInjectorError: No provider for NavController!

You need to add NavController inside providers in app.module.ts

Answer 2

Since I don't have all your component references I can't test it. But code seems ok. The problem is not with the (click) events and function. you can debug it and test if the debugger hits the function or not. However I have minimize your code and used standard input control and test it, Its working fine so either provide all the components referred in your code or simply minimize as much as possible and share the code will figure it out.

here I have tested your problem -

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'test-dev-problem',
  templateUrl: './test-dev-problem.component.html',
  styleUrls: ['./test-dev-problem.component.css']
})
export class TestDevProblemComponent implements OnInit {

  navCtrl = '';
  constructor() { }

  ngOnInit() {
  }

  menuProfile() {
    this.navCtrl = 'ProfilePage';
  }

}

HTML :-

<div>
  <input type="button" value="ClickMe" (click)="menuProfile()">
  <input type="text" value="{{navCtrl}}">
</div>

On Button click its showing the value in text box.

Answer 3

Note : in ionic 3 declarative Nav is used as;

@ViewChild(Nav) navCtrl: Nav;

so without importing anything, you navigate with

this.navCtrl.push(this.mypage);

for ionic 2

There are a section in the documentation 263 called “Navigating from the Root component” where says:

What if you want to control navigation from your root app component? You can't inject NavController because any components that are navigation controllers are children of the root component so they aren't available to be injected.

By adding a reference variable to the ion-nav, you can use @ViewChild to get an instance of the Nav component, which is a navigation controller (it extends NavController):

import { Component, ViewChild } from '@angular/core';
import { NavController } from 'ionic-angular';
@Component({
   template: '<ion-nav #myNav [root]="rootPage"></ion-nav>'
})
export class MyApp {
   @ViewChild('myNav') nav: NavController
   public rootPage = TabsPage;
   // Wait for the components in MyApp's template to be initialized
   // In this case, we are waiting for the Nav with reference variable of "#myNav"
   ngOnInit() {
      // Let's navigate from TabsPage to Page1
      this.nav.push(Page1);
   }
}