Skip to content
A complete, yet simple, starter for Angular 2 using webpack
JavaScript TypeScript HTML CSS
Branch: master
Clone or download
Pull request Compare This branch is 3 commits ahead, 138 commits behind preboot:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


Dependency Status devDependency Status

A complete, yet simple, starter for Angular 2 using Webpack.

This seed repo serves as an Angular 2 starter for anyone looking to get up and running with Angular 2 and TypeScript fast. Using Webpack for building our files and assisting with boilerplate. We're also using Protractor for our end-to-end story and Karma for our unit tests.

Warning: Make sure you're using the latest version of Node.js and NPM

Is Angular 2 Ready Yet?

Quick start

Clone/Download the repo then edit app.ts inside /src/app/app.ts

# clone our repo
$ git clone my-app

# change directory to your app
$ cd my-app

# install the dependencies with npm
$ npm install

# start the server
$ npm start

go to http://localhost:8080 in your browser.

Table of Contents

Getting Started


What you need to run this app:

  • node and npm (Use NVM)
  • Ensure you're running Node (v4.1.x+) and NPM (2.14.x+)


  • fork this repo
  • clone your fork
  • npm install to install all dependencies

Running the app

After you have installed all dependencies you can now run the app with:

npm start

It will start a local server using webpack-dev-server which will watch, build (in-memory), and reload for you. The port will be displayed to you as http://localhost:8080.


Add new components, services, pipes with Angular 2 cli

  • npm install -g angular-cli to install Angular 2 cli
  • Add a new component with: ng generate component my-new-component
  • Add a new service with: ng generate service my-new-service
  • Add a new pipe with: ng generate pipe my-new-pipe

Read more at angular-cli github.

Build files

  • single run: npm run build
  • build files and watch: npm run watch


1. Unit Tests

  • single run: npm test
  • live mode (TDD style): npm run test-watch

2. End-to-End Tests (aka. e2e, integration)

  • single run:
    • in a tab, if not already running!: npm start
    • in a new tab: npm run webdriver-start
    • in another new tab: npm run e2e
  • interactive mode:
    • instead of the last command above, you can run: npm run e2e-live
    • when debugging or first writing test suites, you may find it helpful to try out Protractor commands without starting up the entire test suite. You can do this with the element explorer.
    • you can learn more about Protractor Interactive Mode here


You can generate api docs (using TypeDoc) for your code with the following:

npm run docs


Do I need to add script / link tags into index.html ?

No, Webpack will add all the needed Javascript bundles as script tags and all the CSS files as link tags. The advantage is that you don't need to modify the index.html every time you build your solution to update the hashes.

How to include external angular 2 libraries ?

It's simple, just install the lib via npm and import it in your code when you need it. Don't forget that you need to configure some external libs in the bootstrap of your application.

How to include external css files such as bootstrap.css ?

Just install the lib and import the css files in vendor.ts. For example this is how to do it with bootstrap:

npm install bootstrap@4.0.0 --save

And in vendor.ts add the following:

import 'bootstrap/dist/css/bootstrap.css';


To take full advantage of TypeScript with autocomplete you would have to use an editor with the correct TypeScript plugins.

Use a TypeScript-aware editor

We have good experience using these editors:



You can’t perform that action at this time.