What Is an EntryComponent in Angular 5, and 4?

EntryComponent of Angular -

The entry component is used to define components and created dynamically using the ComponentFactoryResolver.

Firstly, Angular creates a component factory for each of the bootstrap components with the help of ComponentFactoryResolver. And then, at run-time, it will use the factories to instantiate the components.

You specify an entry component by bootstrapping in the Angular module or you specify an entry component by routing definition.

All other root components should be listed in the declarations array.

const routes: Routes = [

    { path: '', redirectTo: 'home', pathMatch: 'full'},

    { path: 'login', component: LoginComponent },

    { path: 'dashboard', component: DasboardComponent },

    { path: '**', redirectTo: 'home' }

];

There are two main kinds of entry components which are following -

1.      The bootstrapped root component

2.      A component you specify in a route

The bootstrapped entry component -

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

The angular loads a root dynamically because it is bootstrapped in the Angular Module. In the below example, AppComponent is a root component so that angular loads dynamically.

Example –

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

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

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

import { LoginComponent } from './login/login.component';

@NgModule({

  declarations: [

    AppComponent,

    LoginComponent

  ],

  imports: [

    BrowserModule

  ],

  providers: [],

  bootstrap: [AppComponent] // bootstrapped entry component

})

export class AppModule { }

A Routed entry component -

All router components must be entry components because the component would require you to add in two places.

1.      Router and

2.      EntryComponents

The Angular compiler is so smarter and it is recognizing that this is a router component and it automatically added router components into entry components.

The route definition refers to components by its type i.e.

1.      LoginComponent

2.      DasboardComponent

There are two components one is Login and another one is Dashboard. These components have the 

ability to navigate between the login and dashboard views if passed the authentication and authorization of this app.

Example -

const routes: Routes = [

    { path: '', redirectTo: 'home', pathMatch: 'full'},

    { path: 'login', component: LoginComponent },

    { path: 'dashboard ', component: DasboardComponent },

    { path: '**', redirectTo: 'home' }

];

I hope you enjoyed this post. So please write your thoughts in the below comment box. Thank you so much for reading this post.