web-dev-qa-db-ja.com

コンポーネントは2つのモジュールの宣言の一部です

イオン2アプリを作成しようとします。イオンサーブを使ってブラウザでアプリを試したり、エミュレータで起動したりすると、すべてうまくいきます。

しかし、エラーが発生するたびにビルドしようとすると

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は

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

宣言の1つを削除する必要があることは理解していますが、その方法がわからない。

AppModuleから宣言を削除すると、Ion Serveの実行中にログインページが見つからないというエラーが表示されます。

angularbuildionic2declarationionic3
83
Stevetro

AppModuleから宣言を削除しますが、AddEventModuleをインポートするようにAppModule構成を更新します。

.....
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コンポーネントをエクスポートすることが重要です。幸運にも、あなたはすでにそれを設定しています、しかしもしそれが省略されたなら、あなたがあなたのAppModuleの他のコンポーネントでAddEventコンポーネントを使おうとするならエラーを得たでしょう

147
snorkpete

Lazy loadingを使っている人の中には、このページでつまずく人もいるでしょう。

これは私がディレクティブの共有を修正するためにしたことです。

  1. 新しい共有モジュールを作成する

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

次にapp.moduleと他のモジュールで 

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

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

解決策はとても簡単です。 *.module.tsファイルとコメント宣言を見つけてください。あなたのケースではaddevent.module.tsファイルを見つけて、以下の一行を削除/コメントしてください：

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

この解決方法は、ionic-cliで生成されたページに対してion 3で機能し、ionic serveとionic cordova build Android --prod --releaseの両方のコマンドで機能します。

幸せになる...

14
EmRa228

あなたのページがCLIを使用して作成されるならば、それは filename.module.ts でファイルを作成します、そしてあなたはあなたの filename.module.ts をapp.module.tsファイルのimports配列に登録しなければなりません。そのページを宣言配列に挿入しないでください。

例えば。

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.このエラーは、サービス実行時キャッシュの問題として認識されます。

ケース：1 1つのモジュールにコンポーネントをインポートしてからサブモジュールにインポートすると、このエラーが発生します。

ケース：2 1つのコンポーネントを間違った場所にインポートし、正しいモジュールで取り外して交換します。そのときはキャッシュキャッシュの問題と見なされます。プロジェクトを停止して再度サービスを開始する必要があります。期待通りに動作します。

5
gnganpath

Ionic-CLIを使用して生成されたすべてのページがIonic 3.6.0 releaseからAngularモジュールになりました。これはsrc/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 {}
1
0x1ad2

イオン性コマンドを実行すると、このモジュールは自動的に追加されます。しかしそれは必需品ではありません。そのため、別の解決策はプロジェクトから add-event.module.ts を削除することです。

1
Jaime Yule

あなたはただこの解決策を試すことができます（Ionic 3用）

私の場合、このエラーは、次のコードを使用してページを呼び出すと発生します。

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

私はちょうど次のような引用符を削除し、また私がログインページと呼ぶファイルの一番上にそのページをインポートしました

this.navCtrl.Push（ログイン）; //正しい

私は初心者レベルの開発者なので、現時点では違いを説明できません

1
sijo vijayan

このエラーを超えるには、まずapp.module.tsのすべてのインポートを削除することから始め、次のようにします。

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

次に次のようにページモジュールを編集します。

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

次に、すべてのページのコンポーネント注釈の前にIonicPageの注釈を追加します。

import { IonicPage } from 'ionic-angular';

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

次に、rootPageタイプを文字列に編集し、ページのインポートを削除します（アプリコンポーネントに何かある場合）。

rootPage: string = 'HomePage';

ナビゲーション機能は次のようになります。

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

あなたはここでこの解決策の源を見つけることができます： コンポーネントは2つのモジュールの宣言の一部です

1
Ouahib Abdallah

解決しました - コンポーネントは2つのモジュールの宣言の一部です

  1. アプリからpagename.module.tsファイルを削除します。
  2. 'イオン角度'からインポート{IonicApp}を削除します。 pagename.tsファイル内
  3. Pagename.tsファイルから@IonicPage（）を削除します。

そして、コマンドを実行します イオンコルドバはアンドロイドを構築します - 製品 - リリース 私のアプリでの作業

0
Divya

同じ問題がありました。 AppModuleを除く「宣言」内のすべてのmoduleの出現を削除するだけです。

私のために働きました。

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
Sarad Vishwakama

ライブラリのコンポーネントとして同じ名前を持つ私自身コンポーネントを誤って作成しました。

コンポーネントのライブラリを自動インポートするためにIDEを使用したときに、間違ったライブラリを選択しました。

そのため、このエラーは文句を言っていました、私は再宣言していましたコンポーネント。

ライブラリではなく、自分のコンポーネントのコードからインポートすることで修正しました。

あいまいさを避けるために、別の名前を付けることで解決することもできます。

0
The Red Pea

もしあなたのPage/Componentがもう片方の/ child page/componentからそれを削除していなければ、AddEventモジュールをrootから削除するようにというエラーが表示されるので、最後にpage/componentはただ一つのモジュールファイルに存在するべきです使用する場合はインポートします。

具体的には、複数のページで必要に応じてルートモジュールを追加し、特定のページに1つのページでのみ保存する場合は追加します。

0
kuldeep kumar

簡単な修正

あなたのapp.module.tsファイルとremove/commentにadd_eventで結びついているもの全てに行ってください。 App.module.tによって生成されるionic clisにコンポーネントを追加する必要はありません。なぜなら、それはcomponents.module.tsと呼ばれるコンポーネントのための別々のモジュールを作成するからです。

必要なモジュールコンポーネントのインポートがあります。

0
Kavinda Jayakody