Angular Icon Get 73% off the Angular Master bundle

See the bundle then add to cart and your discount is applied.

0 days
00 hours
00 mins
00 secs

Write Angular like a pro. Angular Icon

Follow the ultimate Angular roadmap.

Bootstrapping your first Angular 2 app

In this series of four Angular (v2+) posts, we’ll explore how to bootstrap an Angular app, create a component, pass data into a component and pass new data out of a component using events.


{:.no_toc} 1. Bootstrapping your first Angular app 2. Creating your first Angular component 3. Passing data into Angular components with @Input 4. Component events with EventEmitter and @Output in Angular


Angular quickstart guide is a great place to get started with the next version of Angular, however there are some crucial aspects of the tutorial that can be elaborated on those new to Angular.

Let’s walk through the bare essentials in a sensible order to get started and actually teach you what’s happening with all the boilerplate setup we get, as well as how to create your first Angular component and bootstrap your app.

Tooling options

A quick brief on the tooling options available when setting up your first Angular project.


Webpack has become the defacto standard when building Angular applications, you can check an introduction to Webpack post here on the Angular documentation.


System was heavily used in the beginning whilst Angular was being built and during the release candidate stages before official release, however the team have switched to advocating Webpack instead due to it being much more powerful.

Angular CLI

The Angular CLI was built to help scaffold new projects, create components and help with deployment. Underneath it utilises Webpack for you, it’s a great starting place for beginners to alleviate new tooling associated around Angular.

Angular Directives In-Depth eBook Cover

Free eBook

Directives, simple right? Wrong! On the outside they look simple, but even skilled Angular devs haven’t grasped every concept in this eBook.

  • Green Tick Icon Observables and Async Pipe
  • Green Tick Icon Identity Checking and Performance
  • Green Tick Icon Web Components <ng-template> syntax
  • Green Tick Icon <ng-container> and Observable Composition
  • Green Tick Icon Advanced Rendering Patterns
  • Green Tick Icon Setters and Getters for Styles and Class Bindings

Root Component

To bootstrap an Angular app, we need a root component. We’ll be covering how to create our own component in the next guide. Let’s take a typical root component that you’ll have likely seen when bootstrapping Angular. Angular needs this root component to bootstrap the application from:

// app.component.ts
import { Component } from '@angular/core';

  selector: 'app-root',
  template: `
    <div class="app">
      Hello world!
export class AppComponent {}

Root module

Each root component lives within a module, and these are defined using @NgModule. Here’s the typical @NgModule for an Angular application, which will need to import our root component:

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';

  declarations: [
  bootstrap: [
  imports: [
export class AppModule {}

You can read more on NgModule here. Here’s a quick explanation on the three @NgModule properties used above:


Now we’ve got a root component and root module, we need to learn how to bootstrap that particular module.

Module export/import

You may have noticed above that when using @NgModule we use the export keyword on the module AppModule. This allows us to import it elsewhere and tell Angular to bootstrap that particular module.

Typically you’d bootstrap an Angular app by importing that module into a new file:

// main.ts
import { AppModule } from './app.module';

Browser bootstrapping

As Angular can be bootstrapped in multiple environments, such as server-side, we need to import a module specific to the environment we’re bootstrapping in. For browser bootstrapping, we need to import something called the platform-browser-dynamic module:

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

You can also see we’ve got platformBrowserDynamic as the sole import from this module, this is actually a bootstrapping function that allows us to instantiate our app.

Bootstrapping the module

The next step is telling the above imported method what module you’d like to bootstrap. In our case, we’ve created AppModule, which registers AppComponent. We also have AppModule imported in the file above, which we can simply pass into a bootstrapModule method:

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


And that’s it! These are the key concepts of bootstrapping an Angular application.


Everything we’ve done here is readily available in a Plunker for you to have a look through, when using something like Plunker, you’ll have to use System.js as we cannot use Webpack (as it’s an offline development tool):

Next steps

Now we’ve learned how the basic bootstrapping process works, let’s move on and learn how to create an Angular component.

Learn Angular the right way.

The most complete guide to learning Angular ever built.
Trusted by 82,951 students.

Todd Motto

with Todd Motto

Google Developer Expert icon Google Developer Expert

Related blogs 🚀

Free eBooks:

Angular Directives In-Depth eBook Cover

JavaScript Array Methods eBook Cover

NestJS Build a RESTful CRUD API eBook Cover