Added e2d support to maetieral2

Author: TheLarkInn

addon/ng2/models/webpack-build-development.ts

@@ -4,7 +4,7 @@ import { ngAppResolve } from './webpack-build-utils';
 
 const webpackMerge = require('webpack-merge');
 
-export const webpackDevConfig = webpackMerge(webpackCommonConfig, {
+const devConfigPartial = {
   debug: true,
   devtool: 'cheap-module-source-map',
   output: {
@@ -26,28 +26,9 @@ export const webpackDevConfig = webpackMerge(webpackCommonConfig, {
     clearImmediate: false,
     setImmediate: false
   }
-});
+}
 
-export const webpackDevMaterialConfig = webpackMerge(webpackMaterialConfig, {
-  debug: true,
-  devtool: 'cheap-module-source-map',
-  output: {
-    path: ngAppResolve('./dist'),
-    filename: '[name].bundle.js',
-    sourceMapFilename: '[name].map',
-    chunkFilename: '[id].chunk.js'
-  },
-  tslint: {
-    emitErrors: false,
-    failOnHint: false,
-    resourcePath: ngAppResolve('./src')
-  },
-  node: {
-    global: 'window',
-    crypto: 'empty',
-    process: true,
-    module: false,
-    clearImmediate: false,
-    setImmediate: false
-  }
+export const webpackDevConfig = webpackMerge(webpackCommonConfig, devConfigPartial);
+
+export const webpackDevMaterialConfig = webpackMerge(webpackMaterialConfig, devConfigPartial);
 });

addon/ng2/models/webpack-build-material2.ts

@@ -1,3 +1,12 @@
+// Angular Material2 Custom CLI Webpack Plugin: This allows for the following:
+// To build, serve, and watchmode the angular2-material repo.
+//
+// Requirements:
+//
+// Do a find and replace on the src directory
+// .css'] => .scss']
+// This allows for angular2-template-loader to transpile the sass correctly.
+
 import * as webpack from 'webpack';
 import {ngAppResolve} from './webpack-build-utils';
 
@@ -26,7 +35,7 @@ var components = [
     'toolbar'
 ];
 /** Map relative paths to URLs. */
-var aliasMap = {
+var aliasMap: any = {
     '@angular2-material/core': ngAppResolve('./src/core'),
 };
 
@@ -39,33 +48,20 @@ export const webpackMaterialConfig = {
   devtool: 'inline-source-map',
   resolve: {
     extensions: ['', '.webpack.js', '.web.js', '.ts', '.tsx', '.js', '.css', '.scss'],
-    //SAVE: TODO# Don't use relative bp
     root: ngAppResolve('./'),
-    // modulesDirectory: [
-    //   ngAppResolve('./src/demo-app/'),
-    //   ngAppResolve('./src/core'),
-    //   ngAppResolve('./src/components'),
-    //   'src/components/',
-    //   'src/core/'
-    // ]
     alias: aliasMap
   },
   sassLoader: {
     includePaths: [
-        ngAppResolve('./src/demo-app/style')
+        // This allows for automatic resolving of @import's for sass for variables.
+        ngAppResolve('./src/core/style')
     ]
   },
   debug: true,
   context: path.resolve(__dirname, './'),
-  //SAVE entry: {
-  //   main: [ngAppResolve('./src/main.ts')],
-  //   vendor: ngAppResolve('./src/vendor.ts'),
-  //   polyfills: ngAppResolve('./src/polyfills.ts')
-  // },
   entry: {
     main: [ngAppResolve('./src/demo-app/main.ts')],
     vendor: ngAppResolve('./src/demo-app/vendor.ts')
-    // main: ngAppResolve('./src/e2e-app/main.ts')
   },
   output: {
     path: './dist',
@@ -103,25 +99,23 @@ export const webpackMaterialConfig = {
     ]
   },
   plugins: [
-    // new webpack.NormalModuleReplacementPlugin(/@angular2-material\/core/, require.resolve(ngAppResolve('./src/core/core.ts'))),
-    // new webpack.NormalModuleReplacementPlugin(/@angular2-material\//, ngAppResolve('./src/components')),
-    new DebugWebpackPlugin({
-      // Defaults to ['webpack:*'] which can be VERY noisy, so try to be specific
-      // scope: [
-      //   'webpack:compiler:*', // include compiler logs
-      //   'webpack:plugin:ExamplePlugin' // include a specific plugin's logs
-      // ],
+    // new DebugWebpackPlugin({
+    //   // Defaults to ['webpack:*'] which can be VERY noisy, so try to be specific
+    //   // scope: [
+    //   //   'webpack:compiler:*', // include compiler logs
+    //   //   'webpack:plugin:ExamplePlugin' // include a specific plugin's logs
+    //   // ],
 
-      // // Inspect the arguments passed to an event
-      // // These are triggered on emits
-      // listeners: {
-      //   'webpack:compiler:run': function(compiler) {
-      //     // Read some data out of the compiler
-      //   }
-      // },
-      // Defaults to the compiler's setting
-      debug: true
-    }),
+    //   // // Inspect the arguments passed to an event
+    //   // // These are triggered on emits
+    //   // listeners: {
+    //   //   'webpack:compiler:run': function(compiler) {
+    //   //     // Read some data out of the compiler
+    //   //   }
+    //   // },
+    //   // Defaults to the compiler's setting
+    //   debug: true
+    // }),
     new webpack.optimize.CommonsChunkPlugin({name: 'vendor'}),
     new ForkCheckerPlugin(),
     new HtmlWebpackPlugin({

addon/ng2/models/webpack-build-production.ts

@@ -1,13 +1,19 @@
 import * as webpack from 'webpack';
 import {webpackCommonConfig} from '../models/';
+import { webpackMaterialConfig } from './webpack-build-material2';
 import {ngAppResolve} from '../models/webpack-build-utils';
 
-
 const webpackMerge = require('webpack-merge'); // used to merge webpack configs
 const WebpackMd5Hash = require('webpack-md5-hash');
 const LoaderOptionsPlugin = require('webpack/lib/LoaderOptionsPlugin'); //TODO WP2 Typings
 const CompressionPlugin = require("compression-webpack-plugin");
 
+
+
+
+
+export const webpackProdMaterialConfig = webpackMerge(webpackCommonConfig, webpackMaterialConfig);
+
 export const webpackProdConfig = webpackMerge(webpackCommonConfig, {
   debug: false,
   devtool: 'source-map',

addon/ng2/tasks/serve-webpack.ts

@@ -1,4 +1,4 @@
-import {webpackCommonConfig, webpackOutputOptions} from '../models/';
+import {webpackCommonConfig, webpackOutputOptions, webpackDevMaterialConfig, webpackProdMaterialConfig} from '../models/';
 import {ServeTaskOptions} from '../commands/serve';
 
 const path = require('path');
@@ -17,8 +17,9 @@ let lastHash = null;
 module.exports = Task.extend({
   run: (commandOptions: ServeTaskOptions) => {
 
-    webpackCommonConfig.entry.main.unshift(`webpack-dev-server/client?http://localhost:${commandOptions.port}/`);
-    const webpackCompiler   = webpack(webpackCommonConfig);
+    webpackProdMaterialConfig.entry.main.unshift(`webpack-dev-server/client?http://localhost:${commandOptions.port}/`);
+
+    const webpackCompiler = webpack(webpackProdMaterialConfig);
 
     webpackCompiler.apply(new ProgressPlugin({
       profile: true,