fix(demo): Fix webpack demo

update all most of the packages and webpack config

demo/webpack/.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "typescript.check.workspaceVersion": false
+}

demo/webpack/package.json

@@ -1,63 +1,49 @@
 {
   "name": "angular2-seed",
   "version": "1.0.0",
-  "description": "A simple starter Angular2 project",
+  "description": "A simple example for Angular2 clipboard",
   "scripts": {
-    "build": "webpack --inline --colors --progress --display-error-details --display-cached",
+    "build": "webpack --colors --progress --display-error-details --display-cached",
     "watch": "npm run build -- --watch",
-    "server": "webpack-dev-server --inline --colors --progress --display-error-details --display-cached  --content-base src",
+    "server": "webpack-dev-server --progress  --content-base src",
     "start": "npm run server"
   },
-  "contributors": [
-    "Rob Wormald <robwormald@gmail.com>",
-    "PatrickJS <github@gdi2290.com>"
-  ],
   "license": "MIT",
   "devDependencies": {
     "@types/core-js": "^0.9.32",
     "@types/node": "^6.0.38",
-    "angular2-template-loader": "^0.4.0",
-    "awesome-typescript-loader": "^1.1.1",
-    "css-loader": "^0.23.1",
+    "angular2-template-loader": "^0.6.0",
+    "awesome-typescript-loader": "^3.0.0-beta.9",
+    "css-loader": "^0.26.0",
     "raw-loader": "^0.5.1",
     "to-string-loader": "^1.1.4",
-    "typescript": "^2.0.2",
-    "webpack": "^1.12.9",
-    "webpack-dev-server": "^1.14.0",
-    "webpack-merge": "^0.8.4"
+    "typescript": "^2.1.4",
+    "webpack": "2.1.0-beta.25",
+    "webpack-dev-server": "2.1.0-beta.9",
+    "webpack-merge": "^0.15.0"
   },
   "dependencies": {
-    "@angular/common": "2.0.0",
-    "@angular/compiler": "2.0.0",
-    "@angular/core": "2.0.0",
-    "@angular/forms": "2.0.0",
-    "@angular/http": "2.0.0",
-    "@angular/platform-browser": "2.0.0",
-    "@angular/platform-browser-dynamic": "2.0.0",
-    "@angular/platform-server": "2.0.0",
-    "@angular/router": "3.0.0",
-    "@angular/upgrade": "2.0.0",
+    "@angular/common": "2.3.1",
+    "@angular/compiler": "2.3.1",
+    "@angular/core": "2.3.1",
+    "@angular/forms": "2.3.1",
+    "@angular/http": "2.3.1",
+    "@angular/platform-browser": "2.3.1",
+    "@angular/platform-browser-dynamic": "2.3.1",
+    "@angular/platform-server": "2.3.1",
+    "@angular/router": "3.3.1",
+    "@angular/upgrade": "2.3.1",
     "core-js": "^2.4.1",
     "ie-shim": "^0.1.0",
     "reflect-metadata": "^0.1.3",
-    "rxjs": "5.0.0-beta.12",
-    "zone.js": "~0.6.23",
-    "angular2-in-memory-web-api": "0.0.20",
+    "rxjs": "5.0.0-rc.4",
+    "zone.js": "~0.7.2",
+    "angular2-in-memory-web-api": "0.0.21",
     "bootstrap": "^3.3.7",
-    "angular2-clipboard": "^1.0.0"
+    "angular2-clipboard": "^2.0.4"
   },
   "keywords": [
     "Angular2",
-    "angular2-seed",
-    "official angular 2 seed",
-    "official angular2 seed"
-  ],
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/angular/angular2-seed.git"
-  },
-  "bugs": {
-    "url": "https://github.com/angular/angular2-seed/issues"
-  },
-  "homepage": "https://github.com/angular/angular2-seed#readme"
+    "angular2-clipboard"
+  ]
 }

demo/webpack/src/app/app.module.ts

@@ -1,12 +1,11 @@
-import { NgModule } from '@angular/core'
-import { RouterModule } from "@angular/router";
-import { rootRouterConfig } from "./app.routes";
-import { AppComponent } from "./app";
-import { FormsModule } from "@angular/forms";
-import { BrowserModule } from "@angular/platform-browser";
-import { HttpModule } from "@angular/http";
+import { AppComponent } from './app';
+import { rootRouterConfig } from './app.routes';
 import { Home } from './home/home';
-import { LocationStrategy, HashLocationStrategy } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { HttpModule } from '@angular/http';
+import { BrowserModule } from '@angular/platform-browser';
+import { RouterModule } from '@angular/router';
 import { ClipboardModule } from 'angular2-clipboard';
 
 @NgModule({

demo/webpack/src/app/app.ts

@@ -1,8 +1,8 @@
-import {Component} from '@angular/core';
+import { Component } from '@angular/core';
 
 @Component({
-  selector   : 'app',
-  templateUrl: './app.html',
+  selector: 'app',
+  templateUrl: './app.html'
 })
 export class AppComponent {
 }

demo/webpack/src/app/home/home.html

@@ -1,24 +1,24 @@
 <div class="row">
   <div class="col-sm-12">
-    <h3>Copy from text -- text</h3> 
+    <h3>Copy from text -- text</h3>
     Click this button, it will copy the text from the input by referring to the <strong>text content</strong>
     <div class="input-group">
       <input type="text" class="form-control" [(ngModel)]="text" placeholder="content will be copy after click the copy button">
       <span class="input-group-btn">
-        <button class="btn btn-default" type="button" ngIIclipboard [cbContent]="text">copy</button>
+        <button class="btn btn-default" type="button" xngClipboard [cbContent]="text">copy</button>
       </span>
     </div>
   </div>
 </div>
-
 <div class="row">
   <div class="col-sm-12">
-    <h3>Copy from text -- target</h3> 
+    <h3>Copy from text -- target</h3>
     Click this button, it will copy the text from the input by referring to the <strong>input element</strong>
     <div class="input-group">
-      <input type="text" class="form-control" [(ngModel)]="text2" placeholder="content will be copy after click the copy button" #inputTarget>
+      <input type="text" class="form-control" [(ngModel)]="text2" placeholder="content will be copy after click the copy button"
+        #inputTarget>
       <span class="input-group-btn">
-        <button class="btn btn-default" type="button" [ngIIclipboard]="inputTarget">copy</button>
+        <button class="btn btn-default" type="button" [xngClipboard]="inputTarget">copy</button>
       </span>
     </div>
   </div>

demo/webpack/tsconfig.json

@@ -1,18 +1,18 @@
 {
   "compilerOptions": {
-    "module": "commonjs",
+    "module": "es6",
     "target": "es5",
     "outDir": "dist",
     "rootDir": ".",
     "sourceMap": true,
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
     "moduleResolution": "node",
-     "types": [
-       "core-js",
-       "node",
-       "clipboard"
-     ]     
+    "types": [
+      "core-js",
+      "node",
+      "clipboard"
+    ]
   },
   "exclude": [
     "node_modules"
@@ -22,5 +22,7 @@
   },
   "compileOnSave": false,
   "buildOnSave": false,
-  "atom": { "rewriteTsconfig": false }
+  "atom": {
+    "rewriteTsconfig": false
+  }
 }

demo/webpack/webpack.config.js

@@ -1,6 +1,7 @@
-var webpack = require('webpack');
-var path = require('path');
-
+const webpack = require('webpack');
+const path = require('path');
+const LoaderOptionsPlugin = require('webpack/lib/LoaderOptionsPlugin');
+const ContextReplacementPlugin = require('webpack/lib/ContextReplacementPlugin');
 
 // Webpack Config
 var webpackConfig = {
@@ -11,15 +12,29 @@ var webpackConfig = {
   },
 
   output: {
-    path: './dist',
+    path: '/dist',
   },
 
   plugins: [
-    new webpack.optimize.OccurenceOrderPlugin(true),
     new webpack.optimize.CommonsChunkPlugin({
       name: ['main', 'vendor', 'polyfills'],
       minChunks: Infinity
     }),
+    /**
+     * Plugin: ContextReplacementPlugin
+     * Description: Provides context to Angular's use of System.import
+     *
+     * See: https://webpack.github.io/docs/list-of-plugins.html#contextreplacementplugin
+     * See: https://github.com/angular/angular/issues/11580
+     */
+    new ContextReplacementPlugin(
+      // The (\\|\/) piece accounts for path separators in *nix and Windows
+      /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
+      // Helper functions
+      path.resolve(__dirname, '..', 'src')
+    ),
+
+    new LoaderOptionsPlugin({})
   ],
 
   module: {
@@ -45,16 +60,14 @@ var webpackConfig = {
 var defaultConfig = {
   devtool: 'cheap-module-source-map',
   cache: true,
-  debug: true,
   output: {
     filename: '[name].bundle.js',
     sourceMapFilename: '[name].map',
     chunkFilename: '[id].chunk.js'
   },
 
   resolve: {
-    root: [path.join(__dirname, 'src')],
-    extensions: ['', '.ts', '.js']
+    extensions: ['.ts', '.js']
   },
 
   devServer: {
@@ -65,17 +78,8 @@ var defaultConfig = {
     },
     host: 'localhost',
     port: 3333
-  },
-
-  node: {
-    global: 1,
-    crypto: 'empty',
-    module: 0,
-    Buffer: 0,
-    clearImmediate: 0,
-    setImmediate: 0
   }
 };
 
 var webpackMerge = require('webpack-merge');
-module.exports = webpackMerge(defaultConfig, webpackConfig);
+module.exports = webpackMerge(defaultConfig, webpackConfig);