docs(aio): add examples to test cookbook doc

docs/content/examples/cb-component-relative-paths/e2e-spec.ts

@@ -0,0 +1,42 @@
+'use strict'; // necessary for es6 output in node 
+
+import { browser, element, by, ElementFinder } from 'protractor';
+
+describe('Cookbook: component-relative paths', function () {
+
+  interface Page {
+    title: ElementFinder;
+    absComp: ElementFinder;
+    relComp: ElementFinder;
+
+  }
+  function getPageStruct() {
+    return {
+      title: element( by.tagName( 'h1' )),
+      absComp: element( by.css( 'absolute-path div' ) ),
+      relComp: element( by.css( 'relative-path div' ) )
+    };
+  }
+
+  let page: Page;
+  beforeAll(function () {
+      browser.get('');
+      page = getPageStruct();
+  });
+
+  it('should display title of the sample', function () {
+    expect(element(by.tagName('h1')).getText()).toContain('Paths');
+  });
+
+  it('should have absolute-path element', function () {
+    expect(page.absComp.isPresent()).toBe(true, 'no <absolute-path> element');
+  });
+
+  it('should display the absolute path text', function () {
+    expect(page.absComp.getText()).toContain('Absolute');
+  });
+
+  it('should display the component-relative path text', function () {
+    expect(page.relComp.getText()).toContain('Component-relative');
+  });
+});

docs/content/examples/cb-component-relative-paths/ts/app/app.component.ts

@@ -0,0 +1,12 @@
+// #docregion
+import { Component } from '@angular/core';
+
+@Component({
+selector: 'my-app',
+template:
+  `<h1>Absolute & <i>Component-Relative</i> Paths</h1>
+  <absolute-path></absolute-path>
+  <relative-path></relative-path>
+  `
+})
+export class AppComponent {}

docs/content/examples/cb-component-relative-paths/ts/app/app.module.ts

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule }  from '@angular/platform-browser';
+
+import { AppComponent } from './app.component';
+import { SomeAbsoluteComponent, SomeRelativeComponent } from './some.component';
+
+@NgModule({
+  imports: [
+    BrowserModule
+  ],
+  declarations: [
+    AppComponent,
+    SomeAbsoluteComponent,
+    SomeRelativeComponent
+  ],
+  bootstrap: [ AppComponent ]
+})
+export class AppModule { }

docs/content/examples/cb-component-relative-paths/ts/app/main.ts

@@ -0,0 +1,5 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);

docs/content/examples/cb-component-relative-paths/ts/app/some.component.css

@@ -0,0 +1,22 @@
+/* #docregion */
+div.absolute {
+  background: beige;
+  border: 1px solid darkred;
+  color: red;
+  margin: 8px;
+  max-width: 20em;
+  padding: 4px;
+  text-align: center;
+}
+
+div.relative {
+  background: powderblue;
+  border: 1px solid darkblue;
+  color: Blue;
+  font-style: italic;
+  margin: 8px;
+  max-width: 20em;
+  padding: 4px;
+  text-align: center;
+}
+

docs/content/examples/cb-component-relative-paths/ts/app/some.component.html

@@ -0,0 +1,4 @@
+<!-- #docregion -->
+<div class={{class}}>
+  {{type}}<br>{{path}}
+</div>

docs/content/examples/cb-component-relative-paths/ts/app/some.component.ts

@@ -0,0 +1,37 @@
+// #docregion
+import { Component } from '@angular/core';
+
+///////// Using Absolute Paths ///////
+
+// #docregion absolute-config
+@Component({
+  selector: 'absolute-path',
+  templateUrl: 'app/some.component.html',
+  styleUrls:  ['app/some.component.css']
+})
+// #enddocregion absolute-config
+export class SomeAbsoluteComponent {
+  class = 'absolute';
+  type = 'Absolute template & style URLs';
+  path = 'app/path.component.html';
+}
+
+///////// Using Relative Paths ///////
+
+// #docregion relative-config
+@Component({
+  // #docregion module-id
+  moduleId: module.id,
+  // #enddocregion module-id
+  selector: 'relative-path',
+  templateUrl: './some.component.html',
+  styleUrls:  ['./some.component.css']
+})
+// #enddocregion relative-config
+
+export class SomeRelativeComponent {
+  class = 'relative';
+  type = 'Component-relative template & style URLs';
+  path = 'path.component.html';
+
+}

docs/content/examples/cb-component-relative-paths/ts/index.html

@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <base href="/">
+
+  <title>
+    Component-Relative Paths
+  </title>
+
+  <!-- #docregion style -->
+  <link rel="stylesheet" type="text/css" href="styles.css">
+  <!-- #enddocregion style -->
+
+    <!-- Polyfills for older browsers -->
+    <script src="node_modules/core-js/client/shim.min.js"></script>
+
+    <script src="node_modules/zone.js/dist/zone.js"></script>
+    <script src="node_modules/systemjs/dist/system.src.js"></script>
+
+    <script src="systemjs.config.js"></script>
+    <script>
+      System.import('app').catch(function(err){ console.error(err); });
+    </script>
+  </head>
+<body>
+  <my-app>Loading app...</my-app>
+</body>
+</html>

docs/content/examples/cb-component-relative-paths/ts/plnkr.json

@@ -0,0 +1,8 @@
+{
+	"description": "Module-relative Paths",
+	"files": [
+		"!**/*.d.ts",
+		"!**/*.js"
+	],
+	"tags": [ "cookbook" ]
+}

docs/content/examples/webpack/e2e-spec.ts

@@ -0,0 +1,21 @@
+'use strict'; // necessary for es6 output in node 
+
+import { browser, element, by } from 'protractor';
+
+describe('QuickStart E2E Tests', function () {
+
+  let expectedMsg = 'Hello from Angular App with Webpack';
+
+  beforeEach(function () {
+    browser.get('');
+  });
+
+  it(`should display: ${expectedMsg}`, function () {
+    expect(element(by.css('h1')).getText()).toEqual(expectedMsg);
+  });
+
+  it('should display an image', function () {
+    expect(element(by.css('img')).isPresent()).toBe(true);
+  });
+
+});

docs/content/examples/webpack/ts-snippets/webpack.config.snippets.ts

@@ -0,0 +1,58 @@
+/* tslint:disable */
+// #docregion one-entry
+entry: {
+  app: 'src/app.ts'
+}
+// #enddocregion one-entry
+
+// #docregion app-example
+import { Component } from '@angular/core';
+
+@Component({
+  ...
+})
+export class AppComponent {}
+// #enddocregion app-example
+
+// #docregion one-output
+output: {
+  filename: 'app.js'
+}
+// #enddocregion one-output
+
+// #docregion two-entries
+entry: {
+  app: 'src/app.ts',
+  vendor: 'src/vendor.ts'
+},
+
+output: {
+  filename: '[name].js'
+}
+// #enddocregion two-entries
+
+// #docregion loaders
+rules: [
+  {
+    test: /\.ts$/
+    loader: 'awesome-typescript-loader'
+  },
+  {
+    test: /\.css$/
+    loaders: 'style-loader!css-loader'
+  }
+]
+// #enddocregion loaders
+
+// #docregion imports
+// #docregion single-import
+import { AppComponent } from './app.component.ts';
+// #enddocregion single-import
+import 'uiframework/dist/uiframework.css';
+// #enddocregion imports
+
+// #docregion plugins
+plugins: [
+  new webpack.optimize.UglifyJsPlugin()
+]
+// #enddocregion plugins

docs/content/examples/webpack/ts/.gitignore

@@ -0,0 +1,5 @@
+dist
+!karma.webpack.conf.js
+!webpack.config.js
+!config/*
+!public/css/styles.css

docs/content/examples/webpack/ts/config/helpers.js

@@ -0,0 +1,12 @@
+// #docregion
+var path = require('path');
+
+var _root = path.resolve(__dirname, '..');
+
+function root(args) {
+  args = Array.prototype.slice.call(arguments, 0);
+  return path.join.apply(path, [_root].concat(args));
+}
+
+exports.root = root;
+// #enddocregion

docs/content/examples/webpack/ts/config/karma-test-shim.js

@@ -0,0 +1,22 @@
+// #docregion
+Error.stackTraceLimit = Infinity;
+
+require('core-js/es6');
+require('core-js/es7/reflect');
+
+require('zone.js/dist/zone');
+require('zone.js/dist/long-stack-trace-zone');
+require('zone.js/dist/proxy');
+require('zone.js/dist/sync-test');
+require('zone.js/dist/jasmine-patch');
+require('zone.js/dist/async-test');
+require('zone.js/dist/fake-async-test');
+
+var appContext = require.context('../src', true, /\.spec\.ts/);
+
+appContext.keys().forEach(appContext);
+
+var testing = require('@angular/core/testing');
+var browser = require('@angular/platform-browser-dynamic/testing');
+
+testing.TestBed.initTestEnvironment(browser.BrowserDynamicTestingModule, browser.platformBrowserDynamicTesting());

docs/content/examples/webpack/ts/config/karma.conf.js

@@ -0,0 +1,39 @@
+// #docregion
+var webpackConfig = require('./webpack.test');
+
+module.exports = function (config) {
+  var _config = {
+    basePath: '',
+
+    frameworks: ['jasmine'],
+
+    files: [
+      {pattern: './config/karma-test-shim.js', watched: false}
+    ],
+
+    preprocessors: {
+      './config/karma-test-shim.js': ['webpack', 'sourcemap']
+    },
+
+    webpack: webpackConfig,
+
+    webpackMiddleware: {
+      stats: 'errors-only'
+    },
+
+    webpackServer: {
+      noInfo: true
+    },
+
+    reporters: ['progress'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: false,
+    browsers: ['PhantomJS'],
+    singleRun: true
+  };
+
+  config.set(_config);
+};
+// #enddocregion

docs/content/examples/webpack/ts/config/webpack.common.js

@@ -0,0 +1,72 @@
+// #docregion
+var webpack = require('webpack');
+var HtmlWebpackPlugin = require('html-webpack-plugin');
+var ExtractTextPlugin = require('extract-text-webpack-plugin');
+var helpers = require('./helpers');
+
+module.exports = {
+  // #docregion entries
+  entry: {
+    'polyfills': './src/polyfills.ts',
+    'vendor': './src/vendor.ts',
+    'app': './src/main.ts'
+  },
+  // #enddocregion
+
+  // #docregion resolve
+  resolve: {
+    extensions: ['.ts', '.js']
+  },
+  // #enddocregion resolve
+
+  // #docregion loaders
+  module: {
+    rules: [
+      {
+        test: /\.ts$/,
+        loaders: ['awesome-typescript-loader', 'angular2-template-loader']
+      },
+      {
+        test: /\.html$/,
+        loader: 'html-loader'
+      },
+      {
+        test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
+        loader: 'file-loader?name=assets/[name].[hash].[ext]'
+      },
+      {
+        test: /\.css$/,
+        exclude: helpers.root('src', 'app'),
+        loader: ExtractTextPlugin.extract({ fallbackLoader: 'style-loader', loader: 'css-loader?sourceMap' })
+      },
+      {
+        test: /\.css$/,
+        include: helpers.root('src', 'app'),
+        loader: 'raw-loader'
+      }
+    ]
+  },
+  // #enddocregion loaders
+
+  // #docregion plugins
+  plugins: [
+    // Workaround for angular/angular#11580
+    new webpack.ContextReplacementPlugin(
+      // The (\\|\/) piece accounts for path separators in *nix and Windows
+      /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
+      helpers.root('./src'), // location of your src
+      {} // a map of your routes
+    ),
+
+    new webpack.optimize.CommonsChunkPlugin({
+      name: ['app', 'vendor', 'polyfills']
+    }),
+
+    new HtmlWebpackPlugin({
+      template: 'src/index.html'
+    })
+  ]
+  // #enddocregion plugins
+};
+// #enddocregion
+

docs/content/examples/webpack/ts/config/webpack.dev.js

@@ -0,0 +1,26 @@
+// #docregion
+var webpackMerge = require('webpack-merge');
+var ExtractTextPlugin = require('extract-text-webpack-plugin');
+var commonConfig = require('./webpack.common.js');
+var helpers = require('./helpers');
+
+module.exports = webpackMerge(commonConfig, {
+  devtool: 'cheap-module-eval-source-map',
+  
+  output: {
+    path: helpers.root('dist'),
+    publicPath: 'http://localhost:8080/',
+    filename: '[name].js',
+    chunkFilename: '[id].chunk.js'
+  },
+  
+  plugins: [
+    new ExtractTextPlugin('[name].css')
+  ],
+  
+  devServer: {
+    historyApiFallback: true,
+    stats: 'minimal'
+  }
+});
+// #enddocregion

docs/content/examples/webpack/ts/config/webpack.prod.js

@@ -0,0 +1,41 @@
+// #docregion
+var webpack = require('webpack');
+var webpackMerge = require('webpack-merge');
+var ExtractTextPlugin = require('extract-text-webpack-plugin');
+var commonConfig = require('./webpack.common.js');
+var helpers = require('./helpers');
+
+const ENV = process.env.NODE_ENV = process.env.ENV = 'production';
+
+module.exports = webpackMerge(commonConfig, {
+  devtool: 'source-map',
+
+  output: {
+    path: helpers.root('dist'),
+    publicPath: '/',
+    filename: '[name].[hash].js',
+    chunkFilename: '[id].[hash].chunk.js'
+  },
+
+  plugins: [
+    new webpack.NoEmitOnErrorsPlugin(),
+    new webpack.optimize.UglifyJsPlugin({ // https://github.com/angular/angular/issues/10618
+      mangle: {
+        keep_fnames: true
+      }
+    }),
+    new ExtractTextPlugin('[name].[hash].css'),
+    new webpack.DefinePlugin({
+      'process.env': {
+        'ENV': JSON.stringify(ENV)
+      }
+    }),
+    new webpack.LoaderOptionsPlugin({
+      htmlLoader: {
+        minimize: false // workaround for ng2
+      }
+    })
+  ]
+});
+
+// #enddocregion

docs/content/examples/webpack/ts/config/webpack.test.js

@@ -0,0 +1,50 @@
+// #docregion
+var webpack = require('webpack');
+var helpers = require('./helpers');
+
+module.exports = {
+  devtool: 'inline-source-map',
+
+  resolve: {
+    extensions: ['.ts', '.js']
+  },
+
+  module: {
+    rules: [
+      {
+        test: /\.ts$/,
+        loaders: ['awesome-typescript-loader', 'angular2-template-loader']
+      },
+      {
+        test: /\.html$/,
+        loader: 'html-loader'
+
+      },
+      {
+        test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
+        loader: 'null-loader'
+      },
+      {
+        test: /\.css$/,
+        exclude: helpers.root('src', 'app'),
+        loader: 'null-loader'
+      },
+      {
+        test: /\.css$/,
+        include: helpers.root('src', 'app'),
+        loader: 'raw-loader'
+      }
+    ]
+  },
+
+  plugins: [
+    new webpack.ContextReplacementPlugin(
+      // The (\\|\/) piece accounts for path separators in *nix and Windows
+      /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
+      helpers.root('./src'), // location of your src
+      {} // a map of your routes
+    )
+  ]
+}
+
+// #enddocregion

docs/content/examples/webpack/ts/example-config.json

@@ -0,0 +1,4 @@
+{
+  "build": "build:webpack",
+  "run": "http-server:cli"
+}

docs/content/examples/webpack/ts/karma.webpack.conf.js

@@ -0,0 +1,2 @@
+// #docregion
+module.exports = require('./config/karma.conf.js');

docs/content/examples/webpack/ts/package.webpack.json

@@ -0,0 +1,50 @@
+{
+  "name": "angular2-webpack",
+  "version": "1.0.0",
+  "description": "A webpack starter for Angular",
+  "scripts": {
+    "start": "webpack-dev-server --inline --progress --port 8080",
+    "test": "karma start",
+    "build": "rimraf dist && webpack --config config/webpack.prod.js --progress --profile --bail"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "@angular/common": "~2.4.0",
+    "@angular/compiler": "~2.4.0",
+    "@angular/core": "~2.4.0",
+    "@angular/forms": "~2.4.0",
+    "@angular/http": "~2.4.0",
+    "@angular/platform-browser": "~2.4.0",
+    "@angular/platform-browser-dynamic": "~2.4.0",
+    "@angular/router": "~3.4.0",
+    "core-js": "^2.4.1",
+    "rxjs": "5.0.1",
+    "zone.js": "^0.7.4"
+  },
+  "devDependencies": {
+    "@types/node": "^6.0.45",
+    "@types/jasmine": "^2.5.35",
+    "angular2-template-loader": "^0.6.0",
+    "awesome-typescript-loader": "^3.0.0-beta.18",
+    "css-loader": "^0.26.1",
+    "extract-text-webpack-plugin": "2.0.0-beta.5",
+    "file-loader": "^0.9.0",
+    "html-loader": "^0.4.3",
+    "html-webpack-plugin": "^2.16.1",
+    "jasmine-core": "^2.4.1",
+    "karma": "^1.2.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-dev-server": "2.2.0-rc.0",
+    "webpack-merge": "^2.4.0"
+  }
+}

docs/content/examples/webpack/ts/public/css/styles.css

@@ -0,0 +1,6 @@
+/* #docregion */
+body {
+    background: #0147A7;
+    color: #fff;
+}
+/* #enddocregion */

docs/content/examples/webpack/ts/src/app/app.component.css

@@ -0,0 +1,9 @@
+/* #docregion */
+main {
+  padding: 1em;
+  font-family: Arial, Helvetica, sans-serif;
+  text-align: center;
+  margin-top: 50px;
+  display: block;
+}
+/* #enddocregion */

docs/content/examples/webpack/ts/src/app/app.component.html

@@ -0,0 +1,7 @@
+<!-- #docregion -->
+<main>
+  <h1>Hello from Angular App with Webpack</h1>
+
+  <img src="../../public/images/angular.png">
+</main>
+<!-- #enddocregion -->

docs/content/examples/webpack/ts/src/app/app.component.spec.ts

@@ -0,0 +1,16 @@
+// #docregion
+import { TestBed } from '@angular/core/testing';
+
+import { AppComponent } from './app.component';
+
+describe('App', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({ declarations: [AppComponent]});
+  });
+
+  it ('should work', () => {
+    let fixture = TestBed.createComponent(AppComponent);
+    expect(fixture.componentInstance instanceof AppComponent).toBe(true, 'should create AppComponent');
+  });
+});
+// #enddocregion

docs/content/examples/webpack/ts/src/app/app.component.ts

@@ -0,0 +1,12 @@
+// #docregion
+import { Component } from '@angular/core';
+
+import '../../public/css/styles.css';
+
+@Component({
+  selector: 'my-app',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css']
+})
+export class AppComponent { }
+// #enddocregion

docs/content/examples/webpack/ts/src/app/app.module.ts

@@ -0,0 +1,16 @@
+// #docregion
+import { NgModule } from '@angular/core';
+import { BrowserModule }  from '@angular/platform-browser';
+
+import { AppComponent } from './app.component';
+
+@NgModule({
+  imports: [
+    BrowserModule
+  ],
+  declarations: [
+    AppComponent
+  ],
+  bootstrap: [ AppComponent ]
+})
+export class AppModule { }

docs/content/examples/webpack/ts/src/index.html

@@ -0,0 +1,14 @@
+<!-- #docregion -->
+<!DOCTYPE html>
+<html>
+  <head>
+    <base href="/">
+    <title>Angular With Webpack</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+  </head>
+  <body>
+    <my-app>Loading...</my-app>
+  </body>
+</html>
+<!-- #enddocregion -->

docs/content/examples/webpack/ts/src/main.ts

@@ -0,0 +1,14 @@
+// #docregion
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { enableProdMode } from '@angular/core';
+
+import { AppModule } from './app/app.module';
+
+// #docregion enable-prod
+if (process.env.ENV === 'production') {
+  enableProdMode();
+}
+// #enddocregion enable-prod
+
+platformBrowserDynamic().bootstrapModule(AppModule);
+// #enddocregion

docs/content/examples/webpack/ts/src/polyfills.ts

@@ -0,0 +1,12 @@
+// #docregion
+import 'core-js/es6';
+import 'core-js/es7/reflect';
+require('zone.js/dist/zone');
+
+if (process.env.ENV === 'production') {
+  // Production
+} else {
+  // Development and test
+  Error['stackTraceLimit'] = Infinity;
+  require('zone.js/dist/long-stack-trace-zone');
+}

docs/content/examples/webpack/ts/src/vendor.ts

@@ -0,0 +1,15 @@
+// #docregion
+// Angular
+import '@angular/platform-browser';
+import '@angular/platform-browser-dynamic';
+import '@angular/core';
+import '@angular/common';
+import '@angular/http';
+import '@angular/router';
+
+// RxJS
+import 'rxjs';
+
+// Other vendors for example jQuery, Lodash or Bootstrap
+// You can import js, ts, css, sass, ...
+// #enddocregion

docs/content/examples/webpack/ts/tsconfig.1.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "sourceMap": true,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "lib": ["es2015", "dom"],
+    "noImplicitAny": true,
+    "suppressImplicitAnyIndexErrors": true
+  }
+}