Work in progress. This kit is not created for learning purposes, but rather as a base for my own upcoming projects. I'm not sure that world needs yet another Angular 2 + webpack boilerplate, but initially it was shared as a solution for TypeScript code coverage issue.
Feel free to create issues and PRs, though, if you know how to do this thing better.
Angular 2 example application (examples for components, HTTP, forms, routing are yet to come - most likely when Angular 2 is out of RC state).
Templates and stylesheets are embedded into JS bundle. I chose SASS for styling.
index.html
is generated using html-webpack-plugin. Some popular analytics/metrics are yet to be added there (e.g. Google Analytics or New Relic).
Hot module replacement is not provided here. Possibly I'll add it later. Same goes for service workers.
Clone repository and run npm install
.
Run npm start
and point your browser to http://localhost:9045/
.
Use npm test
to run test suite. Karma is used as test runner, Jasmine - as testing framework. Code coverage reports are generated using istanbul and remap-istanbul (this provides possibility to map back to TypeScript).
Use npm lint
to check TypeScript files (via tslint) and SASS stylesheets (via sass-lint). Codelyzer helps to keep code close to Angular 2 Style Guide.
You won't find end-to-end tests in this project (usually people use Protractor for this purpose). I believe that E2E/QA testing should be written in a separate project/repository, especially if you are working on projects with microservice architecture.
Use npm run build
and you will get JS bundles, their maps and index.html
in dist
directory. To build for production, use NODE_ENV=production npm run build
(webpack configuration is chosen according to this environment variable).
Run npm run docs
to generate documentation for TypeScript (typedoc is used for that) and SASS stylesheets (done with kss-node). This might seem a little bit unusual to have docs for styles, but I find KSS very nice tool to keep them understandable.
Modules are resolved not only from node_modules
directory, but from src
as well. This is done to keep imports simple and avoid situations like import { MyService } from '../../../app.service'
.
If you are using JetBrains IDE, mark src
directory as resource root.