Неожиданная директива "LoginPage", импортированная модулем "AppModule". Добавьте примечание @NgModule

Я разрабатываю приложение с использованием ионного 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.

Ответ 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 }]    
})

Ответ 2

В вашем коде вы написали "LoginPage" в Imports в @ngModule. Вместо этого напишите его в объявлении и в 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 }]
})

Ответ 3

Способ импорта компонентов в модуль заключается в том, что вы добавляете их в объявления. Это справедливо для общего импорта компонентов.

объявления: [Component1, Component2,...],

Ответ 4

@NgModule({    
  declarations: [  
    MyApp,    
    HomePage,   
    ListPage,    
    MenuComponent, 
    Loginpage  // **please login page insert here**


  ],