webpack과 함께 Angular 4 템플릿을 사용하고 있으며 구성 요소 (ConfirmComponent)를 사용하려고 할 때이 오류가 발생합니다.
ConfirmComponent에 대한 구성 요소 팩토리를 찾을 수 없습니다. @ NgModule.entryComponents에 추가 했습니까?
구성 요소는 app.module.server.ts
@NgModule({
bootstrap: [ AppComponent ],
imports: [
// ...
],
entryComponents: [
ConfirmComponent,
],
})
export class AppModule { }나는 또한이 app.module.browser.ts과app.module.shared.ts
어떻게 고칠 수 있습니까?
답변
에 이것을 추가하십시오 module.ts.
declarations: [
AppComponent,
ConfirmComponent
]ConfirmComponent가 다른 모듈에있는 경우 해당 모듈을 내 보내서 외부에서 사용할 수 있도록 추가해야합니다.
exports: [ ConfirmComponent ]— 아이비가 명시 적으로 활성화 된 Angular 9 또는 Angular 8 업데이트
아이비가 포함 된 입력 구성 요소는 더 이상 필요하지 않으며 더 이상 사용되지 않습니다.
— 아이비가 비활성화 된 Angular 9 및 8의 경우 —
동적으로로드 된 컴포넌트의 경우 ComponentFactory를 생성하려면 컴포넌트를 모듈의 entryComponents에 추가해야합니다.
declarations: [
AppComponent,
ConfirmComponent
],
entryComponents: [ConfirmComponent],entryComponents 정의에 따라
이 모듈을 정의 할 때 컴파일해야하는 구성 요소 목록을 지정합니다. 여기에 나열된 각 구성 요소에 대해 Angular는 ComponentFactory를 만들어 ComponentFactoryResolver에 저장합니다.
답변
세부 사항을 참조하십시오 에 대해 entryComponent:
구성 요소를 동적으로로드하는 경우 declarations및 entryComponent다음 모두에 구성 요소를 넣어야합니다 .
@NgModule({
imports: [...],
exports: [...],
entryComponents: [ConfirmComponent,..],
declarations: [ConfirmComponent,...],
providers: [...]
})답변
TL; DR :와 NG6에서 서비스 providedIn: "root"구성 요소가 첨가되지 않은 경우 ComponentFactory를 찾을 수 entryComponents의 app.module .
서비스에서 컴포넌트를 동적으로 작성하는 것과 함께 각도 6을 사용하는 경우에도이 문제가 발생할 수 있습니다!
예를 들어 오버레이 만들기 :
@Injectable({
providedIn: "root"
})
export class OverlayService {
constructor(private _overlay: Overlay) {}
openOverlay() {
const overlayRef = this._createOverlay();
const portal = new ComponentPortal(OverlayExampleComponent);
overlayRef.attach(portal).instance;
}
}문제는
제공 : “루트”
이 서비스를 제공하는 정의 app.module definition .
따라서 서비스가 예를 들어 OverlayExampleComponent를 선언하고 entryComponents에 추가 한 “OverlayModule”에있는 경우 서비스는 OverlayExampleComponent의 ComponentFactory를 찾을 수 없습니다.
답변
나는 같은 문제가 있었다. 이 경우 imports [...]가져 오지 않으면 작동하지 않으므로 매우 중요 NgbModalModule합니다.
오류 설명에 따르면 구성 요소를 entryComponents배열에 추가해야하며 분명하지만 처음에이 구성 요소를 추가 했는지 확인하십시오.
imports: [
...
NgbModalModule,
...
],
답변
앱 모듈의 @NgModule에있는 entryComponents에 해당 컴포넌트를 추가하십시오.
entryComponents:[ConfirmComponent],
뿐만 아니라 선언 :
declarations: [
AppComponent,
ConfirmComponent
]
답변
가져 오기에 ‘NgbModalModule’을 추가하고 아래에 표시된대로 entryComponents App.module.ts에 컴포넌트 이름을 추가하십시오.
답변
@NgModuledecorator 함수에서 entryComponents에 동적으로 작성된 컴포넌트를 배치하십시오.
@NgModule({
imports: [
FormsModule,
CommonModule,
DashbaordRoutingModule
],
declarations: [
MainComponent,
TestDialog
],
entryComponents: [
TestDialog
]
})
