What is the difference between declarations providers and import in NgModule

Question

I am trying to understand Angular  sometimes called Angular2    then I came across  Module    Imports Declarations Providers   Following Angular Quick Start

User · Answer

Adding a quick cheat sheet that may help after the long break with Angular:

DECLARATIONS

Example:

declarations: [AppComponent]

What can we inject here? Components, pipes, directives

IMPORTS

Example:

imports: [BrowserModule, AppRoutingModule]

What can we inject here? other modules

PROVIDERS

Example:

providers: [UserService]

What can we inject here? services

BOOTSTRAP

Example:

bootstrap: [AppComponent]

What can we inject here? the main component that will be generated by this module (top parent node for a component tree)

ENTRY COMPONENTS

Example:

entryComponents: [PopupComponent]

What can we inject here? dynamically generated components (for instance by using ViewContainerRef.createComponent())

EXPORT

Example:

export: [TextDirective, PopupComponent, BrowserModule]

What can we inject here? components, directives, modules or pipes that we would like to have access to them in another module (after importing this module)

User · Answer

Components are declared  Modules are imported  and Services are provided  An example I m working with   import   BrowserModule   from   angular platform-browser   import   NgModule   from   angular core     import   AppComponent   from    app component   import  FormsModule  from   angular forms   import   UserComponent   from    components user user component   import   StateService   from    services state service         NgModule     declarations        AppComponent      UserComponent        imports        BrowserModule      FormsModule        providers    StateService      bootstrap    AppComponent      export class AppModule

User · Answer

declarations   This property tells about the Components  Directives and Pipes that belong to this module  exports  The subset of declarations that should be visible and usable in the component templates of other NgModules  imports   Other modules whose exported classes are needed by component templates declared in this NgModule  providers   Creators of services that this NgModule contributes to the global collection of services  they become accessible in all parts of the app   You can also specify providers at the component level  which is often preferred   bootstrap  The main application view  called the root component  which hosts all other app views  Only the root NgModule should set the bootstrap property

User · Answer

imports are used to import supporting modules like FormsModule  RouterModule  CommonModule  or any other custom-made feature module   declarations are used to declare components  directives  pipes that belong to the current module  Everyone inside declarations knows each other  For example  if we have a component  say UsernameComponent  which displays a list of the usernames and we also have a pipe  say toupperPipe  which transforms a string to an uppercase letter string  Now If we want to show usernames in uppercase letters in our UsernameComponent then we can use the toupperPipe which we had created before but the question is how UsernameComponent knows that the toupperPipe exists and how it can access and use that  Here come the declarations  we can declare UsernameComponent and toupperPipe   Providers are used for injecting the services required by components  directives  pipes in the module

User · Answer

Angular  NgModule constructs    import   x   from  y    This is standard typescript syntax  ES2015 ES6 module syntax  for importing code from other files  This is not Angular specific  Also this is technically not part of the module  it is just necessary to get the needed code within scope of this file  imports   FormsModule   You import other modules in here  For example we import FormsModule in the example below  Now we can use the functionality which the FormsModule has to offer throughout this module  declarations   OnlineHeaderComponent  ReCaptcha2Directive   You put your components  directives  and pipes here  Once declared here you now can use them throughout the whole module  For example we can now use the OnlineHeaderComponent in the AppComponent view  html file   Angular knows where to find this OnlineHeaderComponent because it is declared in the  NgModule  providers   RegisterService   Here our services of this specific module are defined  You can use the services in your components by injecting with dependency injection    Example module      Angular import   BrowserModule   from   angular platform-browser   import   NgModule   from   angular core   import   FormsModule   from   angular forms       Components import   AppComponent   from    app component   import   OfflineHeaderComponent   from    offline offline-header offline-header component   import   OnlineHeaderComponent   from    online online-header online-header component       Services import   RegisterService   from    services register service       Directives import   ReCaptcha2Directive   from    directives re-captcha2 directive     NgModule     declarations        OfflineHeaderComponent       OnlineHeaderComponent      ReCaptcha2Directive      AppComponent        imports        BrowserModule      FormsModule         providers        RegisterService         entryComponents        ChangePasswordComponent      TestamentComponent      FriendsListComponent      TravelConfirmComponent        bootstrap   AppComponent     export class AppModule

User · Answer

Angular Concepts   imports makes the exported declarations of other modules available in the current module declarations are to make directives  including components and pipes  from the current module available to other directives in the current module  Selectors of directives  components or pipes are only matched against the HTML if they are declared or imported  providers are to make services and values known to DI  dependency injection   They are added to the root scope and they are injected to other services or directives that have them as dependency    A special case for providers are lazy loaded modules that get their own child injector  providers of a lazy loaded module are only provided to this lazy loaded module by default  not the whole application as it is with other modules     For more details about modules see also https   angular io docs ts latest guide ngmodule html   exports makes the components  directives  and pipes available in modules that add this module to imports   exports can also be used to re-export modules such as CommonModule and FormsModule  which is often done in shared modules  entryComponents registers components for offline compilation so that they can be used with ViewContainerRef createComponent    Components used in router configurations are added implicitly    TypeScript  ES2015  imports  import     from  foo bar   which may resolve to an index ts  are for TypeScript imports  You need these whenever you use an identifier in a typescript file that is declared in another typescript file   Angular s   NgModule   imports and TypeScript import are entirely different concepts    See also jDriven - TypeScript and ES6 import syntax     Most of them are actually plain ECMAScript 2015  ES6  module syntax that TypeScript uses as well

[angular] What is the difference between declarations, providers, and import in NgModule?

DECLARATIONS

IMPORTS

PROVIDERS

BOOTSTRAP

ENTRY COMPONENTS

EXPORT

Examples related to angular

Examples related to angular-module