[](https://david-dm.org/preboot/angular2-webpack#info=dependencies) [](https://david-dm.org/
npm install icon-picker 
Note: This guide is following the Angular's Style Guide so I will be changing conventions here and there eventually. You are free to use your own conventions with this starter.
Note 2: There is no conventions yet for RC5 on the style guide so there will be a future update here for that.
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.
* Best practices in file and application organization for Angular 2.
* Ready to go build system using Webpack for working with TypeScript.
* Testing Angular 2 code with Jasmine and Karma.
* Coverage with Istanbul
* End-to-end Angular 2 code using Protractor.
* Stylesheets with SASS (not required, it supports regular css too).
* Error reported with TSLint and Codelyzer.
* Documentation with TypeDoc.
>Warning: Make sure you're using the latest version of Node.js and NPM
> Clone/Download the repo then edit app.ts inside /src/app/app.component.ts
``bashclone our repo
$ git clone https://github.com/preboot/angular2-webpack.git my-app
go to http://localhost:8080 in your browser.Table of Contents
* Getting Started
* Dependencies
* Installing
* Developing
* Testing
* Production
* Documentation
* Frequently asked questions
* TypeScript
* License
Getting Started
Dependencies
What you need to run this app:
*
and npm (Use NVM)
* Ensure you're running Node (v5.x.x+) and NPM (3.x.x+)Installing
*
fork this repo
* clone your fork
* npm install to install all dependenciesDeveloping
After you have installed all dependencies you can now start developing with:
*
npm startIt will start a local server using
which will watch, build (in-memory), and reload for you. The application can be checked at http://localhost:8080.As an alternative, you can work using Hot Module Replacement (HMR):
*
npm run start:hmrAnd you are all set! You can now modify your components on the fly without having to reload the entire page.
Testing
#### 1. Unit Tests
* single run:
* live mode (TDD style): #### 2. End-to-End Tests (aka. e2e, integration)
* single run:
in a tab, if not already running!*:
* in a new tab:
* in another new tab:
* interactive mode:
* instead of the last command above, you can run:
* 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 hereProduction
To build your application, run:
*
You can now go to
and deploy that to your server!Documentation
You can generate api docs (using TypeDoc) for your code with the following:
*
npm run docsFAQ
#### 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:
sh
npm install bootstrap@next --save
`And in vendor.ts add the following:
ts
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.
We have good experience using these editors:
* Visual Studio Code
* Webstorm 11+
* Atom with TypeScript plugin
* Sublime Text with Typescript-Sublime-Plugin