Ionic App Error: StaticInjectorError(AppModule)[Content -> NavController]:

Question

I'm getting an error while putting literally anything on my constructor component.

I made a component of my menu this is my app.html:

<menu-component [content]="content"></menu-component>

<ion-nav #content [root]="rootPage"></ion-nav> 
<!-- I have to maintain this line here and on the MenuComponent cause the app didn't load the content without it... Don't know why-->

This is my MenuComponent:

<ion-menu [content]="content">

    <ion-content>
        <ion-list>
            <button menuClose ion-item *ngFor="let page of pages" (click)="openPage(page)">
                <ion-icon name="{{page.icon}}"></ion-icon>
                {{page.title}}
            </button>
        </ion-list>
    </ion-content>

</ion-menu>

<ion-nav #content [root]="rootPage"></ion-nav>
<!-- See same line of app.html -->

This is my MenuComponent.ts:

import { Component, Input } from '@angular/core';
import { NavController } from 'ionic-angular';

/* PAGES */
import { HomePage } from '../../../pages/home/home';
import { ContactPage } from '../../../pages/contact/contact';

@Component({
    selector: 'menu-component',
    templateUrl: 'menu.component.html'
})
export class MenuComponent {

    @Input() content;

    pages: Array<{ title: string, component: any, icon: string }>;

//This doesn't work
//    constructor( private navCtrl: NavController ) {

//This does
    constructor( ) {

        this.pages = [
            { title: 'HOME', component: HomePage, icon: 'md-home' },
            { title: 'CONTACT', component: ContactPage, icon: 'ios-chatbubbles' }
        ];

    }

    openPage(page) {
        this.navCtrl.setRoot(page.component);
    }
}

Also tried this variation:

private navCtrl: NavController;

    constructor(navCtrl: NavController) {

        this.navCtrl = navCtrl;

Lastly this is my app.module:

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';

/* PAGES */
import { HomePage } from '../pages/home/home';
import { ContactPage } from '../pages/contact/contact';

/* COMPONENTS */
import { MenuComponent } from '../shared/components/menu/menu.component';

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    ContactPage,
    MenuComponent
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    ContactPage,
    MenuComponent
  ],
  providers: [
    StatusBar,
    SplashScreen,
    ModalUtil,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

Provider: ModalUtil.ts

import { Injectable } from "@angular/core";
import { ViewController, ModalController} from 'ionic-angular';

@Injectable()
export class ModalUtil {

    constructor( 
        private modalCtrl: ModalController,
        private viewCtrl: ViewController) {

    }

    presentModal(page: any, params?: Object) {

        let modal = this.modalCtrl.create(page.component, params);
        modal.present();
    }

    dismissModal(): void {
        this.viewCtrl.dismiss();
    }
}

Still getting the error:

Any Help guys??

Solution

If a MenuToggle button is added to the Navbar of a page, the button will only appear when the page it's in is currently a root page. The root page is the initial page loaded in the app, or a page that has been set as the root using the setRoot method on the NavController.

It is one of those Ionic quirks. You can't inject NavController at the root level. Try injecting NavController in your app.component.ts. You'll see a similar/same error. I usually setup my ionic-menu in app.component.ts. I'm guessing it being on a different component doesn't change the fact that it is still a root level component.

Comments

[Rafael de Castro]

Hi Anjil. I'm sorry.. I'm really trying to understand... I create a service/provider and tried to inject it on the constructor...got a similar error. I still don't get what's the problem and how to correct it :/

[Anjil Dhamala]

did you add your provider (injectable) to the list of providers in app.module.ts?

[Anjil Dhamala]

Could you please share code for your custom-provider and your app.module.ts? The question only goes over why you couldn't inject NavController to your menu component. And in the app.module.ts that is posted in question, there isn't a user created provider listed.

[Rafael de Castro]

My app.module is already in the question, but I'll edit with the provider addition and the custom-provider :D

[Anjil Dhamala]

Where are you trying to inject the provider? Everything seems to be in order in what you've posted.