[angular] 컴포넌트는 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 {}

또한,

중요합니다. AddEventModuleAddEvent해당 모듈 외부에서 사용하려는 경우 구성 요소를 내보내는 . 다행히도 이미 구성되어 있지만 생략 된 경우 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 serveionic 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 (로그인); // 맞음

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