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

119

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

Stevetro
źródło

Odpowiedzi:

193

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

fajka
źródło
hej, dziękuję za odpowiedź, czy muszę również zmienić import na {AddEventModule} z '../pages/add-event/add-event.module' ;? Ponieważ zarówno z importem, jak i bez niego, wyrzucany jest błąd
Stevetro
w AppModule musisz uwzględnić dodatkowy import dla AddEventModule. Zaktualizuję odpowiedź
snorkpete
Jeśli dodać wszystko błąd „Wystąpił błąd rozwiązywania wartości symboli statycznie Nie można rozwiązać dodatek event.module względem rozwiązywania symbol AddModule” jest wyrzucane
Stevetro
1
w jakim folderze znajduje się plik „add-event.module.ts”?
Snorkpete
W tym samym folderze, co AddEvents, więc użyłem '' ../pages/add-event/add-event.module '; strona została wygenerowana przez ionic g page
Stevetro
48

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 { }
Tom Stickel
źródło
dlaczego nie dodać go bezpośrednio do app.module? A może do modułu core.module, jeśli zamierzasz zaimportować go z modułu app.module
Dani,
6
To jest doskonałe! Mam do tego jeden dodatek ... Będziesz musiał dodać IonicPageModule.forChild (SharedModule) do importu ShareModule. Dopóki tego nie zrobiłem, dostawałem różne dziwne problemy.
Adway Lele
17

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...

EmRa228
źródło
5

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.

gnganpath
źródło
Przypadek 1 był problemem w moim przypadku, ROZWIĄZANY!
Prem popatia,
5

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,
],
Sandeep
źródło
1

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.

Jaime Yule
źródło
1

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

sijo vijayan
źródło
5
przestałeś leniwie ładować mój przyjaciel w Google, to ważne
George
1

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 {}
0x1ad2
źródło
1

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

Ouahib Abdallah
źródło
1

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

Divya
źródło
1

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.

David Vareka
źródło
0

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

Kavinda Jayakody
źródło
0

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.

Kuldeep Kumar
źródło
0

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.

Groszek czerwony
źródło
0

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 { }
Sarad Vishwakama
źródło
ten kod został przetestowany pod kątem i działa doskonale
Sarad Vishwakama
-3

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.

user8470307
źródło