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

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

いずれかの宣言を削除する必要があることは理解していますが、方法がわかりません。

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

から宣言を削除します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

を使用して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 { }

解決策は非常に簡単です。*.module.tsファイルとコメント宣言を検索します。あなたの場合はaddevent.module.tsファイルを見つけて、下の1行を削除/コメントしてください：

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

このソリューションは、ionic-cliによって生成されたページのionic 3で機能し、ionic serveおよびionic cordova build android --prod --releaseコマンドの両方で機能します！

幸せになる...

IN Angular4。このエラーはng serveランタイムキャッシュの問題と見なされます。

case：1このエラーは、コンポーネントを1つのモジュールにインポートしてから、もう一度サブモジュールにインポートすると発生します。

case：2 1つのコンポーネントを間違った場所にインポートし、正しいモジュールで削除して置き換えます。このとき、ngはキャッシュの問題を考慮します。プロジェクトを停止してサービスを開始する必要があります。期待どおりに機能します。

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

このモジュールは、ionicコマンドを実行すると自動的に追加されます。しかし、それは必要ではありません。したがって、代替ソリューションは、プロジェクトからadd-event.module.tsを削除することです。

あなたはこのソリューションを試すことができます（Ionic 3用）

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

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

私は次のような引用符を削除し、ログインページを呼び出すために使用したファイルの上部にそのページをインポートしました

this.navCtrl.push（Login）; //正しい

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

Ionic 3.6.0リリース以降、Ionic -CLIを使用して生成されたすべてのページは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 {}

このエラーを超えるには、まず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つのモジュールの宣言の一部です

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

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

そして、コマンドを実行したイオンコルドバビルドアンドロイド--prod --release 私のアプリでその作業を

同じ問題がありました。「宣言」でAppModule以外のすべてのモジュールを必ず削除してください。

私のために働いた。

簡単な修正、

app.module.tsファイルとにremove/commentバインドされてadd_eventいるすべてに移動します。App.module.tによって生成されるにコンポーネントを追加する必要はありません。これは、ionic cliというコンポーネント用に別のモジュールを作成するためですcomponents.module.ts。

必要なモジュールコンポーネントのインポートがある

エラーがルートからモジュールAddEventを削除するように言っているので、ページ/コンポーネントがすでに他の/子ページ/コンポーネントから削除されていない場合、イオンモジュールファイルがすでにある場合、最後のページ/コンポーネントは1つのモジュールファイルにのみ存在する必要があります使用する場合はインポートされます。

具体的には、必要に応じて複数のページでルートモジュールを追加し、特定のページでそれを1ページのみに保持する必要があります。

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

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

したがって、このエラーは、私がコンポーネントを再宣言していることを訴えていました。

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

別の名前を付けて修正することもできます。あいまいさを避けます。

このシナリオでは、複数のモジュールで使用されているすべてのコンポーネントをインポートする別の共有モジュールを作成します。

共有コンポーネント内。それらのコンポーネントを宣言します。そして、共有モジュールをappmoduleだけでなく、アクセスしたい他のモジュールにもインポートします。100％動作します。これを実行して動作させました。

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

同じエラーが発生しましたが、をインポートするとAddEventModule、AddEventこの場合はエラーになるため、モジュールをインポートできないことがわかりました。