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

J'essaye de créer une application ionique 2. Lorsque j'essaye l'application dans le navigateur avec le service ionique ou que je la lance sur un émulateur, tout fonctionne correctement.

Mais quand j'essaye de le construire à 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 add-event.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 supprimer l'une des déclarations, mais je ne sais pas comment.

Si je supprime la déclaration d'AppModule, j'obtiens une erreur indiquant que la page de connexion n'est pas trouvée, lors de l'exécution d'ionic serve

Supprimez la déclaration de AppModule, mais mettez à jour la AppModuleconfiguration pour importer votre fichier 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 d' AddEventModuleexporter le AddEventcomposant si vous souhaitez l'utiliser en dehors de ce module. Heureusement, vous l'avez déjà configuré, mais s'il avait été omis, vous auriez eu une erreur si vous aviez essayé d'utiliser le AddEventcomposant dans un autre composant de votreAppModule

Certaines personnes qui utilisent Lazy loadingvont tomber sur cette page.

Voici ce que j'ai fait pour corriger 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 { }

La solution est très simple. Recherchez des *.module.tsfichiers et des déclarations de commentaires. Dans votre cas, recherchez le addevent.module.tsfichier et supprimez / commentez une ligne ci-dessous:

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

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

Soyez heureux...

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

cas: 1 cette erreur se produira, une fois que vous importez le composant dans un module et une fois que vous importez dans les sous-modules, cela se produira.

cas: 2 Importez un composant au mauvais endroit et supprimez-le et remplacez-le dans le module Correct, cette fois-là, il est considéré comme un problème de cache de service ng. Besoin d'arrêter le projet et de recommencer -do ng serve, cela fonctionnera comme prévu.

Si vos pages sont créées à l'aide de l'interface de ligne de commande, il crée un fichier avec nom de fichier.module.ts, vous devez enregistrer votre nom de fichier.module.ts dans le tableau des importations du fichier app.module.ts et ne pas insérer cette page dans le tableau des 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,
],

Ce module est ajouté automatiquement lorsque vous exécutez la commande ionique. Cependant, ce n'est pas nécessaire. Une solution alternative consiste donc à supprimer add-event.module.ts du projet.

Vous pouvez simplement essayer cette solution (pour Ionic 3)

Dans mon cas, cette erreur se produit lorsque j'appelle une page en utilisant le code suivant

 this.navCtrl.push("Login"); // Bug

Je viens de supprimer les citations comme celles-ci et j'ai également importé cette page en haut du fichier que j'ai utilisé, appelez la page de connexion

this.navCtrl.push (Connexion); // Correct

Je ne peux pas expliquer la différence pour le moment puisque je suis un développeur de niveau débutant

Depuis la version Ionic 3.6.0, chaque page générée avec Ionic-CLI est désormais un module angulaire. Cela signifie que vous devez ajouter le module à vos importations dans le fichiersrc/app/app.module.ts

import { BrowserModule } from "@angular/platform-browser";
import { ErrorHandler, NgModule } from "@angular/core";
import { IonicApp, IonicErrorHandler, IonicModule } from "ionic-angular";
import { SplashScreen } from "@ionic-native/splash-screen";
import { StatusBar } from "@ionic-native/status-bar";;

import { MyApp } from "./app.component";
import { HomePage } from "../pages/home/home"; // import the page
import {HomePageModule} from "../pages/home/home.module"; // import the module

@NgModule({
  declarations: [
    MyApp,
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    HomePageModule // declare the module
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage, // declare the page
  ],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: ErrorHandler, useClass: IonicErrorHandler },
  ]
})
export class AppModule {}

Pour surpasser cette erreur, vous devez commencer par supprimer toutes les importations de app.module.ts et avoir quelque chose comme ceci:

            import { BrowserModule } from '@angular/platform-browser';
            import { HttpClientModule } from '@angular/common/http';
            import { ErrorHandler, NgModule } from '@angular/core';
            import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
            import { SplashScreen } from '@ionic-native/splash-screen';
            import { StatusBar } from '@ionic-native/status-bar';

            import { MyApp } from './app.component';


            @NgModule({
              declarations: [
                MyApp
              ],
              imports: [
                BrowserModule,
                HttpClientModule,
                IonicModule.forRoot(MyApp)
              ],
              bootstrap: [IonicApp],
              entryComponents: [
                MyApp
              ],
              providers: [
                StatusBar,
                SplashScreen,
                {provide: ErrorHandler, useClass: IonicErrorHandler}
              ]
            })
            export class AppModule {}

Ensuite, modifiez votre module de pages, comme ceci:

            import { NgModule } from '@angular/core';
            import { IonicPageModule } from 'ionic-angular';
            import { HomePage } from './home';

            @NgModule({
              declarations: [
                HomePage,
              ],
              imports: [
                IonicPageModule.forChild(HomePage),
              ],
              entryComponents: [HomePage]
            })
            export class HomePageModule {}

Ajoutez ensuite l'annotation de IonicPage avant l'annotation des composants de toutes les pages:

import { IonicPage } from 'ionic-angular';

@IonicPage()
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})

Ensuite, modifiez votre type rootPage en chaîne et supprimez les importations de pages (s'il y en a dans votre composant d'application)

rootPage: string = 'HomePage';

Ensuite, la fonction de navigation devrait être comme ceci:

 /**
* Allow navigation to the HomePage for creating a new entry
*
* @public
* @method viewHome
* @return {None}
*/
 viewHome() : void
 {
  this.navCtrl.push('HomePage');
 }

Vous pouvez trouver la source de cette solution ici: Le composant fait partie de la déclaration de 2 modules

Résolu - Le composant fait partie de la déclaration de 2 modules

1. Supprimer le fichier pagename.module.ts dans l'application
2. Supprimer l'importation {IonicApp} de 'ionic-angular'; dans le fichier pagename.ts
3. Supprimer @IonicPage () du fichier pagename.ts

Et exécutez la commande ionic cordova build android --prod --release son fonctionnement dans mon application

J'ai eu le même problème. Assurez-vous simplement de supprimer toutes les occurrences de module dans les «déclarations» mais dans AppModule.

A travaillé pour moi.

Solution simple,

Accédez à votre app.module.tsfichier et à remove/commenttout ce qui est lié add_event. Il n'est pas nécessaire d'ajouter des composants aux App.module.ts qui sont générés par le ionic clicar il crée un module séparé pour les composants appeléscomponents.module.ts .

Il a les importations de composants de module nécessaires

Comme l'erreur indique de supprimer le module AddEvent de la racine si votre page / composant a déjà un fichier de module ionique, sinon supprimez-le simplement de l'autre / page / composant enfant, à la fin de la page / le composant doit être présent dans un seul fichier de module importé s'il doit être utilisé.

Plus précisément, vous devez ajouter un module racine si nécessaire dans plusieurs pages et si dans des pages spécifiques, conservez-le sur une seule page.

J'ai accidentellement créé mon propre composant avec le même nom que le composant d'une bibliothèque.

Lorsque j'ai utilisé mon IDE pour importer automatiquement la bibliothèque du composant, j'ai choisi la mauvaise bibliothèque.

Par conséquent, cette erreur se plaignait, que je re-déclarais le composant.

J'ai corrigé en important à partir du code de mon propre composant, au lieu de la bibliothèque.

Je pourrais aussi corriger en nommant différemment: éviter toute ambiguïté.

Dans ce scénario, créez un autre module partagé dans lequel importer tous les composants qui sont utilisés dans plusieurs modules.

En composant partagé. déclarer ces composants. Et puis importez le module partagé dans appmodule ainsi que dans un autre module auquel vous souhaitez accéder. Cela fonctionnera à 100%, je l'ai fait et je l'ai fait fonctionner.

@NgModule({
    declarations: [HeaderComponent, NavigatorComponent],
    imports: [
        CommonModule, BrowserModule,
        AppRoutingModule,
        BrowserAnimationsModule,
        FormsModule,
    ] 
})
export class SharedmoduleModule { }
const routes: Routes = [
{
    path: 'Parent-child-relationship',
    children: [
         { path: '', component: HeaderComponent },
         { path: '', component: ParrentChildComponent }
    ]
}];
@NgModule({
    declarations: [ParrentChildComponent, HeaderComponent],
    imports: [ RouterModule.forRoot(routes), CommonModule, SharedmoduleModule ],
    exports: [RouterModule]
})
export class TutorialModule {
}
imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    FormsModule,
    MatInputModule,
    MatButtonModule,
    MatSelectModule,
    MatIconModule,
    SharedmoduleModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

J'ai eu la même erreur mais j'ai découvert que lorsque vous importez un AddEventModule, vous ne pouvez pas importer un AddEventmodule car il présenterait une erreur dans ce cas.