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-toolsor with yarn
$ yarn add rxjs@^5.5.0
$ yarn add @angular/core^5.0
$ yarn add @angularclass/hmr
$ yarn add @webacad/angular-toolsAll examples are written in typescript.
webpack.config.ts:
import{EnvironmentType}from'@webacad/angular-tools';import{webpackConfigFactory}from'@webacad/angular-tools/webpack';import*aswebpackfrom'webpack';constenvironment: EnvironmentType='development';// possible values are "development" or "production"functioncreateWebpackConfig(): webpack.Configuration{returnwebpackConfigFactory(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',},},});}exportdefaultcreateWebpackConfig;server/server.ts:
import{EnvironmentType}from'@webacad/angular-tools';import{createServer}from'@webacad/angular-tools/expressjs';importcreateWebpackConfigfrom'../webpack.config';import*aspathfrom'path';constenvironment: 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><metacharset="UTF-8"><basehref="/">
{{#if production}}
<linkrel="stylesheet" href="{{assets 'styles/css'}}">
{{/if}}
</head><body><my-app>Loading...</my-app><scriptsrc="{{asset 'manifest/js'}}"></script>
{{#if hmr}}
<scriptsrc="{{asset 'hmr/js'}}"></script>
{{/if}}
{{#if development}}
<scriptsrc="{{asset 'styles/js'}}"></script>
{{/if}}
<scriptsrc="{{asset 'polyfills/js'}}"></script><scriptsrc="{{asset 'app/js'}}"></script></body></html>production: True for production environmentdevelopment: True for development environmenthmr: True if hot module replacement is allowed
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.
import{platformBrowserDynamic}from'@angular/platform-browser-dynamic';import{enableProdMode}from'@angular/core';import{hmrBootstrap}from'@webacad/angular-tools/hmr';import{AppModule}from'./app.module';constbootstrap=()=>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();}}package.json:
{
"scripts": {
"build": "webpack",
"start": "ts-node server/server.ts"
}
}