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

J’essaie de construire une application ionique 2. Lorsque j’essaie l’application dans le navigateur avec le service ionique ou que je la lance sur un émulateur, tout fonctionne bien.

Mais quand j’essaie de le construire chaque fois que 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 une des déclarations, mais je ne sais pas comment.

Si je supprime la déclaration de AppModule, j’obtiens une erreur indiquant que la page de connexion est introuvable, tout en exécutant ionic serve

Supprimez la déclaration de AppModule, mais mettez à jour la configuration AppModule pour 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 exporte le composant AddEvent si vous souhaitez l'utiliser en dehors de ce module. Heureusement, vous l'avez déjà configuré, mais s'il était omis, vous auriez eu une erreur si vous tentiez d'utiliser le composant AddEvent dans un autre composant de votre AppModule.

La solution est très simple. Recherchez les fichiers *.module.ts et les déclarations de commentaires. Dans votre cas, recherchez 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é en mode ionique 3 pour les pages générées par ionic-cli et fonctionne à la fois dans ionic serve ionic cordova build android --prod --release et ionic cordova build android --prod --release !

Soyez heureux...

Si vos pages sont créées à l’aide de l’interface de ligne de commande, il crée un fichier avec filename.module.ts, puis vous devez enregistrer votre nom de fichier.module.ts dans le tableau imports du fichier app.module.ts et ne pas insérer cette page dans le tableau de déclarations. .

par exemple.

 import { LoginPageModule } from '../login/login.module'; declarations: [ MyApp, LoginPageModule,// remove this and add it below array ie imports ], imports: [ BrowserModule, HttpModule, IonicModule.forRoot(MyApp, { scrollPadding: false, scrollAssist: true, autoFocusAssist: false, tabsHideOnSubPages:false }), LoginPageModule, ], 

Vous pouvez juste 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 guillemets comme suit et j’ai également importé cette page en haut du fichier que j’ai utilisé pour appeler la page de connexion.

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

Je ne peux pas expliquer la différence en ce moment depuis que je suis un développeur de niveau débutant

Certaines personnes utilisant le Lazy loading vont 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 { } 

Ensuite, dans app.module et vos autres modules

 import {SharedModule} from '../directives/shared.module' ... @NgModule({ imports: [ SharedModule .... .... ] }) export class WhateverModule { } 

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

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

case: 2 Importez un composant au mauvais endroit et supprimé et remplacé dans le module Correct, le temps qu’il considère comme un problème de cache de service. Besoin d’arrêter le projet et de recommencer -do ng serve, cela fonctionnera comme prévu.

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

Depuis la version Ionic 3.6.0, chaque page générée à l’aide d’Ionic-CLI est désormais un module angular. Cela signifie que vous devez append le module à vos importations dans le fichier src/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 devriez 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, éditez 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 pour qu’il devienne une chaîne et supprimez les importations de pages (s’il y en a dans votre composant d’application)

 rootPage: ssortingng = '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: Composant fait partie de la déclaration de 2 modules

Correction simple

Accédez à votre fichier app.module.ts et remove/comment tout ce qui se lie à add_event . Il n’est pas nécessaire d’append des composants aux App.module.t qui sont générés par le ionic cli car il crée un module distinct pour les composants appelés components.module.ts .

Il a les importations de composants de module nécessaires

Résolu – Composant fait partie de la déclaration de 2 modules

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

Et exécuter la commande ionic cordova build android –prod –release son travail dans mon application

Eu le même problème. Faites simplement supprimer toutes les occurrences du module dans “declarations” mais AppModule.

Travaillé pour moi

Comme le dit l’erreur pour supprimer le module AddEvent de la racine si votre Page / Composant contient déjà un fichier de module ionique sinon le supprimer de la page / du composant other / child, à la fin de la page / composant doit être présent dans un seul fichier de module importé si être utilisé.

Plus précisément, vous devez append le module racine si nécessaire dans plusieurs pages et si, dans des pages spécifiques, le conserver dans une seule page.

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