<commit_before># Introduction to modules

Angular applications are modular and Angular has its own modularity system called *NgModules*.
NgModules are containers for a cohesive block of code dedicated to an application domain, a workflow, or a closely related set of capabilities
They can contain components, service providers, and other code files whose scope is defined by the containing NgModule.
They can import functionality that is exported from other NgModules, and export selected functionality for use by other NgModules.

Every Angular application has at least one NgModule class, [the *root module*](guide/bootstrapping), which is conventionally named `AppModule` and resides in a file named `app.module.ts`.
You launch your application by *bootstrapping* the root NgModule.

While a small application might have only one NgModule, most applications have many more *feature modules*.
The *root* NgModule for an application is so named because it can include child NgModules in a hierarchy of any depth.

## NgModule metadata

An NgModule is defined by a class decorated with `@NgModule()`.
The `@NgModule()` decorator is a function that takes a single metadata object, whose properties describe the module.
The most important properties are as follows.

| Properties     | Details |
|:---            |:---     |
| `declarations` | The [components](guide/architecture-components), *directives*, and *pipes* that belong to this NgModule.                                                                                                                                    |
| `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](guide/architecture-services) that this NgModule contributes to the global collection of services; they become accessible in all parts of the application. \(You can also specify providers at the component level.\) |
| `bootstrap`    | The main application view, called the *root component*, which hosts all other application views. Only the *root NgModule* should set the `bootstrap` property.                                                                              |

Here's a simple root NgModule definition.

<code-example header="src/app/app.module.ts" path="architecture/src/app/mini-app.ts" region="module"></code-example><commit_msg>docs: Add missing period (#46799)<commit_after># Introduction to modules

Angular applications are modular and Angular has its own modularity system called *NgModules*.
NgModules are containers for a cohesive block of code dedicated to an application domain, a workflow, or a closely related set of capabilities.
They can contain components, service providers, and other code files whose scope is defined by the containing NgModule.
They can import functionality that is exported from other NgModules, and export selected functionality for use by other NgModules.

Every Angular application has at least one NgModule class, [the *root module*](guide/bootstrapping), which is conventionally named `AppModule` and resides in a file named `app.module.ts`.
You launch your application by *bootstrapping* the root NgModule.

While a small application might have only one NgModule, most applications have many more *feature modules*.
The *root* NgModule for an application is so named because it can include child NgModules in a hierarchy of any depth.

## NgModule metadata

An NgModule is defined by a class decorated with `@NgModule()`.
The `@NgModule()` decorator is a function that takes a single metadata object, whose properties describe the module.
The most important properties are as follows.

| Properties     | Details |
|:---            |:---     |
| `declarations` | The [components](guide/architecture-components), *directives*, and *pipes* that belong to this NgModule.                                                                                                                                    |
| `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](guide/architecture-services) that this NgModule contributes to the global collection of services; they become accessible in all parts of the application. \(You can also specify providers at the component level.\) |
| `bootstrap`    | The main application view, called the *root component*, which hosts all other application views. Only the *root NgModule* should set the `bootstrap` property.                                                                              |

Here's a simple root NgModule definition.

<code-example header="src/app/app.module.ts" path="architecture/src/app/mini-app.ts" region="module"></code-example>
{'fraction_non_alphanumeric': 0.05966672639311951, 'fraction_numerical': 0.0008958967926894822, 'mean_word_length': 2.1824401368301025, 'pattern_counts': {'":': 0, '<': 7, '<?xml version=': 0, '>': 7, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 38, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3212416', 'n_tokens_mistral': 1137, 'n_tokens_neox': 1099, 'n_words': 593}