Komponent jest częścią deklaracji 2 modułów

Próbuję zbudować aplikację ionic 2. Kiedy próbuję aplikację w przeglądarce z obsługą jonową lub uruchamiam ją na emulatorze, wszystko działa dobrze.

Ale kiedy próbuję to zbudować za każdym razem błąd

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

mój AppModule to

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

a mój add-event.module.ts to

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

Rozumiem, że muszę usunąć jedną z deklaracji, ale nie wiem jak.

Jeśli usunę deklarację z AppModule, pojawi się błąd, że strona logowania nie została znaleziona podczas uruchamiania usługi ionic

Usuń deklarację z AppModule, ale zaktualizuj AppModulekonfigurację, aby zaimportować plik 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 {}

Również,

Zauważ, że ważne jest, aby AddEventModulewyeksportować AddEventkomponent, jeśli chcesz go używać poza tym modułem. Na szczęście masz już to skonfigurowane, ale gdyby zostało pominięte, wystąpiłby błąd, gdybyś próbował użyć AddEventkomponentu w innym komponencie swojegoAppModule

Niektóre osoby używające Lazy loadingnatkną się na tę stronę.

Oto co zrobiłem, aby ustalić dzieląc się dyrektywę .

1. utwórz nowy współdzielony moduł

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

Następnie w module app.module i innych modułach

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

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

Rozwiązanie jest bardzo proste. Znajdź *.module.tspliki i komentarze do deklaracji. W twoim przypadku znajdź addevent.module.tsplik i usuń / skomentuj jedną linię poniżej:

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

To rozwiązanie działa w jonowej 3 dla stron, które generowane przez CLI-jonowego i działa w obu ionic servei ionic cordova build android --prod --releasepoleceń!

Bądź szczęśliwy...

W Angular 4. Ten błąd jest uważany za problem z pamięcią podręczną czasu wykonania usługi ng.

przypadek: 1 ten błąd wystąpi, po zaimportowaniu komponentu w jednym module i ponownym imporcie w podmodułach.

przypadek: 2 Zaimportuj jeden komponent w niewłaściwe miejsce i usuń i zastąp w odpowiednim module, tym razem rozważ problem z pamięcią podręczną. Musisz zatrzymać projekt i rozpocząć -ponownie służyć, będzie działać zgodnie z oczekiwaniami.

Jeśli twoje strony są tworzone za pomocą CLI, to tworzy plik o nazwie filename.module.ts, a następnie musisz zarejestrować nazwę pliku.module.ts w tablicy importów w pliku app.module.ts i nie wstawiać tej strony do tablicy deklaracji .

na przykład.

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

Ten moduł jest dodawany automatycznie po uruchomieniu polecenia ionic. Jednak nie jest to konieczne. Dlatego alternatywnym rozwiązaniem jest usunięcie add-event.module.ts z projektu.

Możesz po prostu wypróbować to rozwiązanie (dla Ionic 3)

W moim przypadku ten błąd występuje, gdy wywołuję stronę przy użyciu następującego kodu

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

Właśnie usunąłem cudzysłowy, takie jak poniższe, a także zaimportowałem tę stronę na górze pliku, którego użyłem, nazywając stronę logowania

this.navCtrl.push (Zaloguj się); // Dobrze

W tej chwili nie mogę wyjaśnić różnicy, ponieważ jestem programistą na poziomie początkującym

Od wydania Ionic 3.6.0 każda strona wygenerowana przy użyciu Ionic-CLI jest teraz modułem Angular. Oznacza to, że musisz dodać moduł do importu w plikusrc/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 {}

Aby obejść ten błąd, powinieneś zacząć od usunięcia wszystkich importów pliku app.module.ts i mieć coś takiego:

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

Następnie edytuj moduł swoich stron, na przykład:

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

Następnie dodaj adnotację IonicPage przed adnotacją komponentu wszystkich stron:

import { IonicPage } from 'ionic-angular';

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

Następnie zmień typ rootPage, aby był ciągiem i usuń importowanie stron (jeśli takie istnieją w składniku aplikacji)

rootPage: string = 'HomePage';

Wtedy funkcja nawigacji powinna wyglądać następująco:

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

Źródło tego rozwiązania znajdziesz tutaj: Komponent jest częścią deklaracji 2 modułów

Rozwiązany - Komponent jest częścią deklaracji 2 modułów

1. Usuń plik pagename.module.ts w aplikacji
2. Usuń import {IonicApp} z 'ionic-angular'; w pliku nazwa_strony.ts
3. Usuń @IonicPage () z pliku pagename.ts

I uruchom polecenie ionic cordova build android --prod --release its Working in my app

Miałem ten sam problem. Po prostu upewnij się, że usunąłeś każde wystąpienie modułu w „deklaracjach” oprócz AppModule.

Pracował dla mnie.

Prosta naprawa,

Przejdź do swojego app.module.tspliku i remove/commentwszystkiego, co się z nim wiąże add_event. Nie ma potrzeby dodawania komponentów do App.module.ts, które są generowane przez program, ionic cliponieważ tworzy osobny moduł dla komponentów tzw components.module.ts.

Zawiera potrzebne importy komponentów modułu

Ponieważ błąd mówi, aby usunąć moduł AddEvent z katalogu głównego, jeśli twoja strona / komponent ma już plik modułu jonowego, jeśli nie tylko usunąć go z innej / podrzędnej strony / komponentu, na końcu strona / komponent powinien być obecny tylko w jednym pliku modułu importowane, jeśli mają być używane.

W szczególności należy dodać moduł główny, jeśli jest to wymagane na wielu stronach, a jeśli na określonych stronach, zachować go tylko na jednej stronie.

Przypadkowo utworzyłem własny komponent o tej samej nazwie co komponent biblioteki.

Kiedy użyłem mojego IDE do automatycznego importu biblioteki dla komponentu, wybrałem niewłaściwą bibliotekę.

Dlatego ten błąd narzekał, że ponownie deklarowałem komponent.

Naprawiłem, importując z kodu własnego komponentu zamiast z biblioteki.

Mogę również naprawić, używając innych nazw: unikaj niejednoznaczności.

W tym scenariuszu utwórz inny udostępniony moduł, importując cały komponent, który jest używany w wielu modułach.

We współdzielonym komponencie. zadeklaruj te komponenty. A następnie zaimportuj współdzielony moduł w appmodule, a także w innym module, do którego chcesz uzyskać dostęp. Będzie działać w 100%, zrobiłem to i sprawiłem, że działa.

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

Wystąpił ten sam błąd, ale odkryłem, że podczas AddEventModuleimportowania AddEventmodułu nie można zaimportować modułu, ponieważ w tym przypadku wystąpiłby błąd.