An Angular module class describes how the application parts fit together.
Every application has at least one Angular module, the root module
that you bootstrap to launch the application.
You can call it anything you want. The conventional name is
The setup instructions produce a new project with the following minimal
You'll evolve this module as your application grows.
import statements, you come to a class adorned with the
@NgModule decorator identifies
AppModule as an Angular module class (also called an
@NgModule takes a metadata object that tells Angular how to compile and launch the application.
- imports — the
BrowserModulethat this and every application needs to run in a browser.
- declarations — the application's lone component, which is also ...
- bootstrap — the root component that Angular creates and inserts into the
index.htmlhost web page.
The Angular Modules (NgModules) guide dives deeply into the details of Angular modules. All you need to know at the moment is a few basics about these three properties.
The imports array
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
HttpModule. The router is in the
Eventually you may create a feature module.
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
So every such application includes the
BrowserModule in its root
Other guide and cookbook pages will tell you when you need to add additional modules to this array.
NgModule classes go in the
imports array. Don't put any other kind of class in
Don't confuse the
import statements at the top of the file with the Angular module's
They have different jobs.
import statements give you access to symbols exported by other files
so you can reference them within this file.
They have nothing to do with Angular and Angular knows nothing about them.
imports array tells Angular about specific Angular modules — classes decorated with
that the application needs to function properly.
The declarations array
You must declare every component in one (and only one)
You tell Angular which components belong to the
AppModule by listing it in the module's
As you create more components, you'll add them to
You'll learn to create two other kinds of classes —
directives and pipes —
that you must also add to the
Only declarables — components, directives and pipes — belong in the
Don't put any other kind of class in
NgModule classes, not service classes, not model classes.
The bootstrap array
You launch the application by bootstrapping the root
Among other things, the bootstrapping process creates the component(s) listed in the
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.
While you can put more than one component tree on a host web page, that's not typical. 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
Which brings us to the bootstrapping process itself.
Bootstrap in main.ts
There are many ways to bootstrap an application. The variations depend upon how you want to compile the application and where you want to run it.
In the beginning, you will compile the application dynamically with the Just-in-Time (JIT) compiler and you'll run it in a browser. You can learn about other options later.
The recommended place to bootstrap a JIT-compiled browser application is in a separate file
app folder named
This code creates a browser platform for dynamic (JIT) compilation and
AppModule described above.
The bootstrapping process sets up the execution environment,
digs the root
AppComponent out of the module's
creates an instance of the component and inserts it within the element tag identified by the component's
AppComponent selector — here and in most documentation samples — is
so Angular looks for a
<my-app> tag in the
index.html like this one ...
... and displays the
This file is very stable. Once you've set it up, you may never change it again.
Every Angular application must have a root
NgModule, even the QuickStart.
You didn't see it but it was there.
A script in the
index.html generated a hidden
AppModule and bootstrapped it for you
so you could focus on the
AppComponent and discover the essential Angular more quickly.
If you're feeling adventurous, add your own
main.ts to the
live code in the QuickStart plunker.
Remove the following
<script> tag from the
index.html and see your work in action.