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 (NgModule) 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. Do not put any other kind of class in
import statements at the top of the file and the Angular module's
are unrelated and have completely different jobs.
import statements give you access to symbols exported by other files
so you can reference them within this file.
import statements to almost every application file.
They have nothing to do with Angular and Angular knows nothing about them.
imports array appears exclusively in the
@NgModule metadata object.
It tells Angular about specific other Angular modules — all of them classes decorated with
that the application needs to function properly.
The declarations array
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 must declare every component in an
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 and pipes —
that you must also add to the
Only declarables — components, directives and pipes — belong in the
Do not 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
src 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.
More about Angular Modules
Your initial app has only a single module, the root module. As your app grows, you'll consider subdividing it into multiple "feature" modules, so of which can be loaded later ("lazy loaded") if and when the user chooses to visit those features.
When you're ready to explore these possibilities, visit the Angular Modules (NgModule) guide.