I am developing an application using ionic 2. The main features of the application is login screen and then appear a dash board with side menu. Side menu will not be in login screen. I did it. but do not know the following error is coming out again and again.
The error is
Unexpected directive 'LoginPage' imported by the module 'AppModule'. Please add a @NgModule annotation.
Here I'm giving my code..
app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { ListPage } from '../pages/list/list';
import { LoginPage } from "./login/login";
import { MenuComponent } from "./menu.component";
@NgModule({
declarations: [
MyApp,
HomePage,
ListPage,
MenuComponent
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp),
LoginPage
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage,
ListPage,
MenuComponent
],
providers: [{ provide: ErrorHandler, useClass: IonicErrorHandler }]
})
export class AppModule {}
App.component.ts
import { Component, ViewChild } from '@angular/core';
import { Nav, Platform } from 'ionic-angular';
import { LoginService } from "./login/login.service";
import { LoginPage } from "./login/login";
import { MenuComponent } from "./menu.component";
@Component({
template: '<ion-nav #baseNav></ion-nav>',
})
export class MyApp {
@ViewChild('baseNav') nav: Nav;
constructor(public platform: Platform, public statusBar: StatusBar, public splashScreen: SplashScreen, private loginService: LoginService) {
this.initializeApp();
}
ngOnInit() {
const componentStack: Array<{page: Component}> = [{
page: MenuComponent
}];
if (!this.loginService.isLoggedIn) {
componentStack.push({ page: LoginPage });
}
this.nav.insertPages(0, componentStack, { animate: false });
}
initializeApp() {
this.platform.ready().then(() => {
this.statusBar.styleDefault();
this.splashScreen.hide();
});
}
}
How may I resolve this issue...? I'm using Angular 4.
@NgModule({
declarations: [
MyApp,
HomePage,
ListPage,
MenuComponent,
LoginPage // loginPgae will be here not in imports
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage,
ListPage,
MenuComponent
],
providers: [{ provide: ErrorHandler, useClass: IonicErrorHandler }]
})
In your code, You have written "LoginPage" in Imports in @ngModule. Instead, write it in the declaration and in EntryComponents.
@NgModule({
declarations: [
MyApp,
HomePage,
ListPage,
MenuComponent,
LoginPage //add LoginPage here
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp),
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage,
ListPage,
MenuComponent,
LoginPage //add LoginPage here
],
providers: [{ provide: ErrorHandler, useClass: IonicErrorHandler }]
})
You have to Declare your components in Declaration.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With