docs(webpack): one step closer to CLI (#3283)

* docs(webpack): one step closer to CLI

* add html reporter

public/docs/_examples/package.json

@@ -42,7 +42,7 @@
     "@types/node": "^6.0.45",
     "angular-cli": "^1.0.0-beta.26",
     "angular2-template-loader": "^0.6.0",
-    "awesome-typescript-loader": "^3.0.0-beta.18",
+    "awesome-typescript-loader": "^3.0.4",
     "babel-cli": "^6.16.0",
     "babel-preset-angular2": "^0.0.2",
     "babel-preset-es2015": "^6.16.0",
@@ -80,9 +80,9 @@
     "ts-node": "^1.3.0",
     "tslint": "^3.15.1",
     "typescript": "~2.0.10",
-    "webpack": "2.2.0",
+    "webpack": "2.2.1",
-    "webpack-dev-server": "2.2.0-rc.0",
+    "webpack-dev-server": "2.4.1",
-    "webpack-merge": "^2.4.0"
+    "webpack-merge": "^3.0.0"
   },
   "repository": {}
 }

public/docs/_examples/webpack/ts/config/karma.conf.js

@@ -25,12 +25,12 @@ module.exports = function (config) {
       noInfo: true
     },
 
-    reporters: ['progress'],
+    reporters: ['kjhtml'],
     port: 9876,
     colors: true,
     logLevel: config.LOG_INFO,
     autoWatch: false,
-    browsers: ['PhantomJS'],
+    browsers: ['Chrome'],
     singleRun: true
   };
 

public/docs/_examples/webpack/ts/config/webpack.common.js

@@ -24,10 +24,12 @@ module.exports = {
     rules: [
       {
         test: /\.ts$/,
-        loaders: [{
+        loaders: [
-          loader: 'awesome-typescript-loader',
+          {
-          options: { configFileName: helpers.root('src', 'tsconfig.json') }
+            loader: 'awesome-typescript-loader',
-        } , 'angular2-template-loader']
+            options: { configFileName: helpers.root('src', 'tsconfig.json') }
+          } , 'angular2-template-loader'
+        ]
       },
       {
         test: /\.html$/,

public/docs/_examples/webpack/ts/config/webpack.test.js

@@ -13,7 +13,12 @@ module.exports = {
     rules: [
       {
         test: /\.ts$/,
-        loaders: ['awesome-typescript-loader', 'angular2-template-loader']
+        loaders: [
+          {
+            loader: 'awesome-typescript-loader',
+            options: { configFileName: helpers.root('src', 'tsconfig.json') }
+          } , 'angular2-template-loader'
+        ]
       },
       {
         test: /\.html$/,

public/docs/_examples/webpack/ts/package.webpack.json

@@ -23,9 +23,9 @@
   },
   "devDependencies": {
     "@types/node": "^6.0.45",
-    "@types/jasmine": "^2.5.35",
+    "@types/jasmine": "2.5.36",
     "angular2-template-loader": "^0.6.0",
-    "awesome-typescript-loader": "^3.0.0-beta.18",
+    "awesome-typescript-loader": "^3.0.4",
     "css-loader": "^0.26.1",
     "extract-text-webpack-plugin": "2.0.0-beta.5",
     "file-loader": "^0.9.0",
@@ -33,18 +33,17 @@
     "html-webpack-plugin": "^2.16.1",
     "jasmine-core": "^2.4.1",
     "karma": "^1.2.0",
+    "karma-chrome-launcher": "^2.0.0",
     "karma-jasmine": "^1.0.2",
-    "karma-phantomjs-launcher": "^1.0.2",
     "karma-sourcemap-loader": "^0.3.7",
     "karma-webpack": "^2.0.1",
     "null-loader": "^0.1.1",
-    "phantomjs-prebuilt": "^2.1.7",
     "raw-loader": "^0.5.1",
     "rimraf": "^2.5.2",
     "style-loader": "^0.13.1",
     "typescript": "~2.0.10",
-    "webpack": "2.2.0",
+    "webpack": "2.2.1",
-    "webpack-dev-server": "2.2.0-rc.0",
+    "webpack-dev-server": "2.4.1",
-    "webpack-merge": "^2.4.0"
+    "webpack-merge": "^3.0.0"
   }
 }

public/docs/_examples/webpack/ts/src/app/app.component.html

@@ -2,6 +2,6 @@
 <main>
   <h1>Hello from Angular App with Webpack</h1>
 
-  <img src="../../public/images/angular.png">
+  <img src="../assets/images/angular.png">
 </main>
 <!-- #enddocregion -->

public/docs/_examples/webpack/ts/src/app/app.component.ts

@@ -1,7 +1,7 @@
 // #docregion
 import { Component } from '@angular/core';
 
-import '../../public/css/styles.css';
+import '../assets/css/styles.css';
 
 @Component({
   selector: 'my-app',

public/docs/ts/latest/guide/webpack.jade

@@ -152,17 +152,17 @@ code-example(language="sh" class="code-shell").
   cd    angular-webpack
 
 :marked
-  Add these files to the root directory:
+  Add these files:
   
 +makeTabs(
   `webpack/ts/package.webpack.json,
-  webpack/ts/tsconfig.1.json,
+  webpack/ts/src/tsconfig.1.json,
   webpack/ts/webpack.config.js,
   webpack/ts/karma.webpack.conf.js,
   webpack/ts/config/helpers.js`,
   null,
   `package.json,
-  tsconfig.json,
+  src/tsconfig.json,
   webpack.config.js,
   karma.conf.js,
   config/helpers.js`
@@ -276,9 +276,9 @@ a#common-rules
   * css - The pattern matches application-wide styles; the second handles component-scoped styles (the ones specified in a component's `styleUrls` metadata property)
 .l-sub-section
   :marked
-    The first pattern excludes `.css` files within the `/src/app` directories where the component-scoped styles sit.
+    The first pattern is for the application-wide styles. It excludes `.css` files within the `src/app` directory
-    It includes only `.css` files located at or above `/src`; these are the application-wide styles.
+    where the component-scoped styles sit. The `ExtractTextPlugin` (described below) applies the `style` and `css`
-    The `ExtractTextPlugin` (described below) applies the `style` and `css` loaders to these files.
+    loaders to these files.
     
     The second pattern filters for component-scoped styles and loads them as strings via the `raw` loader —
     which is what Angular expects to do with styles specified in a `styleUrls` metadata property.
@@ -446,11 +446,11 @@ code-example(language="sh" class="code-shell").
 +makeTabs(
   `webpack/ts/src/index.html,
   webpack/ts/src/main.ts,
-  webpack/ts/public/css/styles.css`,
+  webpack/ts/src/assets/css/styles.css`,
   null,
   `src/index.html,
   src/main.ts,
-  public/css/styles.css`
+  src/assets/css/styles.css`
 )
   
 +makeTabs(
@@ -468,10 +468,11 @@ code-example(language="sh" class="code-shell").
 )
 
 
-p.
+:marked
   The <code>app.component.html</code> displays this downloadable Angular logo
   <a href="https://raw.githubusercontent.com/angular/angular.io/master/public/resources/images/logos/angular2/angular.png" target="_blank">
   <img src="/resources/images/logos/angular2/angular.png" height="40px" title="download Angular logo"></a>.
+  Create folder `images` under the project's "assets" folder, then right-click and download the image to that folder.
 
 a#bundle-ts
 :marked