컴포넌트는 2 개 모듈 선언의 일부입니다.

컴포넌트는 2 개 모듈 선언의 일부입니다.

---

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 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파일을 찾아 아래 한 줄을 제거 / 주석 처리하십시오.

@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 Angular 4.이 오류는 런타임 캐시 문제로 간주됩니다.

case : 1이 오류가 발생하면 한 모듈에서 구성 요소를 가져오고 다시 하위 모듈로 가져 오기가 발생합니다.

case : 2 하나의 구성 요소를 잘못된 위치에 가져오고 올바른 모듈에서 제거 및 교체 한 경우 캐시 문제로 간주됩니다. 프로젝트를 중지하고 서비스를 다시 시작해야합니다. 예상대로 작동합니다.

---

CLI를 사용하여 페이지를 만든 경우 filename.module.ts 가있는 파일을 만든 다음 app.module.ts 파일의 imports 배열에 filename.module.ts 를 등록 하고 해당 페이지를 선언 배열에 삽입하지 않아야합니다. .

예.

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 (로그인); // 맞음

초급 개발자이기 때문에 지금은 차이점을 설명 할 수 없습니다.

---

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 개 모듈 선언의 일부입니다.

---

간단한 수정,

당신의 이동 app.module.ts파일과 remove/comment모든 것을 그 바인딩과 함께 add_event. 라는 구성 요소에 대해 별도의 모듈을 생성하므로에 App.module.t의해 생성 된에 구성 요소를 추가 할 필요가 없습니다 .ionic clicomponents.module.ts

필요한 모듈 구성 요소 가져 오기가 있습니다.

---

Solved it -- Component is part of the declaration of 2 modules

1. Remove pagename.module.ts file in app
2. Remove import { IonicApp } from 'ionic-angular'; in pagename.ts file
3. Remove @IonicPage() from pagename.ts file

And Run the command ionic cordova build android --prod --release its Working in my app

---

Had same problem. Just make remove every occurrence of module in "declarations" but AppModule.

Worked for me.

---

As the error says to remove the module AddEvent from root if your Page/Component is already had ionic module file if not just remove it from the other/child page/component, at the end page/component should be present in only one module file imported if to be used.

Specifically, you should add in root module if required in multiple pages and if in specific pages keep it in only one page.

---

I accidentally created my own component with the same name as a library's component.

When I used my IDE to auto-import the library for the component, I chose the wrong library.

Therefore this error was complaining, that I was re-declaring the component.

I fixed by importing from my own component's code, instead of the library.

I could also fix by naming differently: avoid ambiguity.

---

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 shared module 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: '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 { }

---

I had the same error but I discovered that when you import an AddEventModule, you can't import an AddEvent module as it would present an error in this case.

참고URL : https://stackoverflow.com/questions/43598311/component-is-part-of-the-declaration-of-2-modules