@webacad/angular-tools

v2.0.2

Published

2 years ago

Tool set for angular applications

Downloads

0High
0Medium
0Low

davidkcz

angular express handlebars hmr postcss sass scss webpack hot-module-replacement

WebACAD/AngularTools

Ready to use tool set for angular applications

Includes

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

Installation

$ 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

webpack.config.ts:

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

server/server.ts:

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

    },
});

server/views/index.handlebars:

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

        {{#if production}}
            <link rel="stylesheet" href="{{assets 'styles/css'}}">
        {{/if}}
    </head>
    <body>
        <my-app>Loading...</my-app>

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

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

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

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

Build-in template variables

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

Assets

Styles/css:

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

Manifest/js:

Automatically generated manifest file.

Hmr/js:

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

Styles/js:

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

Polyfills/js:

Your polyfills.ts entry file.

App/js:

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') {
    enableProdMode();
    bootstrap();

} else {
    Error['stackTraceLimit'] = Infinity;
    require('zone.js/dist/long-stack-trace-zone');

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

Update scripts in package.json

package.json:

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

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme