模块“AppModule”导入的意外指令“LoginPage”。请添加@NgModule 注释

Posted 2023-03-13

【中文标题】模块“AppModule”导入的意外指令“LoginPage”。请添加@NgModule 注释

【英文标题】：Unexpected directive 'LoginPage' imported by the module 'AppModule'. Please add a @NgModule annotation

【发布时间】：2017-12-02 17:18:47

【问题描述】：

我正在使用 ionic 2 开发一个应用程序。该应用程序的主要功能是登录屏幕，然后出现一个带有侧面菜单的仪表板。侧边菜单不会出现在登录屏幕中。我做到了。但不知道下面的错误是一次又一次的出现。

错误是

模块“AppModule”导入的意外指令“LoginPage”。 请添加@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。

【问题讨论】：

正确格式化代码真的那么难吗？无论如何，您只能导入模块，而不是“页面”。您可能希望将LoginPage 放入declarations。

angular.io/guide/ngmodule-faq#what-should-i-import

导入用于模块。您需要在声明中添加页面

【参考方案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】：

在您的代码中，您在 @ngModule 的 Imports 中编写了“LoginPage”。 而是将其写在声明和 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】：

将组件导入模块的方式是将它们添加到声明中。这对于所有组件导入来说都是如此。

声明：[ 组件1， 组件2， ... ],