Upgrading various packages, updating readme, switching repo url, add …

…code coverage and better karma test support

.gitignore

@@ -1,3 +1,4 @@
 .idea/
 node_modules/
-dist/
+dist/
+coverage/

README.md

@@ -2,13 +2,12 @@
 
 A basic Angular 4 seed project utilizing the following technologies:
 
-* Angular 4.0.2
-* TypeScript 2.2
-* Karma/Jasmine (unit testing)
-* Codelyzer & TSLint (code linting)
-* PugJS (template engine)
-* SASS (css superset)
-* Webpack 2+ (build tools)
+* Angular 4.3.5
+* TypeScript 2.5
+* Karma/Jasmine
+* Codelyzer & TSLint
+* SASS/SCSS
+* Webpack 3
 
 ### Commands
 

config/build/webpack.common.js

@@ -0,0 +1,64 @@
+var webpack = require('webpack');
+var HtmlWebpackPlugin = require('html-webpack-plugin');
+var helpers = require('../helpers');
+
+module.exports = {
+    entry: {
+        'polyfills': './src/polyfills.ts',
+        'vendor': './src/vendor.ts',
+        'app': './src/main.ts'
+    },
+
+    resolve: {
+        extensions: [
+            '.js', '.ts'
+        ]
+    },
+
+    module: {
+        rules: [
+            {
+                test: /\.ts$/,
+                use: [ 'awesome-typescript-loader?configFileName=config/tsconfig.json', 'angular2-template-loader' ]
+            },
+            {
+                test: /\.html$/,
+                use: 'html-loader'
+            },
+            {
+                test: /\.pug$/,
+                use: [ 'raw-loader', 'pug-html-loader' ]
+            },
+            {
+                test: /\.scss$/,
+                exclude: /node_modules/,
+                use: [ 'raw-loader', 'css-loader', 'sass-loader' ]
+            },
+            {
+                test: /\.(png|jpe?g|gif|svg|woff|woff2|otf|ttf|eot|ico)$/,
+                use: 'file-loader?name=assets/[name].[hash].[ext]'
+            },
+            {
+                test: /\.css$/,
+                exclude: helpers.root('src', 'app'),
+                use: [ 'raw-loader', 'css-loader' ]
+            }
+        ]
+    },
+
+    plugins: [
+        new webpack.optimize.CommonsChunkPlugin({
+            name: [ 'app', 'vendor', 'polyfills' ]
+        }),
+
+        new HtmlWebpackPlugin({
+            template: 'src/index.html'
+        }),
+
+        new webpack.ContextReplacementPlugin(
+            /angular(\\|\/)core(\\|\/)@angular/,
+            helpers.root('src'), // location of your src
+            {}
+        )
+    ]
+};

config/build/webpack.dev.js

@@ -0,0 +1,27 @@
+var webpackMerge = require('webpack-merge');
+var commonConfig = require('./webpack.common.js');
+var helpers = require('../helpers');
+
+module.exports = webpackMerge(commonConfig, {
+    devtool: 'cheap-module-eval-source-map',
+
+    output: {
+        path: helpers.root('dist'),
+        publicPath: 'http://localhost:3000/',
+        filename: '[name].js',
+        chunkFilename: '[id].chunk.js'
+    },
+
+    devServer: {
+        historyApiFallback: true,
+        stats: 'minimal'/*,
+        TODO setup when REST service ready
+        proxy: {
+            '/api/**': {
+                target: 'http://localhost:8080/your-rest-service',
+                secure: false,
+                changeOrigin: true
+            }
+        }*/
+    }
+});

config/webpack.prod.js → config/build/webpack.prod.js

@@ -2,7 +2,7 @@ var webpack = require("webpack");
 var webpackMerge = require("webpack-merge");
 var ExtractTextPlugin = require("extract-text-webpack-plugin");
 var commonConfig = require("./webpack.common.js");
-var helpers = require("./helpers");
+var helpers = require("../helpers");
 
 const ENV = process.env.NODE_ENV = process.env.ENV = "production";
 

config/test/karma-test-shim.js

@@ -0,0 +1,30 @@
+Error.stackTraceLimit = Infinity;
+
+require("core-js/es6");
+require("reflect-metadata");
+
+require("zone.js/dist/zone");
+require("zone.js/dist/long-stack-trace-zone");
+require("zone.js/dist/proxy");
+require("zone.js/dist/sync-test");
+require("zone.js/dist/jasmine-patch");
+require("zone.js/dist/async-test");
+require("zone.js/dist/fake-async-test");
+
+const testing = require("@angular/core/testing");
+const browser = require("@angular/platform-browser-dynamic/testing");
+
+// Prevent Karma from running prematurely.
+__karma__.loaded = function () {};
+
+// First, initialize the Angular testing environment.
+testing.TestBed.initTestEnvironment(
+    browser.BrowserDynamicTestingModule,
+    browser.platformBrowserDynamicTesting()
+);
+// Then we find all the tests.
+const context = require.context('../../src', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);
+// Finally, start Karma to run the tests.
+__karma__.start();

config/test/karma.conf.js

@@ -0,0 +1,45 @@
+var webpackConfig = require('./webpack.test');
+
+module.exports = function(config) {
+    config.set({
+        basePath: '',
+        files: [
+            {
+                pattern: './karma-test-shim.js',
+                watched: false
+            }
+        ],
+        preprocessors: {
+            './karma-test-shim.js': [
+                'webpack', 'sourcemap'
+            ]
+        },
+        frameworks: [ 'jasmine' ],
+        plugins: [
+            require('karma-jasmine'),
+            require('karma-chrome-launcher'),
+            require('karma-jasmine-html-reporter'),
+            require('karma-coverage-istanbul-reporter'),
+            require('karma-webpack'),
+            require('karma-sourcemap-loader')
+        ],
+        client:{
+            clearContext: false
+        },
+        webpack: webpackConfig,
+        coverageIstanbulReporter: {
+            reports: [ 'html', 'lcovonly' ],
+            fixWebpackSourcePaths: true,
+            remapOptions: {
+                exclude: /\*.spec.ts/
+            }
+        },
+        reporters: [ 'progress', /*'kjhtml', */'coverage-istanbul' ],
+        port: 9876,
+        colors: true,
+        logLevel: config.LOG_INFO,
+        autoWatch: true,
+        browsers: [ 'Chrome' ],
+        singleRun: true
+    });
+};

config/test/webpack.test.js

@@ -0,0 +1,46 @@
+var webpack = require('webpack');
+var helpers = require('../helpers');
+
+module.exports = {
+    devtool: 'inline-source-map',
+
+    resolve: {
+        extensions: [ '.ts', '.js' ]
+    },
+
+    module: {
+        rules: [
+            {
+                test: /\.ts$/,
+                use: [ 'istanbul-instrumenter-loader', 'awesome-typescript-loader?configFileName=config/tsconfig.json', 'angular2-template-loader' ],
+                exclude: /\.spec\.ts$/
+            },
+            {
+                test: /\.html$/,
+                use: 'html-loader'
+            },
+            {
+                test: /\.pug$/,
+                use: [ 'raw-loader', 'pug-html-loader' ]
+            },
+            {
+                test: /\.scss$/,
+                exclude: /node_modules/,
+                use: [ 'raw-loader', 'sass-loader' ]
+            },
+            {
+                test: /\.css$/,
+                include: helpers.root('src', 'app'),
+                use: 'raw-loader'
+            }
+        ]
+    },
+
+    plugins: [
+        new webpack.ContextReplacementPlugin(
+            /angular(\\|\/)core(\\|\/)@angular/,
+            helpers.root('src'),
+            {}
+        )
+    ]
+};

config/tsconfig.json

@@ -6,16 +6,16 @@
         "sourceMap": true,
         "emitDecoratorMetadata": true,
         "experimentalDecorators": true,
-        "lib": [ "es2015", "dom" ],
         "noImplicitAny": true,
         "suppressImplicitAnyIndexErrors": true,
         "typeRoots": [
             "../node_modules/@types"
+        ],
+        "lib": [
+            "es2017",
+            "dom"
         ]
     },
-    "exclude": [
-        "../node_modules"
-    ],
     "include": [
         "../**/*"
     ]

config/tslint.json

@@ -7,15 +7,15 @@
                   true,
                   "attribute",
                   [
-                        "plum"
+                        "tyn"
                   ],
                   "camelCase"
             ],
             "component-selector": [
                   true,
                   "element",
                   [
-                        "plum"
+                        "tyn"
                   ],
                   "kebab-case"
             ],