Open In App

Difference between declarations and entryComponents in AngularJS

Improve
Improve
Like Article
Like
Save
Share
Report
  • Declarations: These are the set of components, directives, and pipes (declares) that belong to the (this) module. These components are in the local scope (private visibility).
    Syntax: 
     
declarations: Array<Type | any[]>
  • The set of selectors (directives, components, pipes) are declared: 
    1. that are available for the use of a template.
    2. those that are exported from imported NgModules.
  • entryComponent: The entryComponent is the component that loads angular by force, that means these components are not referenced in the HTML template. In most of the cases, Angular loads a component when it is explicitly declared in the component template. But this is not the case with entryComponents. The entryComponents are only loaded dynamically and are never referenced in the component template. It refers to the array of components that are not found in HTML.
    Bootstrap entryComponent provides the entry point for the application. Routed entryComponents are not specified explicitly in the HTML of a component but, are registered in the routes array. These components are also loaded dynamically and thus Angular needs to know about them.
    Here is an example of what app.module.ts looks like.
     

javascript




import { BrowserModule } from
    '@angular/platform-browser';
import { NgModule } from '@angular/core';
 
import { HeaderComponent } from
    './header/header.component';
import { ListComponent } from
    './list/list.component';
import { DetailComponent } from
    './detail/detail.component';
 
import { AppComponent } from
    './app.component';
 
@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    ListComponent,
    DetailComponent,
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }


  • In the above example, all the components and pipes are listed in declarations but only AppComponent is listed in bootstrap as its an entrycomponent.

Difference between entry Component and Declaration: 
 

entry Component Declarations
entryComponent array ensures that tree-shaking doesn’t break the application. Declarations array ensures module encapsulation.
entryComponents are used to register components for offline computation in a module. These components are referenced here as they not referenced anywhere else in HTML template. Declarations are used to make Directives(components, pipes etc.) in a specific module.
Components used for router configuration can be added implicitly. Directives, components, and pipes are matched against the HTML only if they are declared or imported.
Array of components are added by ComponentFactoryReolver. Array of components can be found in HTML template.

 


Last Updated : 23 Aug, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads