angular2-config-generator
An opinionated configuration generator for your Angular 2 environment. Generates customizable Webpack 2, Karma and Tslint configurations.
Installation
npm install angular2-config-generator --save-dev
Usage
Create webpack.config.js
.
'use strict';
module.exports = require('angular2-config-generator').webpack();
Create karma.conf.js
.
'use strict';
module.exports = require('angular2-config-generator').karma(
require('./webpack.config')
);
Setup package.json
scripts.
"scripts": {
"start": "ng-start",
"test": "ng-test"
}
After this the application can be run with npm start
and will be available on http://localhost:3000.
An example application is inside the src
directory
and can be copied as is to try out the package.
Outline
The setup consists of 3 entry points. All bundling is done with Webpack 2. They have to be at the exact same location if you don't modify the config files.
src/app/main.ts
for main application logic and bootstrappingsrc/app/vendor.ts
for vendor packages and common filessrc/app/test.ts
for running test files
All files under the src
directory will be publicly available.
After every modification to the source files, the page will be reloaded with the newly generated files.
One configuration
The concept is to have one configuration file for Webpack and one for Karma.
Behind the scenes it decides based on environment variable(process.env.NODE_ENV
),
NPM lifecycle event(process.env.npm_lifecycle_event
) or
given option(options.environment
) which mode to run.
lifecycle == 'start'
is development live-reload modelifecycle == 'test'
is testing single-run modelifecycle == '*test*'
is testing continuous-run modelifecycle == 'build'
is production single-run modeenv|options.enviroment == 'development'
is development live-reload modeenv|options.enviroment == 'test' && options.singleRun
is testing single-run modeenv|options.enviroment == 'test'
is testing continuous-run modeenv|options.enviroment == 'production'
is production single-run mode
Loaders
Typescript files are translated with awesome-typescript-loader
.
Inside components styleUrls
and templateUrl
will be inlined with angular2-template-loader
.
When using loadChildren
inside routing,
it will be moved to separate chunks with angular2-router-loader
.
Inside the src/app
directory .css
files will be required as strings to work with angular2-template-loader
.
Outside this directory they will be moved to a single file(style.bundle.css
) with extract-text-plugin
.
Currently only CSS files are supported for stylesheets.
But if you want another format, just add it to modules.rules
after the package generated the Webpack config.
Additional loaders are added for images and fonts to handle them inside stylesheets.
Testing
For test running Jasmine is used in combination with Karma + PhantomJS browser.
Tests can be run with the npm test
command.
It runs all files with *.spec.ts
extension inside the src/app
folder.
The test setup is done in src/app/test.ts
.
To run tests continuously add the following script: "scripts": { "test-watch": "ng-test --watch" }
.
It will speed up rebuilds and run the tests automatically after every change.
Linting
Linting is done with Tslint and Codelyzer rules. It is included as a pre-loader for Webpack.
Also an opinionated ruleset is exported based on tslint:recommended
.
It's setup:
{
"extends": "angular2-config-generator"
}
Deployment
After adding "scripts": { "build": "ng-build" }
and running it,
the generated files will appear in the dist
folder. These are minified and ready for deployment.
Github Pages deployment can be done with "scripts": { "deploy": "ng-deploy" }
.
AOT support
It can be enabled with the --aot
flag for both starting and building the application.
"scripts": {
"start": "ng-start --aot"
"deploy": "ng-deploy --aot"
}
Instead of the original endpoint src/app/main.ts
it starts from src/app/main.aot.ts
.