A basic understanding of the following:
\n\nAn NgModule describes how the application parts fit together.\nEvery application has at least one Angular module, the root module,\nwhich must be present for bootstrapping the application on launch.\nBy convention and by default, this NgModule is named AppModule.
When you use the Angular CLI command ng new to generate an app, the default AppModule looks like the following:
After the import statements is a class with the\n@NgModule decorator.
The @NgModule decorator identifies AppModule as an NgModule class.\n@NgModule takes a metadata object that tells Angular how to compile and launch the application.
BrowserModule to have browser specific services such as DOM rendering, sanitization, and location.index.html host web page.The default application created by the Angular CLI only has one component, AppComponent, so it\nis in both the declarations and the bootstrap arrays.
declarations arraylinkThe module's declarations array tells Angular which components belong to that module.\nAs you create more components, add them to declarations.
You must declare every component in exactly one NgModule class.\nIf you use a component without declaring it, Angular returns an\nerror message.
The declarations array only takes declarables. Declarables\nare components, directives and pipes.\nAll of a module's declarables must be in the declarations array.\nDeclarables must belong to exactly one module. The compiler emits\nan error if you try to declare the same class in more than one module.
These declared classes are visible within the module but invisible\nto components in a different module unless they are exported from\nthis module and the other module imports this one.
\nAn example of what goes into a declarations array follows:
\nA declarable can only belong to one module, so only declare it in\none @NgModule. When you need it elsewhere,\nimport the module that has the declarable you need in it.
@NgModulelinkUse the declarations array for directives.\nTo use a directive, component, or pipe in a module, you must do a few things:
@NgModule declarations array.Those three steps look like the following. In the file where you create your directive, export it.\nThe following example, named ItemDirective is the default directive structure that the CLI generates in its own file, item.directive.ts:
The key point here is that you have to export it so you can import it elsewhere. Next, import it\ninto the NgModule, in this example app.module.ts, with a JavaScript import statement:
And in the same file, add it to the @NgModule declarations array:
Now you could use your ItemDirective in a component. This example uses AppModule, but you'd do it the same way for a feature module. For more about directives, see Attribute Directives and Structural Directives. You'd also use the same technique for pipes and components.
Remember, components, directives, and pipes belong to one module only. You only need to declare them once in your app because you share them by importing the necessary modules. This saves you time and helps keep your app lean.
\n\nimports arraylinkThe module's imports array appears exclusively in the @NgModule metadata object.\nIt tells Angular about other NgModules that this particular module needs to function properly.
This list of modules are those that export components, directives, or pipes\nthat component templates in this module reference. In this case, the component is\nAppComponent, which references components, directives, or pipes in BrowserModule,\nFormsModule, or HttpClientModule.\nA component template can reference another component, directive,\nor pipe when the referenced class is declared in this module or\nthe class was imported from another module.
providers arraylinkThe providers array is where you list the services the app needs. When\nyou list services here, they are available app-wide. You can scope\nthem when using feature modules and lazy loading. For more information, see\nProviders.
\nbootstrap arraylinkThe application launches by bootstrapping the root AppModule, which is\nalso referred to as an entryComponent.\nAmong other things, the bootstrapping process creates the component(s) listed in the bootstrap array\nand inserts each one into the browser DOM.
Each bootstrapped component is the base of its own tree of components.\nInserting a bootstrapped component usually triggers a cascade of\ncomponent creations that fill out that tree.
\nWhile you can put more than one component tree on a host web page,\nmost applications have only one component tree and bootstrap a single root component.
\nThis one root component is usually called AppComponent and is in the\nroot module's bootstrap array.
For more on NgModules you're likely to see frequently in apps,\nsee Frequently Used Modules.
\n\n \n