What is the difference between declarations and entryComponents

The entryComponents array is used to define only components that are not found in html and created dynamically with ComponentFactoryResolver. Angular needs this hint to find them and compile. All other components should just be listed in the declarations array.

Here's the documentation on angular site


Adding to what @Julia has answered to this question. I would like to add use case of Modal.


Lets say, you have a component called as ModalComponent. To make it more reusable, you would like to pass a component name and expect that component to be rendered inside the ModalComponent*.

Sample module.ts would be something like:

import:[ModalModule],  // As a best practice, we can create Modal as a separate Feature
entryComponent : [TheCompYouWantToRenderInsideModalComponent]

We would pass TheCompYouWantToRenderInsideModalComponent as entryComponent because this component will not be present while writing the website code (i.e there would not be selector of TheCompYouWantToRenderInsideModalComponent in any HTML file). We will pass this component to Modal and then it'll be rendered dynamically as and when the modal is opened. Something like below:

onSomeButtonClickToOpenModal(){
     this.modalService.openModal(TheCompYouWantToRenderInsideModalComponent);
}

*In the ModalModule, we would create service to use ComponentFactoryResolver and take TheCompYouWantToRenderInsideModalComponent as argument. Later, we can call a function (call it openModal(componentType: ComponentType)) which will Open & render using ComponentFactoryResolver


Side Note: The entryComponent will also play an important part in Angular V6 elements feature for the same purpose.

Update: Angular 9

With Angular 9 being released, we no more need to have entryComponent , Thanks to Ivy compiler

Tags:

Angular