Angular 2 Quick Start Guide

Guide to get started with Angular 2 using webpack. Learn more about angular 2 by doing it from scratch.

Demo

Source is from Angular 2 Webpack

Follow the below steps to do it from scratch or if your lazy just clone the repo and follow the step 3.

Step 1 - Configuration files

Setup the configuration files

• package.json - dependencies for angular 2.

• tsconfig.json - Typescript configurations.

• typings.json - Additional configuration for typescript.

• webpack.config.js - Common webpack configuration for both dev & production env.

• config/webpack.dev.js & config/webpack.prod.js - Webpack configurations for dev and production env.

• config/karma.conf.js - To run karma test cases.

More details on typescript configurations.

Step 2 - Folder Setup

Create a folder called src/, public/.

• src/index.html - To load the root component (All the links, script tags will be added by webpack).

• src/app/ - App component (css, html, component.ts, module.ts files)

• public/css - CSS which are application specific.

• public/images - Images.

Step 3 - Installation

Fork this repo git clone https://github.com/gokulkrishh/angular-2-quick-start

• npm install - To install dependencies.

• npm run start - To run the project.

• npm run test - To run karma test cases.

• npm run build - To build the project for production.

• npm run deploy - To deploy the application in github pages.

Thats all, you are good to go with angular 2 development. Have fun!!

References

• Webpack introduction to angular 2
• Travis setup for angular 2
• Angular 2 quick start

MIT Licensed