Entry Components in Angular

What are entry components?

An entry component is generated dynamically by Angular and these components are not included in any markup template. We need to specify the entry component as part of our module. The key features of entry components are as follows:
  • HTML selectors don't specify entry components.
  • We need to specify entry components so that Webpack should not consider it as unused code during tree shaking.
  • Entry components are not specified in the routes defined in our application.
  • The components which are referenced in the template using selectors and the components which are declared as EntryComponents will go to the final bundle. 
  • The components which are not declared as EntryComponents as well as in the template using selectors are thrown away in the final bundle package.
  • The entry component array is different from the declarations array.

The entryComponents Array

The @NgModule decorator has an entryComponents array. Angular adds components which are specified in the @NgModule.Bootstrap and which are declared as route definitions to entry components automatically. But if our app has some feature to be added as type imperatively, we will explicitly in the entryComponents array which is @ngModule.entryComponets array.

Types of entry components

There are two types of entry components in Angular:
  • The bootstrapped root components - This component is loaded during the launch of the application. The root component is loaded at run time as it is bootstrapped in the Angular Module. This is the entry point of our application. 
  declarations: [
  imports: [
    AdminModule // Feature module in imports array
  providers: [],
  bootstrap: [AppComponent] // Bootstrapped entry component
export class AppModule { }
  • The routed entry components - All router components must be entry components as well. The components are added at two places: Router and Entry Components. The router definition automatically adds the components in the entry components.
const routes: Routes = [
  { path: '', component: DashboardComponent },
  { path: 'network-user-view', component: NetworkUserViewComponent },
  { path: 'network-site-view', component: NetworkSiteViewComponent },