https://github.com/kitconcept/webpack-starter-angular2
Webpack Starter for Angular 2
https://github.com/kitconcept/webpack-starter-angular2
Last synced: about 1 year ago
JSON representation
Webpack Starter for Angular 2
- Host: GitHub
- URL: https://github.com/kitconcept/webpack-starter-angular2
- Owner: kitconcept
- Created: 2016-06-06T07:43:17.000Z (about 10 years ago)
- Default Branch: master
- Last Pushed: 2018-02-09T10:48:08.000Z (over 8 years ago)
- Last Synced: 2025-05-11T12:11:35.190Z (about 1 year ago)
- Language: TypeScript
- Homepage:
- Size: 155 KB
- Stars: 1
- Watchers: 4
- Forks: 4
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
[](https://travis-ci.org/kitconcept/webpack-starter-angular2)
# Webpack Starter Angular 2
Minimalistic seed project to get started with Angular 2, TypeScript and Webpack.
## Software Stack
- Angular 2 (final)
- Webpack 2
- TypeScript
- TsLint
- Karma, Mocha
## Prerequisits
Install webpack:
$ npm install -g webpack
## Usage
Checkout repository:
$ git clone https://github.com/kitconcept/webpack-starter-angular2.git
$ cd webpack-starter-angular2
Install dependencies:
$ npm install
Start development server:
$ npm start
Run unit tests:
$ npm test
## Testing
Install Dependencies:
$ npm install karma karma-chrome-launcher karma-firefox-launcher karma-jasmine karma-mocha-reporter karma-webpack jasmine-core @types/es6-shim @types/jasmine --save-dev
package.json:
"test": "karma start karma.conf.js"
More details: https://github.com/Farata/angular2typescript/tree/master/chapter10/angular2-webpack-starter
### Jenkins
Install karma-junit-reporter:
$ npm install karma-junit-reporter --save-dev
Add junit to report in karma.conf.js:
reporters: ['mocha', 'junit'],
## Test Coverage
Install dependencies:
$ npm install karma-coverage karma-sourcemap-loader --save-dev
Karma configuration (karma.conf.js):
reporters : ['mocha', 'junit', 'coverage'],
preprocessors: {'./karma-test-runner.js': ['webpack', 'coverage', 'sourcemap']},
coverageReporter: {
dir : 'coverage/',
reporters: [
{ type: 'text-summary' },
{ type: 'json' },
{ type: 'html' }
]
},
## Linting
Install tslint and tslint-loader:
$ npm install tslint tslint-loader --save-dev
Create initial configuration file:
$ node_modules/tslint/bin/tslint init
Configure tslint-loader (webpack.config.js):
preLoaders: [
{
test: /\.ts$/,
loader: "tslint"
}
],
tslint: {
configuration: {
rules: {
quotemark: [true, "double"]
}
},
// tslint errors are displayed by default as warnings
// set emitErrors to true to display them as errors
emitErrors: false,
// tslint does not interrupt the compilation by default
// if you want any file with tslint errors to fail
// set failOnHint to true
failOnHint: true,
// These options are useful if you want to save output to files
// for your continuous integration server
fileOutput: {
// The directory where each file's report is saved
dir: "./tslint-report/",
// The extension to use for each report's filename. Defaults to "txt"
ext: "xml",
// If true, all files are removed from the report directory at the beginning of run
clean: true,
// A string to include at the top of every report file.
// Useful for some report formats.
header: "\n",
// A string to include at the bottom of every report file.
// Useful for some report formats.
footer: ""
}
},
Install pre-commit hook:
$ npm install --save-dev pre-commit
Configure pre-commit hook (package.json):
"pre-commit": [
"lint"
],
## Code Guidelines
Enforce following the Angular 2 code guidelines with codelyzer.
Install codelyzer:
$ npm install --save-dev codelyzer
## Tools
### Sublime Text 3
https://github.com/Microsoft/TypeScript-Sublime-Plugin
### Resources
- Code samples from the book Angular 2 Development with TypeScript: https://github.com/Farata/angular2typescript
- AngularClass starter kit: https://github.com/AngularClass/angular2-webpack-starter