Adding Named Modules, VS Code, Fixes

.travis.yml

@@ -8,4 +8,6 @@ before_install:
   - export DISPLAY=:99.0
   - sh -e /etc/init.d/xvfb start
   - sleep 3
+  # Updating NPM to relevant version >= 3 on Node.JS LTS
+  - "npm i -g npm@^3"
 sudo: false

.vscode/launch.json

@@ -0,0 +1,22 @@
+{
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "name": "Launch Chrome against localhost, with sourcemaps",
+            "type": "chrome",
+            "request": "launch",
+            "url": "http://localhost:3000",
+            "sourceMaps": true,
+            "webRoot": "${workspaceRoot}"
+        },
+        {
+            "name": "Attach to Chrome, with sourcemaps",
+            "type": "chrome",
+            "request": "attach",
+            "url": "http://localhost:3000",
+            "port": 9222,
+            "sourceMaps": true,
+            "webRoot": "${workspaceRoot}"
+        }
+    ]
+}

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "typescript.tsdk": "node_modules/typescript/lib/"
+}

README.md

@@ -232,6 +232,11 @@ We have good experience using these editors:
 * [Atom](https://atom.io/) with [TypeScript plugin](https://atom.io/packages/atom-typescript)
 * [Sublime Text](http://www.sublimetext.com/3) with [Typescript-Sublime-Plugin](https://github.com/Microsoft/Typescript-Sublime-plugin#installation)
 
+### Visual Studio Code + Debugger for Chrome
+> Install [Debugger for Chrome](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome) and see docs for instructions to launch Chrome 
+
+The included `.vscode` automatically connects to the webpack development server on port `3000`.
+
 # Types
 > When you include a module that doesn't include Type Definitions inside of the module you can include external Type Definitions with @types
 

config/github-deploy/index.js

@@ -1,7 +1,7 @@
 const helpers = require('../helpers');
 const execSync = require('child_process').execSync;
 
-const REPO_NAME_RE = /Push  URL: https:\/\/github\.com\/.*\/(.*)\.git/;
+const REPO_NAME_RE = /Push {2}URL: https:\/\/github\.com\/.*\/(.*)\.git/;
 
 function getWebpackConfigModule() {
   if (helpers.hasProcessFlag('github-dev')) {
@@ -32,7 +32,7 @@ function stripTrailing(str, char) {
     str = str.substr(1);
   }
 
-  if(str.substr(-1) === char) {
+  if (str.substr(-1) === char) {
     str = str.substr(0, str.length - 1);
   }
 
@@ -51,7 +51,7 @@ function stripTrailing(str, char) {
  */
 function safeUrl(url) {
   const stripped = stripTrailing(url || '', '/');
-  return stripped ? stripped + '/' : ''
+  return stripped ? stripped + '/' : '';
 }
 
 exports.getWebpackConfigModule = getWebpackConfigModule;

config/head-config.common.js

@@ -6,40 +6,40 @@
  * the same name as the attribute you want to operate on, but prefix with =
  *
  * Example:
- * { name: "msapplication-TileImage", content: "/assets/icon/ms-icon-144x144.png", "=content": true },
+ * { name: 'msapplication-TileImage', content: '/assets/icon/ms-icon-144x144.png', '=content': true },
  * Will prefix the publicPath to content.
  *
- * { rel: "apple-touch-icon", sizes: "57x57", href: "/assets/icon/apple-icon-57x57.png", "=href": false },
+ * { rel: 'apple-touch-icon', sizes: '57x57', href: '/assets/icon/apple-icon-57x57.png', '=href': false },
  * Will not prefix the publicPath on href (href attributes are added by default
  *
  */
 module.exports = {
   link: [
-    /** <link> tags for "apple-touch-icon" (AKA Web Clips). **/
-    { rel: "apple-touch-icon", sizes: "57x57", href: "/assets/icon/apple-icon-57x57.png" },
-    { rel: "apple-touch-icon", sizes: "60x60", href: "/assets/icon/apple-icon-60x60.png" },
-    { rel: "apple-touch-icon", sizes: "72x72", href: "/assets/icon/apple-icon-72x72.png" },
-    { rel: "apple-touch-icon", sizes: "76x76", href: "/assets/icon/apple-icon-76x76.png" },
-    { rel: "apple-touch-icon", sizes: "114x114", href: "/assets/icon/apple-icon-114x114.png" },
-    { rel: "apple-touch-icon", sizes: "120x120", href: "/assets/icon/apple-icon-120x120.png" },
-    { rel: "apple-touch-icon", sizes: "144x144", href: "/assets/icon/apple-icon-144x144.png" },
-    { rel: "apple-touch-icon", sizes: "152x152", href: "/assets/icon/apple-icon-152x152.png" },
-    { rel: "apple-touch-icon", sizes: "180x180", href: "/assets/icon/apple-icon-180x180.png" },
+    /** <link> tags for 'apple-touch-icon' (AKA Web Clips). **/
+    { rel: 'apple-touch-icon', sizes: '57x57', href: '/assets/icon/apple-icon-57x57.png' },
+    { rel: 'apple-touch-icon', sizes: '60x60', href: '/assets/icon/apple-icon-60x60.png' },
+    { rel: 'apple-touch-icon', sizes: '72x72', href: '/assets/icon/apple-icon-72x72.png' },
+    { rel: 'apple-touch-icon', sizes: '76x76', href: '/assets/icon/apple-icon-76x76.png' },
+    { rel: 'apple-touch-icon', sizes: '114x114', href: '/assets/icon/apple-icon-114x114.png' },
+    { rel: 'apple-touch-icon', sizes: '120x120', href: '/assets/icon/apple-icon-120x120.png' },
+    { rel: 'apple-touch-icon', sizes: '144x144', href: '/assets/icon/apple-icon-144x144.png' },
+    { rel: 'apple-touch-icon', sizes: '152x152', href: '/assets/icon/apple-icon-152x152.png' },
+    { rel: 'apple-touch-icon', sizes: '180x180', href: '/assets/icon/apple-icon-180x180.png' },
 
     /** <link> tags for android web app icons **/
-    { rel: "icon", type: "image/png", sizes: "192x192", href: "/assets/icon/android-icon-192x192.png" },
+    { rel: 'icon', type: 'image/png', sizes: '192x192', href: '/assets/icon/android-icon-192x192.png' },
 
     /** <link> tags for favicons **/
-    { rel: "icon", type: "image/png", sizes: "32x32", href: "/assets/icon/favicon-32x32.png" },
-    { rel: "icon", type: "image/png", sizes: "96x96", href: "/assets/icon/favicon-96x96.png" },
-    { rel: "icon", type: "image/png", sizes: "16x16", href: "/assets/icon/favicon-16x16.png" },
+    { rel: 'icon', type: 'image/png', sizes: '32x32', href: '/assets/icon/favicon-32x32.png' },
+    { rel: 'icon', type: 'image/png', sizes: '96x96', href: '/assets/icon/favicon-96x96.png' },
+    { rel: 'icon', type: 'image/png', sizes: '16x16', href: '/assets/icon/favicon-16x16.png' },
 
     /** <link> tags for a Web App Manifest **/
-    { rel: "manifest", href: "/assets/manifest.json" }
+    { rel: 'manifest', href: '/assets/manifest.json' }
   ],
   meta: [
-    { name: "msapplication-TileColor", content: "#00bcd4" },
-    { name: "msapplication-TileImage", content: "/assets/icon/ms-icon-144x144.png", "=content": true },
-    { name: "theme-color", content: "#00bcd4" }
+    { name: 'msapplication-TileColor', content: '#00bcd4' },
+    { name: 'msapplication-TileImage', content: '/assets/icon/ms-icon-144x144.png', '=content': true },
+    { name: 'theme-color', content: '#00bcd4' }
   ]
 };

config/html-elements-plugin/index.js

@@ -43,7 +43,9 @@ function createTag(tagName, attrMap, publicPath) {
   publicPath = publicPath || '';
 
   // add trailing slash if we have a publicPath and it doesn't have one.
-  if (publicPath && !RE_ENDS_WITH_BS.test(publicPath)) publicPath += '/';
+  if (publicPath && !RE_ENDS_WITH_BS.test(publicPath)) {
+    publicPath += '/';
+  }
 
   const attributes = Object.getOwnPropertyNames(attrMap)
     .filter(function(name) { return name[0] !== '='; } )

config/karma.conf.js

@@ -80,7 +80,7 @@ module.exports = function(config) {
     ],
 
     customLaunchers: {
-      Chrome_travis_ci: {
+      ChromeTravisCi: {
         base: 'Chrome',
         flags: ['--no-sandbox']
       }
@@ -93,8 +93,8 @@ module.exports = function(config) {
     singleRun: true
   };
 
-  if(process.env.TRAVIS){
-    configuration.browsers = ['Chrome_travis_ci'];
+  if (process.env.TRAVIS){
+    configuration.browsers = ['ChromeTravisCi'];
   }
 
   config.set(configuration);

config/modules/angular2-hmr-prod.js

@@ -1,3 +1,3 @@
 exports.HmrState = function() {
 
-}
+};

config/webpack.dev.js

@@ -10,6 +10,7 @@ const commonConfig = require('./webpack.common.js'); // the settings that are co
  * Webpack Plugins
  */
 const DefinePlugin = require('webpack/lib/DefinePlugin');
+const NamedModulesPlugin = require('webpack/lib/NamedModulesPlugin');
 
 /**
  * Webpack Constants
@@ -116,6 +117,15 @@ module.exports = webpackMerge(commonConfig, {
         'HMR': METADATA.HMR,
       }
     }),
+
+    /**
+       * Plugin: NamedModulesPlugin (experimental)
+       * Description: Uses file names as module name.
+       *
+       * See: https://github.com/webpack/webpack/commit/a04ffb928365b19feb75087c63f13cadfc08e1eb
+       */
+      new NamedModulesPlugin(),
+
   ],
 
   /**

config/webpack.github-deploy.js

@@ -52,7 +52,7 @@ module.exports = webpackMerge(webpackConfig, {
 
   plugins: [
     function() {
-      this.plugin("done", function(stats) {
+      this.plugin('done', function(stats) {
         console.log('Starting deployment to GitHub.');
 
         const logger = function (msg) {
@@ -73,7 +73,7 @@ module.exports = webpackMerge(webpackConfig, {
             console.log('GitHub deployment done. STATUS: SUCCESS.');
           }
         });
-      })
+      });
     }
   ]
 });

config/webpack.prod.js

@@ -157,7 +157,7 @@ module.exports = webpackMerge(commonConfig, {
 
 
       beautify: false, //prod
-      mangle: { screw_ie8 : true }, //prod
+      mangle: { screw_ie8 : true, keep_fnames: true }, //prod
       compress: { screw_ie8: true }, //prod
       comments: false //prod
     }),

package.json

@@ -69,7 +69,6 @@
     "@angularclass/webpack-toolkit": "^1.3.3",
     "@angularclass/request-idle-callback": "^1.0.7",
     "@angularclass/conventions-loader": "^1.0.2",
-    "angular2-template-loader": "^0.5.0",
     "ie-shim": "^0.1.0",
     "core-js": "^2.4.0",
     "rxjs": "5.0.0-beta.6",
@@ -82,18 +81,18 @@
     "@types/core-js": "^0.9.28",
     "@types/hammerjs": "^2.0.28",
     "@types/jasmine": "^2.2.29",
-    "@types/node": "^4.0.29",
+    "@types/node": "^6.0.38",
     "@types/protractor": "^1.5.16",
     "@types/selenium-webdriver": "^2.44.26",
     "@types/source-map": "^0.1.26",
     "@types/uglify-js": "^2.0.27",
     "@types/webpack": "^1.12.29",
     "angular2-hmr": "~0.8.0",
-    "awesome-typescript-loader": "1.1.1",
+    "angular2-template-loader": "^0.5.0",
+    "awesome-typescript-loader": "^2.2.1",
     "codelyzer": "~0.0.21",
     "copy-webpack-plugin": "^3.0.1",
     "css-loader": "^0.24.0",
-    "es6-promise-loader": "^1.0.1",
     "exports-loader": "^0.6.3",
     "expose-loader": "^0.7.1",
     "file-loader": "^0.9.0",
@@ -103,12 +102,12 @@
     "istanbul-instrumenter-loader": "^0.2.0",
     "json-loader": "^0.5.4",
     "karma": "^0.13.22",
-    "karma-chrome-launcher": "^1.0.1",
+    "karma-chrome-launcher": "^2.0.0 ",
     "karma-coverage": "^1.0.0",
     "karma-jasmine": "^1.0.2",
     "karma-mocha-reporter": "^2.0.0",
     "karma-sourcemap-loader": "^0.3.7",
-    "karma-webpack": "1.7.0",
+    "karma-webpack": "1.8.0",
     "parse5": "^1.5.1",
     "protractor": "^3.2.2",
     "raw-loader": "0.5.1",
@@ -119,8 +118,8 @@
     "style-loader": "^0.13.1",
     "to-string-loader": "^1.1.4",
     "ts-helpers": "1.1.1",
-    "ts-node": "^0.9.1",
-    "tslint": "^3.7.1",
+    "ts-node": "^1.3.0",
+    "tslint": "^3.15.0-dev.0",
     "tslint-loader": "^2.1.3",
     "typedoc": "^0.4.4",
     "typescript": "^2.0.0-beta",

src/app/+detail/index.ts

@@ -1,4 +1,4 @@
-import { BrowserModule } from '@angular/platform-browser'
+import { BrowserModule } from '@angular/platform-browser';
 import { RouterModule } from '@angular/router';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';

src/app/app.module.ts

@@ -56,17 +56,17 @@ export class AppModule {
     delete store.state;
   }
   hmrOnDestroy(store) {
-    var cmpLocation = this.appRef.components.map(cmp => cmp.location.nativeElement);
+    const cmpLocation = this.appRef.components.map(cmp => cmp.location.nativeElement);
     // recreate elements
-    var state = this.appState._state;
+    const state = this.appState._state;
     store.state = state;
-    store.disposeOldHosts = createNewHosts(cmpLocation)
+    store.disposeOldHosts = createNewHosts(cmpLocation);
     // remove styles
     removeNgStyles();
   }
   hmrAfterDestroy(store) {
     // display new elements
-    store.disposeOldHosts()
+    store.disposeOldHosts();
     delete store.disposeOldHosts;
   }
 }

src/app/environment.ts

@@ -25,14 +25,14 @@ if ('production' === ENV) {
 } else {
 
   _decorateModuleRef = (modRef: any) => {
-    var appRef = modRef.injector.get(ApplicationRef);
-    var cmpRef = appRef.components[0];
+    const appRef = modRef.injector.get(ApplicationRef);
+    const cmpRef = appRef.components[0];
 
     let _ng = (<any>window).ng;
     enableDebugTools(cmpRef);
     (<any>window).ng.probe = _ng.probe;
     (<any>window).ng.coreTokens = _ng.coreTokens;
-    return modRef
+    return modRef;
   };
 
   // Development

tsconfig.json

@@ -17,7 +17,6 @@
       "es6"
     ],
     "types": [
-      "core-js",
       "hammerjs",
       "jasmine",
       "node",