🚀 feat/chore: angular 4.3, tslint, aot, webpack 3 and more

Author: Felix Gladisch

.gitignore

@@ -7,7 +7,7 @@
 # Node files
 /node_modules
 npm-debug.log
-yarn.lock
+yarn-error.log
 
 # OS generated files
 .DS_Store

README.md

@@ -3,15 +3,20 @@
 [![Build Status](https://travis-ci.org/fgladisch/angular2-webpack-seed.svg?branch=master)](https://travis-ci.org/fgladisch/angular2-webpack-seed)
 
 This is a minimalistic Angular 2+ seed project, featuring:
-* [TypeScript 2.2](https://www.typescriptlang.org)
+* [Angular 4.3](https://www.typescriptlang.org)
+* [TypeScript 2.4](https://www.typescriptlang.org)
+* [Bootstrap 4 (Beta)](http://v4-alpha.getbootstrap.com)
+* [Ahead-of-Time Compilation](https://angular.io/guide/aot-compiler)
+* [Tree Shaking](https://webpack.js.org/guides/tree-shaking)
 * [Sass](http://sass-lang.com)
-* [Bootstrap 4](http://v4-alpha.getbootstrap.com)
 * [ng-bootstrap](https://github.com/ng-bootstrap/ng-bootstrap)
 * [ngx-translate](https://github.com/ngx-translate)
 * [webpack](https://webpack.github.io)
 * [Karma](https://karma-runner.github.io)
 * [Jasmine](http://jasmine.github.io)
 * [@types](https://blogs.msdn.microsoft.com/typescript/2016/06/15/the-future-of-declaration-files)
+* [TSLint](https://github.com/palantir/tslint)
+* [Codelyzer](https://github.com/mgechev/codelyzer)
 
 This seed follows the [Angular Style Guide](https://angular.io/docs/ts/latest/guide/style-guide.html).
 
@@ -21,30 +26,50 @@ This seed follows the [Angular Style Guide](https://angular.io/docs/ts/latest/gu
 
 ```bash
 npm install
+# or
+yarn
 ```
 
-### Run development server
+### Development server
 
 Use the following command to start a local development server which will display the application at [http://localhost:3000](http://localhost:3000).
 
 ```bash
 npm start
+# or
+yarn start
 ```
 
-### Run tests
+### Test your code
 
 The following command will run your unit tests with [Karma](https://karma-runner.github.io).
 
 ```bash
 npm test
+# or
+yarn test
+```
+
+### Analyze your code with TSLint
+
+Run [TSLint](https://github.com/palantir/tslint) with rules based on the [Angular Style Guide](https://angular.io/docs/ts/latest/guide/style-guide.html) with this command.
+
+```bash
+npm run lint
+# or
+yarn lint
 ```
 
 ### Build for production
 
 Production files are located in `dist`.
 
+This project uses [Ahead-of-Time Compilation](https://angular.io/guide/aot-compiler) and [Tree Shaking](https://webpack.js.org/guides/tree-shaking) for much smaller production files. Files over a threshold of 1KB are also gzipped, which results in approximately 150KB for all JS/HTML/CSS in this project.
+
 ```bash
 npm run build
+# or
+yarn build
 ```
 
 # License

config/helpers.js

@@ -1,9 +1,9 @@
-const path = require('path');
-const _root = process.cwd();
+const path  = require('path')
+const _root = process.cwd()
 
 function root(args) {
-  args = Array.prototype.slice.call(arguments, 0);
-  return path.join.apply(path, [_root].concat(args));
+  args = Array.prototype.slice.call(arguments, 0)
+  return path.join.apply(path, [_root].concat(args))
 }
 
-exports.root = root;
+exports.root = root

config/karma-shim.js

@@ -14,32 +14,32 @@
  * file for our client, when we run test, it will compile and bundle them
  * all here! Crazy huh. So we need to do some setup
  */
-Error.stackTraceLimit = Infinity;
+Error.stackTraceLimit = Infinity
 
-require('core-js/es6');
-require('core-js/es7/reflect');
+require('core-js/es6')
+require('core-js/es7/reflect')
 
 // Typescript emit helpers polyfill
-require('ts-helpers');
+require('ts-helpers')
 
-require('zone.js/dist/zone');
-require('zone.js/dist/long-stack-trace-zone');
-require('zone.js/dist/proxy'); // since zone.js 0.6.15
-require('zone.js/dist/sync-test');
-require('zone.js/dist/jasmine-patch'); // put here since zone.js 0.6.14
-require('zone.js/dist/async-test');
-require('zone.js/dist/fake-async-test');
+require('zone.js/dist/zone')
+require('zone.js/dist/long-stack-trace-zone')
+require('zone.js/dist/proxy') // since zone.js 0.6.15
+require('zone.js/dist/sync-test')
+require('zone.js/dist/jasmine-patch') // put here since zone.js 0.6.14
+require('zone.js/dist/async-test')
+require('zone.js/dist/fake-async-test')
 
 // RxJS
-require('rxjs/Rx');
+require('rxjs/Rx')
 
-const testing = require('@angular/core/testing');
-const browser = require('@angular/platform-browser-dynamic/testing');
+const testing = require('@angular/core/testing')
+const browser = require('@angular/platform-browser-dynamic/testing')
 
 testing.TestBed.initTestEnvironment(
   browser.BrowserDynamicTestingModule,
   browser.platformBrowserDynamicTesting()
-);
+)
 
 /*
  * Ok, this is kinda crazy. We can use the context method on
@@ -50,16 +50,16 @@ testing.TestBed.initTestEnvironment(
  * any file that ends with spec.ts and get its path. By passing in true
  * we say do this recursively
  */
-const testContext = require.context('../src', true, /\.spec\.ts/);
+const testContext = require.context('../src', true, /\.spec\.ts/)
 
 /*
  * get all the files, for each file, call the context function
  * that will require the file and load it up here. Context will
  * loop and require those spec files here
  */
 function requireAll(requireContext) {
-  return requireContext.keys().map(requireContext);
+  return requireContext.keys().map(requireContext)
 }
 
 // requires and returns all modules that match
-const modules = requireAll(testContext);
+requireAll(testContext)

config/karma.conf.js

@@ -9,11 +9,11 @@ module.exports = function (config) {
 
     // Karma will require() these plugins
     plugins: [
-      "karma-jasmine",
-      "karma-mocha-reporter",
-      "karma-phantomjs-launcher",
-      "karma-sourcemap-loader",
-      "karma-webpack"
+      'karma-jasmine',
+      'karma-mocha-reporter',
+      'karma-phantomjs-launcher',
+      'karma-sourcemap-loader',
+      'karma-webpack'
     ],
 
     /*

config/webpack.common.js

@@ -1,14 +1,18 @@
-const webpack = require('webpack');
-const ContextReplacementPlugin = require('webpack/lib/ContextReplacementPlugin');
-const ExtractTextPlugin = require('extract-text-webpack-plugin');
-const CopyWebpackPlugin = require('copy-webpack-plugin');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const helpers = require('./helpers');
+const webpack = require('webpack')
+const { AotPlugin } = require('@ngtools/webpack')
+const ContextReplacementPlugin = require('webpack/lib/ContextReplacementPlugin')
+const ExtractTextPlugin = require('extract-text-webpack-plugin')
+const CopyWebpackPlugin = require('copy-webpack-plugin')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+const helpers = require('./helpers')
 
-module.exports = function() {
+module.exports = () => {
+
+  const isProd = process.env.ENV === 'production'
 
   return {
 
+    // Array of extensions that will be used to resolve modules
     resolve: {
       extensions: ['.ts', '.js', '.json'],
       modules: [
@@ -17,12 +21,11 @@ module.exports = function() {
       ],
     },
 
-    // Entry points the bundles
+    // The entry point for the bundle
     entry: {
       'polyfills': helpers.root('src', 'polyfills.ts'),
-      'vendor': helpers.root('src', 'vendor.ts'),
       'app': [
-        helpers.root('src', 'main.ts'),
+        helpers.root('src', isProd ? 'main-aot.ts' : 'main-jit.ts'),
         helpers.root('src', 'assets', 'styles', 'main.scss')
       ]
     },
@@ -32,14 +35,14 @@ module.exports = function() {
         // Compiles all .ts files
         {
           test: /\.ts$/,
-          loaders: ['awesome-typescript-loader?silent=true', 'angular2-template-loader'],
+          loaders: isProd ? ['@ngtools/webpack'] : ['awesome-typescript-loader?silent=true', 'angular2-template-loader'],
           exclude: /\.spec\.ts$/
         },
         // Injects all html templates into their components and loads referenced assets
         {
           test: /\.html$/,
           loader: 'html-loader',
-          exclude: helpers.root('src/index.html')
+          exclude: helpers.root('src', 'index.html')
         },
         // Copies all images and fonts into dist/assets
         {
@@ -67,19 +70,23 @@ module.exports = function() {
     },
 
     plugins: [
+      new AotPlugin({
+        tsConfigPath: helpers.root('tsconfig-aot.json'),
+        entryModule: helpers.root('src', 'app', 'app.module#AppModule')
+      }),
       // File name for the extracted styles
-      new ExtractTextPlugin('[name].css'),
+      new ExtractTextPlugin(`[name]${isProd ? '.[hash]' : ''}.css`),
       // Identifies common modules and puts them into a commons chunk
       new webpack.optimize.CommonsChunkPlugin({
-        name: ['app', 'vendor', 'polyfills']
+        name: ['app', 'polyfills']
       }),
       // Provides context to Angular's use of System.import
       // See: https://github.com/AngularClass/angular2-webpack-starter/issues/993#issuecomment-283423040
       new ContextReplacementPlugin(
         /angular(\\|\/)core(\\|\/)@angular/,
         helpers.root('src')
       ),
-      // Generates an HTML5 file that includes all webpack bundles
+      // Generates a HTML5 file that includes all webpack bundles
       new HtmlWebpackPlugin({
         template: helpers.root('src', 'index.html'),
         favicon: helpers.root('src', 'favicon.ico')
@@ -95,6 +102,6 @@ module.exports = function() {
       hints: false
     }
 
-  };
+  }
 
-};
+}

config/webpack.dev.js

@@ -1,8 +1,8 @@
-const webpack = require('webpack');
-const webpackMerge = require('webpack-merge');
-const commonConfig = require('./webpack.common.js');
+const webpack = require('webpack')
+const webpackMerge = require('webpack-merge')
+const commonConfig = require('./webpack.common.js')
 
-const ENV = process.env.NODE_ENV = process.env.ENV = 'development';
+const ENV = process.env.NODE_ENV = process.env.ENV = 'development'
 
 module.exports = webpackMerge(commonConfig(), {
 
@@ -28,4 +28,4 @@ module.exports = webpackMerge(commonConfig(), {
     })
   ]
 
-});
+})

config/webpack.prod.js

@@ -1,24 +1,59 @@
-const webpack = require('webpack');
-const webpackMerge = require('webpack-merge');
-const UglifyJsPlugin = require('webpack/lib/optimize/UglifyJsPlugin');
-const commonConfig = require('./webpack.common.js');
-const helpers = require('./helpers');
+const webpack = require('webpack')
+const webpackMerge = require('webpack-merge')
+const CompressionPlugin = require('compression-webpack-plugin');
+const UglifyJsPlugin = require('webpack/lib/optimize/UglifyJsPlugin')
+const commonConfig = require('./webpack.common.js')
+const LoaderOptionsPlugin = require('webpack/lib/LoaderOptionsPlugin');
+const helpers = require('./helpers')
 
-const ENV = process.env.NODE_ENV = process.env.ENV = 'production';
+const ENV = process.env.NODE_ENV = process.env.ENV = 'production'
 
 module.exports = webpackMerge(commonConfig(), {
 
   output: {
     path: helpers.root('dist'),
-    filename: '[name].js',
-    chunkFilename: '[id].chunk.js'
+    filename: '[name].[hash].js',
+    chunkFilename: '[id].[hash].chunk.js'
   },
 
   plugins: [
+    new LoaderOptionsPlugin({
+      minimize: true,
+      debug: false,
+      options: {
+        htmlLoader: {
+          minimize: false
+        }
+      }
+    }),
     new UglifyJsPlugin({
+      beautify: false,
+      output: {
+        comments: false
+      },
       mangle: {
-        keep_fnames: true
-      }
+        screw_ie8: true
+      },
+      compress: {
+        screw_ie8: true,
+        warnings: false,
+        conditionals: true,
+        unused: true,
+        comparisons: true,
+        sequences: true,
+        dead_code: true,
+        evaluate: true,
+        if_return: true,
+        join_vars: true,
+        negate_iife: false
+      },
+    }),
+    new CompressionPlugin({
+      asset: '[path].gz[query]',
+      algorithm: 'gzip',
+      test: /\.js$|\.css$|\.html$/,
+      threshold: 10240,
+      minRatio: 0.8
     }),
     new webpack.DefinePlugin({
       'process.env': {
@@ -27,4 +62,4 @@ module.exports = webpackMerge(commonConfig(), {
     })
   ]
 
-});
+})