El componente es parte de la declaración de 2 módulos

117

Intento crear una aplicación ionic 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 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 ejecuto ionic serve

Stevetro
fuente

Respuestas:

192

Elimine la declaración de AppModule, pero actualice la AppModuleconfiguración 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 AddEventModuleexporte el AddEventcomponente si desea utilizarlo fuera de ese módulo. Afortunadamente, ya lo tiene configurado, pero si se omitió, habría recibido un error si intentó usar el AddEventcomponente en otro componente de suAppModule

bucear
fuente
Hola, gracias por tu respuesta, ¿tengo que cambiar también mis importaciones a {AddEventModule} desde '../pages/add-event/add-event.module' ;? Porque tanto, con y sin la importación, se arroja un error
Stevetro
en AppModule, debe incluir una importación adicional para AddEventModule. Actualizaré la respuesta
snorkpete
Si agrego todo, aparece el error "Se encontró un error al resolver los valores de los símbolos de forma estática. No se pudo resolver add-event.module en relación con la resolución del símbolo AddModule"
Stevetro
1
¿En qué carpeta está el archivo 'add-event.module.ts'?
Esnórquel
En la misma carpeta que AddEvents, utilicé '' ../pages/add-event/add-event.module '; la página fue generada por ionic g page
Stevetro
48

Algunas personas que usan Lazy loadingse encontrarán con esta página.

Esto es lo que hice para corregir el uso compartido de 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 { }
Tom Stickel
fuente
¿por qué no agregarlo directamente a app.module? O tal vez a un core.module si va a importarlo desde app.module
Dani
6
¡Esto es perfecto! Tengo una adición ... Deberá agregar IonicPageModule.forChild (SharedModule) a las importaciones de ShareModule. Estaba teniendo todo tipo de problemas extraños hasta que hice eso.
Adway Lele
17

La solución es muy sencilla. Encuentre *.module.tsarchivos y declaraciones de comentarios. En su caso, busque el addevent.module.tsarchivo 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 las páginas generadas por ionic-cli y funciona en ambos comandos ionic servey ionic cordova build android --prod --release!

Sea feliz...

EmRa228
fuente
5

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

caso: 1 este error ocurrirá, una vez que importe el componente en un módulo y nuevamente ocurrirá la importación en submódulos.

caso: 2 Importe un componente en el lugar incorrecto y lo eliminó y reemplazó en el módulo correcto, esa vez se considera como un problema de caché de servicio. Es necesario detener el proyecto y comenzar a hacer nuevamente el servicio, funcionará como se esperaba.

gnganpath
fuente
El caso 1 fue el problema en mi caso, ¡RESUELTO!
Prem popatia
5

Si sus páginas se crean mediante CLI, entonces crea un archivo con filename.module.ts, luego debe registrar su filename.module.ts en la matriz de importaciones en el archivo app.module.ts y no inserte esa página en la matriz 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,
],
Sandeep
fuente
1

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

Jaime Yule
fuente
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 comillas como las siguientes y también importé esa página en la parte superior del archivo que usé para 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

sijo vijayan
fuente
5
dejó de usar lazyloading mi amigo google, es importante
George
1

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 archivosrc/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 {}
0x1ad2
fuente
1

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

A continuación, edite el 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 del componente 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

Ouahib Abdallah
fuente
1

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. Elimina la importación {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 - libere su funcionamiento en mi aplicación

Divya
fuente
1

Tuvo el mismo problema. Solo asegúrese de eliminar todas las apariciones de módulo en "declaraciones" excepto AppModule.

Trabajó para mi.

David Vareka
fuente
0

Arreglo simple,

Vaya a su app.module.tsarchivo y remove/commenttodo lo que se vincula con add_event. No es necesario agregar componentes a los App.module.tmensajes de correo electrónico que genera el, ionic cliporque crea un módulo separado para los componentes llamados components.module.ts.

Tiene las importaciones de componentes de módulo necesarias

Kavinda Jayakody
fuente
0

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 simplemente elimínelo de la otra página / componente secundario, en la página final / componente debe estar presente en un solo archivo de módulo importado si se va a utilizar.

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

Kuldeep Kumar
fuente
0

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 del componente, elegí la biblioteca incorrecta.

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

Lo arreglé 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.

El guisante rojo
fuente
0

En este escenario, cree otro módulo compartido para importar todos los componentes que se están utilizando en varios módulos.

En componente compartido. declarar esos componentes. Y luego importe el módulo compartido en appmodule, así como en otro módulo al que desee acceder. Funcionará al 100%, hice esto y lo hice funcionar.

@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 { }
Sarad Vishwakama
fuente
este código ha sido probado en angular y funciona perfectamente
Sarad Vishwakama
-3

Tuve el mismo error, pero descubrí que cuando AddEventModuleimporta un AddEventmódulo , no puede importar un módulo, ya que presentaría un error en este caso.

usuario8470307
fuente