Komponen adalah bagian dari deklarasi 2 modul

Saya mencoba membuat aplikasi 2 ionik. Saat saya mencoba aplikasi di browser dengan servis ionik atau meluncurkannya di emulator, semuanya berfungsi dengan baik.

Tetapi ketika saya mencoba membangunnya setiap kali terjadi kesalahan

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

AppModule saya adalah

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

dan add-event.module.ts saya adalah

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

Saya memahami bahwa saya harus menghapus salah satu deklarasi, tetapi saya tidak tahu caranya.

Jika saya menghapus deklarasi dari AppModule, saya mendapatkan pesan Error bahwa Halaman Login tidak ditemukan, saat menjalankan servis ionik

Hapus deklarasi dari AppModule, tetapi perbarui AppModulekonfigurasi untuk mengimpor 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 {}

Juga,

Perhatikan bahwa penting bagi Anda untuk AddEventModulemengekspor AddEventkomponen jika Anda ingin menggunakannya di luar modul itu. Untungnya, Anda sudah mengkonfigurasi itu, tetapi jika dihilangkan, Anda akan mendapatkan kesalahan jika Anda mencoba menggunakan AddEventkomponen di komponen lain dari Anda.AppModule

Beberapa orang yang menggunakan Lazy loadingakan menemukan halaman ini.

Berikut adalah apa yang saya lakukan untuk memperbaiki berbagi sebuah direktif .

1. buat modul bersama baru

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

Kemudian di app.module dan modul Anda yang lain

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

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

Solusinya sangat sederhana. Temukan*.module.ts file dan deklarasi komentar. Dalam kasus Anda, temukan addevent.module.tsfile dan hapus / komentar satu baris di bawah ini:

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

Solusi ini bekerja di ionic 3 untuk halaman yang dihasilkan oleh ionic-cli dan bekerja di kedua perintah ionic servedan ionic cordova build android --prod --release!

Berbahagialah...

IN Angular 4. Kesalahan ini dianggap sebagai masalah cache run time.

kasus: 1 kesalahan ini akan terjadi, setelah Anda mengimpor komponen dalam satu modul dan impor dalam sub modul akan terjadi lagi.

case: 2 Impor satu Komponen di tempat yang salah dan dihapus dan diganti dalam modul yang Benar, Saat itu dianggap sebagai masalah cache servis. Perlu Menghentikan proyek dan mulai melakukan servis lagi, Ini akan berfungsi seperti yang diharapkan.

Jika halaman Anda dibuat dengan menggunakan CLI maka itu membuat file dengan namafile.module.ts maka Anda harus mendaftarkan namafile.module.ts Anda di array impor di file app.module.ts dan jangan masukkan halaman itu dalam array deklarasi .

misalnya.

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

Modul ini ditambahkan secara otomatis saat Anda menjalankan perintah ionik. Namun itu tidak perlu. Jadi solusi alternatif adalah menghapus add-event.module.ts dari proyek.

Anda dapat mencoba solusi ini (untuk Ionic 3)

Dalam kasus saya, kesalahan ini terjadi ketika saya memanggil halaman dengan menggunakan kode berikut

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

Saya baru saja menghapus tanda kutip seperti berikut dan juga mengimpor halaman itu di bagian atas file yang saya gunakan untuk memanggil halaman Login

this.navCtrl.push (Masuk); // Benar

Saya tidak dapat menjelaskan perbedaannya saat ini karena saya adalah developer level pemula

Sejak rilis Ionic 3.6.0, setiap halaman yang dibuat menggunakan Ionic-CLI sekarang menjadi modul Angular. Ini berarti Anda telah menambahkan modul ke impor Anda di 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 {}

Untuk mengatasi kesalahan ini, Anda harus mulai dengan menghapus semua impor app.module.ts dan memiliki sesuatu seperti ini:

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

Selanjutnya edit modul halaman Anda, seperti ini:

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

Kemudian tambahkan anotasi IonicPage sebelum anotasi komponen dari semua halaman:

import { IonicPage } from 'ionic-angular';

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

Kemudian edit jenis rootPage Anda menjadi string dan hapus impor halaman (jika ada di komponen aplikasi Anda)

rootPage: string = 'HomePage';

Maka fungsi navigasinya harus seperti ini:

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

Anda dapat menemukan sumber solusi ini di sini: Komponen adalah bagian dari deklarasi 2 modul

Menyelesaikannya - Komponen adalah bagian dari deklarasi 2 modul

1. Hapus file pagename.module.ts di app
2. Hapus impor {IonicApp} dari 'ionic-angular'; dalam file pagename.ts
3. Hapus @IonicPage () dari file pagename.ts

Dan Jalankan perintah ionic cordova build android --prod --lepaskan Bekerja di aplikasi saya

Punya masalah yang sama. Pastikan untuk menghapus setiap kemunculan modul dalam "deklarasi" tetapi AppModule.

Bekerja untuk saya.

Perbaikan sederhana,

Pergi ke app.module.tsfile Anda dan remove/commentsemua yang mengikat add_event. Tidak perlu menambahkan komponen ke App.module.ts yang dihasilkan oleh ionic clikarena itu membuat modul terpisah untuk komponen yang dipanggilcomponents.module.ts .

Ini memiliki impor komponen modul yang dibutuhkan

Seperti yang dikatakan kesalahan untuk menghapus modul AddEvent dari root jika Halaman / Komponen Anda sudah memiliki file modul ionik jika tidak hanya menghapusnya dari / halaman anak / komponen lain, di halaman akhir / komponen harus ada hanya dalam satu file modul diimpor jika akan digunakan.

Secara khusus, Anda harus menambahkan modul root jika diperlukan di beberapa halaman dan jika di halaman tertentu, simpan hanya dalam satu halaman.

Saya tidak sengaja membuat komponen saya sendiri dengan nama yang sama dengan komponen perpustakaan.

Ketika saya menggunakan IDE saya untuk mengimpor pustaka secara otomatis untuk komponen, saya memilih pustaka yang salah.

Oleh karena itu kesalahan ini mengeluh, bahwa saya mendeklarasikan ulang komponen tersebut.

Saya memperbaikinya dengan mengimpor dari kode komponen saya sendiri, bukan dari pustaka.

Saya juga bisa memperbaiki dengan memberi nama berbeda: hindari ambiguitas.

Dalam skenario ini, buat modul bersama lainnya yang mengimpor semua komponen yang digunakan dalam beberapa modul.

Dalam komponen bersama. mendeklarasikan komponen tersebut. Dan kemudian impor modul bersama di appmodule serta di modul lain tempat Anda ingin mengakses. Ini akan berhasil 100%, saya melakukan ini dan membuatnya berfungsi.

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

Saya mengalami kesalahan yang sama tetapi saya menemukan bahwa ketika Anda mengimpor AddEventModule, Anda tidak dapat mengimpor AddEventmodul karena itu akan menimbulkan kesalahan dalam kasus ini.