Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including @webacad/angular-tools with all npm packages installed. Try it out:

require("@angular/core/package.json"); // @angular/core is a peer dependency. require("@angularclass/hmr/package.json"); // @angularclass/hmr is a peer dependency. require("rxjs/package.json"); // rxjs is a peer dependency. var angularTools = require("@webacad/angular-tools")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

@webacad/angular-tools v2.0.2

Tool set for angular applications

NPM version Build Status


Ready to use tool set for angular applications


  • Express server
  • Handlebars template engine for server
  • HMR (hot module replacement)
  • Webpack
    • Development/production modes
    • Multiple entries
    • Hashed chunks
    • @ngtools/webpack + AngularCompilerPlugin
    • file-loader for fonts
    • webpack.DefinePlugin
  • Sass + PostCSS


$ npm install --save rxjs@^5.5.0
$ npm install --save @angular/core@^5.0
$ npm install --save @angularclass/hmr
$ npm install --save @webacad/angular-tools

or with yarn

$ yarn add rxjs@^5.5.0
$ yarn add @angular/core^5.0
$ yarn add @angularclass/hmr
$ yarn add @webacad/angular-tools

About documentation

All examples are written in typescript.

Configure webpack


import {EnvironmentType} from '@webacad/angular-tools';
import {webpackConfigFactory} from '@webacad/angular-tools/webpack';
import * as webpack from 'webpack';

const environment: EnvironmentType = 'development';    // possible values are "development" or "production"

function createWebpackConfig(): webpack.Configuration
    return webpackConfigFactory(environment, {
        root: __dirname,
        distDir: '/path/to/public/dist/directory',
        publicPath: '/url/path',
        hmr: true,
        sourceMaps: true,
        angular: {
            entryModule: './app.module#AppModule',
        postcss: {
            config: '/path/to/postcss/config.js',
        webpack: {
            analyze: true,
            fonts: {
                outputPath: 'relative/path/to/publicPath',
                publicPath: '/url/path',
            plugins: {
                define: {
                    'process.env': {
                        'NODE_ENV': `'${environment}'`,
            entry: {
                polyfills: './app/polyfills.ts',
                app: './app/main.ts',
                styles: './styles/index.scss',

export default createWebpackConfig;

Configure express server


import {EnvironmentType} from '@webacad/angular-tools';
import {createServer} from '@webacad/angular-tools/expressjs';
import createWebpackConfig from '../webpack.config';
import * as path from 'path';

const environment: EnvironmentType = 'development';

createServer(environment, createWebpackConfig(), {
    index: path.join(__dirname, 'views', 'index.handlebars'),
    port: 8080,
    hmr: true,
    staticPaths: {
        '/public/images': '/path/to/public/images',    // using express.static
    parameters: {    // parameters passed to handlebar templates



<!DOCTYPE html>
        <meta charset="UTF-8">
        <base href="/">

        {{#if production}}
            <link rel="stylesheet" href="{{assets 'styles/css'}}">

        <script src="{{asset 'manifest/js'}}"></script>

        {{#if hmr}}
            <script src="{{asset 'hmr/js'}}"></script>

        {{#if development}}
            <script src="{{asset 'styles/js'}}"></script>

        <script src="{{asset 'polyfills/js'}}"></script>
        <script src="{{asset 'app/js'}}"></script>

Build-in template variables

  • production: True for production environment
  • development: True for development environment
  • hmr: True if hot module replacement is allowed



Automatically generated css file which should be used only in production environment.


Automatically generated manifest file.


Automatically generated hmr configuration (only if hmr is allowed).


Automatically generated js file with styles which should be used only in development environment.


Your polyfills.ts entry file.


Your app.ts entry file.

Main.ts file

import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {enableProdMode} from '@angular/core';
import {hmrBootstrap} from '@webacad/angular-tools/hmr';

import {AppModule} from './app.module';

const bootstrap = () => platformBrowserDynamic().bootstrapModule(AppModule);

if (process.env.NODE_ENV === 'production') {

} else {
    Error['stackTraceLimit'] = Infinity;

    if (module['hot']) {
        hmrBootstrap(module, bootstrap);
    } else {

Update scripts in package.json


    "scripts": {
        "build": "webpack",
        "start": "ts-node server/server.ts"


RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free