Personally I'm having this error that literally happens whenever I inject anything into the constructor of my MenuComponent
I made the MenuComponent and this is my app.html
<menu-component [content]="content"></menu-component>
<ion-nav #content [root]="rootPage"></ion-nav>
<!-- Eu tenho que manter essa linha tanto aqui como no meu MenuComponent.html... Não sei porque exatamente, mas sem isso o conteúdo não é exibido -->
This is my menuComponent.html:
<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>
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 }>;
//Não funciona
// constructor( private navCtrl: NavController ) {
//Funciona
constructor( ) {
this.pages = [
{ title: 'HOME', component: HomePage, icon: 'md-home' },
{ title: 'CONTACT', component: ContactPage, icon: 'ios-chatbubbles' }
];
}
openPage(page) {
this.navCtrl.setRoot(page.component);
}
}
I've also tried this variation:
private navCtrl: NavController;
constructor(navCtrl: NavController) {
this.navCtrl = navCtrl;
Finally 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,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}
I'm still having this error:
Some help?
PS: I tried to inject a service / provider into the component. I declared it in the app.module, I imported it into the component, but when I put it in the constructor ... Pau ...