webentwicklung-frage-antwort-db.com.de

Komponente ist Teil der Deklaration von 2 Modulen

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

Aber wenn ich versuche, es jedes Mal den Fehler aufzubauen

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 mein 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 Deklarationen entfernen muss, aber ich weiß nicht wie.

Wenn ich die Deklaration von AppModule entferne, erhalte ich die Fehlermeldung, dass die Anmeldeseite nicht gefunden wird, während der ionische Dienst ausgeführt wird

71
Stevetro

Entfernen Sie die Deklaration aus AppModule, aktualisieren Sie jedoch die AppModule-Konfiguration, um Ihr AddEventModule zu importieren.

.....
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 AddEventModule die AddEvent-Komponente exportiert, wenn Sie sie außerhalb dieses Moduls verwenden möchten. Glücklicherweise haben Sie das bereits konfiguriert, aber wenn Sie es weglassen, erhalten Sie einen Fehler, wenn Sie versuchen, die AddEvent-Komponente in einer anderen Komponente Ihres AppModule zu verwenden

131
snorkpete

Einige Leute, die Lazy loading verwenden, werden über diese Seite stolpern.

Folgendes habe ich getan, um das Teilen einer Direktive zu reparieren.

  1. erstellen Sie ein neues gemeinsam genutztes 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 Ihre anderen Module  

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

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

Die Lösung ist sehr einfach. Finden Sie *.module.ts-Dateien und Kommentarerklärungen. Suchen Sie in Ihrem Fall addevent.module.ts-Datei und entfernen/kommentieren Sie eine Zeile darunter:

@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 erstellt wurden, und funktioniert sowohl in ionic serve- als auch in ionic cordova build Android --prod --release-Befehlen!

Sei glücklich...

13
EmRa228

Wenn Ihre Seiten mithilfe von CLI erstellt wurden, wird eine Datei mit der Datei Dateiname.module.ts erstellt. Dann müssen Sie Ihr Dateiname.module.ts in Import Array in der Datei app.module.ts registrieren und don 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,
],
5
Sandeep

IN Angular 4. Dieser Fehler wird als Problem mit der Laufzeit des Cache-Cache betrachtet. 

fall: 1 Dieser Fehler tritt auf, sobald Sie die Komponente in ein Modul importieren und erneut in Submodule importiert werden.

fall: 2 Importieren Sie eine Komponente an einem falschen Ort und werden sie entfernt und im Modul „Correct“ ersetzt. Das Projekt muss angehalten und erneut gestartet werden, es funktioniert wie erwartet.

5
gnganpath

Seit dem Release von Ionic 3.6.0 ist jede mit Ionic-CLI erzeugte Seite nun ein Angular-Modul .. _. Das bedeutet, dass Sie das Modul Ihren Importen in der Datei src/app/app.module.ts hinzufügen.

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

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

1
Jaime Yule

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

In meinem Fall tritt dieser Fehler auf, wenn ich eine Seite mithilfe des folgenden Codes aufrufe

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

Ich habe die Anführungszeichen wie folgt entfernt und auch diese Seite oben in der Datei importiert, die ich als Login-Seite bezeichnete

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

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

1
sijo vijayan

Um diesen Fehler zu überwinden, 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 eine Annotation von IonicPage hinzu, bevor Sie die Komponenten von allen Seiten kommentieren:

import { IonicPage } from 'ionic-angular';

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

Bearbeiten Sie dann Ihren rootPage-Typ als Zeichenfolge und entfernen Sie den Import von Seiten (sofern in Ihrer App-Komponente vorhanden)

rootPage: string = 'HomePage';

Dann sollte die Navigationsfunktion so sein:

 /**
* 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: Komponente ist Teil der Deklaration von 2 Modulen

1
Ouahib Abdallah

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

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

Führen Sie den Befehl ionic cordova build Android - prod --release .__ aus

0
Divya

Hatte dasselbe Problem. Entfernen Sie einfach jedes Vorkommen des Moduls in "Deklarationen" außer AppModule.

Arbeitete für mich.

0
David Vareka
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 { }
0

Ich habe versehentlich meine eigene -Komponente mit demselben Namen als Bibliothekskomponente erstellt.

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

Deshalb hat sich dieser Fehler beschwert, dass ich die Komponente neu deklariert habe.

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

Ich könnte es auch beheben, indem ich es anders benenne: vermeide Mehrdeutigkeiten.

0
The Red Pea

Wie der Fehler besagt, dass das Modul AddEvent aus dem Stammverzeichnis entfernt werden soll, wenn Ihre Seite/Komponente bereits über eine ionische Moduldatei verfügte, wenn es nicht einfach aus der anderen/untergeordneten Seite/Komponente entfernt wurde, sollte die End-/Komponente nur in einer Moduldatei vorhanden sein wenn importiert werden.

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

0
kuldeep kumar

Einfache Lösung

Gehen Sie zu Ihrer app.module.ts-Datei und remove/comment alles, was an add_event gebunden ist. Es ist nicht erforderlich, den App.module.ts Komponenten hinzuzufügen, die vom ionic cli generiert werden, da für die Komponenten ein separates Modul mit dem Namen components.module.ts erstellt wird. 

Es hat die benötigten Modulkomponentenimporte

0