feat(build) Swapping out build system for Webpack: Implement 3bundles shared and split, along with CLI output and feedback and reporting. And template compilation for inline html and css.

Author: Sean Larkin

addon/ng2/blueprints/ng2/files/__path__/polyfills.ts

@@ -1,6 +1,4 @@
 // Prefer CoreJS over the polyfills above
-import 'reflect-metadata';
-require('zone.js/dist/zone');
-
-// Typescript emit helpers polyfill
-import 'ts-helpers';
+import 'core-js/es6';
+import 'core-js/es7/reflect';
+import 'zone.js/dist/zone';

addon/ng2/blueprints/ng2/files/__path__/tsconfig.json

@@ -1,17 +1,22 @@
 {
-  "compileOnSave": false,
   "compilerOptions": {
+    "baseUrl": ".",
     "declaration": false,
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
     "module": "es2015",
     "moduleResolution": "node",
-    "noEmitOnError": false,
-    "noImplicitAny": false,
-    "outDir": "../dist/",
+    "outDir": "./dist/",
     "rootDir": ".",
     "sourceMap": true,
-    "target": "es2015",
-    "inlineSources": true
-  }
+    "sourceRoot": ".",
+    "target": "es2015"
+  },
+  "exclude": [
+    "node_modules",
+    "bower_components"
+  ],
+  "files": [
+    "./src/typings.d.ts"
+  ]
 }

addon/ng2/blueprints/ng2/files/__path__/vendor.ts

@@ -1,3 +1,6 @@
+// Typescript emit helpers polyfill
+import 'ts-helpers';
+
 import '@angular/core';
 import '@angular/common';
 import '@angular/compiler';

addon/ng2/blueprints/ng2/files/package.json

@@ -20,10 +20,10 @@
     "@angular/platform-browser": "2.0.0-rc.1",
     "@angular/platform-browser-dynamic": "2.0.0-rc.1",
     "@angular/router": "2.0.0-rc.1",
-    "es6-shim": "^0.35.0",
-    "reflect-metadata": "0.1.3",
     "rxjs": "5.0.0-beta.6",
     "systemjs": "0.19.26",
+    "core-js": "^2.4.0",
+    "ts-helpers": "^1.1.1",
     "zone.js": "^0.6.12"
   },
   "devDependencies": {<% if(isMobile) { %>

addon/ng2/commands/build.ts

@@ -8,6 +8,21 @@ const win = require('ember-cli/lib/utilities/windows-admin');
 const webpack = require('webpack');
 const webpackConfig = require('../tasks/webpack-build-config');
 const webpackCompiler = webpack(webpackConfig);
+const ProgressPlugin = require('webpack/lib/ProgressPlugin');
+const webpackOutputOptions = {
+  colors: true,
+  chunks: true,
+  modules: false,
+  reasons: false,
+  chunkModules: false
+}
+
+let lastHash = null;
+
+webpackCompiler.apply(new ProgressPlugin({
+  profile: true
+}));
+
 
 module.exports = Command.extend({
   name: 'build',
@@ -25,15 +40,22 @@ module.exports = Command.extend({
   run: function(commandOptions) {
     return new Promise((resolve, reject) => {
       webpackCompiler.run((err, stats) => {
-        debugger;
-        if (err || stats.compilation.errors.length) {
-          reject(stats.compilation.errors);
-          console.log(err);
+        // Don't keep cache
+        // TODO: Make conditional if using --watch
+        webpackCompiler.purgeInputFileSystem();
+
+        if(err) {
+          lastHash = null;
+          console.error(err.stack || err);
+          if(err.details) console.error(err.details);
+            reject(err.details);
         }
 
+        if(stats.hash !== lastHash) {
+          lastHash = stats.hash;
+          process.stdout.write(stats.toString(webpackOutputOptions) + "\n");
+        }
         resolve();
-        console.log(stats);
-        console.log('--------');
       });
     });
   },

addon/ng2/tasks/webpack-build-config.ts

@@ -2,6 +2,7 @@ const webpack = require('webpack');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const path = require('path');
 
+
 // Resolve to the generated applications
 function ngAppResolve(resolvePath: string): string {
   return path.resolve(process.cwd(), resolvePath);
@@ -20,19 +21,40 @@ module.exports = {
   },
 
   output: {
-    path: "./dist",
-    filename: "[name].bundle.js"
+    path: './dist',
+    filename: '[name].bundle.js'
   },
 
   module: {
     loaders: [
       {
         test: /\.ts$/,
-        loader: 'ts-loader'
+        loaders: [
+          {
+            loader: 'awesome-typescript-loader',
+            query: {
+              useWebpackText: true,
+              tsconfig: ngAppResolve('./src/tsconfig.json'),
+              resolveGlobs: false
+            }
+          },
+          {
+            loader: 'angular2-template-loader'
+          }
+        ]
+        exclude: [/\.(spec|e2e)\.ts$/]
       },
       {
         test: /\.json$/,
         loader: 'json-loader'
+      },
+      {
+        test: /\.css$/,
+        loader: 'raw-loader'
+      },
+      {
+        test: /\.html$/,
+        loader: 'raw-loader'
       }
     ]
   },
@@ -46,22 +68,27 @@ module.exports = {
     }),
     new webpack.optimize.CommonsChunkPlugin({
       name: ['polyfills', 'vendor'].reverse()
+    }),
+    new webpack.LoaderOptionsPlugin({
+      minimize: true
+    }),
+    new webpack.LoaderOptionsPlugin({
+      test: /\.js$/,
+      jsfile: true
     })
   ],
 
-  ts: {
-    configFileName: ngAppResolve('./src/tsconfig.json'),
-    silent: true
-  },
+  // ts: {
+  //   configFileName: ngAppResolve('./src/tsconfig.json'),
+  //   silent: true
+  // },
 
   resolve: {
-    extensions: ['', '.css', '.scss', '.ts', '.js']
+    extensions: ['', '.ts', '.js'],
+    root: ngAppResolve('./src')
+    // modulesDirectories: ['node_modules']
   },
 
-  devServer: {
-    historyApiFallback: true
-  }
-
   node: {
     global: 'window',
     crypto: 'empty',

package.json

@@ -30,6 +30,8 @@
   },
   "homepage": "https://github.com/angular/angular-cli",
   "dependencies": {
+    "angular2-template-loader": "^0.2.0",
+    "awesome-typescript-loader": "^0.19.0",
     "broccoli": "^1.0.0-beta.7",
     "broccoli-caching-writer": "^2.2.1",
     "broccoli-concat": "^2.2.0",
@@ -39,24 +41,28 @@
     "broccoli-uglify-js": "^0.1.3",
     "broccoli-writer": "^0.1.1",
     "chalk": "^1.1.3",
+    "core-js": "^2.4.0",
     "ember-cli": "2.5.0",
     "ember-cli-string-utils": "^1.0.0",
     "exit": "^0.1.2",
     "fs-extra": "^0.30.0",
     "glob": "^7.0.3",
     "handlebars": "^4.0.5",
+    "html-webpack-plugin": "^2.19.0",
     "json-loader": "^0.5.4",
     "leek": "0.0.21",
     "lodash": "^4.11.1",
     "opn": "4.0.1",
+    "raw-loader": "^0.5.1",
     "resolve": "^1.1.7",
     "shelljs": "^0.7.0",
     "silent-error": "^1.0.0",
     "style-loader": "^0.13.1",
     "symlink-or-copy": "^1.0.3",
     "systemjs-builder": "0.15.17",
+    "ts-helpers": "^1.1.1",
     "ts-loader": "^0.8.2",
-    "typescript": "^1.9.0-dev.20160605-1.0",
+    "typescript": "^1.9.0-dev.20160606-1.0",
     "typings": "^0.8.1",
     "webpack": "^2.1.0-beta.8"
   },