2017-06-09 17:48:53 -04:00
# Bootstrapping
2017-03-31 19:57:13 -04:00
2017-11-03 14:13:24 -04:00
An Angular Module (NgModule) class describes how the application parts fit together.
Every application has at least one Angular Module, the _root_ module
2017-07-16 06:32:22 -04:00
that you [bootstrap ](#main ) to launch the application.
2017-11-03 14:13:24 -04:00
You can call the class anything you want. The conventional name is `AppModule` .
2017-02-22 13:09:39 -05:00
2017-11-03 14:13:24 -04:00
The [**Angular CLI** ](https://cli.angular.io/ ) produces a new project with the following minimal `AppModule` .
You evolve this module as your application grows.
2017-02-22 13:09:39 -05:00
2017-11-03 14:13:24 -04:00
< code-example path = "cli-quickstart/src/app/app.module.ts" title = "src/app/app.module.ts" linenums = "false" >
2017-03-27 11:08:53 -04:00
< / code-example >
2017-02-22 13:09:39 -05:00
2017-03-31 19:57:13 -04:00
2017-02-22 13:09:39 -05:00
After the `import` statements, you come to a class adorned with the
2017-03-31 19:57:13 -04:00
**`@NgModule`** [_decorator_ ](guide/glossary#decorator '"Decorator" explained' ).
2017-02-22 13:09:39 -05:00
2017-07-11 18:05:20 -04:00
The `@NgModule` decorator identifies `AppModule` as an `NgModule` class.
2017-02-22 13:09:39 -05:00
`@NgModule` takes a _metadata_ object that tells Angular how to compile and launch the application.
2017-11-03 14:13:24 -04:00
The `@NgModule` properties for the minimal `AppModule` generated by the CLI are as follows:
2017-02-22 13:09:39 -05:00
2017-11-03 14:13:24 -04:00
* **[_declarations_](#declarations)** — declares the application components. At the moment, there is only the `AppComponent` .
2017-02-22 13:09:39 -05:00
2017-11-03 14:13:24 -04:00
* **[_imports_](#imports)** — the `BrowserModule` , which this and every application must import in order to run the app in a browser.
2017-03-31 19:57:13 -04:00
2017-11-03 14:13:24 -04:00
* **[_providers_](#providers)** — there are none to start but you are likely to add some soon.
2017-02-22 13:09:39 -05:00
2017-11-03 14:13:24 -04:00
* **[_bootstrap_](#bootstrap-array)** — the _root_ `AppComponent` that Angular creates and inserts into the `index.html` host web page.
2017-02-22 13:09:39 -05:00
2017-11-03 14:13:24 -04:00
The [Angular Modules (NgModules) ](guide/ngmodule ) guide dives deeply into the details of `@NgModule` .
All you need to know at the moment is a few basics about these four properties.
{@a declarations}
2017-02-22 13:09:39 -05:00
2017-11-03 14:13:24 -04:00
### The _declarations_ array
2017-02-22 13:09:39 -05:00
2017-11-03 14:13:24 -04:00
You tell Angular which components belong to the `AppModule` by listing it in the module's `declarations` array.
As you create more components, you'll add them to `declarations` .
2017-03-31 19:57:13 -04:00
2017-11-03 14:13:24 -04:00
You must declare _every_ component in an Angular Module class.
If you use a component without declaring it, you'll see a clear error message in the browser console.
You'll learn to create two other kinds of classes —
[directives ](guide/attribute-directives ) and [pipes ](guide/pipes ) —
that you must also add to the `declarations` array.
2017-03-31 19:57:13 -04:00
2017-11-03 14:13:24 -04:00
< div class = "alert is-important" >
2017-02-22 13:09:39 -05:00
2017-11-03 14:13:24 -04:00
**Only _declarables_ ** — _components_ , _directives_ and _pipes_ — belong in the `declarations` array.
Do not put any other kind of class in `declarations` . Do _not_ declare `NgModule` classes. Do _not_ declare service classes. Do _not_ declare model classes.
2017-02-22 13:09:39 -05:00
2017-04-10 11:51:13 -04:00
< / div >
2017-02-22 13:09:39 -05:00
2017-11-03 14:13:24 -04:00
{@a imports}
2017-02-22 13:09:39 -05:00
2017-11-03 14:13:24 -04:00
### The _imports_ array
2017-03-27 11:08:53 -04:00
2017-11-03 14:13:24 -04:00
Angular Modules are a way to consolidate features that belong together into discrete units.
Many features of Angular itself are organized as Angular Modules.
HTTP services are in the `HttpClientModule` . The router is in the `RouterModule` .
Eventually you may create your own modules.
Add a module to the `imports` array when the application requires its features.
_This_ application, like most applications, executes in a browser.
Every application that executes in a browser needs the `BrowserModule` from `@angular/platform-browser` .
So every such application includes the `BrowserModule` in its _root_ `AppModule` 's `imports` array.
Other guide pages will tell you when you need to add additional modules to this array.
2017-03-27 11:08:53 -04:00
2017-11-03 14:13:24 -04:00
< div class = "alert is-important" >
2017-03-31 19:57:13 -04:00
2017-11-03 14:13:24 -04:00
**Only `@NgModule` classes** go in the `imports` array. Do not put any other kind of class in `imports` .
< / div >
< div class = "l-sub-section" >
2017-03-31 19:57:13 -04:00
2017-07-11 18:05:20 -04:00
The `import` statements at the top of the file and the NgModule's `imports` array
2017-02-22 13:09:39 -05:00
are unrelated and have completely different jobs.
The _JavaScript_ `import` statements give you access to symbols _exported_ by other files
so you can reference them within _this_ file.
2017-06-09 17:48:53 -04:00
You add `import` statements to almost every application file.
2017-02-22 13:09:39 -05:00
They have nothing to do with Angular and Angular knows nothing about them.
The _module's_ `imports` array appears _exclusively_ in the `@NgModule` metadata object.
2017-11-03 14:13:24 -04:00
It tells Angular about specific _other_ Angular Modules— all of them classes decorated
2017-07-11 18:05:20 -04:00
with `@NgModule` — that the application needs to function properly.
2017-02-22 13:09:39 -05:00
2017-04-10 11:51:13 -04:00
< / div >
2017-03-27 11:08:53 -04:00
2017-11-03 14:13:24 -04:00
{@a providers}
2017-03-27 11:08:53 -04:00
2017-11-03 14:13:24 -04:00
### The _providers_ array
2017-03-27 11:08:53 -04:00
2017-11-03 14:13:24 -04:00
Angular apps rely on [_dependency injection (DI)_ ](guide/dependency-injection )
to deliver services to various parts of the application.
2017-03-31 19:57:13 -04:00
2017-11-03 14:13:24 -04:00
Before DI can inject a service, it must create that service with the help of a _provider_ .
You can tell DI about a service's _provider_ in a number of ways.
Among the most popular ways is to register the service in the root `ngModule.providers` array, which will make that service available _everywhere_ .
2017-03-31 19:57:13 -04:00
2017-11-03 14:13:24 -04:00
For example, a data service provided in the `AppModule` s _providers_ can be injected into any
component anywhere in the application.
2017-02-22 13:09:39 -05:00
2017-11-03 14:13:24 -04:00
You don't have any services to provide yet.
But you will create some before long and you may chose to provide many of them here.
2017-02-22 13:09:39 -05:00
{@a bootstrap-array}
2017-03-31 19:57:13 -04:00
2017-02-22 13:09:39 -05:00
### The _bootstrap_ array
2017-07-16 06:32:22 -04:00
You launch the application by [_bootstrapping_ ](#main ) the root `AppModule` .
2017-02-22 13:09:39 -05:00
Among other things, the _bootstrapping_ process creates the component(s) listed in the `bootstrap` array
and inserts each one into the browser DOM.
Each bootstrapped component is the base of its own tree of components.
Inserting a bootstrapped component usually triggers a cascade of component creations that fill out that tree.
2017-06-09 17:48:53 -04:00
While you can put more than one component tree on a host web page, that's not typical.
2017-02-22 13:09:39 -05:00
Most applications have only one component tree and they bootstrap a single _root_ component.
You can call the one _root_ component anything you want but most developers call it `AppComponent` .
Which brings us to the _bootstrapping_ process itself.
{@a main}
## Bootstrap in _main.ts_
2017-11-03 14:13:24 -04:00
While there are many ways to bootstrap an application, most applications do so in the `src/main.ts` that is generated by the Angular CLI.
2017-03-27 11:08:53 -04:00
2017-11-03 14:13:24 -04:00
< code-example path = "cli-quickstart/src/main.ts" title = "src/main.ts" linenums = "false" >
2017-03-27 11:08:53 -04:00
< / code-example >
2017-02-22 13:09:39 -05:00
2017-11-03 14:13:24 -04:00
This code creates a browser platform for dynamic compilation and
2017-02-22 13:09:39 -05:00
bootstraps the `AppModule` described above.
The _bootstrapping_ process sets up the execution environment,
2017-06-09 17:48:53 -04:00
digs the _root_ `AppComponent` out of the module's `bootstrap` array,
2017-02-22 13:09:39 -05:00
creates an instance of the component and inserts it within the element tag identified by the component's `selector` .
2017-11-03 14:13:24 -04:00
The `AppComponent` selector — here and in most documentation samples — is `app-root`
so Angular looks for a `<app-root>` tag in the `index.html` like this one ...
2017-02-22 13:09:39 -05:00
2017-11-03 14:13:24 -04:00
< code-example title = "src/index.html (body)" linenums = "false" >
2017-02-22 13:09:39 -05:00
2017-11-03 14:13:24 -04:00
< body>
< app-root>< /app-root>
< /body>
2017-03-31 19:57:13 -04:00
2017-11-03 14:13:24 -04:00
< / code-example >
2017-03-31 19:57:13 -04:00
2017-02-22 13:09:39 -05:00
... and displays the `AppComponent` there.
2017-11-03 14:13:24 -04:00
The `main.ts` file is very stable. Once you've set it up, you may never change it again.
2017-03-31 19:57:13 -04:00
2017-11-03 14:13:24 -04:00
## More about Angular Modules
2017-02-22 13:09:39 -05:00
Your initial app has only a single module, the _root_ module.
As your app grows, you'll consider subdividing it into multiple "feature" modules,
2017-03-06 05:43:33 -05:00
some of which can be loaded later ("lazy loaded") if and when the user chooses
2017-02-22 13:09:39 -05:00
to visit those features.
2017-11-03 14:13:24 -04:00
When you're ready to explore these possibilities, visit the [Angular Modules ](guide/ngmodule ) guide.