Le composant fait partie de la déclaration de 2 modules

Question

J'essaie de construire un ionique 2 app. Quand j'ai essayer l'application dans le navigateur avec l'ionique de servir ou de le lancer sur un émulateur, tout fonctionne bien.

Mais quand j'essaie de compiler à chaque fois l'erreur

ionic-app-script tast: "build"
Error Type AddEvent in "PATH"/add.event.ts is part of the declarations of 2 modules: AppModule in "PATH"/app.modules.ts and AddEvent in "PATH"/add-event.module.ts.
Please consider moving AddEvent in "PATH"/add-event.ts to a higher module that imports AppModule in "PATH"/app.module.ts and AddEventModule.
You can also creat a new NgModule that exports and includes AddEvent then import that NgModule in AppModule and AddEventModule

mon AppModule est

import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { AngularFireModule } from 'angularfire2';
import { MyApp } from './app.component';
import { Eventdata } from '../providers/eventdata';
import { AuthProvider } from '../providers/auth-provider';
import { HttpModule } from '@angular/http';

import { HomePage } from '../pages/home/home';
import { Login } from '../pages/login/login';
import { Register } from '../pages/register/register';
import { AddEvent } from '../pages/add-event/add-event';
import { EventDetails } from '../pages/event-details/event-details';

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';


@NgModule({
  declarations: [
    MyApp,
    HomePage,
    Login,
    Register,
    AddEvent,
    EventDetails

  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    HttpModule,
    AngularFireModule.initializeApp(config)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    Login,
    Register,
    AddEvent,
    EventDetails
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}, Eventdata, AuthProvider
  ]
})
export class AppModule {}

et mon complément de l'événement.le module.ts est

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { AddEvent } from './add-event';

@NgModule({
  declarations: [
    AddEvent,
  ],
  imports: [
    IonicPageModule.forChild(AddEvent),
  ],
  exports: [
    AddEvent
  ]
})
export class AddEventModule {}

Je comprends que je dois enlever l'une des déclarations, mais je ne sais pas comment.

Si je retire la déclaration de AppModule j'obtiens une Erreur que la Page de Connexion n'est pas trouvé, lors de l'exécution ionique servir

Answer 1

Supprimer la déclaration de AppModule, mais la mise à jour de la AppModule configuration à importer votre AddEventModule.

.....
import { AddEventModule } from './add-event.module';  // <-- don't forget to import the AddEventModule class

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    Login,
    Register,
    //AddEvent,  <--- remove this
    EventDetails

  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    HttpModule,
    AngularFireModule.initializeApp(config),
    AddEventModule,  // <--- add this import here
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    Login,
    Register,
    AddEvent,
    EventDetails
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}, Eventdata, AuthProvider
  ]
})
export class AppModule {}

Aussi,

Notez qu'il est important que votre AddEventModule exportations de la AddEvent composant si vous voulez l'utiliser en dehors de ce module. Heureusement, vous les avez déjà configuré, mais si elle a été omis, vous avez obtenu une erreur si vous avez essayé d'utiliser la AddEvent composant dans un autre composant de votre AppModule

Answer 2

Certaines personnes utilisant Lazy loading vont tomber sur cette page.

Voici ce que j'ai fait pour résoudre le partage d'une directive.

1. créer un nouveau module partagé

shared.module.ts

 import { NgModule, Directive,OnInit, EventEmitter, Output, OnDestroy, Input,ElementRef,Renderer } from '@angular/core';
import { CommonModule } from '@angular/common';

import { SortDirective } from './sort-directive';

@NgModule({
  imports: [
  ],
  declarations: [
  SortDirective
  ],
  exports: [
    SortDirective
  ]
})

export class SharedModule { }
 

Puis dans app.module et vos autres modules

 import {SharedModule} from '../directives/shared.module'
...

@NgModule({
   imports: [
       SharedModule
       ....
       ....
 ]
})
export class WhateverModule { }
 

Answer 3

La solution est très simple. Trouver *.module.ts fichiers et de déclarations de commentaires. Dans votre cas, trouvez le fichier addevent.module.ts et supprimez / commentez une ligne ci-dessous:

 @NgModule({
  declarations: [
    // AddEvent, <-- Comment or Remove This Line
  ],
  imports: [
    IonicPageModule.forChild(AddEvent),
  ],
})
 

Cette solution a fonctionné dans ionic 3 pour les pages générées par ionic-cli et fonctionne à la fois en commandes ionic serve et ionic cordova build android --prod --release !

Soyez heureux...

Answer 4

IN Angular 4. Cette erreur est considérée comme un problème de cache d'exécution du serveur.

cas: 1 cette erreur se produira une fois que vous importez le composant dans un module et importez à nouveau dans des sous-modules.

cas: 2 Importer un composant au mauvais endroit, puis le supprimer et le remplacer dans le module Correct, car cette fois-ci, il est considéré comme un problème de cache de serveurs. Besoin d'arrêter le projet et de recommencer à servir, cela fonctionnera comme prévu.

Answer 5

Si vos pages sont créées à l'aide de la CLI, un fichier portant le nom nom_fichier.module.ts est créé, vous devez alors enregistrer votre nomfichier.module.ts dans le tableau des importations dans le fichier app.module.ts et ne l'insérez pas dans le tableau de déclarations. .

par exemple.

 import { LoginPageModule } from '../login/login.module';


declarations: [
    MyApp,
    LoginPageModule,// remove this and add it below array i.e. imports
],

imports: [
        BrowserModule,
        HttpModule,
        IonicModule.forRoot(MyApp, {
           scrollPadding: false,
           scrollAssist: true,
           autoFocusAssist: false,
           tabsHideOnSubPages:false
        }),
       LoginPageModule,
],