Angular 4 : 컴포넌트 팩토리를 찾을 수 없습니다. @ NgModule.entryComponents에 추가하셨습니까?

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
    ]
})

각도 6과 동일한 문제가 있습니다.

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

})

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

부트 스트랩 모달에 대해 동일한 문제가있었습니다.

'@ ng-bootstrap / ng-bootstrap'에서 {NgbModal} 가져 오기;

이 경우 다른 응답이 제안하는 것처럼 구성 요소를 모듈 선언 및 entryComponents에 추가하고 모듈에 추가하십시오.

'@ ng-bootstrap / ng-bootstrap'에서 {NgbModule} 가져 오기;

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

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

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

라우팅 모듈에서

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

또는 모듈

entryComponents: [
ConfirmComponent
} 

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

1. component에 라우터를 추가하십시오.이 접근 방식의 단점은 해당 URL로 구성 요소에 액세스 할 수 있다는 것입니다.
2. entryComponents에 추가하십시오. 이 경우 구성 요소에 연결된 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 },
];

필자의 경우 entryComponents가 전혀 필요하지 않았습니다. 아래 링크에 설명 된 기본 설정 만 있지만 주 앱 모듈과 인클로저 모듈 모두에 가져 오기를 포함해야했습니다.

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

https://medium.com/@sunilk/getting-started-angular-6-and-ng-bootstrap-4-4b314e015c1c

컴포넌트가 모달에 포함될 경우에만 entryComponents에 추가해야합니다. 문서에서 :

기존 구성 요소를 모달 창의 컨텐츠로 전달할 수 있습니다. 이 경우 컨텐츠 컴포넌트를 NgModule의 entryComponents 섹션으로 추가해야합니다.

동적 구성 요소를 사용하는 ag-grid와 동일한 문제가 발생했습니다. 동적 구성 요소를 ag-grid 모듈에 추가해야한다는 것을 발견했습니다.

수입품 : [StratoMaterialModule, BrowserModule, AppRoutingModule, HttpClientModule, BrowserAnimationsModule, NgbModule.forRoot (), FormsModule, ReactiveFormsModule, AppRoutingModule, AgGridModule.withComponents (ProjectUpdateButtonComponent) ],

필자의 경우 MatDialogModule하위 모듈에서 가져 오기에 추가 하는 것을 잊었습니다 .

설명을 원하시면 여기를 클릭하십시오. ComponentFactoryResolver구성 요소에서 직접 사용하지 않고 서비스로 추상화하려는 경우 구성 요소에 삽입하면 지연로드 된 경우 작동하지 않으므로 해당 모듈의 공급자 아래에로드해야합니다.

에서 구성 요소 대화 상자 클래스를 제공 한 후에도 여전히 오류가 발생 entryComponents하면 다시 시작해보십시오 ng serve.

내 오류는 .html에서 잘못된 매개 변수로 NgbModal open 메소드를 호출하는 중입니다.

다음 NgbModule과 같이 모듈 에서를 가져와야합니다 .

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

1. entryComponents중요합니다. 위의 답변은 정확합니다.

그러나...

2. 모달 (공통 패턴)을 여는 서비스를 제공하고 대화 상자 컴포넌트를 정의하는 모듈이 AppModule에로드되지 않은 경우로 변경 providedIn: 'root'해야 providedIn: MyModule합니다. 일반적으로 providedIn: SomeModule모듈에있는 모든 대화 서비스에 대해를 사용해야합니다 .

Angular8을 사용하고 있으며 다른 모듈을 동적으로 구성하여 구성 요소 를 열려고합니다 .이 경우 import the module구성 요소 뿐만 아니라 구성 요소를 열려고하는 모듈 export에 entryComponents배열을 나열해야합니다. 이전 답변이했던 것처럼.

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

제 경우 나이 문제 해결 :
배치 1) NgxMaterialTimepickerModule에 app module imports:[ ]
배치 2) NgxMaterialTimepickerModule에 testmodule.ts imports:[ ]
배치 3) testcomponent하여 declartions:[ ]및entryComponents:[ ]

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

app.module의 모든 새 페이지를 선언하십시오.

@NgModule({
  declarations: [
    MyApp,
    RegisterPage,
    OtpPage,
    LoginPage,
    ForgetPasswordPage,ChatlistPage,ChatPage,TabsPage

    // AboutPage,

    // BusinessDetailDescPage,
    // BusinessDescPage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    IonicStorageModule.forRoot(),
    HttpClientModule,
    NgxBarcodeModule
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    RegisterPage,
    OtpPage,
    LoginPage,
    ForgetPasswordPage,ChatlistPage,ChatPage,TabsPage
    // AboutPage,

    // BusinessDetailDescPage,
    // BusinessDescPage
  ],

 - 


----------


---------