node package manager


Angular Common Module

Greenkeeper badge

Build Status Build status npm version Code Climate Issue Count Dependency Status devDependency Status

A simple module for Angular 2, that encapsulates the complete Webpack build and just requires some basic configuration in the using Angular2 projects without hassle around with the build



npm install @holisticon/angular-common --save-dev

Or if you want to use the development version (nightly build), which maybe not stable!:

npm install @holisticon/angular-common@next --save-dev


Basic Usage

  • Create an config path, e.g. etc/appConfig.js:
var appConfig = {
  srcPath: 'src/main/frontend',
  testPath: 'src/test/frontend',
  junit: {
    name: 'My-TestApp',
    dir: 'target/surefire-reports'
module.exports = appConfig;

And provide dummy files for

  • karma.conf.js:
process.env['APP_CONFIG'] = require("path").resolve(__dirname, 'etc', 'appConfig.js');
module.exports = require('@holisticon/angular-common').karma;
process.env['APP_CONFIG'] = require("path").resolve(__dirname, 'etc', 'appConfig.js');
module.exports = require('@holisticon/angular-common').karma_ci;
  • webpack.config.js:
process.env['APP_CONFIG'] = require("path").resolve(__dirname, 'etc', 'appConfig.js');
module.exports = require('@holisticon/angular-common').webpack;
  • Append following entries to your package.json:
  "scripts": {
    "start": "npm install && npm run watch",
    "watch": "cross-env NODE_ENV=development webpack-dev-server --hot --inline --colors --progress --display-error-details --port 3000 ",
    "build": "cross-env NODE_ENV=production webpack",
    "test": "cross-env NODE_ENV=test karma start etc/",
    "debug": "cross-env NODE_ENV=test karma start etc/karma.conf.js"

Configure proxy:

  proxy: {
    '*': {
      headers: {"Access-Control-Allow-Origin": "http://localhost:3000", "Access-Control-Allow-Credentials": "true"},
      target: 'http://localhost:8080',
      secure: false

Advanced Usage


If you need to debug the tests use the node-inspector:

npm run debug
node-inspector --web-port=8282

You can then open chrome at for debugging.

If you want to have verbose logging add NODE_DEBUG=holisticon_angular-common:

NODE_DEBUG=holisticon_angular-common npm run build

Multiple Entries

var path = require("path"),
  srcPath = 'src/main/frontend',
  testPath = 'src/test/frontend',
  sourceRoot = path.resolve(__dirname, '..', srcPath);
var appConfig = {
  srcPath: srcPath,
  testPath: testPath,
  copy: [{
    from: sourceRoot + '/img',
    to: 'img'
  }, {
    from: sourceRoot + '/i18n',
    to: 'i18n'
  entry: {
    'polyfills': sourceRoot + '/polyfills.browser.ts',
    'app': sourceRoot + '/main.browser.ts',
    'app2': sourceRoot + '/customer.browser.ts'
module.exports = appConfig;

JUnit-Report customization

var appConfig = {
    junit: {
    title: 'MyProject',
    dir: 'dist/test-reports'
module.exports = appConfig;


If you want to build a PWA, you can utilize the included Offline-Plugin. Just enter an option pwa with the configuration options:

var appConfig = {
    pwa: {
      // see 
module.exports = appConfig;

Add additional webpack options:

Add entries to the property additionalWebpackOptions:

  additionalWebpackOptions: {
    plugins: [
      /* use only de and en locale */
      new webpack.NormalModuleReplacementPlugin(
      new webpack.optimize.CommonsChunkPlugin({
        name: ['polyfills', 'vendor','common']
module.exports = appConfig;