Angular2 starter with Continuous Integration, Jenkins DevOps, Automated Test Coverage using Sonarqube and Primeng- Rich angular2 UI component library

Angular 2 is still in Release Candidate stage, please don't use this in production

Follow Angular 2 Changelog here

• Introduction
• Installation
• Start
• Testing
• Production
• [DevOps] (#DevOps)
• Running-on-IBM-Bluemix
• Extension
• Contributing
• Special thanks

Welcome to Primeng Angular 2 Starter! This starter contains almost everything you need to start developing Angular 2:

• NPM for package manager

• TypeScript for the base language

  • with Typings for TypeScript definition manager

• Gulp for workflow (from serve, watch, compile, test to build)

• Browsersync for development server & reload capability

• SystemJS for module loader

• Codelyzer for static code analyzer

• Karma for test-runner

• Jasmine for test framework

• Istanbul for test coverage

  • with Remap Istanbul for remapping Javascript to TypeScript coverage

• SystemJS Builder or Webpack for module bundling in production

• Primeng integration with a sample accordion on the homepage and event handling

• [Sonarqube] (http://www.sonarqube.org/) inetgartion for static code analysis using TSLint and Code coverage of Karma Tests using [SonarTsPlugin] (https://github.com/Pablissimo/SonarTsPlugin)

Firstly, you need to have Node.js

• For v4, please use v4.3.x (LTS) or higher (highly recommended)
• For v5, please use v5.6.x or higher, here is why
• Ready for v6

You need v4.x or higher for Protractor

Get the starter from releases page

Then, install these packages globally:

npm install -g gulp

After that, go to the starter directory and just run:

npm install

Let's start up the server, run: gulp or gulp serve-dev

and done! The browser will popup and you can start trying Angular 2! Every changes to the file will refresh the browser automatically and it'll also compile your changed TypeScripts files to Javascript files.

This starter comes with testing gulp workflow

Just run

gulp test

and it'll compile all TypeScript files, start Karma, then remap Istanbul coverage so that it shows TypeScript coverage, not the transpiled JavaScript coverage.

Firstly start the server:

gulp serve-dev

To begin testing, run:

gulp e2e

and it'll compile all E2E spec files in /src/test/e2e/*.spec.ts, boot up Selenium server then launches Chrome browser.

All build tasks will run the gulp test, the bundle will only be created if the test passed.

You can create production build by running:

gulp build

or you can create production build and then serve it using Browsersync by running:

gulp serve-build

The starter defaults to bundle using SystemJS Builder extension. There is Webpack extension available too, feel free to swap it as you like.

Run following in case you run into issues during gulp build

npm install typings -g
typing install

Jenkins integration
Execute Shell

npm install
gulp build
sed -i -- 's/\/source/src/g' report/remap/lcov.info

Because lcov.info has incorrect source path, it needs to be changed
http://stackoverflow.com/questions/37164545/how-to-upload-karma-test-report-to-sonar/38290092#38290092

SonarQube Integration
sonar-project.properties in the code repo:

sonar.projectKey=primeng-angular
sonar.projectName=primeng-angular
sonar.projectVersion=1.0
sonar.souceEncoding=UTF-8

sonar.ts.excludetypedefinitionfiles=true
sonar.ts.tslintconfigpath=tslint.json

sonar.sources=src/
sonar.exclusions=**/test/**/*,**/*.d.ts,**/*.spec.ts,**/*.routes.ts,**/tmp/**/*

sonar.ts.lcov.reportpath=report/remap/lcov.info
sonar.ts.tslintpath=node_modules/tslint/bin/tslint

In Jenkins Job: Execute SonarQube Scanner: Path to project properties: sonar-project.properties

Artifactory Integration
Generic Artifactory Integration
Published artifacts: **/dist/*.zip

On gulp build, artifact produced is primeng-angular2-starter-1.0.0-rc.4.zip in the dist folder. This zip file contains source code and build folder. Build folder are compiled, compressed html, js and css contents that are used to deploy a production level app.

To push to bluemix execute:
cf push primeng.angular -p dist/primeng-angular2-starter-1.0.0-rc.4.zip

Bluemix will use nodejs_buildpack and execute npm install followed npm start npm start executes server.js and launches the html and css contetns from build folder

Hosted: http://primengangular.mybluemix.net/

You can extend this starter with many extensions built by the community. Browse the extensions here

Feel free to submit a PR if there are any issues or new features, please read this before

• Please visit the antonybudianto angular2-starter wiki for more details.