We know that @Component decorator functions take object, and this object contains a lot of properties. So we will learn about entryComponents properties in this article. Means, we are going to look at Entry Components in Angular, what they are and why they even exist.

In the simple word, an entry component in Angular is any component that is loaded by its class, not selector.

An entry component is any component that Angular imperatively loads (i.e. it does not refer to it in the template), by type. You specify an entry component by bootstrapping it in an NgModule or including it in a routing definition, or it is used to define components and created dynamically by using ComponentFactoryResolver. First, Angular creates a component factory for each of the bootstrap components with the help of ComponentFactoryResolver. And then it will use the factories to instantiate the components at run-time.

import { Component } from '@angular/core';

@Component({
  selector: 'app-root', // <== component select tags
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
}

Normally, in angular, when loading a component, the component selector is used within the template. In the case of the above component, the selector is app-root and the class is AppComponent. So normally the above component would load like this:

<app-root></app-root>

There is a lot of use of the entry component as shown below:

• specify an entry component by bootstrapping in the Angular module
• specify an entry component by routing definition.
• specify an entry component for created dynamically component.

There are two main types of input components that follow:

• The bootstrapped root component.
• A component you specify in a route.

The bootstrapped entry component

A bootstrapped component is an entry component loaded by Angular in DOM at the application launch and the other root components are dynamically loaded into the entry components.

The angle dynamically loads a root because it is bootstrapped into the angular module. In the following example, AppComponent is a root so that angular loads dynamically

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

A Routed entry component

From time to time, it may be necessary to reference to a component based on its class. A good example of this is when adding a component to the application's router. It refers to the component from the class and not from the selector. All router components must be entry components because the component requires them to be added in two places.

• Router
• Entrycomponent

The angular compiler is much smarter and recognizes that it is a router component and that it automatically adds components of the router to the entry components.

In other words, any component that is found in your routers will be registered by Angular CLI during compilation. Therefore, most developers work with entry components without realizing it.

The route definition refers to the components based on their type, i.e.

There are two components: one is Login and another is Dashboard. These components have the ability to navigate between login and dashboard views if authentication and authorization of this application is passed.

• LoginComponent
• DasboardComponent

const routes: Routes = [
    { path: '', redirectTo: 'home', pathMatch: 'full'},
    { path: 'login', component: LoginComponent },
    { path: 'dashboard ', component: DasboardComponent },
    { path: '**', redirectTo: 'home' }
];

Why do I have to register the entry components ?

Normally, all components are declared within the app or the feature module under declarations. This applies to all components within the project, regardless of whether they have been used or not. This is even before considering the components declared by third-party libraries that you may not need in your project.

If all these unused components were finished in the final app bundle, they would increase considerably in size. And remember, our goal is to have the smallest possible final bundle. To avoid this, the angular CLI tree shakes the app during build times.it remove all components that have not been referenced (declared) in your template.

Now, remember that an entry component is used or referenced by its class and not within any other component template (at least most of the time). Without a list of entry components, the Angular CLI would not include these components in the final bundle, so it will interrupt the application. Therefore, for most entry components, you need to register them in the entryComponents array, in the application or feature module.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent],
  entryComponents: [SomeEntryComponent1,SomeEntryComponent2,...] // <== component select tags
})
export class AppModule { }

Therefore, the next time you find an error of this type, simply add it to the list of entry components of your module.