2015-11-05 21:51:06 -08:00
[](https://twitter.com/SwiftOnSecurity)
2015-11-04 20:09:55 -08:00
[](https://github.com/auchenberg/volkswagen) [](http://badge.fury.io/gh/angular-class%2Fangular2-webpack-starter)
2015-10-30 11:30:06 -07:00
[](https://david-dm.org/angularclass/angular2-webpack-starter)
[](http://issuestats.com/github/angularclass/angular2-webpack-starter)
[](http://issuestats.com/github/angularclass/angular2-webpack-starter) [](http://stackshare.io/angularclass/angular-2-webpack-starter)
2015-07-12 04:57:25 -07:00
2015-05-17 22:04:24 -07:00
<p align="center">
2015-09-14 15:53:16 -07:00
<a href="https://angularclass.com" target="_blank">
<img src="https://cloud.githubusercontent.com/assets/1016365/9863762/a84fed4a-5af7-11e5-9dde-d5da01e797e7.png" alt="Webpack and Angular 2" width="500" height="320"/>
</a>
2015-05-17 22:04:24 -07:00
</p>
2015-10-30 11:30:06 -07:00
# Angular2 Webpack Starter [](https://angularclass.com/slack-join) [](https://gitter.im/angularclass/angular2-webpack-starter?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
2015-05-18 05:22:20 +00:00
2015-07-12 04:57:25 -07:00
2015-09-24 00:13:07 -07:00
> An Angular 2 starter kit featuring [Angular 2](https://angular.io) ([Router](https://angular.io/docs/js/latest/api/router/), [Forms](https://angular.io/docs/js/latest/api/forms/),
2015-07-03 20:05:21 -07:00
[Http ](https://angular.io/docs/js/latest/api/http/ ),
2015-07-11 18:52:13 -07:00
[Services ](https://gist.github.com/gdi2290/634101fec1671ee12b3e#_follow_@AngularClass_on_twitter ),
2015-12-21 09:48:45 -08:00
[Tests ](https://angular.io/docs/js/latest/api/test/ ), [E2E ](https://angular.github.io/protractor/#/faq#what-s-the-difference-between-karma-and-protractor-when-do-i-use-which- )), [Karma ](https://karma-runner.github.io/ ), [Protractor ](https://angular.github.io/protractor/ ), [Jasmine ](https://github.com/jasmine/jasmine ), [Istanbul ](https://github.com/gotwarlost/istanbul ), [TypeScript ](http://www.typescriptlang.org/ ), [Typings ](https://github.com/typings/typings ), and [Webpack ](http://webpack.github.io/ ) by [AngularClass ](https://angularclass.com ).
2015-05-30 13:35:57 -07:00
2015-11-22 19:18:38 -08:00
> If you're looking for Angular 1.x please use [NG6-starter](https://github.com/angularclass/NG6-starter)
> If you're looking to learn about Webpack and ES6 Build Tools check out [ES6-build-tools](https://github.com/AngularClass/ES6-build-tools)
2015-05-15 18:34:00 -07:00
2015-09-24 00:13:07 -07:00
This seed repo serves as an Angular 2 starter for anyone looking to get up and running with Angular 2 and TypeScript fast. Using a [Webpack ](http://webpack.github.io/ ) 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.
* Best practices in file and application organization for Angular 2.
2015-05-23 01:06:32 -07:00
* Ready to go build system using Webpack for working with TypeScript.
2015-09-24 00:13:07 -07:00
* Angular 2 examples that are ready to go when experimenting with Angular 2.
* A great Angular 2 seed repo for anyone who wants to start their project.
* Testing Angular 2 code with Jasmine and Karma.
2015-12-21 09:48:45 -08:00
* Coverage with Istanbul and Karma
* End-to-end Angular 2 code using Protractor.
* Type manager with Typings
2015-07-14 03:04:15 -07:00
2015-03-07 22:47:37 -08:00
2015-07-11 16:28:34 -07:00
``` coffeescript
2015-12-18 09:47:10 -08:00
Warning: Make sure you ' re using the latest version of Node.js and NPM
2015-07-11 16:28:34 -07:00
```
2015-07-14 03:04:15 -07:00
[Is Angular 2 Ready Yet? ](http://splintercode.github.io/is-angular-2-ready/ )
2015-07-11 16:28:34 -07:00
2015-05-17 21:20:11 -07:00
### Quick start
2015-08-23 21:11:52 -07:00
> Clone/Download the repo then edit `app.ts` inside [`/src/app/app.ts`](/src/app/app.ts)
2015-05-17 21:37:31 -07:00
2015-05-14 19:13:20 -07:00
``` bash
2015-07-11 17:28:39 -07:00
# clone our repo
2015-12-14 16:27:45 -07:00
git clone https://github.com/angularclass/angular2-webpack-starter.git
2015-07-11 17:28:39 -07:00
# change directory to our repo
cd angular2-webpack-starter
2015-10-03 22:51:49 -07:00
# install the repo with npm
npm install
2015-12-14 16:27:45 -07:00
# install typescript typings
typings install
2015-10-03 22:51:49 -07:00
# start the server
2015-12-14 16:27:45 -07:00
npm start
2015-05-17 21:20:11 -07:00
```
2015-10-03 22:51:49 -07:00
go to [http://localhost:3000 ](http://localhost:3000 ) in your browser
2015-05-17 21:20:11 -07:00
2015-07-04 15:10:08 -07:00
# Table of Contents
* [File Structure ](#file-structure )
* [Getting Started ](#getting-started )
* [Dependencies ](#dependencies )
* [Installing ](#installing )
* [Running the app ](#running-the-app )
* [Contributing ](#contributing )
* [TypeScript ](#typescript )
* [Frequently asked questions ](#frequently-asked-questions )
2015-07-11 19:27:36 -07:00
* [Support, Questions, or Feedback ](#support-questions-or-feedback )
2015-07-04 15:10:08 -07:00
* [License ](#license )
2015-05-17 21:37:31 -07:00
2015-05-17 21:20:11 -07:00
## File Structure
We use the component approach in our starter. This is the new standard for developing Angular apps and a great way to ensure maintainable code by encapsulation of our behavior logic. A component is basically a self contained app usually in a single file or a folder with each concern as a file: style, template, specs, e2e, and component class. Here's how it looks:
```
2015-05-17 23:12:07 -07:00
angular2-webpack-starter/
2015-07-03 16:13:18 -07:00
├──src/ * our source files that will be compiled to javascript
2015-12-13 20:58:57 -08:00
| ├──bootstrap.ts * our entry file for our browser environment
│ │
2015-12-21 09:48:45 -08:00
| ├──polyfills.ts * our polyfills file for es6, es7, and zone.js
│ │
2015-12-13 20:58:57 -08:00
| ├──vendor.ts * our vendor file
2015-07-12 06:10:30 -07:00
│ │
2015-08-23 21:42:31 -07:00
│ ├──app/ * WebApp: folder
2015-12-13 12:26:07 -08:00
│ │ ├──app.spec.ts * a simple test of components in app.ts
2015-07-12 19:05:38 -07:00
│ │ ├──app.ts * App.ts: a simple version of our App component components
│ │ └──bootstrap.ts * entry file for app
│ │
2015-12-13 20:50:53 -08:00
│ └──public/ * static assets are served here
│ ├──favicon.ico * replace me with your own favicon.ico
│ ├──service-worker.js * ignore this. Web App service worker that's not complete yet
│ ├──robots.txt * for search engines to crawl your website
│ ├──human.txt * for humans to know who the developers are
│ │
│ └──index.html * Index.html: where we place our script tags
2015-07-12 06:10:30 -07:00
│
2015-07-12 19:05:38 -07:00
├──test/ * this is our global unit tests and end-to-end tests
2015-07-11 18:52:13 -07:00
│
2015-12-08 19:42:37 -08:00
├──spec-bundle.js * ignore this magic that sets up our angular 2 testing environment
2015-10-03 22:51:49 -07:00
├──karma.config.js * karma config for our unit tests
2015-07-12 19:05:38 -07:00
├──protractor.config.js * protractor config for our end-to-end tests
2015-07-03 16:13:18 -07:00
├──tsconfig.json * config that webpack uses for typescript
2015-12-13 20:50:53 -08:00
├──typings.json * our typings manager
2015-07-03 16:13:18 -07:00
├──package.json * what npm uses to manage it's dependencies
└──webpack.config.js * our webpack config
2015-05-14 19:13:20 -07:00
```
2015-03-07 22:47:37 -08:00
2015-05-17 21:20:11 -07:00
# Getting Started
## Dependencies
What you need to run this app:
2015-05-18 04:29:19 -07:00
* `node` and `npm` (`brew install node` )
2015-12-11 07:16:45 -08:00
* Ensure you're running the latest versions Node `v4.1.x` + and NPM `2.14.x` +
2015-05-18 04:29:19 -07:00
2015-07-21 01:40:30 -07:00
Once you have those, you should install these globals with `npm install --global` :
* `webpack` (`npm install --global webpack` )
2015-09-10 17:56:45 -07:00
* `webpack-dev-server` (`npm install --global webpack-dev-server` )
2015-07-21 01:40:30 -07:00
* `karma` (`npm install --global karma-cli` )
* `protractor` (`npm install --global protractor` )
2015-12-13 20:50:53 -08:00
* `typings` (`npm install --global typings` )
* `typescript` (`npm install --global typescript` )
2015-05-17 23:18:14 -07:00
2015-05-17 21:20:11 -07:00
## Installing
2015-05-17 23:18:14 -07:00
* `fork` this repo
2015-05-17 21:20:11 -07:00
* `clone` your fork
* `npm install` to install all dependencies
2015-12-14 16:27:45 -07:00
* `typings install` to install necessary typings
2015-07-26 09:34:17 -07:00
* `npm run server` to start the dev server in another tab
2015-05-17 21:20:11 -07:00
## Running the app
2015-08-03 14:14:50 -07:00
After you have installed all dependencies you can now run the app. Run `npm run server` to 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:3000` (or if you prefer IPv6, if you're using `express` server, then it's `http://[::1]:3000/` ).
2015-12-14 16:27:45 -07:00
2015-05-14 19:13:20 -07:00
### server
2015-03-07 22:47:37 -08:00
``` bash
2015-12-13 20:50:53 -08:00
npm run server # or either webpack-dev-server
2015-03-07 22:47:37 -08:00
```
2015-05-14 19:13:20 -07:00
2015-12-14 16:27:45 -07:00
## Other commands
2015-07-13 01:49:30 -07:00
2015-05-17 21:20:11 -07:00
### build files
``` bash
2015-12-13 20:50:53 -08:00
npm run build
2015-05-17 21:20:11 -07:00
```
### watch and build files
2015-03-08 16:01:55 -07:00
``` bash
2015-12-13 20:50:53 -08:00
npm run watch
2015-07-13 01:49:30 -07:00
```
2015-12-14 16:27:45 -07:00
### run tests
2015-07-13 01:49:30 -07:00
``` bash
2015-12-13 20:50:53 -08:00
npm run test
2015-07-13 01:49:30 -07:00
```
### run webdriver (for end-to-end)
``` bash
2015-12-13 20:50:53 -08:00
npm run webdriver-start
2015-07-13 01:49:30 -07:00
```
### run end-to-end tests
``` bash
# make sure you have webdriver running and a sever for the client app
2015-12-13 20:50:53 -08:00
npm run e2e
2015-03-08 16:01:55 -07:00
```
2015-03-07 22:47:37 -08:00
2015-07-04 15:10:08 -07:00
# Contributing
2015-06-12 23:03:35 -04:00
You can include more examples as components but they must introduce a new concept such as `Home` component (separate folders), and Todo (services). I'll accept pretty much everything so feel free to open a Pull-Request
2015-05-17 21:20:11 -07:00
# TypeScript
2015-05-17 21:24:18 -07:00
> To take full advantage of TypeScript with autocomplete you would have to install it globally and use an editor with the correct TypeScript plugins.
2015-05-17 21:20:11 -07:00
## Use latest TypeScript compiler
2015-12-13 12:34:29 -08:00
TypeScript 1.7.x includes everything you need. Make sure to upgrade, even if you installed TypeScript previously.
2015-05-17 21:20:11 -07:00
2015-10-03 22:51:49 -07:00
```
npm install --global typescript
```
2015-05-15 18:34:00 -07:00
## Use a TypeScript-aware editor
We have good experience using these editors:
* [Visual Studio Code ](https://code.visualstudio.com/ )
* [Webstorm 10 ](https://www.jetbrains.com/webstorm/download/ )
* [Atom ](https://atom.io/ ) with [TypeScript plugin ](https://atom.io/packages/atom-typescript )
* [Sublime Text ](http://www.sublimetext.com/3 ) with [Typescript-Sublime-Plugin ](https://github.com/Microsoft/Typescript-Sublime-plugin#installation )
2015-07-04 15:10:08 -07:00
# Frequently asked questions
2015-07-11 19:27:36 -07:00
* What's the current browser support for Angular 2 Alpha?
2015-10-30 11:30:06 -07:00
* Please view the updated list of [browser support for Angular 2 ](https://github.com/angularclass/awesome-angular2#current-browser-support-for-angular-2 )
2015-12-09 09:41:15 -08:00
* Why is my service, aka provider, is not injecting parameter correctly?
2015-09-27 22:01:13 +02:00
* Please use `@Injectable()` for your service for typescript to correctly attach the metadata (this is a typescript beta problem)
2015-12-13 11:39:18 -08:00
* How do I run protractor with node 0.12.x?
* please check out this repo to use the old version of protractor https://github.com/AngularClass/angular2-webpack-starter/pull/146/files
2015-12-14 16:27:45 -07:00
* Where do I write my tests?
2015-12-09 09:41:15 -08:00
* You can write your tests anywhere you like in the `/src` directory next to your components or in the `test/` folder
2015-07-14 03:04:15 -07:00
* Is Angular 2 production ready yet?
* No, please visit [Is Angular 2 Ready Yet? ](http://splintercode.github.io/is-angular-2-ready/ ) website.
2015-12-14 16:27:45 -07:00
* How do I start the app when I get `EACCES` and `EADDRINUSE` errors?
2015-08-02 10:24:07 -07:00
* The `EADDRINUSE` error means the port `3000` is currently being used and `EACCES` is lack of permission for webpack to build files to `./__build__/`
2015-07-14 03:04:15 -07:00
2015-07-05 18:42:39 -07:00
2015-07-11 19:27:36 -07:00
# Support, Questions, or Feedback
> Contact us anytime for anything about this repo or Angular 2
2015-05-17 22:21:08 -07:00
2015-12-09 09:41:15 -08:00
* [Chat: AngularClass.slack ](http://angularclass.com/member-join/ )
2015-05-17 22:21:08 -07:00
* [Twitter: @AngularClass ](https://twitter.com/AngularClass )
2015-12-09 09:41:15 -08:00
* [Gitter: AngularClass/angular2-webpack-starter ](https://gitter.im/angularclass/angular2-webpack-starter )
2015-05-17 22:21:08 -07:00
2015-07-12 17:28:27 -07:00
# Other Seed/Starter/Example Repos
2015-10-30 11:30:06 -07:00
* [angular2-webpack-starter (AngularClass) ](https://github.com/angularclass/angular2-webpack-starter )
2015-12-09 09:41:15 -08:00
* Client/Server, Webpack, TypeScript, TSD, Protractor, Karma, Jasmine
2015-10-25 21:32:15 +00:00
* [ng2-play (Pawel Kozlowski) ](https://github.com/pkozlowski-opensource/ng2-play )
2015-08-06 14:20:55 -07:00
* Client only, Minimalist, SystemJS, Gulp, TypeScript
2015-07-12 17:28:27 -07:00
* [angular2-seed (Minko Gechev) ](https://github.com/mgechev/angular2-seed )
* Client only, SystemJS, Gulp, TypeScript, TSD, Versioned, Env Dev/Prod
2015-09-28 15:40:09 -07:00
* [ng2-lab (Roland Groza) ](https://github.com/rolandjitsu/ng2-lab )
2015-07-13 00:35:59 -07:00
* Client only, ES6, TypeScript, Firebase, Gulp, Ci, TSD, TSLint
2015-07-12 17:28:27 -07:00
* [ng2-jspm-seed (Rob Wormald) ](https://github.com/robwormald/ng2-jspm-seed )
2015-07-13 00:35:59 -07:00
* Client only, TypeScript, TSD, Gulp, JSPM, Minimalist
* [babel-angular2-app (Shuhei Kagawa) ](https://github.com/shuhei/babel-angular2-app )
2015-12-13 12:03:59 -08:00
* Client only, Minimalist, Babel, ES6+, browserify
2015-12-14 16:27:45 -07:00
2015-05-17 22:21:08 -07:00
___
2015-12-14 16:27:45 -07:00
enjoy — **AngularClass **
2015-05-14 19:13:20 -07:00
2015-05-15 18:34:00 -07:00
<br><br>
2015-05-14 19:13:20 -07:00
2015-09-14 15:53:16 -07:00
[](https://angularclass.com)
2015-05-14 19:13:20 -07:00
##[AngularClass](https://angularclass.com)
2015-12-19 20:35:31 +02:00
> Learn AngularJS, Angular 2, and Modern Web Development from the best.
2015-09-21 21:04:20 -07:00
> Looking for corporate Angular training, want to host us, or Angular consulting? patrick@angularclass.com
2015-07-04 15:10:08 -07:00
# License
2015-07-12 12:34:41 -07:00
[MIT ](/LICENSE )
