模塊'AppModule'導入的意外指令'LoginPage'。請添加@NgModule註釋

Question

我正在開發使用離子2的應用程序。該應用程序的主要功能是登錄屏幕，然後出現帶側面菜單的儀表板。側面菜單不會出現在登錄屏幕中。我做的。但不知道下面的錯誤是一次又一次地出現。

該錯誤是

意外的指令 'LoginPage' 由模塊進口 '的AppModule'。 請添加@NgModule註釋。

在這裏，我給我的代碼..

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(); 
    }); 
    } 


} 

我如何可以解決這個問題......？我正在使用Angular 4.

Answer 1

@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 }]  
})