Angular Common Module
DEPRECATED , use Angular-CLI instead
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
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;
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
AoT
Add your module here:
...
var appConfig = {
entryModule: path.resolve(sourceRoot, 'app/app.module#AppModule')
...
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;
Custom watch URL
...
var appConfig = {
...
watchURL: 'http://localhost:3000/?ionicplatform=ios',
...
};
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: {
},
...
};
module.exports = appConfig;
Add additional webpack options:
Add entries to the property additionalWebpackOptions:
...
additionalWebpackOptions: {
plugins: [
new webpack.NormalModuleReplacementPlugin(
/moment[\/\\]locale$/,
/de|en/
),
new webpack.optimize.CommonsChunkPlugin({
name: ['polyfills', 'vendor','common']
}),
]
},
module.exports = appConfig;