Komponente ist Teil der Deklaration von 2 Modulen

Ich versuche eine ionic 2 App zu erstellen. Wenn ich die App im Browser mit ionischem Aufschlag ausprobiere oder auf einem Emulator starte, funktioniert alles einwandfrei.

Aber wenn ich versuche es jedes Mal zu erstellen, tritt der Fehler auf

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

Mein AppModule ist

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

und meine add-event.module.ts ist

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

Ich verstehe, dass ich eine der Erklärungen entfernen muss, aber ich weiß nicht wie.

Wenn ich die Deklaration aus AppModule entferne, wird der Fehler angezeigt, dass die Anmeldeseite beim Ausführen von ionic serve nicht gefunden wird

Entfernen Sie die Deklaration aus AppModule, aktualisieren Sie jedoch die AppModuleKonfiguration, um Ihre zu importieren 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 {}

Ebenfalls,

Beachten Sie, dass es wichtig ist, dass Sie AddEventModuledie AddEventKomponente exportieren, wenn Sie sie außerhalb dieses Moduls verwenden möchten. Glücklicherweise haben Sie das bereits konfiguriert, aber wenn es weggelassen wurde, hätten Sie eine Fehlermeldung erhalten, wenn Sie versucht hätten, die AddEventKomponente in einer anderen Komponente von Ihnen zu verwendenAppModule

Einige Lazy loadingBenutzer werden über diese Seite stolpern.

Hier ist, was ich getan habe, um das Teilen einer Direktive zu beheben .

1. Erstellen Sie ein neues freigegebenes Modul

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

Dann in app.module und Ihren anderen Modulen

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

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

Die Lösung ist sehr einfach. Suchen Sie nach *.module.tsDateien und Kommentarerklärungen. In Ihrem Fall suchen Sie die addevent.module.tsDatei und entfernen / kommentieren Sie eine Zeile unten:

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

Diese Lösung funktionierte in ionic 3 für Seiten, die von ionic-cli generiert wurden, und funktioniert sowohl in ionic serveals auch in ionic cordova build android --prod --releaseBefehlen!

Sei glücklich...

IN Angular 4. Dieser Fehler wird als Problem mit dem Laufzeitcache angesehen.

Fall: 1 Dieser Fehler tritt auf, sobald Sie die Komponente in ein Modul importieren und erneut in Untermodule importieren.

Fall: 2 Importieren Sie eine Komponente an der falschen Stelle und entfernen und ersetzen Sie sie im richtigen Modul. Dieses Mal wird dies als Problem mit dem Serv-Cache betrachtet. Sie müssen das Projekt stoppen und erneut starten. Es wird wie erwartet funktionieren.

Wenn Ihre Seiten mithilfe der CLI erstellt werden, wird eine Datei mit dem Dateinamen.module.ts erstellt. Anschließend müssen Sie Ihren Dateinamen.module.ts im Import-Array in der Datei app.module.ts registrieren und diese Seite nicht in das Deklarations-Array einfügen .

z.B.

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

Dieses Modul wird automatisch hinzugefügt, wenn Sie den Ionenbefehl ausführen. Es ist jedoch nicht notwendig. Eine alternative Lösung besteht darin, add-event.module.ts aus dem Projekt zu entfernen .

Sie können diese Lösung einfach ausprobieren (für Ionic 3).

In meinem Fall tritt dieser Fehler auf, wenn ich eine Seite mit dem folgenden Code aufrufe

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

Ich habe gerade die Anführungszeichen wie folgt entfernt und auch diese Seite oben in der Datei importiert, die ich verwendet habe, um die Anmeldeseite aufzurufen

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

Ich kann den Unterschied derzeit nicht erklären, da ich ein Anfänger-Entwickler bin

Seit der Veröffentlichung von Ionic 3.6.0 ist jede mit Ionic-CLI generierte Seite ein Angular-Modul. Dies bedeutet, dass Sie das Modul zu Ihren Importen in der Datei hinzufügen müssensrc/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 {}

Um diesen Fehler zu umgehen, sollten Sie zunächst alle Importe von app.module.ts entfernen und Folgendes haben:

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

Bearbeiten Sie als Nächstes Ihr Seitenmodul wie folgt:

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

Fügen Sie dann vor der Komponentenanmerkung aller Seiten eine Annotation von IonicPage hinzu:

import { IonicPage } from 'ionic-angular';

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

Bearbeiten Sie dann Ihren rootPage-Typ als Zeichenfolge und entfernen Sie die Importe von Seiten (falls in Ihrer App-Komponente vorhanden).

rootPage: string = 'HomePage';

Dann sollte die Navigationsfunktion folgendermaßen aussehen:

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

Die Quelle dieser Lösung finden Sie hier: Die Komponente ist Teil der Deklaration von 2 Modulen

Gelöst - Komponente ist Teil der Deklaration von 2 Modulen

1. Entfernen Sie die Datei pagename.module.ts in der App
2. Entfernen Sie den Import {IonicApp} aus 'ionic-angle'. in der Datei pagename.ts
3. Entfernen Sie @IonicPage () aus der Datei pagename.ts

Und führen Sie den Befehl ionic cordova build android --prod --release its Working in meiner App aus

Hatte das gleiche Problem. Stellen Sie einfach sicher, dass alle Vorkommen von Modulen in "Deklarationen" außer AppModule entfernt werden.

Hat für mich gearbeitet.

Einfache Lösung,

Gehen Sie zu Ihrer app.module.tsDatei und remove/commentallem, was mit verbindet add_event. Es ist nicht erforderlich, den App.module.ts Komponenten hinzuzufügen, die von der generiert werden, ionic clida ein separates Modul für die aufgerufenen Komponenten erstellt wirdcomponents.module.ts .

Es verfügt über die erforderlichen Modulkomponentenimporte

Da der Fehler besagt, dass das Modul AddEvent aus dem Stammverzeichnis entfernt werden soll, wenn Ihre Seite / Komponente bereits über eine ionische Moduldatei verfügt, wenn Sie es nicht nur aus der anderen / untergeordneten Seite / Komponente entfernen, sollte die Endseite / Komponente nur in einer Moduldatei vorhanden sein importiert, wenn verwendet werden soll.

Insbesondere sollten Sie das Root-Modul hinzufügen, wenn dies auf mehreren Seiten erforderlich ist, und wenn es auf bestimmten Seiten nur auf einer Seite verbleibt.

Ich habe versehentlich meine eigene Komponente mit demselben Namen wie die Komponente einer Bibliothek erstellt.

Als ich meine IDE zum automatischen Importieren der Bibliothek für die Komponente verwendet habe, habe ich die falsche Bibliothek ausgewählt.

Daher beschwerte sich dieser Fehler, dass ich die Komponente erneut deklarierte .

Ich habe das Problem behoben, indem ich anstelle der Bibliothek aus dem Code meiner eigenen Komponente importiert habe.

Ich könnte das auch durch eine andere Benennung beheben: Vermeiden Sie Mehrdeutigkeiten.

Erstellen Sie in diesem Szenario ein anderes freigegebenes Modul, in dem alle Komponenten importiert werden, die in mehreren Modulen verwendet werden.

In gemeinsam genutzter Komponente. deklarieren Sie diese Komponente. Importieren Sie dann das freigegebene Modul in das App-Modul sowie in ein anderes Modul, auf das Sie zugreifen möchten. Es wird 100% funktionieren, ich habe das getan und es zum Laufen gebracht.

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

Ich hatte den gleichen Fehler, aber ich habe festgestellt, dass Sie beim AddEventModuleImportieren eines AddEventModuls kein Modul importieren können, da dies in diesem Fall einen Fehler darstellen würde.