What is the difference between declarations and entryComponents

Solution 1:

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

Solution 2:

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

Solution 3:

In short:

The "real" reason behind the existence of entryComponents is tree-shaking, while declarations exists mainly for module encapsulation. So they aren't even comparable. If tree-shaking wasn't our concern, we would be good with declarations as a single source for both.

Longer answer

All the components that you created in your module don't go to final bundle. Rather, only the components which were declared in template using selectors OR the components that were added to entryComponents array (by you or the framework).

You would want to add the component when you creating the component dynamically like using ComponentFactoryResolver as stated by accepted answer. Or framework can add the component when you declare them in Route array or during other imperative creation.

From official docs:

In fact, many libraries declare and export components you'll never use. For example, a material design library will export all components because it doesn’t know which ones you will use. However, it is unlikely that you will use them all. For the ones you don't reference, the tree shaker drops these components from the final code package.

If a component isn't an entry component and isn't found in a template, the tree shaker will throw it away. So, it's best to add only the components that are truly entry components to help keep your app as trim as possible.