web-dev-qa-db-fra.com

Directive inattendue 'LoginPage' importée par le module 'AppModule'. Veuillez ajouter une annotation @NgModule

Je développe une application avec ionic 2.). L’écran de connexion en est l’un des principaux avantages. Un tableau de bord avec menu latéral apparaît. Le menu latéral ne sera pas affiché à l’écran de connexion. Je l’ai fait. mais je ne sais pas que l'erreur suivante se répète encore et encore.

L'erreur est

Directive inattendue 'LoginPage' importée par le module 'AppModule'. Veuillez ajouter une annotation @NgModule.

Ici je donne mon 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();
    });
  }
}

Comment puis-je résoudre ce problème ...? J'utilise Angular 4.

angularionic2
15
R. Dey
@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 }]    
})
16
Rahul Singh

Dans votre code, vous avez écrit "LoginPage" dans Imports in @ngModule. Au lieu de cela, écrivez-le dans la déclaration et dans 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 }]
})

Vous devez déclarer vos composants dans Déclaration.

12
Prem popatia

La manière dont vous importez des composants dans un module consiste à les ajouter aux déclarations. Cela est vrai en général pour toutes les importations de composants.

déclarations: [Composant1, Composant2, ...],

1
Akash Yellappa