Il componente fa parte della dichiarazione di 2 moduli

Cerco di creare un'app ionica 2. Quando provo l'app nel browser con servizio ionico o la lancio su un emulatore tutto funziona bene.

Ma quando provo a costruirlo ogni volta l'errore

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

il mio AppModule è

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

e il mio add-event.module.ts è

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

Capisco che devo rimuovere una delle dichiarazioni, ma non so come.

Se rimuovo la dichiarazione da AppModule ricevo un errore che la pagina di accesso non viene trovata, durante l'esecuzione di ionic serve

Rimuovi la dichiarazione da AppModule, ma aggiorna la AppModuleconfigurazione per importare il tuo file 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 {}

Anche,

Nota che è importante che AddEventModuleesporti il AddEventcomponente se vuoi usarlo al di fuori di quel modulo. Fortunatamente, lo hai già configurato, ma se fosse stato omesso, avresti ricevuto un errore se avessi provato a utilizzare il AddEventcomponente in un altro componente del tuoAppModule

Alcune persone che utilizzano Lazy loadingsi imbatteranno in questa pagina.

Ecco cosa ho fatto per correggere la condivisione di una direttiva .

1. creare un nuovo modulo condiviso

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

Quindi in app.module e gli altri moduli

import {SharedModule} from '../directives/shared.module'
...

@NgModule({
   imports: [
       SharedModule
       ....
       ....
 ]
})
export class WhateverModule { }

La soluzione è molto semplice. Trova *.module.tsfile e dichiarazioni di commenti. Nel tuo caso trova il addevent.module.tsfile e rimuovi / commenta una riga sotto:

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

Questa soluzione ha funzionato in ionic 3 per le pagine generate da ionic-cli e funziona in entrambi i comandi ionic servee ionic cordova build android --prod --release!

Siate felici...

IN Angular 4. Questo errore è considerato come un problema della cache di runtime del servizio.

caso: 1 si verificherà questo errore, una volta importato il componente in un modulo e nuovamente importato nei sottomoduli.

caso: 2 Importa un componente nel posto sbagliato, rimuovilo e sostituiscilo nel modulo corretto. È necessario interrompere il progetto e ricominciare a servire, funzionerà come previsto.

Se le tue pagine vengono create utilizzando la CLI, crea un file con filename.module.ts, quindi devi registrare il tuo filename.module.ts nell'array delle importazioni nel file app.module.ts e non inserire quella pagina nell'array delle dichiarazioni .

per esempio.

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

Questo modulo viene aggiunto automaticamente quando esegui il comando ionico. Tuttavia non è necessario. Quindi una soluzione alternativa è rimuovere add-event.module.ts dal progetto.

Puoi semplicemente provare questa soluzione (per Ionic 3)

Nel mio caso, questo errore si verifica quando chiamo una pagina utilizzando il codice seguente

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

Ho appena rimosso le virgolette come le seguenti e ho anche importato quella pagina nella parte superiore del file che ho usato per chiamare la pagina di accesso

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

Non posso spiegare la differenza in questo momento poiché sono uno sviluppatore di livello principiante

Dalla versione Ionic 3.6.0 ogni pagina generata utilizzando Ionic-CLI è ora un modulo Angular. Ciò significa che devi aggiungere il modulo alle tue importazioni nel filesrc/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 {}

Per superare questo errore, dovresti iniziare rimuovendo tutte le importazioni di app.module.ts e avere qualcosa del genere:

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

Quindi modifica il modulo delle pagine, in questo modo:

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

Quindi aggiungi l'annotazione di IonicPage prima dell'annotazione del componente di tutte le pagine:

import { IonicPage } from 'ionic-angular';

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

Quindi modifica il tipo di rootPage in modo che sia stringa e rimuovi le importazioni di pagine (se presenti nel componente dell'app)

rootPage: string = 'HomePage';

Quindi la funzione di navigazione dovrebbe essere così:

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

Puoi trovare la fonte di questa soluzione qui: Component fa parte della dichiarazione di 2 moduli

Risolto - Il componente fa parte della dichiarazione di 2 moduli

1. Rimuovi il file pagename.module.ts nell'app
2. Rimuovi import {IonicApp} da "ionic-angular"; nel file pagename.ts
3. Rimuovi @IonicPage () dal file pagename.ts

Ed esegui il comando ionic cordova build android --prod --release its Working in my app

Ho avuto lo stesso problema. Assicurati solo di rimuovere ogni occorrenza del modulo nelle "dichiarazioni" tranne AppModule.

Ha funzionato per me.

Soluzione semplice,

Vai al tuo app.module.tsfile e remove/commenttutto ciò che è associato a add_event. Non è necessario aggiungere componenti a quelli App.module.tgenerati da ionic cliperché crea un modulo separato per i componenti chiamaticomponents.module.ts .

Ha le importazioni di componenti del modulo necessarie

Poiché l'errore dice di rimuovere il modulo AddEvent dalla root se la tua pagina / componente ha già un file di modulo ionico se non rimuoverlo semplicemente dall'altra / pagina figlio / componente, alla fine pagina / componente dovrebbe essere presente un solo file di modulo importato se da utilizzare.

In particolare, dovresti aggiungere il modulo root se richiesto in più pagine e se in pagine specifiche tenerlo in una sola pagina.

Ho creato accidentalmente il mio componente con lo stesso nome del componente di una libreria.

Quando ho utilizzato il mio IDE per importare automaticamente la libreria per il componente, ho scelto la libreria sbagliata.

Pertanto questo errore si lamentava, che stavo dichiarando nuovamente il componente.

Ho risolto importando dal codice del mio componente, invece che dalla libreria.

Potrei anche risolvere nominando in modo diverso: evitare ambiguità.

In questo scenario, crea un altro modulo condiviso in cui importa tutto il componente che viene utilizzato in più moduli.

In componente condiviso. dichiarare quei componenti. Quindi importa il modulo condiviso in appmodule e in un altro modulo a cui desideri accedere. Funzionerà al 100%, l'ho fatto e l'ho fatto funzionare.

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

Ho avuto lo stesso errore ma ho scoperto che quando importi un AddEventModule, non puoi importare un AddEventmodulo perché in questo caso presenterebbe un errore.