A simple starter for Angular 2 using webpack
Inspired by Angular2 Webpack Starter & Angular 1 Webpack demo.
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 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.
- Easily add new components using Angular 2 cli.
- 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.
- 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.ts
# clone our repo
git clone https://github.com/ocombe/ng2-webpack.git
# change directory to our repo
cd ng2-webpack
# install the repo with npm
npm install
# start the server
npm start
go to http://localhost:3000 in your browser
- Getting Started
- Contributing
- TypeScript
- Frequently asked questions
- Support, Questions, or Feedback
- License
What you need to run this app:
node
andnpm
(brew install node
)- Ensure you're running the latest versions Node (
v4.1.x
+) and NPM (2.14.x
+)
fork
this repoclone
your forknpm install
to install all dependencies
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:3000
(or if you prefer IPv6, if you're using express
server, then it's http://[::1]:3000/
).
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
npm run build
npm run watch
npm test
npm run webdriver-start
# make sure you have webdriver running and a server for the client app (using `npm start` before running the e2e tests for example)
npm run e2e
npm run docs
To take full advantage of TypeScript with autocomplete you would have to install it globally and use an editor with the correct TypeScript plugins.
TypeScript 1.7.x includes everything you need. Make sure to upgrade, even if you installed TypeScript previously.
npm install --global typescript
We have good experience using these editors:
- Visual Studio Code
- Webstorm 11+
- Atom with TypeScript plugin
- Sublime Text with Typescript-Sublime-Plugin
Contact us anytime for anything about this repo or Angular 2
- angular2-webpack-starter (AngularClass)
- Client/Server, Webpack, TypeScript, TSD, Protractor, Karma, Jasmine
- ng2-play (Pawel Kozlowski)
- Client only, Minimalist, SystemJS, Gulp, TypeScript
- angular2-seed (Minko Gechev)
- Client only, SystemJS, Gulp, TypeScript, TSD, Versioned, Env Dev/Prod
- ng2-lab (Roland Groza)
- Client only, ES6, TypeScript, Firebase, Gulp, Ci, TSD, TSLint
- ng2-jspm-seed (Rob Wormald)
- Client only, TypeScript, TSD, Gulp, JSPM, Minimalist
- babel-angular2-app (Shuhei Kagawa)
- Client only, Minimalist, Babel, ES6+, browserify