AppModule: the root module

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 AppModule.

The setup instructions produce a new project with the following minimal AppModule. You'll evolve this module as your application grows.


import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app.component'; @NgModule({ imports: [ BrowserModule ], declarations: [ AppComponent ], bootstrap: [ AppComponent ] }) export class AppModule { }

After the import statements, you come to a class adorned with the @NgModule decorator.

The @NgModule decorator identifies AppModule as an Angular module class (also called an NgModule class). @NgModule takes a metadata object that tells Angular how to compile and launch the application.

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 RouterModule. 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 BrowserModule from @angular/platform-browser. So every such application includes the BrowserModule in its root AppModule's imports array. Other guide and cookbook pages will tell you when you need to add additional modules to this array.

Only NgModule classes go in the imports array. Don't put any other kind of class in imports.

Don't confuse the import statements at the top of the file with the Angular module's imports array. They have different jobs.

The JavaScript 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.

The module's imports array tells Angular about specific Angular modules — classes decorated with @NgModule — that the application needs to function properly.

The declarations array

You must declare every component in one (and only one) NgModule class. 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.

You'll learn to create two other kinds of classes — directives and pipes — that you must also add to the declarations array.

Only declarablescomponents, directives and pipes — belong in the declarations array.   Don't put any other kind of class in declarations; not NgModule classes, not service classes, not model classes.

The bootstrap array

You launch the application by bootstrapping the root AppModule. 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.

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 AppComponent.

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 in the app folder named app/main.ts


import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './app.module'; platformBrowserDynamic().bootstrapModule(AppModule);

This code creates a browser platform for dynamic (JIT) compilation and bootstraps the AppModule described above.

The bootstrapping process sets up the execution environment, digs the root AppComponent out of the module's bootstrap array,   creates an instance of the component and inserts it within the element tag identified by the component's selector.

The AppComponent selector — here and in most documentation samples — is my-app so Angular looks for a <my-app> tag in the index.html like this one ...

<my-app><!-- content managed by Angular --></my-app>

... and displays the AppComponent there.

This file is very stable. Once you've set it up, you may never change it again.

QuickStart's AppModule

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 AppModule and 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.

Remove this script tag from "index.html"

<script> window.autoBootstrap = true; </script>

Next Step

Displaying Data