@holisticon/angular-common

Angular Common Module

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

Installation

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

Usage

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;

• karma.conf.ci.js:

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/karma.conf.ci.js",
    "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

Debugging

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 http://127.0.0.1:8282/?port=5858 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;

PWA-Support

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 https://github.com/NekR/offline-plugin/blob/master/docs/options.md
    },
  ...
};

module.exports = appConfig;

Add additional webpack options:

Add entries to the property additionalWebpackOptions:

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