angular - modulos - El componente es parte de la declaración de 2 módulos.

que es un componente en angular

Question

Intento construir una aplicación iónica 2. Cuando pruebo la aplicación en el navegador con servicio iónico o la ejecuto en un emulador, todo funciona bien.

Pero cuando trato de construirlo cada vez que aparece el error

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

mi AppModule es

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 {}

y mi add-event.module.ts es

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 {}

Entiendo que tengo que eliminar una de las declaraciones, pero no sé cómo.

Si elimino la declaración de AppModule, aparece un error que indica que no se encuentra la página de inicio de sesión, mientras se ejecuta el servicio iónico

Answer 1

Puede probar esta solución (para Ionic 3)

En mi caso, este error ocurre cuando llamo a una página usando el siguiente código

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

Acabo de eliminar las citas como la siguiente y también importé esa página en la parte superior del archivo que utilicé llamar a la página de inicio de sesión

this.navCtrl.push (Iniciar sesión); // correcto

No puedo explicar la diferencia en este momento ya que soy un desarrollador de nivel principiante

Answer 2

Accidentalmente creé mi propio componente con el mismo nombre que el componente de una biblioteca.

Cuando utilicé mi IDE para importar automáticamente la biblioteca para el componente, elegí la biblioteca incorrecta.

Por lo tanto, este error se quejaba de que estaba volviendo a declarar el componente.

Lo solucioné importando desde el código de mi propio componente, en lugar de la biblioteca.

También podría solucionarlo nombrando de manera diferente: evitar la ambigüedad.

Answer 3

Algunas personas que usan la Lazy loading van a tropezar con esta página.

Esto es lo que hice para arreglar compartir una directiva.

1. crear un nuevo módulo compartido

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 { }

Luego en app.module y sus otros módulos

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

Answer 4

Como el error dice que elimine el módulo AddEvent de la raíz si su Página / Componente ya tiene un archivo de módulo iónico, si no solo elimínelo de la otra / página / componente secundario, al final la página / componente debe estar presente en un solo archivo de módulo importado si se va a utilizar.

Específicamente, debe agregar un módulo raíz si es necesario en varias páginas y si en páginas específicas lo mantiene en una sola página.

Answer 5

Desde el lanzamiento de Ionic 3.6.0 , cada página generada con Ionic-CLI es ahora un módulo angular. Esto significa que debe agregar el módulo a sus importaciones en el archivo 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 {}

Answer 6

Elimine la declaración de AppModule, pero actualice la configuración de AppModule para importar su 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 {}

También,

Tenga en cuenta que es importante que su AddEventModule exporte el componente AddEvent si desea usarlo fuera de ese módulo. Afortunadamente, ya lo tiene configurado, pero si se omitiera, habría obtenido un error si intentara usar el componente AddEvent en otro componente de su AppModule

Answer 7

Este módulo se agrega automáticamente cuando ejecuta un comando iónico. Sin embargo, no es necesario. Entonces, una solución alternativa es eliminar add-event.module.ts del proyecto.

Answer 8

IN Angular 4. Este error se considera como un problema de memoria caché en tiempo de ejecución.

caso: 1 se producirá este error, una vez que importe el componente en un módulo y vuelva a importar en submódulos.

caso: 2 Importe un componente en el lugar incorrecto y elimínelo y reemplácelo en el módulo correcto. Esa vez se considera un problema de memoria caché. Necesita detener el proyecto e iniciar -do nuevamente ng servir, funcionará como se esperaba.

Answer 9

La solución es muy simple. Encuentra archivos *.module.ts y declaraciones de comentarios. En su caso, busque el archivo addevent.module.ts y elimine / comente una línea a continuación:

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

Esta solución funcionó en ionic 3 para páginas generadas por ionic-cli y funciona tanto en el ionic serve ionic cordova build android --prod --release como en el ionic cordova build android --prod --release .

Sea feliz...

Answer 10

Para superar este error, debe comenzar eliminando todas las importaciones de app.module.ts y tener algo como esto:

 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 {}

Luego edite su módulo de páginas, así:

 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 {}

Luego agregue la anotación de IonicPage antes de la anotación de componentes de todas las páginas:

import { IonicPage } from ''ionic-angular'';
@IonicPage()
@Component({
selector: ''page-home'',
templateUrl: ''home.html''
})

Luego edite su tipo de rootPage para que sea una cadena y elimine las importaciones de páginas (si hay alguna en el componente de su aplicación)

rootPage: string = ''HomePage'';

Entonces la función de navegación debería ser así:

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

Puede encontrar la fuente de esta solución aquí: el componente es parte de la declaración de 2 módulos

Answer 11

Si sus páginas se crean usando CLI, entonces crea un archivo con filename.module.ts, entonces debe registrar su filename.module.ts en el conjunto de importaciones en el archivo app.module.ts y no insertar esa página en el conjunto de declaraciones .

p.ej.

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,
],

Answer 12

Solución simple

Vaya a su archivo app.module.ts y remove/comment todo lo que se une con add_event . No hay necesidad de agregar componentes a App.module.t s que son generados por el ionic cli porque crea un módulo separado para componentes llamados components.module.ts .

Tiene las importaciones de componentes de módulo necesarias

Answer 13

Tuve el mismo error pero descubrí que cuando importas un AddEventModule , no puedes importar un módulo AddEvent ya que presentaría un error en este caso.

Answer 14

Tuve el mismo problema Simplemente elimine cada aparición de módulo en "declaraciones" pero AppModule.

Trabajó para mi.

Answer 15

Resuelto: el componente es parte de la declaración de 2 módulos

1. Eliminar el archivo pagename.module.ts en la aplicación
2. Eliminar import {IonicApp} de ''ionic-angular''; en el archivo pagename.ts
3. Eliminar @IonicPage () del archivo pagename.ts

Y ejecute el comando ionic cordova build android --prod --release está funcionando en mi aplicación