programing

구성 요소는 Angular에서 두 모듈 선언의 일부입니다.

javajsp 2023. 6. 23. 21:45

구성 요소는 Angular에서 두 모듈 선언의 일부입니다.

나는 commonmod.component.ts라는 구성 요소를 만들었는데, 이 구성 요소는 두 개의 다른 모듈(abc와 def)에 포함되어 있습니다.

abc.s.s.

import { commonmod } from '../commonmod/commonmod.component';
@NgModule({
  declarations: [
    commonmod
  ]
})

디프.

import { commonmod } from '../commonmod/commonmod.component';
@NgModule({
  declarations: [
    commonmod
  ]
})

abc 모듈의 한 페이지를 def 모듈의 다른 페이지로 리디렉션하면 다음 오류가 발생합니다.

오류 오류:잡히지 않음(약속):오류: type commonmod는 abc 및 def! 두 모듈의 선언의 일부입니다.commonmod를 abc와 def를 가져오는 상위 모듈로 이동하는 것을 고려해주시기 바랍니다.또한 내보내고 공통 모드를 포함하는 새 NgModule을 생성한 후 해당 NgModule을 abc 및 def로 가져올 수 있습니다.오류: type commonmod는 abc와 def 두 모듈 선언의 일부입니다!common mod를 abc와 def를 가져오는 상위 모듈로 이동하는 것을 고려해주시기 바랍니다.또한 공통 모드를 포함하여 내보내고 해당 NgModule을 abc 및 def로 가져오는 새 NgModule을 생성할 수 있습니다.

구성 요소는 하나의 모듈에서만 선언할 수 있습니다.둘 이상의 모듈에서 선언하려고 하면 이 오류가 발생합니다.

오류: 유형...는 2개 이상의 모듈 선언의 일부입니다.

이 문제에 대한 해결책은 매우 간단합니다.두 개 이상의 모듈에서 구성 요소를 사용해야 하는 경우 해당 구성 요소를 선언한 모듈의 내보내기 배열에 추가합니다.

예를 들어 모듈 테스트 모듈에 선언된 그리팅 구성 요소라는 구성 요소가 있으며 AppModule에 선언된 AppComponent에서 이 구성 요소를 사용하려고 합니다.다음과 같이 테스트 모듈의 내보내기 배열에 간단히 추가하겠습니다.

import {NgModule} from '@angular/core';
import {GreetingComponent} from './greeting.component';
@NgModule({
declarations:[GreetingComponent],
exports:[GreetingComponent]
})
export class TestModule
{
}

이제 AppModule이 TestModule을 가져옴에 따라 모든 방법으로 테스트 모듈의 내보내기 배열에 있는 구성 요소, 지침, 파이프 등을 AppModule에서 자동으로 사용할 수 있는지 여부를 구성합니다.

AppModule.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import {TestModule} from './test.module';
import { AppComponent } from './app.component';
@NgModule({
  imports:      [ BrowserModule, FormsModule, TestModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

이제 AppComponent에서 GreetingsComponent를 간단히 사용할 수 있습니다.

  <greetings></greetings>

여기서 일하는 Stack Blitz.

건배.

하나 이상의 모듈에 구성 요소를 선언할 수 없습니다.두 모듈 모두 필요한 경우 세 번째 모듈에서 구성 요소를 선언/내보내고 abc 및 def에서 이 구성 요소를 가져와야 합니다.

@NgModule({
  imports:      [ MainModule ]
})
export class AbcModule { }

@NgModule({
  imports:      [ MainModule ]
})
export class DefModule { }

@NgModule({
  declarations: [ CommonMod ],
  exports:    [ CommonMod ]
})
export class MainModule { }

HMR(핫 모듈 교체)을 Angular 9+와 함께 사용하는 경우에도 이 문제가 발생할 수 있습니다.Angular 팀이 작업 중입니다.

자세한 내용 및 업데이트는 이 문제를 참조하십시오.

언급URL : https://stackoverflow.com/questions/53955873/component-is-part-of-the-declarations-of-2-modules-in-angular