각도 ngModule의 entryComponents 란 무엇입니까?

에 의존 하는 Ionic앱 ( 2.0.0-rc0) 작업 중입니다 angular 2. 그래서 새로운 소개 ngModules가 포함되었습니다. app.module.ts.아래에 추가하고 있습니다.

import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { MyApp } from './app.component';
import { Users } from '../pages/users/users';

@NgModule({
  declarations: [
    MyApp,
    Users
  ],
  imports: [
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    Users
  ]
})
export class AppModule {}

무엇 않습니다 entryComponents여기합니까? Components에 이미 정의되어 declarations있습니다. 그래서 반복해야 할 것은 무엇입니까? 여기에 컴포넌트를 포함시키지 않으면 어떻게 되나요?

을 사용하여 추가 한 동적으로 추가 된 구성 요소를위한 것 ViewContainerRef.createComponent()입니다. 그것들을 추가 entryComponents하면 오프라인 템플릿 컴파일러가 컴파일하고 팩토리를 만들 도록 지시합니다.

라우팅 된 구성 요소를 DOM에 추가 하는 데 에도 사용 entryComponents되므로 경로 구성에 등록 된 구성 요소도 자동으로 추가됩니다.router-outletViewContainerRef.createComponent()

오프라인 템플릿 컴파일러 (OTC)는 실제로 사용되는 구성 요소 만 빌드합니다. 구성 요소를 템플릿에서 직접 사용하지 않으면 OTC는 해당 구성 요소를 컴파일해야하는지 알 수 없습니다. entryComponents를 사용하면 OTC에이 구성 요소를 컴파일하여 런타임에 사용할 수 있도록 지시 할 수 있습니다.

입력 구성 요소 란 무엇입니까? (angular.io)

NgModule 문서 (angular.io)

이 구성 요소가 정의 될 때 컴파일해야하는 구성 요소를 정의합니다. 여기에 나열된 각 구성 요소에 대해 Angular는 ComponentFactory를 만들어 ComponentFactoryResolver에 저장합니다.

동적으로 추가 된 구성 요소를 나열하지 않으면 entryComponentsAngular가 작성하지 않았기 때문에 누락 된 팩토리에 대한 오류 메시지가 표시됩니다.

참조 https://angular.io/docs/ts/latest/cookbook/dynamic-component-loader.html

Angular docs : entry-components 및 ngmodule-faq 보다 더 나은 설명을 얻지 못합니다 .

아래는 각도 문서의 설명입니다.

입력 컴포넌트는 Angular가 유형별로 반드시로드하는 컴포넌트입니다.

선택기를 통해 선언적으로로드 된 구성 요소는 입력 구성 요소가 아닙니다.

대부분의 응용 프로그램 구성 요소는 선언적으로로드됩니다. Angular는 구성 요소의 선택기를 사용하여 템플릿에서 요소를 찾습니다. 그런 다음 컴포넌트의 HTML 표현을 작성하고 선택한 요소의 DOM에 삽입합니다. 이들은 엔트리 구성 요소가 아닙니다.

일부 구성 요소는 동적으로 만로드되며 구성 요소 템플릿에서 참조되지 않습니다.

부트 스트랩 된 루트 AppComponent는 항목 구성 요소입니다. 사실, 선택기는 index.html의 요소 태그와 일치합니다. 그러나 index.html구성 요소 템플릿 AppComponent이 아니며 선택기가 구성 요소 템플릿의 요소와 일치하지 않습니다.

Angular는 유형별로 나열 @NgModule.bootstrap되거나 모듈의 ngDoBootstrap 메소드를 사용하여 필수적 으로 증폭되기 때문에 AppComponent를 동적으로로드합니다 .

경로 정의의 구성 요소도 입력 구성 요소입니다. 경로 정의는 유형별로 구성 요소를 나타냅니다. 라우터는 라우팅 된 구성 요소의 선택기 (있는 경우)를 무시하고 구성 요소를로 동적으로로드합니다 RouterOutlet.

컴파일러는 다른 구성 요소 템플릿에서 이러한 입력 구성 요소를 찾아서 검색 할 수 없습니다. entryComponents목록 에 추가하여 그들에 대해 알려야 합니다.

Angular는 다음 유형의 구성 요소를 모듈에 자동으로 추가합니다 entryComponents.

• @NgModule.bootstrap목록 의 구성 요소
• 라우터 구성에서 참조되는 구성 요소.

이러한 구성 요소를 명시 적으로 언급 할 필요는 없지만, 그렇게하는 것은 무해합니다.

다른 답변은 이것을 언급하지만 기본 요약은 다음과 같습니다.

• HTML 템플릿 내에서 Component를 사용하지 않을 때 필요 <my-component />
• 예를 들어 각도 재질 대화 상자 구성 요소를 사용할 때 구성 요소를 간접적으로 사용합니다.

재료 대화 상자 구성 요소는 템플릿이 아닌 TS 코드 내에 생성됩니다.

    const dialogRef = this.dialog.open(MyExampleDialog, { width: '250px' });
  }

이를 위해서는 entryComponent로 등록해야합니다.

• entryComponents: [MyExampleDialog]

그렇지 않으면 오류가 발생합니다.

• ERROR Error: No component factory found for MyExampleDialog. Did you add it to @NgModule.entryComponents?

entryComponents 배열은 html에없고 동적으로 만들어진 구성 요소 만 정의하는 데 사용됩니다. Angular는 입력 구성 요소를 찾아서 컴파일하려면이 힌트가 필요합니다.

엔트리 구성 요소에는 두 가지 주요 유형이 있습니다.

• 부트 스트랩 된 루트 구성 요소
• 경로 정의에서 지정한 구성 요소.

입력 구성 요소에 대한 자세한 내용은 angular.io https://angular.io/guide/entry-components 를 참조 하십시오.

에 대한 배경 비트 entryComponent

entryComponent앵귤러 하중이 반드시 필요한 구성 요소입니다. entryComponent부트 스트랩 NgModule하거나 경로 정의로 선언 하여 선언 할 수 있습니다 .

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent] // bootstrapped entry component
})

아래에 설명서 가 있습니다

두 가지 유형의 구성 요소를 대조하기 위해 템플릿에 포함 된 구성 요소가 있습니다. 또한 반드시로드해야하는 구성 요소가 있습니다. 즉, 입력 구성 요소입니다.

이제 귀하의 특정 질문에 답변하십시오 entryComponents

이 entryComponents에 배열 @NgModule파일. entryComponents구성 요소를 사용하여 부트 스트랩 하는 경우이 옵션을 사용하여 추가 할 수 있습니다 ViewContainerRef.createComponent().

즉, 부트 스트랩 또는 템플릿이 아닌 구성 요소를 동적으로 생성하는 것입니다.

const componentFactory = this.componentFactoryResolver.resolveComponentFactory(myComp.component);
const viewContainerRef = this.compHost.viewContainerRef;
viewContainerRef.clear();
const componentRef = viewContainerRef.createComponent(componentFactory);

Ivy 덕분 에 Angular 9 entryComponents 부터는 더 이상이 기능이 더 이상 사용되지 않으므로 모듈 선언에서 제거 할 수 있습니다.

사용되지 않는 API와 기능 - entryComponents하고 ANALYZE_FOR_ENTRY_COMPONENTS더 이상 필요

이전 entryComponents에는 NgModule정의 의 배열을 사용하여 어떤 구성 요소가 동적으로 만들어지고 삽입되는지 컴파일러에 알 렸습니다. Ivy를 사용하면 더 이상 필요하지 않으며 entryComponents기존 모듈 선언에서 배열을 제거 할 수 있습니다. ANALYZE_FOR_ENTRY_COMPONENTS주입 토큰 에도 동일하게 적용됩니다 .

앵귤러 아이비

아이비는 Angular의 차세대 컴파일 및 렌더링 파이프 라인의 코드 이름입니다. Angular 버전 9 릴리스에서는 새로운 컴파일러 및 런타임 명령어가 기본적으로 View Engine으로 알려진 이전 컴파일러 및 런타임 대신 사용됩니다.