Angular 4: 구성 요소 팩토리를 찾을 수 없습니다. @NgModule.entryComponents에 추가했습니까?

Angular 4: 구성 요소 팩토리를 찾을 수 없습니다. @NgModule.entryComponents에 추가했습니까?

Angular 4 템플릿을 웹 팩과 함께 사용하고 있는데 구성 요소(ConfirmComponent)를 사용하려고 하면 다음 오류가 발생합니다.

구성 요소 확인에 대한 구성 요소 팩토리를 찾을 수 없습니다.@NgModule.entryComponents에 추가했습니까?

구성 요소는 성요다같선언다니됩이음과는소로 됩니다.app.module.server.ts

@NgModule({
  bootstrap: [ AppComponent ],
  imports: [
    // ...
  ],
  entryComponents: [
    ConfirmComponent,
  ],
})
export class AppModule { }

는 또한 ▁also▁have도 가지고 있습니다.app.module.browser.ts그리고.app.module.shared.ts

어떻게 고칠 수 있을까요?

이 항목을 추가합니다.module.ts,

declarations: [
  AppComponent,
  ConfirmComponent
]

ConfirmComponent가 다른 모듈에 있는 경우, 외부에서 사용할 수 있도록 해당 모듈을 내보내야 합니다.

exports: [ ConfirmComponent ]

---Ivy가 명시적으로 활성화된 Angular 9 또는 Angular 8 업데이트---

Ivy가 포함된 엔트리 구성요소는 더 이상 필요하지 않으며 이제는 더 이상 사용되지 않습니다.

---아이비가 비활성화된 Angular 9 및 8의 경우---

동적으로 로드된 구성 요소의 경우 ComponentFactory가 생성되려면 모듈의 엔트리에 구성 요소도 추가해야 합니다.

declarations: [
  AppComponent,
  ConfirmComponent
],
entryComponents: [ConfirmComponent],

항목 구성요소의 정의에 따라

이 모듈을 정의할 때 컴파일해야 하는 구성 요소 목록을 지정합니다.여기에 나열된 각 구성 요소에 대해 Angular는 Component Factory를 생성하여 Component Factory Resolver에 저장합니다.

자세한 내용 보기entryComponent:

두 가지 .declarations그리고.entryComponent:

@NgModule({
  imports: [...],
  exports: [...],
  entryComponents: [ConfirmComponent,..],
  declarations: [ConfirmComponent,...],
  providers: [...]
})

TL을 사용하는 ;DR: ng6 파일 형식providedIn: "root"가 추가되지 않은 수 .entryComponents의

서비스에서 구성 요소를 동적으로 생성하는 것과 함께 각도 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;
  }
}

문제는

제공된 위치: "root"

app.vmdk에서 이 서비스를 제공하는 정의입니다.

따라서 서비스가 "OverlayModule"과 같이 OverlayExampleComponent를 선언하고 이를 Components 항목에 추가한 경우 서비스는 ComponentFactory for OverlayExampleComponent를 찾을 수 없습니다.

저도 같은 문제가 있었습니다. 이우경imports [...] 않기 입니다.NgbModalModule.

오설명 구다요성추소함표다에 요소를 .entryComponents하세요: 어이를사면분만지명하오, 처에이추확인십시하지는가했를.

imports: [
    ...
    NgbModalModule,
    ...
  ],

앱 모듈의 @NgModule에 있는 항목에 해당 구성 요소를 추가합니다.

entryComponents:[ConfirmComponent],

선언문뿐 아니라 다음도 포함됩니다.

declarations: [
    AppComponent,
    ConfirmComponent
]

아래와 같이 가져오기에 'NgbModalModule'을 추가하고 항목ComponentsApp.module.ts에 구성 요소 이름을 추가합니다.

나도 6각형과 같은 문제가 있는데, 그것이 나에게 효과가 있었습니다.

@NgModule({
...
entryComponents: [ConfirmComponent],
providers:[ConfirmService]

})

ConfirmService와 같은 서비스가 있는 경우 루트가 아닌 현재 모듈의 제공자에서 선언해야 합니다.

부트스트랩 모달에 대해서도 같은 문제가 있었습니다.

'@ng-bootstrap/ng-bootstrap'에서 {NgbModal}을(를) 가져옵니다.

이 경우 다른 반응이 제시하는 대로 구성 요소를 모듈 선언 및 항목에 추가하고 모듈에도 추가합니다.

'@ng-bootstrap/ng-bootstrap'에서 {NgbModule}을(를) 가져옵니다.

imports: [
   NgbModule.forRoot(),
   ...
]

이 오류는 구성 요소를 동적으로 로드하려고 할 때 발생합니다.

1. 로드하려는 구성 요소가 라우팅 모듈이 아닙니다.
2. 구성 요소가 모듈 항목 구성 요소에 없습니다.

라우팅 모듈 내

const routes: Routes = [{ path: 'confirm-component', component: ConfirmComponent,data: {}}]

또는 모듈 내

entryComponents: [
ConfirmComponent
} 

이 오류를 해결하려면 구성 요소에 라우터를 추가하거나 모듈의 구성 요소 항목에 라우터를 추가할 수 있습니다.

1. 이 접근 방식의 component.drawback에 라우터를 추가하면 해당 URL로 구성 요소에 액세스할 수 있습니다.
2. 구성요소 항목에 추가합니다.이 경우 구성 요소에 URL이 첨부되지 않으며 url로 액세스할 수 없습니다.

동적 구성요소를 만들 때 Angular7에서도 동일한 문제가 있었습니다.동적으로 로드해야 하는 두 가지 구성 요소(TreatListComponent, MyTreatComponent)가 있습니다.방금 app.module.ts 파일에 entryComponents 배열을 추가했습니다.

    entryComponents: [
    TreatListComponent,
    MyTreatComponent
  ],

응용프로그램에서 라우팅을 사용하는 경우

라우팅 경로에 새 구성 요소를 추가합니다.

예:

    const appRoutes: Routes = [
  { path: '', component: LoginComponent },
  { path: 'home', component: HomeComponent },
  { path: 'fundList',      component: FundListComponent },
];

제 경우, 추가하는 것을 잊었습니다.MatDialogModule하위 모듈로 가져올 수 있습니다.

저의 경우 아래 링크에 설명된 기본 설정만 있으면 되는 entryComponents가 전혀 필요하지 않았지만 메인 앱 모듈과 동봉 모듈 모두에 Import를 포함해야 했습니다.

imports: [
    NgbModule.forRoot(),
    ...
]

https://medium.com/ @sunilk/getting-geting-sun-guard-6-and-ng-bootstrap-4-4b314e015c1c

구성요소가 모달에 포함되는 경우에만 구성요소 항목에 구성요소를 추가해야 합니다.문서에서:

기존 구성 요소를 모달 창의 내용으로 전달할 수 있습니다.이 경우 콘텐츠 구성 요소를 NgModule의 항목 구성 요소 섹션으로 추가해야 합니다.

동적 구성요소를 사용하는 ag-grid에서도 동일한 문제가 발생했습니다.동적 구성 요소를 ag-grid 모듈 .withComponents[]에 추가해야 합니다.

가져오기: [StratoMaterialModule, 브라우저 모듈, AppRoutingModule, HttpClientModule, 브라우저 애니메이션 모듈, NgbModule.forRoot(), FormsModule, ReactiveFormsModule, AppRoutingModule, AggridModule.구성 요소(ProjectUpdateButton구성 요소) 사용),

1. entryComponents매우 중요합니다.이에 대한 위의 답변이 맞습니다.

그렇지만.....

2. 모달(공통 패턴)을 여는 서비스를 제공하는 경우 대화 구성 요소를 정의하는 모듈이 AppModule에 로드되지 않은 경우 변경해야 합니다.providedIn: 'root'로.providedIn: MyModule일반적인 모범 사례로 다음을 사용해야 합니다.providedIn: SomeModule모듈에 있는 모든 대화 상자 서비스에 대해 설명합니다.

다음 항목을 가져와야 합니다.NgbModule다음과 같은 모듈에서:

@NgModule({
  declarations: [
    AboutModalComponent
  ],
  imports: [
    CommonModule,
    SharedModule,
    RouterModule,
    FormsModule,
    ReactiveFormsModule,
    NgxLoadingModule,
    NgbDatepickerModule,
    NgbModule
  ],
  entryComponents: [AboutModalComponent]
})
 export class HomeModule {}

여기서 설명해 드리겠습니다.사용하지 않는 경우ComponentFactoryResolver구성 요소에 직접 포함되어 있으며, 이를 서비스로 추상화하고 구성 요소에 주입하려면 해당 모듈의 공급자 아래에 로드해야 합니다. 로드가 느리면 작동하지 않기 때문입니다.

에서 구성요소 대화상자 클래스를 제공한 후에도 오류가 발생하는 경우entryComponents다시 시작하려고 합니다.ng serve저한테는 효과가 있었어요.

.html의 잘못된 매개 변수를 사용하여 NgbModal open 메서드를 호출한 것이 오류입니다.

나는 재료 설계 대화 모듈을 가져오기 때문에 대화를 위한 구성 요소에 대해 openDialog 메서드에서 이 구성 요소를 호출하고 이 오류가 발생했습니다. 방금 이것을 넣었습니다.

declarations: [
    AppComponent,
    ExampleDialogComponent
  ],

  entryComponents: [
    ExampleDialogComponent
  ],

Angular8을 사용하고 있는데 구성 요소를 동적으로 열려고 합니다. 다른 모듈을 구성합니다. 이 경우에는import the module물론 구성 요소를 열려고 하는 모듈에 추가합니다. export구성 요소를 다음에 나열합니다.entryComponents이전 답변과 같이 배열합니다.

imports: [
    ...
    TheModuleThatOwnTheTargetedComponent,
    ...
  ],

저의 경우 다음을 통해 이 문제를 해결했습니다.
배치NgxMaterialTimepickerModule에app module imports:[ ]
배치NgxMaterialTimepickerModule에testmodule.ts imports:[ ]
배치testcomponent에declartions:[ ]그리고.entryComponents:[ ]

(앵글 8+ 버전을 사용하고 있습니다)

저처럼 아직도 이 문제를 해결하지 않으셨다면 저에게 이 오류가 발생한 원인이 여기에 있습니다.@jkyoutsey가 제안했듯이, 저는 정말로 모달 구성요소를 만들려고 했습니다.저는 제 구성요소를 서비스로 이동하여 페이지 구성요소에 주입함으로써 그의 제안을 따르는 데 상당한 시간을 보냈습니다.변경도 제공됩니다.In: MyModule에 대한 'root'. 물론 순환 참조를 피하기 위해 한 단계 이상 이동해야 했습니다.저는 그것들 중 어떤 것도 실제로 필요했는지 모두 함께 확신할 수 없습니다.

마침내 8시간 동안의 퍼즐을 해결한 것은 내 구성 요소에 OnInit을 구현하지 않는 것이었습니다.나는 ngOnInit을 기능이 비어있었음에도 불구하고 맹목적으로 구현했습니다.저는 그런 경향이 있습니다.아마 나쁜 습관일 겁니다.

어쨌든 빈 ngOnInit가 왜 이런 오류를 일으켰는지 누군가가 밝혀줄 수 있다면, 저는 댓글을 읽고 싶습니다.

이 섹션에는 다음 항목 외에 하위 항목으로 사용되는 구성 요소도 입력해야 합니다.declarations: [CityModalComponent]에 대한) 다음 의 (구성요소에 설명app.module.ts파일 이름:

 entryComponents: [
CityModalComponent
],

제가 이것에 대해 답장이 늦을 수도 있습니다.그러나 이 문제를 제거하는 것은 여전히 이 문제에 대한 해결책을 찾고 있으며 코드에 이 문제가 있는 일부 사람들에게 도움이 될 수 있습니다.tsconfig.json 파일에 오랫동안 아래 항목이 있었습니다.

  "angularCompilerOptions": {
    "enableIvy": false
  }

우리도 같은 문제에 직면해 있습니다.많은 실험 끝에 tsconfig.json에서 이 블록을 제거했습니다.이제 우리의 코드는 더 이상 이 문제를 불평하지 않습니다.

언급URL : https://stackoverflow.com/questions/46990389/angular-4-no-component-factory-found-did-you-add-it-to-ngmodule-entrycomponent