Entry Components Vs Declarations in Angular

Breaking down the differences when you are dealing with Angular components

Hi! I am a full stack developer based out of West Bengal, India. I love digging deep into the trickier parts of the technologies. Here is one from my vault. Hope this helps you.
Without further ado, let us dive straight into it.

For this you need to understand how angular actually works behind the scenes when it comes to creating components.

Any component as well as directives and pipes you plan on working with, you need to add them to your declarations array in @NgModule of app.module.ts(while working with multiple modules, we import the feature module in our app.module.ts imports array, and that feature module has all the components in its declarations array).

The above mentioned step is important for angular to understand what's a component or which components and directives you have in your app because, it does not automatically scan all your files. You'd need to tell it which components exist, after creating a new component.

Still this alone only makes angular aware of it so that it is able to create such a component when it finds it in one of two places--

1. The first place would be in your templates if in your templates angular finds a selector of a component--> then it basically looks into the `declarations array for that particular component-->finds that there and then is able to create that component.

2. The other place where angular will look for this component is in your routes in your rout config--> when you point at a component there angular will also check that in the declarations array and--> if it finds that there it is able to create such a component and load it.

Now one place that does not work by default is when you want to create a component manually in code. Like when you want to create a dynamic component with component factory like an alert component maybe which only shows up when there is any error and you neither mention the selector of it in any template nor in the rout configuration.

And now, here angular does not automatically reach out to the declarations array. It simply doesn't do that. You can complain about that. Still it's the case.

You instead deliberately need to inform angular that in this case the alert component will need to be created at some place and that angular basically should be prepared for this.

Generally angular will prepare itself for this creation when it finds a component in the template or in a rout configuration.
But in our case as we haven't done either of the two things as mentioned above, angular won't prepare itself.

Now to tell angular to be prepared for the creation of that component you need to add a special property to the object you pass to @ngModule besides declarations import and so on. That property is entry components, it is an array of component types, but only those components that will eventually be created without routs or selectors.

But with the launch of Angular 9, there were changes made behind the scenes, and it does all these work for you, you do not need to mention the entry components manually anymore.

I hope this clears some doubt regarding the entry components and declarations and how angular application works when it comes to deal with your components. Here is the link to my stackoverflow answer.

Credits--Learned these concepts from the Udemy course "Angular the Complete Guide" -by Maximilian Schwarzmüller .

Thank you, for reading!