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 ionic serve ou que je la lance sur un émulateur, tout fonctionne correctement.
Mais quand j'essaie 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 retirer une des déclarations, mais je ne sais pas comment.
Si je supprime la déclaration de AppModule, un message d'erreur indiquant que la page de connexion est introuvable s'affiche lors de l'exécution du service ionique
Supprimez la déclaration de AppModule, mais mettez à jour la configuration de 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 {}
Également,
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 une erreur si vous essayiez d'utiliser le composant AddEvent dans un autre composant de votre AppModule.
Certaines personnes utilisant Lazy loading vont tomber sur cette page.
Voici ce que j'ai fait pour résoudre le partage d'une directive.
- 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 { }
La solution est très simple. Trouver des fichiers *.module.ts et des 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é dans ionic 3 pour les pages générées par ionic-cli et fonctionne à la fois dans les commandes ionic serve et ionic cordova build Android --prod --release!
Soyez heureux...
Si vos pages sont créées à l'aide de la CLI, un fichier avec filename.module.ts est créé, puis vous devez enregistrer votre filename.module.ts dans le tableau imports dans le fichier app.module.ts N'insérez pas 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 i.e. imports
],
imports: [
BrowserModule,
HttpModule,
IonicModule.forRoot(MyApp, {
scrollPadding: false,
scrollAssist: true,
autoFocusAssist: false,
tabsHideOnSubPages:false
}),
LoginPageModule,
],
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 que vous 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, le problème est considéré comme un cache de serveur. Besoin d'arrêter le projet et de recommencer à servir, cela fonctionnera comme prévu.
Depuis Ionic 3.6.0 release, chaque page générée à l’aide de Ionic-CLI est désormais un module angulaire . Cela signifie que vous devez ajouter 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 {}
Ce module est ajouté automatiquement lorsque vous exécutez la commande ionique. Cependant ce n'est pas nécessaire. Une autre solution consiste donc à supprimer add-event.module.ts du projet.
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 ci-dessous et aussi importer cette page en haut du fichier que j'ai utilisé appeler la page de connexion
this.navCtrl.Push (Connexion); // Correct
Je ne peux pas expliquer la différence en ce moment puisque je suis un développeur de niveau débutant
Pour surpasser cette erreur, commencez par supprimer toutes les importations d’app.module.ts.
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 les annotations d'IonicPage avant les annotations des composants de toutes les pages:
import { IonicPage } from 'ionic-angular';
@IonicPage()
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
Puis modifiez votre type rootPage en tant que chaîne et supprimez les importations de pages (s'il en existe 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 le 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
- Supprimer le fichier pagename.module.ts dans l'application
- Supprimer import {IonicApp} de 'ionic-angular'; dans le fichier pagename.ts
- Supprimez @IonicPage () du fichier pagename.ts
Et lancez la commande ionic cordova build Android --prod --release Sa fonctionne dans mon application
J'ai eu le même problème. Il suffit de faire supprimer chaque occurrence de module dans les "déclarations" sauf AppModule.
Travaillé pour moi.
in this scenario.
create another shared module in that import all the component which is being used in multiple module.
in shared component. declare those component.
and then import sharedmodule in appmodule as well as in other module where you want to access. it will work 100% , I did this and got it working.
@NgModule({
declarations: [HeaderComponent,NavigatorComponent],
imports: [
CommonModule, BrowserModule,
AppRoutingModule,
BrowserAnimationsModule,
FormsModule,
]
})
export class SharedmoduleModule { }
const routes: Routes = [
{
path: 'Parrent-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 accidentellement créé le composant le mien avec le même nom comme 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 du fait que je re-déclarais} le composant.
J'ai corrigé en important depuis le code de mon propre composant, au lieu de la bibliothèque.
Je pourrais aussi corriger en nommant différemment: éviter les ambiguïtés.
Comme l'erreur dit de supprimer le module AddEvent de la racine si votre page/composant est déjà un fichier de module ionique, sinon simplement de le supprimer de l'autre page/composant/child, à la fin de la page/du composant doit figurer dans un seul fichier de module importé s'il doit être utilisé.
Spécifiquement, 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.
Solution 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'ajouter des composants au App.module.ts générés par le ionic cli car il crée un module distinct pour les composants appelé components.module.ts.
Il a les importations de composants de module nécessaires