feat(aio): Add GitHub and Twitter external icon links to topnav toolbar

A supporting Webpack guide will be introduced as part of the guidance
for ejecting from the Angular CLI.

Closes #23937

PR Close #24478

.circleci/config.yml

@@ -12,8 +12,8 @@
 ## IMPORTANT
 # If you change the `docker_image` version, also change the `cache_key` suffix and the version of
 # `com_github_bazelbuild_buildtools` in the `/WORKSPACE` file.
-var_1: &docker_image angular/ngcontainer:0.3.1
-var_2: &cache_key v2-angular-{{ .Branch }}-{{ checksum "yarn.lock" }}-0.3.1
+var_1: &docker_image angular/ngcontainer:0.3.2
+var_2: &cache_key v2-angular-{{ .Branch }}-{{ checksum "yarn.lock" }}-0.3.2
 
 # Define common ENV vars
 var_3: &define_env_vars
@@ -85,7 +85,7 @@ jobs:
       # This avoids waiting for the slowest build target to finish before running the first test
       # See https://github.com/bazelbuild/bazel/issues/4257
       # NOTE: Angular developers should typically just bazel build //packages/... or bazel test //packages/...
-      - run: bazel query --output=label //... | xargs bazel test
+      - run: bazel query --output=label //... | xargs bazel test --build_tag_filters=-ivy-only --test_tag_filters=-manual,-ivy-only
 
       # CircleCI will allow us to go back and view/download these artifacts from past builds.
       # Also we can use a service like https://buildsize.org/ to automatically track binary size of these artifacts.
@@ -111,6 +111,42 @@ jobs:
           paths:
             - "node_modules"
             - "~/bazel_repository_cache"
+  # Temporary job to test what will happen when we flip the Ivy flag to true
+  test_ivy_jit:
+    <<: *job_defaults
+    resource_class: xlarge
+    steps:
+      - *define_env_vars
+      - checkout:
+          <<: *post_checkout
+      # See remote cache documentation in /docs/BAZEL.md
+      - run: .circleci/setup_cache.sh
+      - run: sudo cp .circleci/bazel.rc /etc/bazel.bazelrc
+      - *setup-bazel-remote-cache
+
+      - restore_cache:
+          key: *cache_key
+
+      - run: bazel run @yarn//:yarn
+      - run: bazel query --output=label //... | xargs bazel test --define=compile=jit --build_tag_filters=ivy-jit --test_tag_filters=-manual,ivy-jit
+
+  test_ivy_aot:
+    <<: *job_defaults
+    resource_class: xlarge
+    steps:
+      - *define_env_vars
+      - checkout:
+          <<: *post_checkout
+      # See remote cache documentation in /docs/BAZEL.md
+      - run: .circleci/setup_cache.sh
+      - run: sudo cp .circleci/bazel.rc /etc/bazel.bazelrc
+      - *setup-bazel-remote-cache
+
+      - restore_cache:
+          key: *cache_key
+
+      - run: bazel run @yarn//:yarn
+      - run: bazel query --output=label //... | xargs bazel test --define=compile=local --build_tag_filters=ivy-local --test_tag_filters=-manual,ivy-local
 
   # This job exists only for backwards-compatibility with old scripts and tests
   # that rely on the pre-Bazel dist/packages-dist layout.
@@ -140,6 +176,8 @@ jobs:
           root: dist
           paths:
             - packages-dist
+            - packages-dist-ivy-jit
+            - packages-dist-ivy-local
 
   # We run the integration tests outside of Bazel for now.
   # They are a separate workflow job so that they can be easily re-run.
@@ -149,6 +187,10 @@ jobs:
   # See comments inside the integration/run_tests.sh script.
   integration_test:
     <<: *job_defaults
+    # Note: we run Bazel in one of the integration tests, and it can consume >2G
+    # of memory. Together with the system under test, this can exhaust the RAM
+    # on a 4G worker so we use a larger machine here too.
+    resource_class: xlarge
     steps:
       - *define_env_vars
       - checkout:
@@ -200,6 +242,8 @@ workflows:
     jobs:
       - lint
       - test
+      - test_ivy_jit
+      - test_ivy_aot
       - build-packages-dist
       - integration_test:
           requires:
@@ -212,6 +256,8 @@ workflows:
           requires:
             # Only publish if tests and integration tests pass
             - test
+            - test_ivy_jit
+            - test_ivy_aot
             - integration_test
             # Get the artifacts to publish from the build-packages-dist job
             # since the publishing script expects the legacy outputs layout.

.pullapprove.yml

@@ -163,7 +163,7 @@ groups:
       files:
         - "packages/compiler/*"
     users:
-      - chuckjaz #primary
+      - alxhub #primary
       - vicb
       - mhevery
       - IgorMinar #fallback

CHANGELOG.md

@@ -1,9 +1,37 @@
-<a name="6.0.5"></a>
-## [6.0.5](https://github.com/angular/angular/compare/6.0.4...6.0.5) (2018-06-13)
+<a name="6.1.0-beta.1"></a>
+# [6.1.0-beta.1](https://github.com/angular/angular/compare/6.1.0-beta.0...6.1.0-beta.1) (2018-06-13)
 
 
 ### Bug Fixes
 
+* **animations:** always render end-state styles for orphaned DOM nodes ([#24236](https://github.com/angular/angular/issues/24236)) ([dc4a3d0](https://github.com/angular/angular/commit/dc4a3d0))
+* **bazel:** Allow ng_module to depend on targets w no deps ([#24446](https://github.com/angular/angular/issues/24446)) ([282d351](https://github.com/angular/angular/commit/282d351))
+* **docs-infra:** use script nomodule to load IE polyfills, skip other polyfills ([#24317](https://github.com/angular/angular/issues/24317)) ([8be6892](https://github.com/angular/angular/commit/8be6892)), closes [#23647](https://github.com/angular/angular/issues/23647)
+* **ivy:** compute transitive scopes from NgModuleDef only ([#24334](https://github.com/angular/angular/issues/24334)) ([1135563](https://github.com/angular/angular/commit/1135563))
+* **ivy:** correctly handle queries with embedded views ([#24418](https://github.com/angular/angular/issues/24418)) ([014949f](https://github.com/angular/angular/commit/014949f))
+* **ivy:** remove debugger statement ([#24480](https://github.com/angular/angular/issues/24480)) ([70ef061](https://github.com/angular/angular/commit/70ef061))
+* **ivy:** special case [style] and [class] bindings for future use ([#23232](https://github.com/angular/angular/issues/23232)) ([1b253e1](https://github.com/angular/angular/commit/1b253e1))
+* **router:** fix lazy loading of aux routes ([#23459](https://github.com/angular/angular/issues/23459)) ([5731d07](https://github.com/angular/angular/commit/5731d07)), closes [#10981](https://github.com/angular/angular/issues/10981)
+* **service-worker:** fix `SwPush.unsubscribe()` ([#24162](https://github.com/angular/angular/issues/24162)) ([3ed2d75](https://github.com/angular/angular/commit/3ed2d75)), closes [#24095](https://github.com/angular/angular/issues/24095)
+
+
+### Features
+
+* **common:** introduce KeyValuePipe ([#24319](https://github.com/angular/angular/issues/24319)) ([2b49bf7](https://github.com/angular/angular/commit/2b49bf7))
+* **core:** export defaultKeyValueDiffers to private api ([#24319](https://github.com/angular/angular/issues/24319)) ([92b278c](https://github.com/angular/angular/commit/92b278c))
+* **core:** expose a Compiler API for accessing module ids from NgModule types ([#24258](https://github.com/angular/angular/issues/24258)) ([bd02b27](https://github.com/angular/angular/commit/bd02b27))
+* **core:** KeyValueDiffer#diff allows null values ([#24319](https://github.com/angular/angular/issues/24319)) ([52ce9d5](https://github.com/angular/angular/commit/52ce9d5))
+* **ivy:** a generic visitor which allows prefixing nodes for ngtsc ([#24230](https://github.com/angular/angular/issues/24230)) ([ca79e11](https://github.com/angular/angular/commit/ca79e11))
+* **ivy:** add support of ApplicationRef.bootstrapModuleFactory ([#23811](https://github.com/angular/angular/issues/23811)) ([e3759f7](https://github.com/angular/angular/commit/e3759f7))
+* **ivy:** namespaced attributes added to output instructions ([#24386](https://github.com/angular/angular/issues/24386)) ([82c5313](https://github.com/angular/angular/commit/82c5313))
+* **ivy:** now supports SVG and MathML elements ([#24377](https://github.com/angular/angular/issues/24377)) ([8c1ac28](https://github.com/angular/angular/commit/8c1ac28))
+* **router:** implement scrolling restoration service ([#20030](https://github.com/angular/angular/issues/20030)) ([49c5234](https://github.com/angular/angular/commit/49c5234)), closes [#13636](https://github.com/angular/angular/issues/13636) [#10929](https://github.com/angular/angular/issues/10929) [#7791](https://github.com/angular/angular/issues/7791) [#6595](https://github.com/angular/angular/issues/6595)
+
+
+
+<a name="6.0.5"></a>
+## [6.0.5](https://github.com/angular/angular/compare/6.0.4...6.0.5) (2018-06-13)
+
 * **animations:** always render end-state styles for orphaned DOM nodes ([#24236](https://github.com/angular/angular/issues/24236)) ([0139173](https://github.com/angular/angular/commit/0139173))
 * **bazel:** Allow ng_module to depend on targets w no deps ([#24446](https://github.com/angular/angular/issues/24446)) ([ea3669e](https://github.com/angular/angular/commit/ea3669e))
 * **docs-infra:** use script nomodule to load IE polyfills, skip other polyfills ([#24317](https://github.com/angular/angular/issues/24317)) ([e876535](https://github.com/angular/angular/commit/e876535)), closes [#23647](https://github.com/angular/angular/issues/23647)
@@ -12,6 +40,51 @@
 
 
 
+<a name="6.1.0-beta.0"></a>
+## [6.1.0-beta.0](https://github.com/angular/angular/compare/6.0.0-rc.5...6.1.0-beta.0) (2018-06-06)
+
+
+### Bug Fixes
+
+* **animations:** do not throw errors when a destroyed component is animated ([#23836](https://github.com/angular/angular/issues/23836)) ([d2a8687](https://github.com/angular/angular/commit/d2a8687))
+* **animations:** Fix browser detection logic ([#24188](https://github.com/angular/angular/issues/24188)) ([b492b9e](https://github.com/angular/angular/commit/b492b9e))
+* **animations:** properly clean up queried element styles in safari/edge ([#23633](https://github.com/angular/angular/issues/23633)) ([da9ff25](https://github.com/angular/angular/commit/da9ff25))
+* **animations:** retain state styling for nodes that are moved around ([#23534](https://github.com/angular/angular/issues/23534)) ([65211f4](https://github.com/angular/angular/commit/65211f4))
+* **animations:** retain trigger-state for nodes that are moved around ([#24238](https://github.com/angular/angular/issues/24238)) ([8db928d](https://github.com/angular/angular/commit/8db928d))
+* **benchpress:** Fix promise chain in chrome_driver_extension. ([#23458](https://github.com/angular/angular/issues/23458)) ([d4b6c41](https://github.com/angular/angular/commit/d4b6c41))
+* **compiler:** avoid a crash in ngc-wrapped. ([#23468](https://github.com/angular/angular/issues/23468)) ([e1c4930](https://github.com/angular/angular/commit/e1c4930))
+* **compiler:** generate constant array for i18n attributes ([#23837](https://github.com/angular/angular/issues/23837)) ([cfde36d](https://github.com/angular/angular/commit/cfde36d))
+* **compiler:** generate core-compliant hostBindings property ([#24087](https://github.com/angular/angular/issues/24087)) ([01b5acd](https://github.com/angular/angular/commit/01b5acd)), closes [#24013](https://github.com/angular/angular/issues/24013)
+* **compiler:** handle undefined annotation metadata ([#23349](https://github.com/angular/angular/issues/23349)) ([ca776c5](https://github.com/angular/angular/commit/ca776c5))
+* **compiler-cli:** don't rely on incompatible TS method ([#23550](https://github.com/angular/angular/issues/23550)) ([b1f040f](https://github.com/angular/angular/commit/b1f040f))
+* **core:** avoid eager providers re-initialization ([#23559](https://github.com/angular/angular/issues/23559)) ([0c6dc45](https://github.com/angular/angular/commit/0c6dc45))
+* **core:** call ngOnDestroy on all services that have it ([#23755](https://github.com/angular/angular/issues/23755)) ([fc03427](https://github.com/angular/angular/commit/fc03427)), closes [#22466](https://github.com/angular/angular/issues/22466) [#22240](https://github.com/angular/angular/issues/22240) [#14818](https://github.com/angular/angular/issues/14818)
+* **elements:** always check to create strategy ([#23825](https://github.com/angular/angular/issues/23825)) ([b1cda36](https://github.com/angular/angular/commit/b1cda36))
+* **elements:** prevent closure renaming of platform properties ([#23843](https://github.com/angular/angular/issues/23843)) ([d4b8b24](https://github.com/angular/angular/commit/d4b8b24))
+* **forms:** properly handle special properties in FormGroup.get ([#22249](https://github.com/angular/angular/issues/22249)) ([9367e91](https://github.com/angular/angular/commit/9367e91)), closes [#17195](https://github.com/angular/angular/issues/17195)
+* **platform-server:** avoid clash between server and client style encapsulation attributes ([#24158](https://github.com/angular/angular/issues/24158)) ([b96a3c8](https://github.com/angular/angular/commit/b96a3c8))
+* **platform-server:** avoid dependency cycle when using http interceptor ([#24229](https://github.com/angular/angular/issues/24229)) ([60aa943](https://github.com/angular/angular/commit/60aa943)), closes [#23023](https://github.com/angular/angular/issues/23023)
+* **platform-server:** don't reflect innerHTML property to attibute ([#24213](https://github.com/angular/angular/issues/24213)) ([6a663a4](https://github.com/angular/angular/commit/6a663a4)), closes [#19278](https://github.com/angular/angular/issues/19278)
+* **platform-server:** provide Domino DOM types globally ([#24116](https://github.com/angular/angular/issues/24116)) ([c73196e](https://github.com/angular/angular/commit/c73196e)), closes [#23280](https://github.com/angular/angular/issues/23280) [#23133](https://github.com/angular/angular/issues/23133)
+* **router:** avoid freezing queryParams in-place ([#22663](https://github.com/angular/angular/issues/22663)) ([89f64e5](https://github.com/angular/angular/commit/89f64e5)), closes [#22617](https://github.com/angular/angular/issues/22617)
+* **router:** cache route handle if found ([#22475](https://github.com/angular/angular/issues/22475)) ([4cfa571](https://github.com/angular/angular/commit/4cfa571)), closes [#22474](https://github.com/angular/angular/issues/22474)
+* **router:** correct the segment parsing so it won't break on ampersand ([#23684](https://github.com/angular/angular/issues/23684)) ([553a680](https://github.com/angular/angular/commit/553a680))
+* **service-worker:** add badge to NOTIFICATION_OPTION_NAMES ([#23241](https://github.com/angular/angular/issues/23241)) ([fb59b2d](https://github.com/angular/angular/commit/fb59b2d)), closes [#23196](https://github.com/angular/angular/issues/23196)
+* **service-worker:** check platformBrowser before accessing navigator.serviceWorker ([#21231](https://github.com/angular/angular/issues/21231)) ([0bdd30e](https://github.com/angular/angular/commit/0bdd30e))
+* **service-worker:** correctly handle requests with empty `clientId` ([#23625](https://github.com/angular/angular/issues/23625)) ([e0ed59e](https://github.com/angular/angular/commit/e0ed59e)), closes [#23526](https://github.com/angular/angular/issues/23526)
+* **service-worker:** deprecate `versionedFiles` in asset-group resources ([#23584](https://github.com/angular/angular/issues/23584)) ([1d378e2](https://github.com/angular/angular/commit/1d378e2))
+
+
+### Features
+
+* **compiler:** support `// ...` and `// TODO` in mock compiler expectations ([#23441](https://github.com/angular/angular/issues/23441)) ([c6b206e](https://github.com/angular/angular/commit/c6b206e))
+* **compiler-cli:** update `tsickle` to `0.29.x` ([#24233](https://github.com/angular/angular/issues/24233)) ([f69ac67](https://github.com/angular/angular/commit/f69ac67))
+* **platform-browser:** add HammerJS lazy-loader symbols to public API ([#23943](https://github.com/angular/angular/issues/23943)) ([26fbf1d](https://github.com/angular/angular/commit/26fbf1d))
+* **platform-browser:** allow lazy-loading HammerJS ([#23906](https://github.com/angular/angular/issues/23906)) ([313bdce](https://github.com/angular/angular/commit/313bdce))
+* **platform-server:** use EventManagerPlugin on the server ([#24132](https://github.com/angular/angular/issues/24132)) ([d6595eb](https://github.com/angular/angular/commit/d6595eb))
+* **router:** add navigation execution context info to activation hooks ([#24204](https://github.com/angular/angular/issues/24204)) ([20c463e](https://github.com/angular/angular/commit/20c463e)), closes [#24202](https://github.com/angular/angular/issues/24202)
+
+
 <a name="6.0.4"></a>
 ## [6.0.4](https://github.com/angular/angular/compare/6.0.3...6.0.4) (2018-06-06)
 

aio/content/examples/webpack/config/helpers.js

@@ -1,12 +0,0 @@
-// #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

aio/content/examples/webpack/config/karma-test-shim.js

@@ -1,17 +0,0 @@
-// #docregion
-Error.stackTraceLimit = Infinity;
-
-require('core-js/es6');
-require('core-js/es7/reflect');
-
-require('zone.js/dist/zone');
-require('zone.js/dist/zone-testing');
-
-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());

aio/content/examples/webpack/config/karma.conf.js

@@ -1,39 +0,0 @@
-// #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', 'kjhtml'],
-    port: 9876,
-    colors: true,
-    logLevel: config.LOG_INFO,
-    autoWatch: false,
-    browsers: ['Chrome'],
-    singleRun: true
-  };
-
-  config.set(_config);
-};
-// #enddocregion

aio/content/examples/webpack/config/webpack.common.js

@@ -1,81 +0,0 @@
-// #docplaster
-// #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, one-entry, two-entries
-  entry: {
-    // #enddocregion one-entry, two-entries
-    'polyfills': './src/polyfills.ts',
-    // #docregion two-entries
-    'vendor': './src/vendor.ts',
-    // #docregion one-entry
-    'app': './src/main.ts'
-  },
-  // #enddocregion entries, one-entry, two-entries
-
-  // #docregion resolve
-  resolve: {
-    extensions: ['.ts', '.js']
-  },
-  // #enddocregion resolve
-
-  // #docregion loaders
-  module: {
-    rules: [
-      {
-        test: /\.ts$/,
-        loaders: [
-          {
-            loader: 'awesome-typescript-loader',
-            options: { configFileName: helpers.root('src', 'tsconfig.json') }
-          } , '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(\\|\/)@angular/,
-      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
-

aio/content/examples/webpack/config/webpack.dev.js

@@ -1,26 +0,0 @@
-// #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: '/',
-    filename: '[name].js',
-    chunkFilename: '[id].chunk.js'
-  },
-
-  plugins: [
-    new ExtractTextPlugin('[name].css')
-  ],
-
-  devServer: {
-    historyApiFallback: true,
-    stats: 'minimal'
-  }
-});
-// #enddocregion

aio/content/examples/webpack/config/webpack.prod.js

@@ -1,41 +0,0 @@
-// #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

aio/content/examples/webpack/config/webpack.test.js

@@ -1,55 +0,0 @@
-// #docregion
-var webpack = require('webpack');
-var helpers = require('./helpers');
-
-module.exports = {
-  devtool: 'inline-source-map',
-
-  resolve: {
-    extensions: ['.ts', '.js']
-  },
-
-  module: {
-    rules: [
-      {
-        test: /\.ts$/,
-        loaders: [
-          {
-            loader: 'awesome-typescript-loader',
-            options: { configFileName: helpers.root('src', 'tsconfig.json') }
-          } , '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(\\|\/)@angular/,
-      helpers.root('./src'), // location of your src
-      {} // a map of your routes
-    )
-  ]
-}
-
-// #enddocregion

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

@@ -1,21 +0,0 @@
-'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);
-  });
-
-});

aio/content/examples/webpack/example-config.json

@@ -1,5 +0,0 @@
-{
-  "build": "build:webpack",
-  "run": "serve:cli",
-  "projectType": "systemjs"
-}

aio/content/examples/webpack/karma.webpack.conf.js

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

aio/content/examples/webpack/package.webpack.json

@@ -1,49 +0,0 @@
-{
-  "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": "~4.2.0",
-    "@angular/compiler": "~4.2.0",
-    "@angular/core": "~4.2.0",
-    "@angular/forms": "~4.2.0",
-    "@angular/http": "~4.2.0",
-    "@angular/platform-browser": "~4.2.0",
-    "@angular/platform-browser-dynamic": "~4.2.0",
-    "@angular/router": "~4.2.0",
-    "core-js": "^2.4.1",
-    "rxjs": "5.0.1",
-    "zone.js": "^0.8.4"
-  },
-  "devDependencies": {
-    "@types/node": "^6.0.45",
-    "@types/jasmine": "2.5.36",
-    "angular2-template-loader": "^0.6.0",
-    "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",
-    "html-loader": "^0.4.3",
-    "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-sourcemap-loader": "^0.3.7",
-    "karma-webpack": "^2.0.1",
-    "null-loader": "^0.1.1",
-    "raw-loader": "^0.5.1",
-    "rimraf": "^2.5.2",
-    "style-loader": "^0.13.1",
-    "typescript": "~2.3.1",
-    "webpack": "2.2.1",
-    "webpack-dev-server": "2.4.1",
-    "webpack-merge": "^3.0.0"
-  }
-}

aio/content/examples/webpack/src/app/app.component.css

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

aio/content/examples/webpack/src/app/app.component.html

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

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

@@ -1,16 +0,0 @@
-// #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

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

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

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

@@ -1,16 +0,0 @@
-// #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 { }

aio/content/examples/webpack/src/assets/css/styles.css

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

aio/content/examples/webpack/src/index.html

@@ -1,14 +0,0 @@
-<!-- #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 -->

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

@@ -1,14 +0,0 @@
-// #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

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

@@ -1,12 +0,0 @@
-// #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');
-}

aio/content/examples/webpack/src/tsconfig.1.json

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

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

@@ -1,18 +0,0 @@
-// TODO(i): this no longer works. we need to review this example and if absolutely necessary rewrite it to use the
-// rxjs-compat package
-
-// #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

aio/content/examples/webpack/webpack.config.js

@@ -1,3 +0,0 @@
-// #docregion
-module.exports = require('./config/webpack.dev.js');
-// #enddocregion

aio/content/examples/webpack/zipper.json

@@ -1,12 +0,0 @@
-{
-  "files":[
-    "!**/*.d.ts",
-    "!**/*.js",
-    "!**/*.[0-9].*",
-    "config/**/*",
-    "webpack.config.js",
-    "karma.webpack.conf.js"
-  ],
-  "removeSystemJsConfig": true,
-  "type": "webpack"
-}

aio/content/guide/api-page-class.md

@@ -1,175 +0,0 @@
-<div class="breadcrumb">
-    <a href="#">API<a> / <a href="#">@core<a>
-</div>
-<header class="api-header">
-    <h1><label class="api-status-label experimental">experimental</label><label class="api-type-label class">class</label>Class Name</h1>
-</header>
-<div class="page-actions">
-    <a href="#"><label class="raised page-label"><i class="material-icons">mode_edit</i>suggest edits</label></a>
-    <a href="#"><label class="raised page-label"><i class="material-icons">code</i>view source</label></a>
-</div>
-<p>Class description goes here. This is a short and to the point one or two sentence description that easily introduces the reader to the class.</p>
-<div class="api-body">
-    <section>
-        <h2>Overview</h2>
-        <code-example language="ts" hidecopy="true" ng-version="5.2.0"><aio-code class="simple-code" ng-reflect-ng-class="[object Object]" ng-reflect-code="
-    class <a href=&quot;api/core/Compi" ng-reflect-hide-copy="true" ng-reflect-language="ts" ng-reflect-linenums="" ng-reflect-path="" ng-reflect-region="" ng-reflect-title=""><pre class="prettyprint lang-ts">
-        <code class="animated fadeIn"><span class="kwd">class</span><span class="pln"> </span><a href="api/core/Compiler" class="code-anchor"><span class="typ">Compiler</span></a><span class="pln"> </span><span class="pun">{</span><span class="pln">
-    </span><a class="code-anchor" href="api/core/Compiler#compileModuleSync"><span class="pln">compileModuleSync</span><span class="pun">&lt;</span><span class="pln">T</span><span class="pun">&gt;(</span><span class="pln">moduleType</span><span class="pun">:</span><span class="pln"> </span><span class="typ">Type</span><span class="pun">&lt;</span><span class="pln">T</span><span class="pun">&gt;):</span><span class="pln"> </span><span class="typ">NgModuleFactory</span><span class="pun">&lt;</span><span class="pln">T</span><span class="pun">&gt;</span></a><span class="pln">
-    </span><a class="code-anchor" href="api/core/Compiler#compileModuleAsync"><span class="pln">compileModuleAsync</span><span class="pun">&lt;</span><span class="pln">T</span><span class="pun">&gt;(</span><span class="pln">moduleType</span><span class="pun">:</span><span class="pln"> </span><span class="typ">Type</span><span class="pun">&lt;</span><span class="pln">T</span><span class="pun">&gt;):</span><span class="pln"> </span><span class="typ">Promise</span><span class="pun">&lt;</span><span class="typ">NgModuleFactory</span><span class="pun">&lt;</span><span class="pln">T</span><span class="pun">&gt;&gt;</span></a><span class="pln">
-    </span><a class="code-anchor" href="api/core/Compiler#compileModuleAndAllComponentsSync"><span class="pln">compileModuleAndAllComponentsSync</span><span class="pun">&lt;</span><span class="pln">T</span><span class="pun">&gt;(</span><span class="pln">moduleType</span><span class="pun">:</span><span class="pln"> </span><span class="typ">Type</span><span class="pun">&lt;</span><span class="pln">T</span><span class="pun">&gt;):</span><span class="pln"> </span><span class="typ">ModuleWithComponentFactories</span><span class="pun">&lt;</span><span class="pln">T</span><span class="pun">&gt;</span></a><span class="pln">
-    </span><a class="code-anchor" href="api/core/Compiler#compileModuleAndAllComponentsAsync"><span class="pln">compileModuleAndAllComponentsAsync</span><span class="pun">&lt;</span><span class="pln">T</span><span class="pun">&gt;(</span><span class="pln">moduleType</span><span class="pun">:</span><span class="pln"> </span><span class="typ">Type</span><span class="pun">&lt;</span><span class="pln">T</span><span class="pun">&gt;):</span><span class="pln"> </span><span class="typ">Promise</span><span class="pun">&lt;</span><span class="typ">ModuleWithComponentFactories</span><span class="pun">&lt;</span><span class="pln">T</span><span class="pun">&gt;&gt;</span></a><span class="pln">
-    </span><a class="code-anchor" href="api/core/Compiler#clearCache"><span class="pln">clearCache</span><span class="pun">():</span><span class="pln"> </span><span class="kwd">void</span></a><span class="pln">
-    </span><a class="code-anchor" href="api/core/Compiler#clearCacheFor"><span class="pln">clearCacheFor</span><span class="pun">(</span><span class="pln">type</span><span class="pun">:</span><span class="pln"> </span><span class="typ">Type</span><span class="pun">&lt;</span><span class="pln">any</span><span class="pun">&gt;)</span></a><span class="pln">
-    </span><span class="pun">}</span></code>
-        </pre></aio-code></code-example>
-    </section>
-    <section>
-        <h2>Description</h2>
-        <p>The longer class description goes here which can include multiple paragraphs.</p>
-        </p>Bacon ipsum dolor amet pork belly capicola sirloin venison alcatra ground round ham hock jowl turkey picanha bresaola pancetta brisket chicken fatback. Burgdoggen kevin salami jowl shoulder jerky leberkas meatball. Ham hock picanha burgdoggen pork belly rump bacon cupim. Bacon kielbasa sirloin shank strip steak ground round. Bresaola cow salami meatloaf pork chop leberkas flank turducken biltong meatball chuck pork tri-tip chicken. Ribeye corned beef shoulder, meatloaf strip steak jerky porchetta capicola alcatra ham.</p>
-        <h3>Subclasses</h3>
-        <ul>
-            <li><a href="#">Subclass1</a></li>
-            <li><a href="#">Subclass2</a></li>
-            <li><a href="#">Subclass3</a></li>
-        </ul>
-        <h3>See Also</h3>
-        <ul>
-            <li><a href="#">Link1</a></li>
-            <li><a href="#">Link2</a></li>
-        </ul>
-    </section>
-    <section>
-        <h2>Constructor</h2>
-        <code-example hidecopy="true" class="no-box api-heading" ng-version="5.2.0">
-        <aio-code class="simple-code"><pre class="prettyprint lang-">   
-        <code class="animated fadeIn"><span class="kwd">constructor</span><span class="pun">(</span><span class="pln">element</span><span class="pun">:</span><span class="pln"> any</span><span class="pun">,</span><span class="pln"> keyframes</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
-        </span><span class="pun">[</span><span class="pln">key</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">string</span><span class="pun">]:</span><span class="pln"> </span><span class="kwd">string</span><span class="pln"> </span><span class="pun">|</span><span class="pln"> number</span><span class="pun">;</span><span class="pln">
-    </span><span class="pun">}[],</span><span class="pln"> duration</span><span class="pun">:</span><span class="pln"> number</span><span class="pun">,</span><span class="pln"> delay</span><span class="pun">:</span><span class="pln"> number</span><span class="pun">,</span><span class="pln"> easing</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">string</span><span class="pun">,</span><span class="pln"> previousPlayers</span><span class="pun">:</span><span class="pln"> any</span><span class="pun">[])</span></code>
-        </pre></aio-code></code-example>
-    </section>
-    <section>
-        <h2>Properties</h2>
-        <table class="is-full-width list-table">
-        <thead>
-        <tr>
-        <th>Property</th>
-        <th>Type</th>
-        <th>Description</th>
-        </tr>
-        </thead>
-        <tbody>
-        <tr>
-        <td>
-            <code><strong>Property1</strong></code>
-        </td>
-        <td><label class="property-type-label type">Type</label></td>
-        <td>Description goes here</td>
-        </tr>
-        <tr>
-        <td>
-            <code><strong>Property2</strong></code>
-        </td>
-        <td>Type</td>
-        <td>Description goes here</td>
-        </tr>
-        <tr>
-        <td>
-            <code><strong>Property3</strong></code>
-        </td>
-        <td>Type</td>
-        <td>Description goes here</td>
-        </tr>
-        </tbody>
-    </table>
-    </section>
-    <section class="api-method">
-        <h2>Methods</h2>
-        <table class="is-full-width item-table">
-        <thead>
-        <tr>
-        <th>Method1Name( )</th>
-        </tr>
-        </thead>
-        <tbody>
-        <tr>
-        <td>
-            <p>Description goes here</p>
-            <br>
-            <p>Bacon ipsum dolor amet pork belly capicola sirloin venison alcatra ground round ham hock jowl turkey picanha bresaola pancetta brisket chicken fatback. Burgdoggen kevin salami jowl shoulder jerky leberkas meatball. Ham hock picanha burgdoggen pork belly rump bacon cupim. Bacon kielbasa sirloin shank strip steak ground round. Bresaola cow salami meatloaf pork chop leberkas flank turducken biltong meatball chuck pork tri-tip chicken. Ribeye corned beef shoulder, meatloaf strip steak jerky porchetta capicola alcatra ham.</p>
-        </td>
-        </tr>
-        </tbody>
-    </table>
-    <table class="is-full-width api-method item-table">
-        <thead>
-        <tr>
-        <th>Method2Name( )</th>
-        </tr>
-        </thead>
-        <tbody>
-        <tr>
-        <td>
-            <p>Description goes here</p>
-            <hr>
-            <h5>Declaration</h5>
-            <code-example language="ts" hidecopy="true" ng-version="5.2.0">
-                <aio-code class="simple-code"><pre class="prettyprint lang-ts">
-                    <code class="animated fadeIn"><span class="kwd">class</span><span class="pln"> </span><a href="api/animations/AnimationBuilder" class="code-anchor"><span class="typ">AnimationBuilder</span></a><span class="pln"> </span><span class="pun">{</span><span class="pln"></span><a class="code-anchor" href="api/animations/AnimationBuilder#build"><span class="pln">build</span><span class="pun">(</span><span class="pln">animation</span><span class="pun">:</span><span class="pln"> </span><span class="typ">AnimationMetadata</span><span class="pln"> </span><span class="pun">|</span><span class="pln"> </span><span class="typ">AnimationMetadata</span><span class="pun">[]):</span><span class="pln"> </span><span class="typ">AnimationFactory</span></a><span class="pln"></span><span class="pun">}</span></code></pre>
-                </aio-code>
-            </code-example>
-            <h6>Parameters</h6>
-            <h6>Returns</h6>
-            <p>Returns information and results goes here.</p>
-            <h6>Errors</h6>
-            <p>Error information goes here</p>
-            <hr>
-            <p>Further details provided as needed. Bacon ipsum dolor amet pork belly capicola sirloin venison alcatra ground round ham hock jowl turkey picanha bresaola pancetta brisket chicken fatback. Burgdoggen kevin salami jowl shoulder jerky leberkas meatball.</p><hr>
-            <h6>Overloads</h6>
-                <table class="is-full-width">
-                <tbody>
-                <tr>
-                <td>
-                    <code-example hidecopy="true" class="no-box api-heading" ng-version="5.2.0">
-        <aio-code class="simple-code"><pre class="prettyprint lang-">   
-        <code class="animated fadeIn"><span class="kwd">constructor</span><span class="pun">(</span><span class="pln">element</span><span class="pun">:</span><span class="pln"> any</span><span class="pun">,</span><span class="pln"> keyframes</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
-        </span><span class="pun">[</span><span class="pln">key</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">string</span><span class="pun">]:</span><span class="pln"> </span><span class="kwd">string</span><span class="pln"> </span><span class="pun">|</span><span class="pln"> number</span><span class="pun">;</span><span class="pln">
-    </span><span class="pun">}[],</span><span class="pln"> duration</span><span class="pun">:</span><span class="pln"> number</span><span class="pun">,</span><span class="pln"> delay</span><span class="pun">:</span><span class="pln"> number</span><span class="pun">,</span><span class="pln"> easing</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">string</span><span class="pun">,</span><span class="pln"> previousPlayers</span><span class="pun">:</span><span class="pln"> any</span><span class="pun">[])</span></code>
-        </pre></aio-code></code-example>
-                </td>
-                <td>Description goes here</td>
-                </tr>
-                <tr>
-                <td>
-                    <code-example hidecopy="true" class="no-box api-heading" ng-version="5.2.0">
-        <aio-code class="simple-code"><pre class="prettyprint lang-">   
-        <code class="animated fadeIn"><span class="kwd">constructor</span><span class="pun">(</span><span class="pln">element</span><span class="pun">:</span><span class="pln"> any</span><span class="pun">,</span><span class="pln"> keyframes</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
-        </span><span class="pun">[</span><span class="pln">key</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">string</span><span class="pun">]:</span><span class="pln"> </span><span class="kwd">string</span><span class="pln"> </span><span class="pun">|</span><span class="pln"> number</span><span class="pun">;</span><span class="pln">
-    </span><span class="pun">}[],</span><span class="pln"> duration</span><span class="pun">:</span><span class="pln"> number</span><span class="pun">,</span><span class="pln"> delay</span><span class="pun">:</span><span class="pln"> number</span><span class="pun">,</span><span class="pln"> easing</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">string</span><span class="pun">,</span><span class="pln"> previousPlayers</span><span class="pun">:</span><span class="pln"> any</span><span class="pun">[])</span></code>
-        </pre></aio-code></code-example>
-                </td>
-                <td>Description goes here</td>
-                </tr>
-                </tbody>
-            </table>
-            <hr>
-            <h5>Example: Descriptive Title of Method Example</h5>
-            <p>Bacon ipsum dolor amet pork belly capicola sirloin venison alcatra ground round ham hock jowl turkey picanha bresaola pancetta brisket chicken fatback. Burgdoggen kevin salami jowl shoulder jerky leberkas meatball. Ham hock picanha burgdoggen pork belly rump bacon cupim. Bacon kielbasa sirloin shank strip steak ground round. Bresaola cow salami meatloaf pork chop leberkas flank turducken biltong meatball chuck pork tri-tip chicken. Ribeye corned beef shoulder, meatloaf strip steak jerky porchetta capicola alcatra ham.</p>
-        </td>
-        </tr>
-        </tbody>
-    </table>
-    </section>
-    <section>
-        <h2>Example: Descriptive Title of Combined Example Goes Here</h2>
-        <p>Intro description text about what the example is and how it can be used.</p>
-            <code-example hidecopy="true" class="no-box api-heading" ng-version="5.2.0">
-        <aio-code class="simple-code"><pre class="prettyprint lang-">   
-        <code class="animated fadeIn"><span class="kwd">constructor</span><span class="pun">(</span><span class="pln">element</span><span class="pun">:</span><span class="pln"> any</span><span class="pun">,</span><span class="pln"> keyframes</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
-        </span><span class="pun">[</span><span class="pln">key</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">string</span><span class="pun">]:</span><span class="pln"> </span><span class="kwd">string</span><span class="pln"> </span><span class="pun">|</span><span class="pln"> number</span><span class="pun">;</span><span class="pln">
-    </span><span class="pun">}[],</span><span class="pln"> duration</span><span class="pun">:</span><span class="pln"> number</span><span class="pun">,</span><span class="pln"> delay</span><span class="pun">:</span><span class="pln"> number</span><span class="pun">,</span><span class="pln"> easing</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">string</span><span class="pun">,</span><span class="pln"> previousPlayers</span><span class="pun">:</span><span class="pln"> any</span><span class="pun">[])</span></code>
-        </pre></aio-code></code-example>
-        <p>Further explanation provided as needed. Bacon ipsum dolor amet pork belly capicola sirloin venison alcatra ground round ham hock jowl turkey picanha bresaola pancetta brisket chicken fatback. Burgdoggen kevin salami jowl shoulder jerky leberkas meatball.</p>
-    </section>
-</div>

aio/content/guide/typescript-configuration.md

@@ -132,7 +132,7 @@ QuickStart identifies two *typings*, or `d.ts`, files:
 * [jasmine](http://jasmine.github.io/) typings for the Jasmine test framework.
 
 * [node](https://www.npmjs.com/package/@types/node) for code that references objects in the *Node.js®* environment;
-you can view an example in the [webpack](guide/webpack) page.
+
 
 QuickStart doesn't require these typings but many of the samples do.
 

aio/content/guide/webpack.md

@@ -1,801 +0,0 @@
-# Webpack: An Introduction
-
-<style>
-  h4 {font-size: 17px !important; text-transform: none !important;}
-  .syntax { font-family: Consolas, 'Lucida Sans', Courier, sans-serif; color: black; font-size: 85%; }
-
-</style>
-
-
-
-[**Webpack**](https://webpack.github.io/) is a popular module bundler,
-a tool for bundling application source code in convenient _chunks_
-and for loading that code from a server into a browser.
-
-It's an excellent alternative to the *SystemJS* approach used elsewhere in the documentation.
-This guide offers a taste of Webpack and explains how to use it with Angular applications.
-
-
-{@a top}
-
-<!--
-
-
-# Contents
-
-* [What is Webpack?](guide/webpack#what-is-webpack)
-
-  * [Entries and outputs](guide/webpack#entries-outputs)
-  * [Multiple bundles](guide/webpack#multiple-bundles)
-  * [Loaders](guide/webpack#loaders)
-  * [Plugins](guide/webpack#plugins)
-
-* [Configuring Webpack](guide/webpack#configure-webpack)
-
-  * [Polyfills](guide/webpack#polyfills)
-  * [Common configuration](guide/webpack#common-configuration)
-  * [Inside `webpack.common.js`](guide/webpack#inside-webpack-commonjs)
-
-    * [entry](guide/webpack#common-entries)
-    * [resolve extension-less imports](guide/webpack#common-resolves)
-    * [`module.rules`](guide/webpack#common-rules)
-    * [Plugins](guide/webpack#plugins)
-    * [`CommonsChunkPlugin`](guide/webpack#commons-chunk-plugin)
-    * [`HtmlWebpackPlugin`](guide/webpack#html-webpack-plugin)
-
-  * [Environment specific configuration](guide/webpack#environment-configuration)
-  * [Development configuration](guide/webpack#development-configuration)
-  * [Production configuration](guide/webpack#production-configuration)
-  * [Test configuration](guide/webpack#test-configuration)
-
-* [Trying it out](guide/webpack#try)
-* [Highlights](guide/webpack#highlights)
-* [Conclusion](guide/webpack#conclusion)
-
--->
-
-You can also <a href="generated/zips/webpack/webpack.zip" target="_blank">download the final result.</a>
-
-{@a what-is-webpack}
-
-## What is Webpack?
-
-Webpack is a powerful module bundler.
-A _bundle_ is a JavaScript file that incorporates _assets_ that *belong* together and
-should be served to the client in a response to a single file request.
-A bundle can include JavaScript, CSS styles, HTML, and almost any other kind of file.
-
-Webpack roams over your application source code,
-looking for `import` statements, building a dependency graph, and emitting one or more _bundles_.
-With plugins and rules, Webpack can preprocess and minify different non-JavaScript files such as TypeScript, SASS, and LESS files.
-
-You determine what Webpack does and how it does it with a JavaScript configuration file, `webpack.config.js`.
-
-
-{@a entries-outputs}
-
-
-
-### Entries and outputs
-
-You supply Webpack with one or more *entry* files and let it find and incorporate the dependencies that radiate from those entries.
-The one entry point file in this example is the application's root file, `src/main.ts`:
-
-
-<code-example path="webpack/config/webpack.common.js" region="one-entry" title="webpack.config.js (single entry)" linenums="false">
-
-</code-example>
-
-
-
-Webpack inspects that file and traverses its `import` dependencies recursively.
-
-
-<code-example path="webpack/src/app/app.component.ts" region="component" title="src/main.ts" linenums="false">
-
-</code-example>
-
-
-
-It sees that you're importing `@angular/core` so it adds that to its dependency list for potential inclusion in the bundle.
-It opens the `@angular/core` file and follows _its_ network of `import` statements until it has built the complete dependency graph from `main.ts` down.
-
-Then it **outputs** these files to the `app.js` _bundle file_ designated in configuration:
-
-<code-example name="webpack.config.js (single output)" language="javascript">
-  output: {
-    filename: 'app.js'
-  }
-
-</code-example>
-
-This `app.js` output bundle is a single JavaScript file that contains the application source and its dependencies.
-You'll load it later with a `<script>` tag in the `index.html`.
-
-
-{@a multiple-bundles}
-
-
-#### Multiple bundles
-You probably don't want one giant bundle of everything.
-It's preferable to separate the volatile application app code from comparatively stable vendor code modules.
-
-Change the configuration so that it has two entry points, `main.ts` and `vendor.ts`:
-
-
-<code-example language="javascript">
-  entry: {
-    app: 'src/app.ts',
-    vendor: 'src/vendor.ts'
-  },
-
-  output: {
-    filename: '[name].js'
-  }
-
-</code-example>
-
-
-Webpack constructs two separate dependency graphs
-and emits *two* bundle files, one called `app.js` containing only the application code and
-another called `vendor.js` with all the vendor dependencies.
-
-
-<div class="l-sub-section">
-
-
-
-The `[name]` in the output name is a *placeholder* that a Webpack plugin replaces with the entry names,
-`app` and `vendor`. Plugins are [covered later](guide/webpack#commons-chunk-plugin) in the guide.
-
-
-</div>
-
-
-
-To tell Webpack what belongs in the vendor bundle,
-add a `vendor.ts` file that only imports the application's third-party modules:
-
-<code-example path="webpack/src/vendor.ts" title="src/vendor.ts" linenums="false">
-
-</code-example>
-
-
-
-{@a loaders}
-
-
-
-### Loaders
-
-Webpack can bundle any kind of file: JavaScript, TypeScript, CSS, SASS, LESS, images, HTML, fonts, whatever.
-Webpack _itself_ only understands JavaScript files.
-Teach it to transform non-JavaScript file into their JavaScript equivalents with *loaders*.
-Configure loaders for TypeScript and CSS as follows.
-
-
-<code-example language="javascript">
-  rules: [
-    {
-      test: /\.ts$/,
-      loader: 'awesome-typescript-loader'
-    },
-    {
-      test: /\.css$/,
-      loaders: 'style-loader!css-loader'
-    }
-  ]
-
-</code-example>
-
-
-
-When Webpack encounters `import` statements like the following,
-it applies the `test` RegEx patterns.
-
-
-<code-example language="typescript">
-  import { AppComponent } from './app.component.ts';
-
-  import 'uiframework/dist/uiframework.css';
-
-</code-example>
-
-
-
-When a pattern matches the filename, Webpack processes the file with the associated loader.
-
-The first `import` file matches the `.ts` pattern so Webpack processes it with the `awesome-typescript-loader`.
-The imported file doesn't match the second pattern so its loader is ignored.
-
-The second `import` matches the second `.css` pattern for which you have *two* loaders chained by the (!) character.
-Webpack applies chained loaders *right to left*. So it applies
-the `css` loader first to flatten CSS `@import` and `url(...)` statements.
-Then it applies the `style` loader to append the css inside `<style>` elements on the page.
-
-
-{@a plugins}
-
-
-
-### Plugins
-
-Webpack has a build pipeline with well-defined phases.
-Tap into that pipeline with plugins such as the `uglify` minification plugin:
-
-<code-example language="javascript">
-  plugins: [
-    new webpack.optimize.UglifyJsPlugin()
-  ]
-
-</code-example>
-
-
-
-{@a configure-webpack}
-
-
-
-## Configuring Webpack
-
-After that brief orientation, you are ready to build your own Webpack configuration for Angular apps.
-
-Begin by setting up the development environment.
-
-Create a new project folder.
-
-<code-example language="sh" class="code-shell">
-  mkdir angular-webpack
-  cd    angular-webpack
-
-</code-example>
-
-
-
-Add these files:
-
-
-<code-tabs>
-
-  <code-pane title="package.json" path="webpack/package.webpack.json">
-
-  </code-pane>
-
-  <code-pane title="src/tsconfig.json" path="webpack/src/tsconfig.1.json">
-
-  </code-pane>
-
-  <code-pane title="webpack.config.js" path="webpack/webpack.config.js">
-
-  </code-pane>
-
-  <code-pane title="karma.conf.js" path="webpack/karma.webpack.conf.js">
-
-  </code-pane>
-
-  <code-pane title="config/helpers.js" path="webpack/config/helpers.js">
-
-  </code-pane>
-
-</code-tabs>
-
-
-
-<div class="l-sub-section">
-
-
-
-Many of these files should be familiar from other Angular documentation guides,
-especially the [Typescript configuration](guide/typescript-configuration) and
-[npm packages](guide/npm-packages) guides.
-
-Webpack, the plugins, and the loaders are also installed as packages.
-They are listed in the updated `packages.json`.
-
-
-</div>
-
-
-
-Open a terminal window and install the npm packages.
-
-<code-example language="sh" class="code-shell">
-  npm install
-
-</code-example>
-
-
-
-{@a polyfills}
-
-
-
-### Polyfills
-
-You'll need polyfills to run an Angular application in most browsers as explained
-in the [Browser Support](guide/browser-support) guide.
-
-Polyfills should be bundled separately from the application and vendor bundles.
-Add a `polyfills.ts` like this one to the `src/` folder.
-
-
-<code-example path="webpack/src/polyfills.ts" title="src/polyfills.ts" linenums="false">
-
-</code-example>
-
-
-
-<div class="callout is-critical">
-
-
-
-<header>
-  Loading polyfills
-</header>
-
-
-
-Load `zone.js` early within `polyfills.ts`, immediately after the other ES6 and metadata shims.
-
-
-</div>
-
-
-
-Because this bundle file will load first, `polyfills.ts` is also a good place to configure the browser environment
-for production or development.
-
-
-{@a common-configuration}
-
-
-
-### Common configuration
-
-Developers typically have separate configurations for development, production, and test environments.
-All three have a lot of configuration in common.
-
-Gather the common configuration in a file called `webpack.common.js`.
-
-
-<code-example path="webpack/config/webpack.common.js" title="config/webpack.common.js" linenums="false">
-
-</code-example>
-
-
-
-{@a inside-webpack-commonjs}
-
-
-### Inside _webpack.common.js_
-Webpack is a NodeJS-based tool that reads configuration from a JavaScript commonjs module file.
-
-The configuration imports dependencies with `require` statements
-and exports several objects as properties of a `module.exports` object.
-
-* [`entry`](guide/webpack#common-entries)&mdash;the entry-point files that define the bundles.
-* [`resolve`](guide/webpack#common-resolves)&mdash;how to resolve file names when they lack extensions.
-* [`module.rules`](guide/webpack#common-rules)&mdash; `module` is an object with `rules` for deciding how files are loaded.
-* [`plugins`](guide/webpack#common-plugins)&mdash;creates instances of the plugins.
-
-
-{@a common-entries}
-
-
-#### _entry_
-
-The first export is the `entry` object:
-
-
-<code-example path="webpack/config/webpack.common.js" region="entries" title="config/webpack.common.js" linenums="false">
-
-</code-example>
-
-
-
-This `entry` object defines the three bundles:
-
-* `polyfills`&mdash;the polyfills needed to run Angular applications in most modern browsers.
-* `vendor`&mdash;the third-party dependencies such as Angular, lodash, and bootstrap.css.
-* `app`&mdash;the application code.
-
-
-{@a common-resolves}
-
-
-#### _resolve_ extension-less imports
-
-The app will `import` dozens if not hundreds of JavaScript and TypeScript files.
-You could write `import` statements with explicit extensions like this example:
-
-<code-example language="typescript">
-  import { AppComponent } from './app.component.ts';
-
-</code-example>
-
-
-But most `import` statements don't mention the extension at all.
-Tell Webpack to resolve extension-less file requests by looking for matching files with
-`.ts` extension or `.js` extension (for regular JavaScript files and pre-compiled TypeScript files).
-
-
-<code-example path="webpack/config/webpack.common.js" region="resolve" title="config/webpack.common.js" linenums="false">
-
-</code-example>
-
-
-
-<div class="l-sub-section">
-
-
-
-If Webpack should resolve extension-less files for styles and HTML,
-add `.css` and `.html` to the list.
-
-
-</div>
-
-
-
-{@a common-rules}
-
-
-
-
-#### _module.rules_
-Rules tell Webpack which loaders to use for each file, or module:
-
-
-<code-example path="webpack/config/webpack.common.js" region="loaders" title="config/webpack.common.js" linenums="false">
-
-</code-example>
-
-
-
-* `awesome-typescript-loader`&mdash;a loader to transpile the Typescript code to ES5, guided by the `tsconfig.json` file.
-* `angular2-template-loader`&mdash;loads angular components' template and styles.
-* `html-loader`&mdash;for component templates.
-* images/fonts&mdash;Images and fonts are bundled as well.
-* CSS&mdash;the first pattern matches application-wide styles; the second handles
-component-scoped styles (the ones specified in a component's `styleUrls` metadata property).
-
-<div class="l-sub-section">
-
-
-
-The first pattern is for the application-wide styles. It excludes `.css` files within the `src/app` directory
-where the component-scoped styles sit. The `ExtractTextPlugin` (described below) applies the `style` and `css`
-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.
-
-
-</div>
-
-
-
-<div class="l-sub-section">
-
-
-
-Multiple loaders can be chained using the array notation.
-
-
-</div>
-
-
-
-{@a common-plugins}
-
-
-
-
-#### _plugins_
-Finally, create instances of three plugins:
-
-
-<code-example path="webpack/config/webpack.common.js" region="plugins" title="config/webpack.common.js" linenums="false">
-
-</code-example>
-
-
-
-{@a commons-chunk-plugin}
-
-
-#### *CommonsChunkPlugin*
-
-The `app.js` bundle should contain only application code. All vendor code belongs in the `vendor.js` bundle.
-
-Of course the application code imports vendor code.
-On its own, Webpack is not smart enough to keep the vendor code out of the `app.js` bundle.
-The `CommonsChunkPlugin` does that job.
-
-<div class="l-sub-section">
-
-
-
-The `CommonsChunkPlugin` identifies the hierarchy among three _chunks_: `app` -> `vendor` -> `polyfills`.
-Where Webpack finds that `app` has shared dependencies with `vendor`, it removes them from `app`.
-It would remove `polyfills` from `vendor` if they shared dependencies, which they don't.
-
-
-</div>
-
-
-
-{@a html-webpack-plugin}
-
-
-#### _HtmlWebpackPlugin_
-
-Webpack generates a number of js and CSS files.
-You _could_ insert them into the `index.html` _manually_. That would be tedious and error-prone.
-Webpack can inject those scripts and links for you with the `HtmlWebpackPlugin`.
-
-
-{@a environment-configuration}
-
-
-
-### Environment-specific configuration
-
-The `webpack.common.js` configuration file does most of the heavy lifting.
-Create separate, environment-specific configuration files that build on `webpack.common`
-by merging into it the peculiarities particular to the target environments.
-
-These files tend to be short and simple.
-
-
-{@a development-configuration}
-
-
-
-### Development configuration
-
-Here is the `webpack.dev.js` development configuration file.
-
-
-<code-example path="webpack/config/webpack.dev.js" title="config/webpack.dev.js" linenums="false">
-
-</code-example>
-
-
-
-The development build relies on the Webpack development server, configured near the bottom of the file.
-
-Although you tell Webpack to put output bundles in the `dist` folder,
-the dev server keeps all bundles in memory; it doesn't write them to disk.
-You won't find any files in the `dist` folder, at least not any generated from *this development build*.
-
-
-The `HtmlWebpackPlugin`, added in `webpack.common.js`, uses the `publicPath` and the `filename` settings to generate
-appropriate `<script>` and `<link>` tags into the `index.html`.
-
-The CSS styles are buried inside the Javascript bundles by default. The `ExtractTextPlugin` extracts them into
-external `.css` files that the `HtmlWebpackPlugin` inscribes as `<link>` tags into the `index.html`.
-
-Refer to the [Webpack documentation](https://webpack.github.io/docs/) for details on these and
-other configuration options in this file.
-
-Grab the app code at the end of this guide and try:
-
-
-<code-example language="sh" class="code-shell">
-  npm start
-
-</code-example>
-
-
-
-{@a production-configuration}
-
-
-
-### Production configuration
-
-Configuration of a *production* build resembles *development* configuration with a few key changes.
-
-
-<code-example path="webpack/config/webpack.prod.js" title="config/webpack.prod.js" linenums="false">
-
-</code-example>
-
-
-
-You'll deploy the application and its dependencies to a real production server.
-You won't deploy the artifacts needed only in development.
-
-Put the production output bundle files in the `dist` folder.
-
-Webpack generates file names with cache-busting hash.
-Thanks to the `HtmlWebpackPlugin`, you don't have to update the `index.html` file when the hash changes.
-
-There are additional plugins:
-
-* *`NoEmitOnErrorsPlugin`&mdash;stops the build if there is an error.
-* *`UglifyJsPlugin`&mdash;minifies the bundles.
-* *`ExtractTextPlugin`&mdash;extracts embedded css as external files, adding cache-busting hash to the filename.
-* *`DefinePlugin`&mdash;use to define environment variables that you can reference within the application.
-* *`LoaderOptionsPlugins`&mdash;to override options of certain loaders.
-
-Thanks to the `DefinePlugin` and the `ENV` variable defined at top, you can enable Angular production mode like this:
-
-
-<code-example path="webpack/src/main.ts" region="enable-prod" title="src/main.ts" linenums="false">
-
-</code-example>
-
-
-
-Grab the app code at the end of this guide and try:
-
-
-<code-example language="sh" class="code-shell">
-  npm run build
-
-</code-example>
-
-
-
-{@a test-configuration}
-
-
-
-### Test configuration
-
-You don't need much configuration to run unit tests.
-You don't need the loaders and plugins that you declared for your development and production builds.
-You probably don't need to load and process the application-wide styles files for unit tests and doing so would slow you down;
-you'll use the `null` loader for those CSS files.
-
-You could merge the test configuration into the `webpack.common` configuration and override the parts you don't want or need.
-But it might be simpler to start over with a completely fresh configuration.
-
-
-<code-example path="webpack/config/webpack.test.js" title="config/webpack.test.js" linenums="false">
-
-</code-example>
-
-
-
-Reconfigure [Karma](https://karma-runner.github.io/1.0/index.html) to use Webpack to run the tests:
-
-
-<code-example path="webpack/config/karma.conf.js" title="config/karma.conf.js" linenums="false">
-
-</code-example>
-
-
-
-You don't precompile the TypeScript; Webpack transpiles the Typescript files on the fly, in memory, and feeds the emitted JS directly to Karma.
-There are no temporary files on disk.
-
-The `karma-test-shim` tells Karma what files to pre-load and
-primes the Angular test framework with test versions of the providers that every app expects to be pre-loaded.
-
-
-<code-example path="webpack/config/karma-test-shim.js" title="config/karma-test-shim.js" linenums="false">
-
-</code-example>
-
-
-
-Notice that you do _not_ load the application code explicitly.
-You tell Webpack to find and load the test files (the files ending in `.spec.ts`).
-Each spec file imports all&mdash;and only&mdash;the application source code that it tests.
-Webpack loads just _those_ specific application files and ignores the other files that you aren't testing.
-
-
-Grab the app code at the end of this guide and try:
-
-
-<code-example language="sh" class="code-shell">
-  npm test
-
-</code-example>
-
-{@a try}
-
-## Trying it out
-
-Here is the source code for a small application that bundles with the
-Webpack techniques covered in this guide.
-
-
-<code-tabs>
-
-  <code-pane title="src/index.html" path="webpack/src/index.html">
-
-  </code-pane>
-
-  <code-pane title="src/main.ts" path="webpack/src/main.ts">
-
-  </code-pane>
-
-  <code-pane title="src/assets/css/styles.css" path="webpack/src/assets/css/styles.css">
-
-  </code-pane>
-
-</code-tabs>
-
-
-
-<code-tabs>
-
-  <code-pane title="src/app/app.component.ts" path="webpack/src/app/app.component.ts">
-
-  </code-pane>
-
-  <code-pane title="src/app/app.component.html" path="webpack/src/app/app.component.html">
-
-  </code-pane>
-
-  <code-pane title="src/app/app.component.css" path="webpack/src/app/app.component.css">
-
-  </code-pane>
-
-  <code-pane title="src/app/app.component.spec.ts" path="webpack/src/app/app.component.spec.ts">
-
-  </code-pane>
-
-  <code-pane title="src/app/app.module.ts" path="webpack/src/app/app.module.ts">
-
-  </code-pane>
-
-</code-tabs>
-
-
-
-The <code>app.component.html</code> displays this downloadable Angular logo
-<a href="assets/images/logos/angular/angular.png">
-<img src="assets/images/logos/angular/angular.png" height="40px" title="download Angular logo"></a>.
-Create a folder called `images` under the project's `assets` folder, then right-click (Cmd+click on Mac)
-on the image and download it to that folder.
-
-
-{@a bundle-ts}
-
-
-Here again are the TypeScript entry-point files that define the `polyfills` and `vendor` bundles.
-
-<code-tabs>
-
-  <code-pane title="src/polyfills.ts" path="webpack/src/polyfills.ts">
-
-  </code-pane>
-
-  <code-pane title="src/vendor.ts" path="webpack/src/vendor.ts">
-
-  </code-pane>
-
-</code-tabs>
-
-{@a highlights}
-
-<h3 class="no-toc">Highlights</h3>
-
-* There are no `<script>` or `<link>` tags in the `index.html`.
-The `HtmlWebpackPlugin` inserts them dynamically at runtime.
-
-* The `AppComponent` in `app.component.ts` imports the application-wide css with a simple `import` statement.
-
-* The `AppComponent` itself has its own html template and css file. WebPack loads them with calls to `require()`.
-Webpack stashes those component-scoped files in the `app.js` bundle too.
-You don't see those calls in the source code;
-they're added behind the scenes by the `angular2-template-loader` plug-in.
-
-* The `vendor.ts` consists of vendor dependency `import` statements that drive the `vendor.js` bundle.
-The application imports these modules too; they'd be duplicated in the `app.js` bundle
-if the `CommonsChunkPlugin` hadn't detected the overlap and removed them from `app.js`.
-{@a conclusion}
-
-## Conclusion
-
-You've learned just enough Webpack to configurate development, test and production builds
-for a small Angular application.
-
-_You could always do more_. Search the web for expert advice and expand your Webpack knowledge.
-
-[Back to top](guide/webpack#top)

aio/content/navigation.json

@@ -61,12 +61,6 @@
       "hidden": true
     },
 
-    {
-      "url": "guide/webpack",
-      "title": "Webpack: An Introduction",
-      "hidden": true
-    },
-
     {
       "url": "guide/quickstart",
       "title": "Getting Started",

aio/package.json

@@ -112,7 +112,7 @@
     "cross-spawn": "^5.1.0",
     "css-selector-parser": "^1.3.0",
     "dgeni": "^0.4.7",
-    "dgeni-packages": "^0.26.1",
+    "dgeni-packages": "^0.26.2",
     "entities": "^1.1.1",
     "eslint": "^3.19.0",
     "eslint-plugin-jasmine": "^2.2.0",

aio/src/app/app.component.html

@@ -27,6 +27,12 @@
     </a>
     <aio-top-menu *ngIf="isSideBySide" [nodes]="topMenuNodes"></aio-top-menu>
     <aio-search-box class="search-container" #searchBox (onSearch)="doSearch($event)" (onFocus)="doSearch($event)"></aio-search-box>
+    <div class="toolbar-external-icons-container">
+      <a  href="https://twitter.com/angular" title="Twitter">
+      <img src="assets/images/logos/twitter-icon.svg"></a>
+      <a  href="https://github.com/angular/angular" title="GitHub">
+        <img src="assets/images/logos/github-icon.svg"></a>
+    </div>
   </mat-toolbar-row>
 </mat-toolbar>
 

aio/src/app/app.module.ts

@@ -10,6 +10,7 @@ import { MatIconModule, MatIconRegistry } from '@angular/material/icon';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { MatSidenavModule } from '@angular/material/sidenav';
 import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatTooltipModule } from '@angular/material/tooltip';
 
 import { AppComponent } from 'app/app.component';
 import { CustomIconRegistry, SVG_ICONS } from 'app/shared/custom-icon-registry';
@@ -97,6 +98,7 @@ export const svgIconProviders = [
     MatProgressBarModule,
     MatSidenavModule,
     MatToolbarModule,
+    MatTooltipModule,
     SwUpdatesModule,
     SharedModule,
   ],

aio/src/assets/images/logos/github-icon.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 51.8 50.4" style="enable-background:new 0 0 51.8 50.4;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<path class="st0" d="M25.9,0.2C11.8,0.2,0.3,11.7,0.3,25.8c0,11.3,7.3,20.9,17.5,24.3c1.3,0.2,1.7-0.6,1.7-1.2c0-0.6,0-2.6,0-4.8
+	c-7.1,1.5-8.6-3-8.6-3c-1.2-3-2.8-3.7-2.8-3.7c-2.3-1.6,0.2-1.6,0.2-1.6c2.6,0.2,3.9,2.6,3.9,2.6c2.3,3.9,6,2.8,7.5,2.1
+	c0.2-1.7,0.9-2.8,1.6-3.4c-5.7-0.6-11.7-2.8-11.7-12.7c0-2.8,1-5.1,2.6-6.9c-0.3-0.7-1.1-3.3,0.3-6.8c0,0,2.1-0.7,7,2.6
+	c2-0.6,4.2-0.9,6.4-0.9c2.2,0,4.4,0.3,6.4,0.9c4.9-3.3,7-2.6,7-2.6c1.4,3.5,0.5,6.1,0.3,6.8c1.6,1.8,2.6,4.1,2.6,6.9
+	c0,9.8-6,12-11.7,12.6c0.9,0.8,1.7,2.4,1.7,4.7c0,3.4,0,6.2,0,7c0,0.7,0.5,1.5,1.8,1.2c10.2-3.4,17.5-13,17.5-24.3
+	C51.5,11.7,40.1,0.2,25.9,0.2z"/>
+</svg>

aio/src/assets/images/logos/twitter-icon.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 50 49.7" style="enable-background:new 0 0 50 49.7;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<path class="st0" d="M50,9.3c-1.8,0.8-3.8,1.4-5.9,1.6c2.1-1.3,3.7-3.3,4.5-5.7c-2,1.2-4.2,2-6.5,2.5c-1.9-2-4.5-3.2-7.5-3.2
+	c-5.7,0-10.3,4.6-10.3,10.3c0,0.8,0.1,1.6,0.3,2.3C16.1,16.7,8.5,12.6,3.5,6.4c-0.9,1.5-1.4,3.3-1.4,5.2c0,3.6,1.8,6.7,4.6,8.5
+	C5,20,3.4,19.6,2,18.8c0,0,0,0.1,0,0.1c0,5,3.5,9.1,8.2,10.1c-0.9,0.2-1.8,0.4-2.7,0.4c-0.7,0-1.3-0.1-1.9-0.2
+	c1.3,4.1,5.1,7,9.6,7.1c-3.5,2.8-7.9,4.4-12.7,4.4c-0.8,0-1.6,0-2.4-0.1c4.5,2.9,9.9,4.6,15.7,4.6c18.9,0,29.2-15.6,29.2-29.2
+	c0-0.4,0-0.9,0-1.3C46.9,13.2,48.6,11.4,50,9.3z"/>
+</svg>

aio/src/styles/1-layouts/_api-page.scss

@@ -1,79 +0,0 @@
-.api-section {
-    position: relative;
-
-    pre {
-        white-space: pre-wrap;
-    }
-
-    table.api-table {
-        min-width: 680px;
-
-        thead th {
-            color: white;
-            font-size: 16px;
-            background-color: $blue;
-            border-radius: 4px 4px 0 0;
-            text-transform: none;
-            padding: 8px 24px;
-        }
-
-        tbody {
-            pre {
-                white-space: normal;
-                margin: 4px;
-                padding: 4px 16px;
-            }
-
-            td, th {
-                padding: 0;
-            }
-
-            th {
-                max-width: 150px;
-            }
-        }
-
-    }
-}
-
-.api-body {
-
-    max-width: 1200px;
-
-    table {
-
-        th {
-            text-transform: none;
-            font-size: 16px;
-            font-weight: bold;
-        }
-
-        tr {
-            border-bottom: 1px solid $lightgray;
-        }
-
-        td {
-            vertical-align: middle;
-        }
-
-        hr {
-            margin: 16px 0;
-        }
-
-        tr:last-child {
-            border-bottom: none;
-        }
-
-        &.item-table {
-            td {
-                padding: 32px;
-            }
-        }
-
-        &.list-table {
-            td {
-                padding: 16px 24px;
-            }
-        }
-    }
-}

aio/src/styles/1-layouts/_api-pages.scss

@@ -0,0 +1,41 @@
+.api-body {
+
+    max-width: 1200px;
+
+    table {
+
+        th {
+            text-transform: none;
+            font-size: 16px;
+            font-weight: bold;
+        }
+
+        tr {
+            border-bottom: 1px solid $lightgray;
+        }
+
+        td {
+            vertical-align: middle;
+        }
+
+        hr {
+            margin: 16px 0;
+        }
+
+        tr:last-child {
+            border-bottom: none;
+        }
+
+        &.item-table {
+            td {
+                padding: 32px;
+            }
+        }
+
+        &.list-table {
+            td {
+                padding: 16px 24px;
+            }
+        }
+    }
+}

aio/src/styles/1-layouts/_layouts-dir.scss

@@ -2,7 +2,7 @@
    LAYOUT STYLES
    ============================== */
 
-@import 'api-page';
+@import 'api-pages';
 @import 'content-layout';
 @import 'doc-viewer';
 @import 'footer';

aio/src/styles/1-layouts/_top-menu.scss

@@ -196,3 +196,25 @@ aio-search-box.search-container {
     }
   }
 }
+
+// EXTERNAL LINK ICONS
+.app-toolbar {
+    .toolbar-external-icons-container {
+      display: flex;
+      flex-direction: row;
+
+      a {
+        display: flex;
+        align-items: center;
+        margin-left: 16px;
+
+        &:hover {
+          opacity: 0.8;
+        }
+
+        img {
+          height: 24px;
+        }
+      }
+    }
+}

aio/src/styles/2-modules/_api-list.scss

@@ -280,6 +280,7 @@ p {
 .code-anchor {
   cursor: pointer;
   text-decoration: none;
+  font-size: inherit;
 
   &:hover {
     text-decoration: underline;

aio/src/styles/2-modules/_api-pages.scss

@@ -1,4 +1,4 @@
-.page-actions {
+.github-links {
   float: right;
   .material-icons {
     border-radius: 4px;
@@ -30,10 +30,30 @@
     }
   }
 
-  .method-table {
+  .method-table, .option-table {
+    th {
+      display: flex;
+      align-items: center;
+
+      h3 {
+        flex: 1;
+      }
+
+      .github-links {
+        a {
+          color: $mediumgray;
+          .material-icons:hover {
+            background: none;
+            color: $blue;
+          }
+        }
+      }
+    }
+
     h3 {
       margin: 6px 0;
       font-weight: bold;
+      clear: left;
     }
 
     h4 {
@@ -87,10 +107,6 @@
     }
 }
 
-  .api-section aio-code {
-    background-color: rgba(241, 241, 241, 0.2);
-  }
-
   .from-constructor, .read-only-property {
     font-style: italic;
     color: $blue;

aio/tools/example-zipper/README.md

@@ -25,7 +25,7 @@ The zipper will use this information for creating new zips.
 
 ## Three kinds of examples
 
-The majority of examples in AIO use `System.js` but there are also `CLI` and `Webpack` projects. This
+The majority of examples in AIO use `CLI`, with some additionally using `Webpack` and upgrade usiing `SystemJS`. This
 tool is able to differentiate between them.
 
 The boilerplate uses a `package.json` that contains packages and scripts to run any kind of example.
@@ -44,7 +44,6 @@ Here you find a:
 
 * **base.json** - All the common scripts and packages
 * **cli.json** - Extra scripts and packages for the CLI
-* **webpack.json** - Extra scripts and packages for Webpack
 * **universal.json** - Extra scripts and packages for universal
 * **i18n.json** - Extra scripts and packages for i18n
 * **systemjs.json** - All the System.js related packages but it also contains the remainder scripts
@@ -68,11 +67,11 @@ In both `stackblitz.json` and `zipper.json` you can use two extra properties for
 {
   ...
   "removeSystemJsConfig": true,
-  "type": "webpack"
+  "type": "testing"
 }
 ```
 
-This would generate a zip for a webpack application and it will also remove everything related with
+This would generate a zip for a testing application and it will also remove everything related with
 SystemJS.
 
 ## Executing the zip generation

aio/tools/example-zipper/customizer/package-json/webpack.json

@@ -1,26 +0,0 @@
-{
-  "scripts": [
-    { "name": "start:webpack", "rename": "start" },
-    { "name": "test:webpack", "rename": "test" },
-    { "name": "build:webpack", "rename": "build" }
-  ],
-  "dependencies": [],
-  "devDependencies": [
-    "angular2-template-loader",
-    "awesome-typescript-loader",
-    "css-loader",
-    "extract-text-webpack-plugin",
-    "file-loader",
-    "html-loader",
-    "html-webpack-plugin",
-    "karma-sourcemap-loader",
-    "karma-webpack",
-    "null-loader",
-    "raw-loader",
-    "rimraf",
-    "style-loader",
-    "webpack",
-    "webpack-dev-server",
-    "webpack-merge"
-  ]
-}

aio/tools/example-zipper/exampleZipper.js

@@ -113,7 +113,6 @@ class ExampleZipper {
       '!**/package.json',
       '!**/example-config.json',
       '!**/wallaby.js',
-      '!**/package.webpack.json',
       // AoT related files
       '!**/aot/**/*.*',
       '!**/*-aot.*'

aio/tools/examples/run-example-e2e.js

@@ -18,7 +18,6 @@ const EXAMPLE_CONFIG_FILENAME = 'example-config.json';
 const IGNORED_EXAMPLES = [ // temporary ignores
   'quickstart',
   'setup',
-  'webpack',
   'upgrade-p'
 ];
 

aio/tools/examples/shared/boilerplate/systemjs/package.json

@@ -26,13 +26,7 @@
     "serve:cli": "http-server dist/",
     "build:aot": "ngc -p tsconfig-aot.json && rollup -c rollup-config.js",
     "serve:aot": "lite-server -c bs-config.aot.json",
-    "start:webpack": "webpack-dev-server --inline --progress --port 8080",
-    "test:webpack": "karma start karma.webpack.conf.js",
-    "build:webpack": "rimraf dist && webpack --config config/webpack.prod.js --bail",
     "build:babel": "babel src -d src --extensions \".es6\" --source-maps",
-    "build:uni-client": "webpack --config webpack.config.client.js",
-    "build:uni": "webpack --config webpack.config.universal.js",
-    "serve:uni": "node dist/server.js",
 
     "clean": "rimraf src/dist && rimraf src/app/*.js* && rimraf src/universal/*.js* && rimraf src/main.js*",
     "copy-dist-files": "node ./copy-dist-files.js",

aio/tools/examples/shared/package.json

@@ -58,12 +58,6 @@
     "@types/node": "^6.0.45",
     "canonical-path": "0.0.2",
     "concurrently": "^3.0.0",
-    "copy-webpack-plugin": "^4.0.1",
-    "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",
     "http-server": "^0.9.0",
     "jasmine-core": "~2.99.1",
     "jasmine-marbles": "^0.3.1",
@@ -74,7 +68,6 @@
     "karma-jasmine": "~1.1.1",
     "karma-jasmine-html-reporter": "^0.2.2",
     "karma-phantomjs-launcher": "^1.0.2",
-    "karma-sourcemap-loader": "^0.3.7",
     "lite-server": "^2.2.2",
     "lodash": "^4.16.2",
     "phantomjs-prebuilt": "^2.1.7",
@@ -85,7 +78,6 @@
     "rollup-plugin-node-resolve": "2.0.0",
     "rollup-plugin-uglify": "^1.0.1",
     "source-map-explorer": "^1.3.2",
-    "ts-loader": "^4.2.0",
     "ts-node": "^5.0.1",
     "tslint": "^5.9.1",
     "typescript": "2.7.2",

aio/tools/transforms/angular-api-package/index.js

@@ -42,12 +42,19 @@ module.exports = new Package('angular-api', [basePackage, typeScriptPackage])
     return EXPORT_DOC_TYPES.concat(['decorator', 'directive', 'pipe', 'module']);
   })
 
+  /**
+   * These are the doc types that are contained within other docs
+   */
+  .factory(function API_CONTAINED_DOC_TYPES() {
+    return ['member', 'function-overload', 'get-accessor-info', 'set-accessor-info', 'parameter'];
+  })
+
   /**
    * These are the doc types that are API docs, including ones that will be merged into container docs,
    * such as members and overloads.
    */
-  .factory(function API_DOC_TYPES(API_DOC_TYPES_TO_RENDER) {
-    return API_DOC_TYPES_TO_RENDER.concat(['member', 'function-overload']);
+  .factory(function API_DOC_TYPES(API_DOC_TYPES_TO_RENDER, API_CONTAINED_DOC_TYPES) {
+    return API_DOC_TYPES_TO_RENDER.concat(API_CONTAINED_DOC_TYPES);
   })
 
   // Where do we get the source files?
@@ -112,8 +119,8 @@ module.exports = new Package('angular-api', [basePackage, typeScriptPackage])
         parseTagsProcessor.tagDefinitions.concat(getInjectables(requireFolder(__dirname, './tag-defs')));
   })
 
-  .config(function(computeStability, splitDescription, addNotYetDocumentedProperty, EXPORT_DOC_TYPES, API_DOC_TYPES) {
-    computeStability.docTypes = EXPORT_DOC_TYPES;
+  .config(function(computeStability, splitDescription, addNotYetDocumentedProperty, API_DOC_TYPES_TO_RENDER, API_DOC_TYPES) {
+    computeStability.docTypes = API_DOC_TYPES_TO_RENDER;
     // Only split the description on the API docs
     splitDescription.docTypes = API_DOC_TYPES;
     addNotYetDocumentedProperty.docTypes = API_DOC_TYPES;
@@ -155,6 +162,16 @@ module.exports = new Package('angular-api', [basePackage, typeScriptPackage])
     });
   })
 
+  .config(function(filterContainedDocs, API_CONTAINED_DOC_TYPES) {
+    filterContainedDocs.docTypes = API_CONTAINED_DOC_TYPES;
+  })
+
+  .config(function(checkContentRules, API_DOC_TYPES, API_CONTAINED_DOC_TYPES) {
+    addMinLengthRules(checkContentRules);
+    addHeadingRules(checkContentRules, API_DOC_TYPES);
+    addAllowedPropertiesRules(checkContentRules, API_CONTAINED_DOC_TYPES);
+  })
+
   .config(function(computePathsProcessor, EXPORT_DOC_TYPES, generateApiListDoc) {
 
     const API_SEGMENT = 'api';
@@ -188,3 +205,45 @@ module.exports = new Package('angular-api', [basePackage, typeScriptPackage])
     autoLinkCode.docTypes = API_DOC_TYPES;
     autoLinkCode.codeElements = ['code', 'code-example', 'code-pane'];
   });
+
+
+function addMinLengthRules(checkContentRules) {
+  const createMinLengthRule = require('./content-rules/minLength');
+  const paramRuleSet = checkContentRules.docTypeRules['parameter'] = checkContentRules.docTypeRules['parameter'] || {};
+  const paramRules = paramRuleSet['name'] = paramRuleSet['name'] || [];
+  paramRules.push(createMinLengthRule());
+}
+
+function addHeadingRules(checkContentRules, API_DOC_TYPES) {
+  const createNoMarkdownHeadingsRule = require('./content-rules/noMarkdownHeadings');
+  const noMarkdownHeadings = createNoMarkdownHeadingsRule();
+  const allowOnlyLevel3Headings = createNoMarkdownHeadingsRule(1, 2, '4,');
+
+  API_DOC_TYPES.forEach(docType => {
+    let rules;
+    const ruleSet = checkContentRules.docTypeRules[docType] = checkContentRules.docTypeRules[docType] || {};
+
+    rules = ruleSet['description'] = ruleSet['description'] || [];
+    rules.push(noMarkdownHeadings);
+
+    rules = ruleSet['shortDescription'] = ruleSet['shortDescription'] || [];
+    rules.push(noMarkdownHeadings);
+
+    rules = ruleSet['usageNotes'] = ruleSet['usageNotes'] || [];
+    rules.push(allowOnlyLevel3Headings);
+  });
+}
+
+function addAllowedPropertiesRules(checkContentRules, API_CONTAINED_DOC_TYPES) {
+  API_CONTAINED_DOC_TYPES.forEach(docType => {
+    const ruleSet = checkContentRules.docTypeRules[docType] = checkContentRules.docTypeRules[docType] || {};
+
+    const rules = ruleSet['usageNotes'] = ruleSet['usageNotes'] || [];
+    rules.push((doc, prop, value) => value && !isMethod(doc) &&
+      `Invalid property: "${prop}" is not allowed on "${doc.docType}" docs.`);
+  });
+}
+
+function isMethod(doc) {
+  return doc.hasOwnProperty('parameters') && !doc.isGetAccessor && !doc.isSetAccessor;
+}

aio/tools/transforms/angular-api-package/processors/computeApiBreadCrumbs.js

@@ -1,16 +1,15 @@
-module.exports = function computeApiBreadCrumbs(EXPORT_DOC_TYPES) {
+module.exports = function computeApiBreadCrumbs(API_DOC_TYPES_TO_RENDER) {
   return {
     $runAfter: ['paths-computed'],
     $runBefore: ['rendering-docs'],
     $process(docs) {
       // Compute the breadcrumb for each doc by processing its containers
       docs.forEach(doc => {
-        if (EXPORT_DOC_TYPES.indexOf(doc.docType) !== -1) {
-          doc.breadCrumbs = [
-            { text: 'API', path: '/api' },
-            { text: '@angular/' + doc.moduleDoc.id, path: doc.moduleDoc.path },
-            { text: doc.name, path: doc.path }
-          ];
+        if (API_DOC_TYPES_TO_RENDER.indexOf(doc.docType) !== -1) {
+          doc.breadCrumbs = [];
+          doc.breadCrumbs.push({ text: 'API', path: '/api' });
+          if (doc.moduleDoc) doc.breadCrumbs.push({ text: '@angular/' + doc.moduleDoc.id, path: doc.moduleDoc.path });
+          doc.breadCrumbs.push({ text: doc.name, path: doc.path });
         }
       });
     }

aio/tools/transforms/angular-api-package/processors/computeApiBreadCrumbs.spec.js

@@ -13,14 +13,15 @@ describe('angular-api-package: computeApiBreadCrumbs processor', () => {
     expect(processor.$runBefore).toEqual(['rendering-docs']);
   });
 
-  it('should attach a breadCrumbs property to each of the EXPORT_DOC_TYPES docs', () => {
-    const EXPORT_DOC_TYPES = ['class', 'interface'];
-    const processor = processorFactory(EXPORT_DOC_TYPES);
+  it('should attach a breadCrumbs property to each of the API_DOC_TYPES_TO_RENDER docs', () => {
+    const API_DOC_TYPES_TO_RENDER = ['class', 'interface', 'module'];
+    const processor = processorFactory(API_DOC_TYPES_TO_RENDER);
 
     const docs = [
       { docType: 'class', name: 'ClassA', path: 'module-1/class-a', moduleDoc: { id: 'moduleOne', path: 'module-1' } },
       { docType: 'interface', name: 'InterfaceB', path: 'module-2/interface-b', moduleDoc: { id: 'moduleTwo', path: 'module-2' } },
       { docType: 'guide', name: 'Guide One', path: 'guide/guide-1' },
+      { docType: 'module', name: 'testing', id: 'http/testing', path: 'http/testing' },
     ];
     processor.$process(docs);
 
@@ -35,5 +36,9 @@ describe('angular-api-package: computeApiBreadCrumbs processor', () => {
       { text: 'InterfaceB', path: 'module-2/interface-b' },
     ]);
     expect(docs[2].breadCrumbs).toBeUndefined();
+    expect(docs[3].breadCrumbs).toEqual([
+      { text: 'API', path: '/api' },
+      { text: 'testing', path: 'http/testing' },
+    ]);
   });
 });

aio/tools/transforms/angular-api-package/processors/filterContainedDocs.js

@@ -5,7 +5,7 @@
 module.exports = function filterContainedDocs() {
   return {
     docTypes: ['member', 'function-overload', 'get-accessor-info', 'set-accessor-info', 'parameter'],
-    $runAfter: ['extra-docs-added'],
+    $runAfter: ['extra-docs-added', 'checkContentRules'],
     $runBefore: ['computing-paths'],
     $process: function(docs) {
       var docTypes = this.docTypes;

aio/tools/transforms/angular-api-package/processors/filterPrivateDocs.js

@@ -1,6 +1,6 @@
 module.exports = function filterPrivateDocs() {
   return {
-    $runAfter: ['extra-docs-added'],
+    $runAfter: ['extra-docs-added', 'checkContentRules'],
     $runBefore: ['computing-paths'],
     $process: function(docs) {
       return docs.filter(function(doc) { return doc.privateExport !== true; });

aio/tools/transforms/angular-api-package/processors/filterPrivateDocs.spec.js

@@ -18,7 +18,7 @@ describe('filterPrivateDocs processor', () => {
 
   it('should run after the correct processor', () => {
     const processor = processorFactory();
-    expect(processor.$runAfter).toEqual(['extra-docs-added']);
+    expect(processor.$runAfter).toEqual(['extra-docs-added', 'checkContentRules']);
   });
 
   it('should remove docs that are marked as private exports', () => {

aio/tools/transforms/angular-api-package/processors/mergeDecoratorDocs.js

@@ -48,64 +48,62 @@ const {mergeProperties} = require('../../helpers/utils');
 module.exports = function mergeDecoratorDocs(log) {
   return {
     $runAfter: ['processing-docs'],
-    $runBefore: ['docs-processed'],
+    $runBefore: ['docs-processed', 'checkContentRules'],
     propertiesToMerge: [],
     makeDecoratorCalls: [
       {type: '', description: 'toplevel', functionName: 'makeDecorator'},
       {type: 'Prop', description: 'property', functionName: 'makePropDecorator'},
       {type: 'Param', description: 'parameter', functionName: 'makeParamDecorator'},
     ],
-    $process: function(docs) {
+    $process(docs) {
 
-      var makeDecoratorCalls = this.makeDecoratorCalls;
-      var propertiesToMerge = this.propertiesToMerge;
-      var docsToMerge = Object.create(null);
+      const decoratorDocs = Object.create(null);
 
-      docs.forEach(function(doc) {
+      // find all the decorators, signified by a call to `make...Decorator<Decorator>(metadata)`
+      docs.forEach(doc => {
         const initializer = getInitializer(doc);
         if (initializer) {
-          makeDecoratorCalls.forEach(function(call) {
-            // find all the decorators, signified by a call to `make...Decorator<Decorator>(metadata)`
+          this.makeDecoratorCalls.forEach(function(call) {
             if (initializer.expression && initializer.expression.text === call.functionName) {
-              log.debug('mergeDecoratorDocs: found decorator', doc.docType, doc.name);
-              doc.docType = 'decorator';
-              doc.decoratorLocation = call.description;
               // Get the type of the decorator metadata from the first "type" argument of the call.
               // For example the `X` of `createDecorator<X>(...)`.
-              doc.decoratorType = initializer.arguments[0].text;
-              // clear the symbol type named since it is not needed
-              doc.symbolTypeName = undefined;
+              const decoratorType = initializer.arguments[0].text;
 
-              // keep track of the names of the metadata interface that will need to be merged into this decorator doc
-              docsToMerge[doc.name + 'Decorator'] = doc;
+              log.debug('mergeDecoratorDocs: found decorator', doc.docType, doc.name, decoratorType);
+
+              doc.docType = 'decorator';
+              doc.decoratorLocation = call.description;
+              doc.decoratorType = decoratorType;
+
+              decoratorDocs[doc.name + 'Decorator'] = doc;
             }
           });
         }
       });
 
-      // merge the metadata docs into the decorator docs
-      docs = docs.filter(function(doc) {
-        if (docsToMerge[doc.name]) {
+      // merge the info from the associated metadata interfaces into the decorator docs
+      docs = docs.filter(doc => {
+        if (decoratorDocs[doc.name]) {
+
           // We have found an `XxxDecorator` document that will hold the call signature of the decorator
-          var decoratorDoc = docsToMerge[doc.name];
-          var callMember = doc.members.filter(function(member) { return member.isCallMember; })[0];
+          var decoratorDoc = decoratorDocs[doc.name];
+          var callMember = doc.members.find(member => member.isCallMember);
+
           log.debug(
               'mergeDecoratorDocs: merging', doc.name, 'into', decoratorDoc.name,
               callMember.description.substring(0, 50));
 
           // Merge the documentation found in this call signature into the original decorator
-          mergeProperties(decoratorDoc, callMember, propertiesToMerge);
+          mergeProperties(decoratorDoc, callMember, this.propertiesToMerge);
 
           // remove doc from its module doc's exports
-          doc.moduleDoc.exports =
-              doc.moduleDoc.exports.filter(function(exportDoc) { return exportDoc !== doc; });
-
-
-          // remove from the overall list of docs to be rendered
-          return false;
+          doc.moduleDoc.exports = doc.moduleDoc.exports.filter(exportDoc => exportDoc !== doc);
         }
-        return true;
+
+        return !decoratorDocs[doc.name];
       });
+
+      return docs;
     }
   };
 };

aio/tools/transforms/angular-api-package/tag-defs/Annotation.js

@@ -1,4 +1,5 @@
-// A ts2dart compiler annotation that can be ignored in API docs.
+// A ts2dart compiler annotation that we don't care about for API docs.
+// But, if we don't have a tag-def for it the doc-gen will error.
 module.exports = function() {
-  return {name: 'Annotation', ignore: true};
+  return {name: 'Annotation'};
 };

aio/tools/transforms/angular-base-package/post-processors/auto-link-code.js

@@ -65,7 +65,9 @@ module.exports = function autoLinkCode(getDocFromAlias) {
     };
   }
   function foundValidDoc(docs) {
-    return docs.length === 1 && autoLinkCodeImpl.docTypes.indexOf(docs[0].docType) !== -1;
+    return docs.length === 1 &&
+           !docs[0].internal &&
+           autoLinkCodeImpl.docTypes.indexOf(docs[0].docType) !== -1;
   }
 
   function createLinkNode(doc, text) {

aio/tools/transforms/angular-base-package/post-processors/auto-link-code.spec.js

@@ -79,6 +79,13 @@ describe('autoLinkCode post-processor', () => {
                                         '</code>');
   });
 
+  it('should ignore code items that match an internal API doc', () => {
+    aliasMap.addDoc({ docType: 'class', id: 'MyClass', aliases: ['MyClass'], path: 'a/b/myclass', internal: true });
+    const doc = { docType: 'test-doc', renderedContent: '<code>MyClass</code>' };
+    processor.$process([doc]);
+    expect(doc.renderedContent).toEqual('<code>MyClass</code>');
+  });
+
   it('should insert anchors for individual text nodes within a code block', () => {
     aliasMap.addDoc({ docType: 'class', id: 'MyClass', aliases: ['MyClass'], path: 'a/b/myclass' });
     const doc = { docType: 'test-doc', renderedContent: '<code><span>MyClass</span><span>MyClass</span></code>' };

aio/tools/transforms/angular-base-package/processors/checkContentRules.js

@@ -32,7 +32,7 @@ module.exports = function checkContentRules(log, createDocMessage) {
     docTypeRules: {},
     failOnContentErrors: false,
     $runAfter: ['tags-extracted'],
-    $runBefore: ['processing-docs'],
+    $runBefore: [],
     $process(docs) {
       const logMessage = this.failOnContentErrors ? log.error.bind(log) : log.warn.bind(log);
       const errors = [];

aio/tools/transforms/angular-base-package/processors/checkContentRules.spec.js

@@ -18,7 +18,7 @@ describe('checkContentRules processor', function() {
 
   it('shpuld run at the right time', () => {
     expect(processor.$runAfter).toEqual(['tags-extracted']);
-    expect(processor.$runBefore).toEqual(['processing-docs']);
+    expect(processor.$runBefore).toEqual([]);
   });
 
   it('should do nothing if not configured', () => {

aio/tools/transforms/angular-base-package/rendering/hasValues.spec.js

@@ -9,7 +9,7 @@ describe('hasValues filter', () => {
 
   it('should return true if the specified property is truthy on any item in the list', function() {
     expect(filter.process([], 'a')).toEqual(false);
-    expect(filter.process(0), 'a').toEqual(false);
+    expect(filter.process(0, 'a')).toEqual(false);
     expect(filter.process({}, 'a')).toEqual(false);
     expect(filter.process([{a: 1}], 'a')).toEqual(true);
     expect(filter.process([{b: 2}], 'a')).toEqual(false);

aio/tools/transforms/links-package/index.js

@@ -8,16 +8,20 @@ module.exports =
         .factory(require('./services/getAliases'))
         .factory(require('./services/getDocFromAlias'))
         .factory(require('./services/getLinkInfo'))
+        .factory(require('./services/disambiguators/disambiguateByContainer'))
         .factory(require('./services/disambiguators/disambiguateByDeprecated'))
         .factory(require('./services/disambiguators/disambiguateByModule'))
+        .factory(require('./services/disambiguators/disambiguateByNonMember'))
 
         .config(function(inlineTagProcessor, linkInlineTagDef) {
           inlineTagProcessor.inlineTagDefinitions.push(linkInlineTagDef);
         })
 
-        .config(function(getDocFromAlias, disambiguateByDeprecated, disambiguateByModule) {
+        .config(function(getDocFromAlias, disambiguateByContainer, disambiguateByDeprecated, disambiguateByModule, disambiguateByNonMember) {
           getDocFromAlias.disambiguators = [
+            disambiguateByContainer,
             disambiguateByDeprecated,
-            disambiguateByModule
+            disambiguateByModule,
+            disambiguateByNonMember,
           ];
         });

aio/tools/transforms/links-package/inline-tag-defs/link.js

@@ -14,7 +14,6 @@ var INLINE_LINK = /(\S+)(?:\s+([\s\S]+))?/;
 module.exports = function linkInlineTagDef(getLinkInfo, createDocMessage, log) {
   return {
     name: 'link',
-    aliases: ['linkDocs'],
     failOnBadLink: false,
     description:
         'Process inline link tags (of the form {@link some/uri Some Title}), replacing them with HTML anchors',

aio/tools/transforms/links-package/inline-tag-defs/link.spec.js

@@ -19,7 +19,6 @@ describe('link inline-tag-def', function() {
   it('should be available as a service', () => {
     expect(tag).toBeDefined();
     expect(tag.name).toEqual('link');
-    expect(tag.aliases).toEqual(['linkDocs']);
   });
 
   it('should call getLinkInfo', () => {

aio/tools/transforms/links-package/services/disambiguators/disambiguateByContainer.js

@@ -0,0 +1,19 @@
+/**
+ * This link disambiguator looks for matching docs that have a common container with the
+ * originatingDoc and will return just those.
+ */
+module.exports = function disambiguateByContainer() {
+  return _disambiguate;
+};
+
+function _disambiguate(alias, originatingDoc, docs) {
+  if (originatingDoc) {
+    const filteredDocs = docs.filter(doc => doc.containerDoc === originatingDoc);
+    if (filteredDocs.length === 0) {
+      // No docs match so let's look at the containers container
+      return _disambiguate(alias, originatingDoc.containerDoc, docs);
+    }
+    return filteredDocs;
+  }
+  return docs;
+}

aio/tools/transforms/links-package/services/disambiguators/disambiguateByContainer.spec.js

@@ -0,0 +1,34 @@
+const disambiguateByContainer = require('./disambiguateByContainer')();
+const containerA = { name: 'a' };
+const containerB = { name: 'b' };
+const docs = [
+  { id: 'doc1', containerDoc: containerA },
+  { id: 'doc2', containerDoc: containerA },
+  { id: 'doc3', containerDoc: containerB },
+];
+
+describe('disambiguateByContainer', () => {
+  it('should return all docs if the originating doc has no containerDoc', () => {
+    expect(disambiguateByContainer('alias', { }, docs)).toEqual(docs);
+  });
+
+  it('should return all docs if no docs match the originating doc containerDoc', () => {
+    expect(disambiguateByContainer('alias', { containerDoc: { name: 'c' } }, docs)).toEqual(docs);
+  });
+
+  it('should return only docs that are contained by the originating doc or its containers', () => {
+    expect(disambiguateByContainer('alias', containerB, docs)).toEqual([
+      { id: 'doc3', containerDoc: containerB },
+    ]);
+
+    expect(disambiguateByContainer('alias', { containerDoc: containerA }, docs)).toEqual([
+      { id: 'doc1', containerDoc: containerA },
+      { id: 'doc2', containerDoc: containerA },
+    ]);
+
+    expect(disambiguateByContainer('alias', { containerDoc: containerB }, docs)).toEqual([
+      { id: 'doc3', containerDoc: containerB },
+    ]);
+
+  });
+});

aio/tools/transforms/links-package/services/disambiguators/disambiguateByNonMember.js

@@ -0,0 +1,14 @@
+/**
+ * This link disambiguator will remove all the members from the list of ambiguous links
+ * if there is at least one link to a doc that is not a member.
+ *
+ * The heuristic is that exports are more important than members when linking, and that
+ * in general members will be linked to via a more explicit code links such as
+ * `MyClass.member` rather than simply `member`.
+ */
+module.exports = function disambiguateByNonMember() {
+  return (alias, originatingDoc, docs) => {
+    const filteredDocs = docs.filter(doc => doc.docType !== 'member');
+    return filteredDocs.length > 0 ? filteredDocs : docs;
+  };
+};

aio/tools/transforms/links-package/services/disambiguators/disambiguateByNonMember.spec.js

@@ -0,0 +1,23 @@
+const disambiguateByNonMember = require('./disambiguateByNonMember')();
+const doc1 = { id: 'doc1', docType: 'function', containerDoc: {} };
+const doc2 = { id: 'doc2', docType: 'member', containerDoc: {} };
+const doc3 = { id: 'doc3', docType: 'member', containerDoc: {} };
+const doc4 = { id: 'doc4', docType: 'class', containerDoc: {} };
+const doc5 = { id: 'doc5', docType: 'member', containerDoc: {} };
+
+describe('disambiguateByNonMember', () => {
+  it('should filter out docs that are not members', () => {
+    const docs = [doc1, doc2, doc3, doc4, doc5];
+    expect(disambiguateByNonMember('alias', {}, docs)).toEqual([doc1, doc4]);
+  });
+
+  it('should return all docs if there are no members', () => {
+    const docs = [doc1, doc4];
+    expect(disambiguateByNonMember('alias', {}, docs)).toEqual([doc1, doc4]);
+  });
+
+  it('should return all docs if there are only members', () => {
+    const docs = [doc2, doc3, doc5];
+    expect(disambiguateByNonMember('alias', {}, docs)).toEqual([doc2, doc3, doc5]);
+  });
+});

aio/tools/transforms/remark-package/index.js

@@ -5,5 +5,5 @@ var Package = require('dgeni').Package;
  * @description Overrides the renderMarkdown service with an implementation based on remark
  */
 module.exports = new Package('remark', ['nunjucks'])
-
+                     .factory(require('./services/markedNunjucksFilter'))
                      .factory(require('./services/renderMarkdown'));

aio/tools/transforms/remark-package/services/markedNunjucksFilter.js

@@ -0,0 +1,12 @@
+/**
+ * Convert the value, as markdown, into HTML
+ * @param headingMappings A map of headings to convert (e.g. from h3 to h4).
+ */
+module.exports = function markedNunjucksFilter(renderMarkdown) {
+  return {
+    name: 'marked',
+    process: function(str, headingMappings) {
+      return str && renderMarkdown(str, headingMappings);
+    }
+  };
+};

aio/tools/transforms/remark-package/services/plugins/mapHeadings.js

@@ -0,0 +1,31 @@
+const visit = require('unist-util-visit');
+
+function headingToLevel(heading) {
+  const match = /^h(\d+)/.exec(heading);
+  return match ? match[1] : '0';
+}
+
+function parseMappings(mappings) {
+  const mapping = {};
+  Object.keys(mappings).forEach(key => mapping[headingToLevel(key)] = headingToLevel(mappings[key]));
+  return mapping;
+}
+
+module.exports = function mapHeadings(mappings) {
+  const headings = parseMappings(mappings || {});
+  return () => ast => {
+    const nodesToFix = [];
+    Object.keys(headings).forEach(heading => {
+      visit(ast, 'heading', node => {
+        if (node.depth === Number(heading)) {
+          nodesToFix.push(node);
+        }
+      });
+    });
+
+    // Update the depth of the matched nodes
+    nodesToFix.forEach(node => node.depth = headings[node.depth]);
+
+    return ast;
+  };
+};

aio/tools/transforms/remark-package/services/renderMarkdown.js

@@ -1,25 +1,29 @@
 const remark = require('remark');
 const html = require('remark-html');
 const code = require('./handlers/code');
+const mapHeadings = require('./plugins/mapHeadings');
 
 /**
  * @dgService renderMarkdown
  * @description
  * Render the markdown in the given string as HTML.
+ * @param headingMap A map of headings to convert.
+ *                   E.g. `{h3: 'h4'} will map heading 3 level into heading 4.
  */
 module.exports = function renderMarkdown() {
-  const handlers = { code };
-  const renderer = remark()
-                    .use(inlineTagDefs)
-                    .use(noIndentedCodeBlocks)
-                    .use(plainHTMLBlocks)
-                    // USEFUL DEBUGGING CODE
-                    // .use(() => tree => {
-                    //   console.log(require('util').inspect(tree, { colors: true, depth: 4 }));
-                    // })
-                    .use(html, { handlers });
+  return function renderMarkdownImpl(content, headingMap) {
+
+    const renderer = remark()
+      .use(inlineTagDefs)
+      .use(noIndentedCodeBlocks)
+      .use(plainHTMLBlocks)
+      // USEFUL DEBUGGING CODE
+      // .use(() => tree => {
+      //   console.log(require('util').inspect(tree, { colors: true, depth: 4 }));
+      // })
+      .use(mapHeadings(headingMap))
+      .use(html, { handlers: { code } });
 
-  return function renderMarkdownImpl(content) {
     return renderer.processSync(content).toString();
   };
 

aio/tools/transforms/remark-package/services/renderMarkdown.spec.js

@@ -95,4 +95,36 @@ describe('remark: renderMarkdown service', () => {
     '</code-example>\n'
     );
   });
+
+  it('should map heading levels as specified', () => {
+    const content =
+    '# heading 1\n' +
+    '\n' +
+    'some paragraph\n' +
+    '\n' +
+    '## heading 2a\n' +
+    '\n' +
+    'some paragraph\n' +
+    '\n' +
+    '### heading 3\n' +
+    '\n' +
+    'some paragraph\n' +
+    '\n' +
+    '## heading 2b\n' +
+    '\n' +
+    'some paragraph\n' +
+    '\n';
+    const headingMappings = { h2: 'h3', h3: 'h5' };
+    const output = renderMarkdown(content, headingMappings);
+    expect(output).toEqual(
+      '<h1>heading 1</h1>\n' +
+      '<p>some paragraph</p>\n' +
+      '<h3>heading 2a</h3>\n' +
+      '<p>some paragraph</p>\n' +
+      '<h5>heading 3</h5>\n' +
+      '<p>some paragraph</p>\n' +
+      '<h3>heading 2b</h3>\n' +
+      '<p>some paragraph</p>\n'
+      );
+  });
 });

aio/tools/transforms/templates/api/base.template.html

@@ -2,10 +2,7 @@
 {% set comma = joiner(',') %}
 {% set slash = joiner('/') %}
 <article>
-  <div class="page-actions">
-    <a href="{$ github.githubEditHref(doc, versionInfo) $}" aria-label="Suggest Edits" title="Suggest Edits"><i class="material-icons" aria-hidden="true" role="img">mode_edit</i></a>
-    <a href="{$ github.githubViewHref(doc, versionInfo) $}" aria-label="View Source" title="View Source"><i class="material-icons" aria-hidden="true" role="img">code</i></a>
-  </div>
+  {$ github.githubLinks(doc, versionInfo) $}
   <div class="breadcrumb">
     <script type="application/ld+json">
       {

aio/tools/transforms/templates/api/class.template.html

@@ -9,15 +9,15 @@
 {% block details %}
   {% block additional %}{% endblock %}
   {% include "includes/description.html" %}
-  {$ memberHelpers.renderProperties(doc.staticProperties, 'static-properties', 'static-property', 'Static Properties') $}
-  {$ memberHelpers.renderMethodDetails(doc.staticMethods, 'static-methods', 'static-method', 'Static Methods') $}
+  {$ memberHelpers.renderProperties(doc.staticProperties, 'static-properties', 'static-property', 'Static properties') $}
+  {$ memberHelpers.renderMethodDetails(versionInfo, doc.staticMethods, 'static-methods', 'static-method', 'Static methods') $}
   {% if doc.constructorDoc %}
   <h2>Constructor</h2>
-  {$ memberHelpers.renderMethodDetail(doc.constructorDoc, 'constructor') $}{% endif %}
+  {$ memberHelpers.renderMethodDetail(versionInfo, doc.constructorDoc, 'constructor') $}{% endif %}
 
   {$ memberHelpers.renderProperties(doc.properties, 'instance-properties', 'instance-property', 'Properties') $}
 
-  {$ memberHelpers.renderMethodDetails(doc.methods, 'instance-methods', 'instance-method', 'Methods') $}
+  {$ memberHelpers.renderMethodDetails(versionInfo, doc.methods, 'instance-methods', 'instance-method', 'Methods') $}
 
   {% block annotations %}{% include "includes/annotations.html" %}{% endblock %}
 {% endblock %}

aio/tools/transforms/templates/api/decorator.template.html

@@ -1,9 +1,47 @@
+{% import "lib/githubLinks.html" as github -%}
 {% import "lib/memberHelpers.html" as memberHelper -%}
 {% import "lib/paramList.html" as params -%}
 {% extends 'export-base.template.html' %}
 
 {% block overview %}{% include "includes/decorator-overview.html" %}{% endblock %}
 {% block details %}
-  {% include "includes/description.html" %}
-  {$ memberHelper.renderProperties(doc.members, 'metadata-members', 'metadata-member', 'Options') $}
+{% include "includes/description.html" %}
+
+<section class="decorator-options">
+  <h2>Options</h2>
+  {% for option in doc.members %}
+  <a id="{$ option.anchor $}"></a>
+  <table class="is-full-width option-table">
+    <thead><tr><th>
+      <h3>{$ option.name $}</h3>
+      {$ github.githubLinks(option, versionInfo) $}
+    </th></tr></thead>
+    <tbody>
+      <tr>
+        <td>
+          {% if option.shortDescription %}{$ option.shortDescription | marked $}{% endif %}
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <code-example language="ts" hideCopy="true" class="no-box api-heading">
+          {$ option.name $}: {$ option.type | escape $}
+          </code-example>
+        </td>
+      </tr>
+      <tr>
+        <td>
+          {%- if option.description %}
+          {$ option.description | marked({ h3: 'h4' }) $}
+          {% endif %}
+
+          {%- if option.usageNotes %}
+          {$ option.usageNotes | marked({ h3: 'h4' }) $}
+          {% endif %}
+        </td>
+      </tr>
+    </tbody>
+  </table>
+  {% endfor %}
+</section>
 {% endblock %}

aio/tools/transforms/templates/api/includes/decorator-overview.html

@@ -1,10 +1,33 @@
-{% import "lib/memberHelpers.html" as memberHelper -%}
+{% import "lib/descendants.html" as descendants -%}
+
+{% macro renderOptionsTable(doc) %}
+<table class="is-full-width list-table option-overview">
+  <thead>
+    <tr><th>Option</th><th>Description</th></tr>
+  </thead>
+  <tbody>
+  {%- for option in doc.members %}
+    <tr class="option">
+      <td>
+        <a class="code-anchor" href="{$ doc.path $}#{$ option.anchor | urlencode $}">
+          <code>{$ option.name $}</code>
+        </a>
+      </td>
+      <td>{$ option.shortDescription | marked $}</td>
+    </tr>
+    {% endfor -%}
+  </tbody>
+</table>
+
+{% for ancestor in doc.extendsClauses %}{% if ancestor.doc %}
+<h3 class="no-toc">Inherited from <a class="code-anchor" href="{$ ancestor.doc.path $}">{$ ancestor.doc.name $}</a> decorator</h3>
+{$ renderOptionsTable(ancestor.doc) $}
+{% endif %}{% endfor %}
+{% endmacro %}
 
 {% if doc.members.length %}
 <section class="decorator-overview">
-<code-example language="ts" hideCopy="true">
-@{$ doc.name $}{$ doc.typeParams | escape $}({ {$ memberHelper.renderMembers(doc) $}
-})
-</code-example>
+  {$ renderOptionsTable(doc) $}
+  {$ descendants.renderDescendants(doc, 'decorator', 'Subclasses') $}
 </section>
 {% endif %}

aio/tools/transforms/templates/api/includes/deprecation.html

@@ -1,6 +1,6 @@
 {% if doc.deprecated %}
 <section class="deprecated">
-  <h2>Deprecation Notes</h2>
+  <h2>Deprecation notes</h2>
   {$ doc.deprecated | marked $}
 </section>
 {% endif %}

aio/tools/transforms/templates/api/includes/metadata.html

@@ -1,6 +1,6 @@
 {% if doc.members.length %}
 <section class="meta-data">
-  <h2>Metadata Properties</h2>
+  <h2>Metadata properties</h2>
     {% for metadata in doc.members %}{% if not metadata.internal %}
     <div class="metadata-member">
       <a name="{$ metadata.name $}" class="anchor-offset"></a>

aio/tools/transforms/templates/api/includes/pipe-overview.html

@@ -11,7 +11,7 @@
     {%- endfor %} }}</code-example>
 
   {% if doc.valueParam.type %}
-  <h2>Input Value</h2>
+  <h2>Input value</h2>
   {$ params.renderParameters([doc.valueParam], 'pipe-parameters', 'pipe-parameter', true) $}
   {% endif %}
   {% if doc.pipeParams.length %}

aio/tools/transforms/templates/api/includes/security-notes.html

@@ -1,6 +1,6 @@
 {% if doc.security %}
 <section "security">
-  <h2>Security Risk</h2>
+  <h2>Security risk</h2>
   {$ doc.security | marked $}
 </section>
 {% endif %}

aio/tools/transforms/templates/api/includes/see-also.html

@@ -1,6 +1,6 @@
 {%- if doc.see.length %}
 <section class="see-also">
-  <h2>See Also</h2>
+  <h2>See also</h2>
   <ul>
   {% for see in doc.see %}
     <li>{$ see | marked $}</li>{% endfor %}

aio/tools/transforms/templates/api/includes/usageNotes.html

@@ -1,6 +1,6 @@
 {% if doc.usageNotes %}
 <section class="usage-notes">
-  <h2>Usage Notes</h2>
+  <h2>Usage notes</h2>
   {$ doc.usageNotes | marked $}
 </section>
 {% endif %}

aio/tools/transforms/templates/api/interface.template.html

@@ -7,5 +7,5 @@
 {% block details %}
   {% include "includes/description.html" %}
   {$ memberHelper.renderProperties(doc.properties, 'instance-properties', 'instance-property', 'Properties') $}
-  {$ memberHelper.renderMethodDetails(doc.methods, 'instance-methods', 'instance-method', 'Methods') $}
+  {$ memberHelper.renderMethodDetails(versionInfo, doc.methods, 'instance-methods', 'instance-method', 'Methods') $}
 {% endblock %}

aio/tools/transforms/templates/api/lib/githubLinks.html

@@ -1,6 +1,6 @@
 {% macro githubViewHref(doc, versionInfo) -%}
 https://github.com/{$ versionInfo.gitRepoInfo.owner $}/{$ versionInfo.gitRepoInfo.repo $}/tree/{$ versionInfo.currentVersion.isSnapshot and versionInfo.currentVersion.SHA or versionInfo.currentVersion.raw $}/packages/{$ doc.fileInfo.realProjectRelativePath $}#L{$ doc.startingLine + 1 $}-L{$ doc.endingLine + 1 $}
-{%- endmacro %}
+{%- endmacro -%}
 
 
 {% macro githubEditHref(doc, versionInfo) -%}
@@ -9,4 +9,11 @@ https://github.com/{$ versionInfo.gitRepoInfo.owner $}/{$ versionInfo.gitRepoInf
   {%- elseif doc.docType === 'module' %}{$ doc.id.split('/')[0] $}
   {%- else %}...{%- endif -%}
 )%3A%20describe%20your%20change...#L{$ doc.startingLine + 1 $}-L{$ doc.endingLine + 1 $}
-{%- endmacro %}
+{%- endmacro -%}
+
+{% macro githubLinks(doc, versionInfo) -%}
+<div class="github-links">
+  <a href="{$ githubEditHref(doc, versionInfo) $}" aria-label="Suggest Edits" title="Suggest Edits"><i class="material-icons" aria-hidden="true" role="img">mode_edit</i></a>
+  <a href="{$ githubViewHref(doc, versionInfo) $}" aria-label="View Source" title="View Source"><i class="material-icons" aria-hidden="true" role="img">code</i></a>
+</div>
+{%- endmacro -%}

aio/tools/transforms/templates/api/lib/memberHelpers.html

@@ -1,3 +1,4 @@
+{% import "lib/githubLinks.html" as github -%}
 {% import "lib/paramList.html" as params -%}
 
 {%- macro renderHeritage(exportDoc) -%}
@@ -69,15 +70,18 @@
 {%- endif %}
 {%- endmacro -%}
 
-{%- macro renderMethodDetail(method, cssClass) -%}
+{%- macro renderMethodDetail(versionInfo, method, cssClass) -%}
 <a id="{$ method.anchor $}"></a>
 <table class="is-full-width method-table {$ cssClass $}">
-  {% if method.name !== 'constructor' %}<thead><tr><th><h3>
-    {% if method.isCallMember %}<i>call signature</i>
-    {% elseif method.isNewMember %}<i>construct signature</i>
-    {% else %}{$ method.name $}()
-    {% endif %}
-  </h3></th></tr></thead>{% endif %}
+  {% if method.name !== 'constructor' %}<thead><tr><th>
+    <h3>
+      {% if method.isCallMember %}<i>call signature</i>
+      {% elseif method.isNewMember %}<i>construct signature</i>
+      {% else %}{$ method.name $}()
+      {% endif %}
+    </h3>
+    {$ github.githubLinks(method, versionInfo) $}
+  </th></tr></thead>{% endif %}
   <tbody>
     {% if method.shortDescription %}<tr>
       <td class="short-description">
@@ -113,22 +117,33 @@
       </td>
     </tr>
   {% endif %}
-  {% if method.description %}<tr>
+
+  {% if method.description -%}
+    <tr>
       <td class="description">
-        {$ method.description | marked $}
+        {$ method.description | marked({ h3: 'h4' }) $}
       </td>
-    </tr>{% endif %}
-  </tbody>
+    </tr>
+  {%- endif %}
+
+  {% if method.usageNotes -%}
+    <tr>
+      <td class="usage-notes">
+        {$ method.usageNotes | marked({ h3: 'h4' }) $}
+      </td>
+    </tr>
+  {%- endif %}
+    </tbody>
 </table>
 {% endmacro -%}
 
-{%- macro renderMethodDetails(methods, containerClass, itemClass, headingText) -%}
+{%- macro renderMethodDetails(versionInfo, methods, containerClass, itemClass, headingText) -%}
 {% set nonInternalMethods = methods | filterByPropertyValue('internal', undefined) %}
 {% if nonInternalMethods.length %}
 <section class="{$ containerClass $}">
   <h2>{$ headingText $}</h2>
   {% for member in nonInternalMethods %}
-    {$ renderMethodDetail(member, itemClass) $}
+    {$ renderMethodDetail(versionInfo, member, itemClass) $}
   {% endfor %}
 </section>
 {% endif %}
@@ -141,7 +156,7 @@
 {% if nonInternalProperties.length -%}
 <section class="{$ containerClass $}">
   <h2>{$ headingText $}</h2>
-  <table class="is-full-width list-table properties-table">
+  <table class="is-full-width list-table property-table">
     <thead>
       <tr>
         <th>{$ headings[0] or 'Property' $}</th>

aio/yarn.lock

@@ -3086,9 +3086,9 @@ devtools-timeline-model@1.1.6:
     chrome-devtools-frontend "1.0.401423"
     resolve "1.1.7"
 
-dgeni-packages@^0.26.1:
-  version "0.26.1"
-  resolved "https://registry.yarnpkg.com/dgeni-packages/-/dgeni-packages-0.26.1.tgz#34b5ed880be2f91862095b15085c50cc84507aa8"
+dgeni-packages@^0.26.2:
+  version "0.26.2"
+  resolved "https://registry.yarnpkg.com/dgeni-packages/-/dgeni-packages-0.26.2.tgz#dac22d7e861d4d72ed42af5272714f42b6b5bf3d"
   dependencies:
     canonical-path "0.0.2"
     catharsis "^0.8.1"

docs/PUBLIC_API.md

@@ -1,10 +1,13 @@
 # Supported Public API Surface of Angular
 
-Our SemVer, timed-release cycle and deprecation policy currently applies to these npm packages:
+Our semver, timed-release cycle and deprecation policy currently applies to these npm packages:
 
 - `@angular/animations`
 - `@angular/core`
 - `@angular/common`
+- `@angular/elements`
+- `@angular/forms`
+- `@angular/http`
 - `@angular/platform-browser`
 - `@angular/platform-browser-dynamic`
 - `@angular/platform-server`
@@ -12,12 +15,13 @@ Our SemVer, timed-release cycle and deprecation policy currently applies to thes
 - `@angular/platform-webworker-dynamic`
 - `@angular/upgrade`
 - `@angular/router`
-- `@angular/forms`
-- `@angular/http`
+- `@angular/service-worker`
 
 
 One intentional omission from this list is `@angular/compiler`, which is currently considered a low level api and is subject to internal changes. These changes will not affect any applications or libraries using the higher-level apis (the command line interface or JIT compilation via `@angular/platform-browser-dynamic`). Only very specific use-cases require direct access to the compiler API (mostly tooling integration for IDEs, linters, etc). If you are working on this kind of integration, please reach out to us first.
 
+Package `@angular/bazel` is currently an Angular Labs project and not covered by the public API guarantees.
+
 Additionally only the command line usage (not direct use of APIs) of `@angular/compiler-cli` is covered.
 
 Other projects developed by the Angular team like angular-cli, Angular Material, will be covered by these or similar guarantees in the future as they mature.
@@ -31,7 +35,7 @@ Within the supported packages, we provide guarantees for:
 
 We explicitly don't consider the following to be our public API surface:
 
-- any file/import paths within our package except for the `/`, `/testing` and `/bundles/*`
+- any file/import paths within our package except for the `/`, `/testing` and `/bundles/*` and other documented package entry-points.
 - constructors of injectable classes (services and directives) - please use DI to obtain instances of these classes
 - any class members or symbols marked as `private`, or prefixed with underscore (`_`) and [barred latin o](https://en.wikipedia.org/wiki/%C6%9F) (`ɵ`)
 - extending any of our classes unless the support for this is specifically documented in the API docs

integration/bazel/test/e2e/app.spec.ts

@@ -1,5 +1,7 @@
 import {browser, by, element, ExpectedConditions} from 'protractor';
 
+jasmine.DEFAULT_TIMEOUT_INTERVAL = 120000;
+
 describe('angular example application', () => {
   it('should display: Hello World!', (done) => {
     browser.get('');

integration/cli-hello-world/package.json

@@ -3,13 +3,13 @@
   "version": "0.0.0",
   "license": "MIT",
   "scripts": {
-    "ng": "ng",
-    "start": "ng serve",
     "build": "ng build --prod --progress false",
     "e2e": "ng e2e",
-    "test": "ng test && ng e2e --webdriver-update=false && ng e2e --prod --webdriver-update=false",
     "lint": "ng lint",
-    "postinstall": "webdriver-manager update --gecko false --standalone false $CHROMEDRIVER_VERSION_ARG"
+    "ng": "ng",
+    "postinstall": "webdriver-manager update --gecko false --standalone false $CHROMEDRIVER_VERSION_ARG",
+    "start": "ng serve",
+    "test": "ng test && ng e2e --webdriver-update=false && ng e2e --prod --webdriver-update=false"
   },
   "private": true,
   "dependencies": {

integration/typings_test_ts27/package.json

@@ -1,6 +1,6 @@
 {
   "name": "angular-integration",
-  "description": "Assert that users with TypeScript 2.6 can type-check an Angular application",
+  "description": "Assert that users with TypeScript 2.7 can type-check an Angular application",
   "version": "0.0.0",
   "license": "MIT",
   "dependencies": {

integration/typings_test_ts28/include-all.ts

@@ -0,0 +1,47 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import * as compiler from '@angular/compiler';
+import * as compilerTesting from '@angular/compiler/testing';
+import * as core from '@angular/core';
+import * as coreTesting from '@angular/core/testing';
+import * as forms from '@angular/forms';
+import * as http from '@angular/http';
+import * as httpTesting from '@angular/http/testing';
+import * as platformBrowser from '@angular/platform-browser';
+import * as platformBrowserTesting from '@angular/platform-browser/testing';
+import * as platformBrowserDynamic from '@angular/platform-browser-dynamic';
+import * as platformServer from '@angular/platform-server';
+import * as platformServerTesting from '@angular/platform-server/testing';
+import * as platformWebworker from '@angular/platform-webworker';
+import * as platformWebworkerDynamic from '@angular/platform-webworker-dynamic';
+import * as router from '@angular/router';
+import * as routerTesting from '@angular/router/testing';
+import * as serviceWorker from '@angular/service-worker';
+import * as upgrade from '@angular/upgrade';
+
+export default {
+  compiler,
+  compilerTesting,
+  core,
+  coreTesting,
+  forms,
+  http,
+  httpTesting,
+  platformBrowser,
+  platformBrowserTesting,
+  platformBrowserDynamic,
+  platformServer,
+  platformServerTesting,
+  platformWebworker,
+  platformWebworkerDynamic,
+  router,
+  routerTesting,
+  serviceWorker,
+  upgrade,
+};

integration/typings_test_ts28/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "angular-integration",
+  "description": "Assert that users with TypeScript 2.8 can type-check an Angular application",
+  "version": "0.0.0",
+  "license": "MIT",
+  "dependencies": {
+    "@angular/animations": "file:../../dist/packages-dist/animations",
+    "@angular/common": "file:../../dist/packages-dist/common",
+    "@angular/compiler": "file:../../dist/packages-dist/compiler",
+    "@angular/compiler-cli": "file:../../dist/packages-dist/compiler-cli",
+    "@angular/core": "file:../../dist/packages-dist/core",
+    "@angular/forms": "file:../../dist/packages-dist/forms",
+    "@angular/http": "file:../../dist/packages-dist/http",
+    "@angular/platform-browser": "file:../../dist/packages-dist/platform-browser",
+    "@angular/platform-browser-dynamic": "file:../../dist/packages-dist/platform-browser-dynamic",
+    "@angular/platform-server": "file:../../dist/packages-dist/platform-server",
+    "@angular/platform-webworker": "file:../../dist/packages-dist/platform-webworker",
+    "@angular/platform-webworker-dynamic": "file:../../dist/packages-dist/platform-webworker-dynamic",
+    "@angular/router": "file:../../dist/packages-dist/router",
+    "@angular/service-worker": "file:../../dist/packages-dist/service-worker",
+    "@angular/upgrade": "file:../../dist/packages-dist/upgrade",
+    "@types/jasmine": "2.5.41",
+    "rxjs": "file:../../node_modules/rxjs",
+    "typescript": "2.8.x",
+    "zone.js": "file:../../node_modules/zone.js"
+  },
+  "scripts": {
+    "test": "tsc"
+  }
+}

integration/typings_test_ts28/tsconfig.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "outDir": "../../dist/typings_test_ts28/",
+    "rootDir": ".",
+    "target": "es5",
+    "lib": [
+      "es5",
+      "dom",
+      "es2015.collection",
+      "es2015.iterable",
+      "es2015.promise"
+    ],
+    "types": [],
+    "strictNullChecks": true
+  },
+  "files": [
+    "include-all.ts",
+    "node_modules/@types/jasmine/index.d.ts"
+  ]
+}

karma-js.conf.js

@@ -65,6 +65,8 @@ module.exports = function(config) {
       'dist/all/@angular/**/*node_only_spec.js',
       'dist/all/@angular/benchpress/**',
       'dist/all/@angular/compiler-cli/**',
+      'dist/all/@angular/compiler-cli/src/ngtsc/**',
+      'dist/all/@angular/compiler-cli/test/ngtsc/**',
       'dist/all/@angular/compiler/test/aot/**',
       'dist/all/@angular/compiler/test/render3/**',
       'dist/all/@angular/core/test/bundling/**',

modules/benchmarks/src/largetable/render3/table.ts

@@ -7,7 +7,7 @@
  */
 
 import {ɵC as C, ɵE as E, ɵRenderFlags as RenderFlags, ɵT as T, ɵV as V, ɵb as b, ɵcR as cR, ɵcr as cr, ɵdefineComponent as defineComponent, ɵdetectChanges as detectChanges, ɵe as e, ɵsn as sn, ɵt as t, ɵv as v} from '@angular/core';
-import {ComponentDef} from '@angular/core/src/render3/interfaces/definition';
+import {ComponentDefInternal} from '@angular/core/src/render3/interfaces/definition';
 
 import {TableCell, buildTable, emptyTable} from '../util';
 
@@ -15,7 +15,7 @@ export class LargeTableComponent {
   data: TableCell[][] = emptyTable;
 
   /** @nocollapse */
-  static ngComponentDef: ComponentDef<LargeTableComponent> = defineComponent({
+  static ngComponentDef: ComponentDefInternal<LargeTableComponent> = defineComponent({
     type: LargeTableComponent,
     selectors: [['largetable']],
     template: function(rf: RenderFlags, ctx: LargeTableComponent) {

modules/benchmarks/src/tree/render3/tree.ts

@@ -7,7 +7,7 @@
  */
 
 import {ɵC as C, ɵE as E, ɵRenderFlags as RenderFlags, ɵT as T, ɵV as V, ɵb as b, ɵcR as cR, ɵcr as cr, ɵdefineComponent as defineComponent, ɵdetectChanges as _detectChanges, ɵe as e, ɵi1 as i1, ɵp as p, ɵsn as sn, ɵt as t, ɵv as v} from '@angular/core';
-import {ComponentDef} from '@angular/core/src/render3/interfaces/definition';
+import {ComponentDefInternal} from '@angular/core/src/render3/interfaces/definition';
 
 import {TreeNode, buildTree, emptyTree} from '../util';
 
@@ -35,7 +35,7 @@ export class TreeComponent {
   data: TreeNode = emptyTree;
 
   /** @nocollapse */
-  static ngComponentDef: ComponentDef<TreeComponent> = defineComponent({
+  static ngComponentDef: ComponentDefInternal<TreeComponent> = defineComponent({
     type: TreeComponent,
     selectors: [['tree']],
     template: function(rf: RenderFlags, ctx: TreeComponent) {
@@ -95,7 +95,7 @@ export class TreeFunction {
   data: TreeNode = emptyTree;
 
   /** @nocollapse */
-  static ngComponentDef: ComponentDef<TreeFunction> = defineComponent({
+  static ngComponentDef: ComponentDefInternal<TreeFunction> = defineComponent({
     type: TreeFunction,
     selectors: [['tree']],
     template: function(rf: RenderFlags, ctx: TreeFunction) {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "angular-srcs",
-  "version": "6.0.5",
+  "version": "6.1.0-beta.1",
   "private": true,
   "branchPattern": "2.0.*",
   "description": "Angular - a web framework for modern web apps",
@@ -114,7 +114,7 @@
     "tslint": "5.7.0",
     "tslint-eslint-rules": "4.1.1",
     "tsutils": "2.20.0",
-    "typescript": "2.7.x",
+    "typescript": "2.8.x",
     "uglify-es": "^3.3.9",
     "universal-analytics": "0.4.15",
     "vlq": "0.2.2",