Difference between declarations and entryComponents in AngularJS

  • 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.

    Declarable must belong to exactly one module. The compiler emits an error if you try to declare the same class in more than one module. These components are referenced directly and hence are included in the final bundle of the application created.

  • 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.

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    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 { }

    chevron_right

    
    

    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 enures 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.
My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.