1. ホーム
  2. angular

[解決済み] コンポーネントは2つのモジュールの宣言に含まれる

2022-02-19 18:18:19

質問

ionic 2のアプリを作ろうとしています。 ionic serveを使用してブラウザでアプリを試したり、エミュレータ上でアプリを起動すると、すべて正常に動作します。

しかし、ビルドしようとすると、毎回、エラー

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 create a new NgModule that exports and includes AddEvent then import that NgModule in AppModule and AddEventModule

私のAppModuleは

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

そして、私のadd-event.module.tsは

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

宣言の一つを削除しなければならないことは理解していますが、その方法がわかりません。

AppModuleの宣言を削除すると、ionicサーブの実行中にログインページが見つからないというエラーが発生します。

どうすればいいですか?

から宣言を削除します。 AppModule を更新してください。 AppModule をインポートするために 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 {}

また

ただし AddEventModule をエクスポートします。 AddEvent コンポーネントをそのモジュールの外で使用したい場合に使用します。幸いなことに、あなたはすでにその設定をしていますが、もしこれが省略されていたら AddEvent コンポーネントの別のコンポーネントで AppModule