docs: add changelog for 4.0.1

Fixes #15502

.pullapprove.yml

@@ -186,8 +186,8 @@ groups:
       files:
         - "packages/router/*"
     users:
-      - jasonaden
-      - vicb
+      - vicb #primary
+      # needs secondary
       - IgorMinar #fallback
       - mhevery #fallback
 

CHANGELOG.md

@@ -1,61 +1,3 @@
-<a name="4.1.0-beta.1"></a>
-# [4.1.0-beta.1](https://github.com/angular/angular/compare/4.1.0-beta.0...4.1.0-beta.1) (2017-04-12)
-
-
-### Bug Fixes
-
-* **compiler:** fix inheritance for AOT with summaries ([#15583](https://github.com/angular/angular/issues/15583)) ([8ef621a](https://github.com/angular/angular/commit/8ef621a))
-* **language-service:** avoid throwing exceptions when reporting metadata errors ([7764c5c](https://github.com/angular/angular/commit/7764c5c))
-* **language-service:** detect when there isn't a tsconfig.json ([258d539](https://github.com/angular/angular/commit/258d539)), closes [#15874](https://github.com/angular/angular/issues/15874)
-* **language-service:** improve resilience to incomplete information ([71a8627](https://github.com/angular/angular/commit/71a8627))
-* **language-service:** initialize static reflector correctly ([fe0d02f](https://github.com/angular/angular/commit/fe0d02f)), closes [#15768](https://github.com/angular/angular/issues/15768)
-* **language-service:** parse extended i18n forms ([bde9771](https://github.com/angular/angular/commit/bde9771))
-* **language-service:** resolve any parameter types to any result ([5fbb0d0](https://github.com/angular/angular/commit/5fbb0d0))
-* **router:** fix query param parsing ([a487563](https://github.com/angular/angular/commit/a487563))
-* **router:** the preloader use the module from the loaded config ([6d12aa9](https://github.com/angular/angular/commit/6d12aa9))
-* **tsc-wrapped:** ensure valid path separators in metadata ([96aa236](https://github.com/angular/angular/commit/96aa236))
-
-
-### Features
-
-* **animations:** Update types for TypeScript nullability support ([38d75d4](https://github.com/angular/angular/commit/38d75d4)), closes [#15870](https://github.com/angular/angular/issues/15870)
-* **benchpress:** Update types for TypeScript nullability support ([14669f2](https://github.com/angular/angular/commit/14669f2))
-* **common:** Update types for TypeScript nullability support ([d8b73e4](https://github.com/angular/angular/commit/d8b73e4))
-* **compiler:** Update types for TypeScript nullability support ([09d9f5f](https://github.com/angular/angular/commit/09d9f5f))
-* **language-service:** Update types for TypeScript nullability support ([540581d](https://github.com/angular/angular/commit/540581d))
-* Update types for TypeScript nullability support in examples ([6f5fccf](https://github.com/angular/angular/commit/6f5fccf))
-
-
-
-<a name="4.0.2"></a>
-## [4.0.2](https://github.com/angular/angular/compare/4.0.1...4.0.2) (2017-04-11)
-
-
-### Bug Fixes
-
-* **compiler:** fix inheritance for AOT with summaries ([#15583](https://github.com/angular/angular/issues/15583)) ([1864ccb](https://github.com/angular/angular/commit/1864ccb))
-* **language-service:** avoid throwing exceptions when reporting metadata errors ([0861fda](https://github.com/angular/angular/commit/0861fda))
-* **language-service:** detect when there isn't a tsconfig.json ([168a2eb](https://github.com/angular/angular/commit/168a2eb)), closes [#15874](https://github.com/angular/angular/issues/15874)
-* **language-service:** improve resilience to incomplete information ([e4277a0](https://github.com/angular/angular/commit/e4277a0))
-* **language-service:** initialize static reflector correctly ([5b99533](https://github.com/angular/angular/commit/5b99533)), closes [#15768](https://github.com/angular/angular/issues/15768)
-* **language-service:** parse extended i18n forms ([c9c7acd](https://github.com/angular/angular/commit/c9c7acd))
-* **language-service:** resolve any parameter types to any result ([feae7b6](https://github.com/angular/angular/commit/feae7b6))
-* **router:** fix query param parsing ([2f41b52](https://github.com/angular/angular/commit/2f41b52))
-* **router:** the preloader use the module from the loaded config ([978f809](https://github.com/angular/angular/commit/978f809))
-* **tsc-wrapped:** ensure valid path separators in metadata ([c10e50c](https://github.com/angular/angular/commit/c10e50c))
-
-
-
-<a name="4.1.0-beta.0"></a>
-# [4.1.0-beta.0](https://github.com/angular/angular/compare/4.0.0...4.1.0-beta.0) (2017-03-29)
-
-### Features
-
-* **compiler:** support ICU messages in XLIFF ([b8d5f87](https://github.com/angular/angular/commit/b8d5f87)), closes [#12636](https://github.com/angular/angular/issues/12636) [#15068](https://github.com/angular/angular/issues/15068)
-
-Note: 4.1.0-beta.0 release also contains all the changes present in the 4.0.1 release.
-
-
 <a name="4.0.1"></a>
 ## [4.0.1](https://github.com/angular/angular/compare/4.0.0...4.0.1) (2017-03-29)
 

aio/.angular-cli.json

@@ -1,6 +1,6 @@
 {
-  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
   "project": {
+    "version": "1.0.0-beta.32.3",
     "name": "site"
   },
   "apps": [
@@ -11,15 +11,13 @@
         "assets",
         "content",
         "app/search/search-worker.js",
-        "favicon.ico",
-        "pwa-manifest.json"
+        "favicon.ico"
       ],
       "index": "index.html",
       "main": "main.ts",
       "polyfills": "polyfills.ts",
       "test": "test.ts",
-      "tsconfig": "tsconfig.app.json",
-      "testTsconfig": "tsconfig.spec.json",
+      "tsconfig": "tsconfig.json",
       "prefix": "aio",
       "serviceWorker": true,
       "styles": [
@@ -42,13 +40,12 @@
   },
   "lint": [
     {
-      "project": "src/tsconfig.app.json"
+      "files": "src/**/*.ts",
+      "project": "src/tsconfig.json"
     },
     {
-      "project": "src/tsconfig.spec.json"
-    },
-    {
-      "project": "e2e/tsconfig.e2e.json"
+      "files": "e2e/**/*.ts",
+      "project": "e2e/tsconfig.json"
     }
   ],
   "test": {
@@ -58,8 +55,19 @@
   },
   "defaults": {
     "styleExt": "scss",
-    "component": {
-      "inlineStyle": true
+    "component": {},
+    "prefixInterfaces": false,
+    "inline": {
+      "style": false,
+      "template": false
+    },
+    "spec": {
+      "class": false,
+      "component": true,
+      "directive": true,
+      "module": false,
+      "pipe": true,
+      "service": true
     }
   }
 }

aio/.gitignore

@@ -1,44 +1,11 @@
-# See http://help.github.com/ignore-files/ for more about ignoring files.
+# Ignore node_modules
+node_modules
 
-# compiled output
-/dist
-/out-tsc
-/src/content
-/tmp
-
-# dependencies
-/node_modules
-
-# IDEs and editors
-/.idea
-.project
-.classpath
-.c9/
-*.launch
-.settings/
-*.sublime-workspace
-
-# IDE - VSCode
-.vscode/*
-!.vscode/settings.json
-!.vscode/tasks.json
-!.vscode/launch.json
-!.vscode/extensions.json
-
-# misc
-/.sass-cache
-/connect.lock
-/coverage
-/libpeerconnection.log
+# Ignore npm/yarn debug log
 npm-debug.log
-testem.log
-/typings
 yarn-error.log
 
-# e2e
-/e2e/*.js
-/e2e/*.map
-
-# System Files
-.DS_Store
-Thumbs.db
+# Ignore generated content
+/dist
+/src/content
+/.sass-cache

aio/aio-builds-setup/dockerbuild/scripts-js/.gitignore

@@ -1,2 +1 @@
-/dist
-/node_modules
+/dist/

aio/aio-builds-setup/docs/overview--general.md

@@ -67,8 +67,8 @@ More info on how to set things up on CI can be found [here](misc--integrate-with
 
 ### Serving build artifacts
 - nginx receives a request for an uploaded resource on a subdomain corresponding to the PR and SHA.
-  E.g.: `pr<PR>-<SHA>.ngbuilds.io/path/to/resource`
-- nginx maps the subdomain to the correct sub-directory and serves the resource.
+  E.g.: `pr<PR>-<SHA>.ngbuilds.io/path/to/resurce`
+- nginx maps the subdomain to the correct sub-direcory and serves the resource.
   E.g.: `/<PR>/<SHA>/path/to/resource`
 
 

aio/content/examples/.gitignore

@@ -1,69 +1,17 @@
-# boilerplate files
-**/src/styles.css
-**/src/systemjs-angular-loader.js
-**/src/systemjs.config.js
-**/src/tsconfig.json
-**/bs-config.e2e.json
-**/bs-config.json
-**/package.json
-**/tslint.json
-**/karma.conf.js
-**/karma-test-shim.js
-**/browser-test-shim.js
-**/node_modules
+# _boilerplate files
+!_boilerplate/*
+*/*/src/styles.css
+*/*/src/systemjs.config.js
+*/*/src/tsconfig.json
+*/*/bs-config.e2e.json
+*/*/bs-config.json
+*/*/package.json
+*/*/tslint.json
 
-# built files
-*.map
+# example files
 _test-output
 protractor-helpers.js
 */e2e-spec.js
-**/*.js
 **/ts/**/*.js
 **/js-es6*/**/*.js
-dist/
-
-
-# special
-!/*
-!*.1.*
-!*.2.*
-!*.3.*
-*.1.js
-*.2.js
-*.3.js
-*.1.js.map
-*.2.js.map
-*.3.js.map
-!systemjs.config.*.js
-!karma-test-shim.*.js
-
-# AngularJS files
-!**/*.ajs.js
-
-# aot
-**/*.ngfactory.ts
-**/*.ngsummary.json
-**/*.shim.ngstyle.ts
-**/*.metadata.json
-!aot/bs-config.json
-!aot/index.html
-!copy-dist-files.js
-!rollup-config.js
-
-# testing
-!testing/src/browser-test-shim.js
-!testing/karma*.js
-
-# TS to JS
-!cb-ts-to-js/js*/**/*.js
-cb-ts-to-js/js*/**/system*.js
-
-# webpack
-!webpack/**/config/*.js
-!webpack/**/*webpack*.js
-
-# style-guide
-!style-guide/src/systemjs.custom.js
-
-# plunkers
-*plnkr.no-link.html
+**/ts-snippets/**/*.js

aio/content/examples/_boilerplate/package.json

@@ -38,7 +38,7 @@
   "license": "MIT",
   "dependencies": {},
   "devDependencies": {
-    "angular-cli": "^1.0.0-rc.0"
+    "angular-cli": "^1.0.0-beta.26"
   },
   "repository": {}
 }

aio/content/examples/_boilerplate/src/systemjs.config.js

@@ -11,23 +11,18 @@
     // map tells the System loader where to look for things
     map: {
       // our app is within the app folder
-      'app': 'app',
+      app: 'app',
 
       // angular bundles
-      '@angular/animations': 'npm:@angular/animations/bundles/animations.umd.js',
-      '@angular/animations/browser': 'npm:@angular/animations/bundles/animations-browser.umd.js',
       '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
       '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
       '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
       '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
-      '@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js',
       '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
       '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
       '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
       '@angular/router/upgrade': 'npm:@angular/router/bundles/router-upgrade.umd.js',
       '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
-      '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
-      '@angular/upgrade/static': 'npm:@angular/upgrade/bundles/upgrade-static.umd.js',
 
       // other libraries
       'rxjs':                      'npm:rxjs',
@@ -37,12 +32,7 @@
     packages: {
       app: {
         main: './main.js',
-        defaultExtension: 'js',
-        meta: {
-          './*.js': {
-            loader: 'systemjs-angular-loader.js'
-          }
-        }
+        defaultExtension: 'js'
       },
       rxjs: {
         defaultExtension: 'js'

aio/content/examples/_boilerplate/src/systemjs.config.web.build.js

@@ -35,16 +35,13 @@
     // map tells the System loader where to look for things
     map: {
       // our app is within the app folder
-      'app': 'app',
+      app: 'app',
 
       // angular bundles
-      '@angular/animations': 'ng:animations-builds/master/bundles/animations.umd.js',
-      '@angular/animations/browser': 'ng:animations-builds/master/bundles/animations-browser.umd.js',
       '@angular/core': 'ng:core-builds/master/bundles/core.umd.js',
       '@angular/common': 'ng:common-builds/master/bundles/common.umd.js',
       '@angular/compiler': 'ng:compiler-builds/master/bundles/compiler.umd.js',
       '@angular/platform-browser': 'ng:platform-browser-builds/master/bundles/platform-browser.umd.js',
-      '@angular/platform-browser/animations': 'ng:animations-builds/master/bundles/platform-browser-animations.umd.js',
       '@angular/platform-browser-dynamic': 'ng:platform-browser-dynamic-builds/master/bundles/platform-browser-dynamic.umd.js',
       '@angular/http': 'ng:http-builds/master/bundles/http.umd.js',
       '@angular/router': 'ng:router-builds/master/bundles/router.umd.js',
@@ -67,19 +64,14 @@
       'rxjs':                      'npm:rxjs@5.0.1',
       'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
       'ts':                        'npm:plugin-typescript@5.2.7/lib/plugin.js',
-      'typescript':                'npm:typescript@2.2.1/lib/typescript.js',
+      'typescript':                'npm:typescript@2.0.10/lib/typescript.js',
 
     },
     // packages tells the System loader how to load when no filename and/or no extension
     packages: {
       app: {
         main: './main.ts',
-        defaultExtension: 'ts',
-        meta: {
-          './*.ts': {
-            loader: 'systemjs-angular-loader.js'
-          }
-        }
+        defaultExtension: 'ts'
       },
       rxjs: {
         defaultExtension: 'js'

aio/content/examples/_boilerplate/src/systemjs.config.web.js

@@ -32,16 +32,13 @@
     // map tells the System loader where to look for things
     map: {
       // our app is within the app folder
-      'app': 'app',
+      app: 'app',
 
       // angular bundles
-      '@angular/animations': 'npm:@angular/animations/bundles/animations.umd.js',
-      '@angular/animations/browser': 'npm:@angular/animations/bundles/animations-browser.umd.js',
       '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
       '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
       '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
       '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
-      '@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js',
       '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
       '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
       '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
@@ -54,19 +51,14 @@
       'rxjs':                      'npm:rxjs@5.0.1',
       'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
       'ts':                        'npm:plugin-typescript@5.2.7/lib/plugin.js',
-      'typescript':                'npm:typescript@2.2.1/lib/typescript.js',
+      'typescript':                'npm:typescript@2.0.10/lib/typescript.js',
 
     },
     // packages tells the System loader how to load when no filename and/or no extension
     packages: {
       app: {
         main: './main.ts',
-        defaultExtension: 'ts',
-        meta: {
-          './*.ts': {
-            loader: 'systemjs-angular-loader.js'
-          }
-        }
+        defaultExtension: 'ts'
       },
       rxjs: {
         defaultExtension: 'js'

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

@@ -1,8 +1,5 @@
-// #docregion animations-module
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-// #enddocregion animations-module
 
 import { HeroTeamBuilderComponent } from './hero-team-builder.component';
 import { HeroListBasicComponent } from './hero-list-basic.component';
@@ -16,10 +13,8 @@ import { HeroListGroupsComponent } from './hero-list-groups.component';
 import { HeroListMultistepComponent } from './hero-list-multistep.component';
 import { HeroListTimingsComponent } from './hero-list-timings.component';
 
-// #docregion animation-module
 @NgModule({
-  imports: [ BrowserModule, BrowserAnimationsModule ],
-  // #enddocregion animation-module
+  imports: [ BrowserModule ],
   declarations: [
     HeroTeamBuilderComponent,
     HeroListBasicComponent,

aio/content/examples/animations/ts/src/app/hero-list-auto.component.ts

@@ -1,18 +1,17 @@
 import {
   Component,
-  Input
-} from '@angular/core';
-import {
+  Input,
   trigger,
   state,
   style,
   animate,
   transition
-} from '@angular/animations';
+} from '@angular/core';
 
 import { Heroes } from './hero.service';
 
 @Component({
+  moduleId: module.id,
   selector: 'hero-list-auto',
   // #docregion template
   template: `

aio/content/examples/animations/ts/src/app/hero-list-basic.component.ts

@@ -3,20 +3,19 @@
 // #docregion imports
 import {
   Component,
-  Input
-} from '@angular/core';
-import {
+  Input,
   trigger,
   state,
   style,
-  animate,
-  transition
-} from '@angular/animations';
+  transition,
+  animate
+} from '@angular/core';
 // #enddocregion imports
 
 import { Heroes } from './hero.service';
 
 @Component({
+  moduleId: module.id,
   selector: 'hero-list-basic',
   // #enddocregion
   /* The click event calls hero.toggleState(), which

aio/content/examples/animations/ts/src/app/hero-list-combined-transitions.component.ts

@@ -2,20 +2,19 @@
 // #docregion imports
 import {
   Component,
-  Input
-} from '@angular/core';
-import {
+  Input,
   trigger,
   state,
   style,
-  animate,
-  transition
-} from '@angular/animations';
+  transition,
+  animate
+} from '@angular/core';
 // #enddocregion imports
 
 import { Heroes } from './hero.service';
 
 @Component({
+ moduleId: module.id,
  selector: 'hero-list-combined-transitions',
  // #docregion template
  template: `

aio/content/examples/animations/ts/src/app/hero-list-enter-leave-states.component.ts

@@ -1,18 +1,17 @@
 import {
   Component,
-  Input
-} from '@angular/core';
-import {
+  Input,
   trigger,
   state,
   style,
   animate,
   transition
-} from '@angular/animations';
+} from '@angular/core';
 
 import { Heroes } from './hero.service';
 
 @Component({
+  moduleId: module.id,
   selector: 'hero-list-enter-leave-states',
   // #docregion template
   template: `

aio/content/examples/animations/ts/src/app/hero-list-enter-leave.component.ts

@@ -1,18 +1,17 @@
 import {
   Component,
-  Input
-} from '@angular/core';
-import {
+  Input,
   trigger,
   state,
   style,
   animate,
   transition
-} from '@angular/animations';
+} from '@angular/core';
 
 import { Heroes } from './hero.service';
 
 @Component({
+  moduleId: module.id,
   selector: 'hero-list-enter-leave',
   // #docregion template
   template: `

aio/content/examples/animations/ts/src/app/hero-list-groups.component.ts

@@ -1,19 +1,18 @@
 import {
   Component,
-  Input
-} from '@angular/core';
-import {
+  Input,
   trigger,
   state,
   style,
   animate,
   transition,
   group
-} from '@angular/animations';
+} from '@angular/core';
 
 import { Heroes } from './hero.service';
 
 @Component({
+  moduleId: module.id,
   selector: 'hero-list-groups',
   template: `
     <ul>

aio/content/examples/animations/ts/src/app/hero-list-inline-styles.component.ts

@@ -3,18 +3,17 @@
 import {
   Component,
   Input,
-} from '@angular/core';
-import {
   trigger,
   style,
-  animate,
-  transition
-} from '@angular/animations';
+  transition,
+  animate
+} from '@angular/core';
 // #enddocregion imports
 
 import { Heroes } from './hero.service';
 
 @Component({
+ moduleId: module.id,
  selector: 'hero-list-inline-styles',
  // #docregion template
  template: `

aio/content/examples/animations/ts/src/app/hero-list-multistep.component.ts

@@ -1,20 +1,19 @@
 import {
   Component,
   Input,
-} from '@angular/core';
-import {
   trigger,
   state,
   style,
   animate,
   transition,
   keyframes,
-  AnimationEvent
-} from '@angular/animations';
+  AnimationTransitionEvent
+} from '@angular/core';
 
 import { Heroes } from './hero.service';
 
 @Component({
+  moduleId: module.id,
   selector: 'hero-list-multistep',
   // #docregion template
   template: `
@@ -61,11 +60,11 @@ import { Heroes } from './hero.service';
 export class HeroListMultistepComponent {
   @Input() heroes: Heroes;
 
-  animationStarted(event: AnimationEvent) {
+  animationStarted(event: AnimationTransitionEvent) {
     console.warn('Animation started: ', event);
   }
 
-  animationDone(event: AnimationEvent) {
+  animationDone(event: AnimationTransitionEvent) {
     console.warn('Animation done: ', event);
   }
 }

aio/content/examples/animations/ts/src/app/hero-list-timings.component.ts

@@ -1,18 +1,17 @@
 import {
   Component,
-  Input
-} from '@angular/core';
-import {
+  Input,
   trigger,
   state,
   style,
   animate,
   transition
-} from '@angular/animations';
+} from '@angular/core';
 
 import { Heroes } from './hero.service';
 
 @Component({
+  moduleId: module.id,
   selector: 'hero-list-timings',
   template: `
     <ul>

aio/content/examples/animations/ts/src/app/hero-list-twoway.component.ts

@@ -2,20 +2,19 @@
 // #docregion imports
 import {
   Component,
-  Input
-} from '@angular/core';
-import {
+  Input,
   trigger,
   state,
   style,
-  animate,
-  transition
-} from '@angular/animations';
+  transition,
+  animate
+} from '@angular/core';
 // #enddocregion imports
 
 import { Heroes } from './hero.service';
 
 @Component({
+ moduleId: module.id,
  selector: 'hero-list-twoway',
  // #docregion template
  template: `

aio/content/examples/architecture/ts/plnkr.no-link.html

@@ -0,0 +1,481 @@
+<html lang="en"><head></head><body><form id="mainForm" method="post" action="http://plnkr.co/edit/?p=preview" target="_self"><input type="hidden" name="files[app/app.component.ts]" value="import { Component } from '@angular/core';
+
+@Component({
+  selector: 'my-app',
+  template: `
+    <hero-list></hero-list>
+    <sales-tax></sales-tax>
+  `
+})
+export class AppComponent { }
+
+
+/*
+Copyright 2016 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 http://angular.io/license
+*/"><input type="hidden" name="files[app/app.module.ts]" value="import { BrowserModule }       from '@angular/platform-browser';
+import { FormsModule }         from '@angular/forms';
+import { NgModule }     from '@angular/core';
+import { AppComponent } from './app.component';
+import { HeroDetailComponent } from './hero-detail.component';
+import { HeroListComponent }   from './hero-list.component';
+import { SalesTaxComponent }   from './sales-tax.component';
+import { HeroService }         from './hero.service';
+import { BackendService }      from './backend.service';
+import { Logger }              from './logger.service';
+
+@NgModule({
+  imports: [
+    BrowserModule,
+    FormsModule
+  ],
+  declarations: [
+    AppComponent,
+    HeroDetailComponent,
+    HeroListComponent,
+    SalesTaxComponent
+  ],
+  providers: [
+    BackendService,
+    HeroService,
+    Logger
+  ],
+  bootstrap: [ AppComponent ]
+})
+export class AppModule { }
+
+
+/*
+Copyright 2016 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 http://angular.io/license
+*/"><input type="hidden" name="files[app/backend.service.ts]" value="import { Injectable, Type } from '@angular/core';
+
+import { Logger } from './logger.service';
+import { Hero } from './hero';
+
+const HEROES = [
+        new Hero('Windstorm', 'Weather mastery'),
+        new Hero('Mr. Nice', 'Killing them with kindness'),
+        new Hero('Magneta', 'Manipulates metalic objects')
+      ];
+
+@Injectable()
+export class BackendService {
+  constructor(private logger: Logger) {}
+
+  getAll(type: Type<any>): PromiseLike<any[]> {
+    if (type === Hero) {
+      // TODO get from the database
+      return Promise.resolve<Hero[]>(HEROES);
+    }
+    let err = new Error('Cannot get object of this type');
+    this.logger.error(err);
+    throw err;
+  }
+}
+
+
+/*
+Copyright 2016 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 http://angular.io/license
+*/"><input type="hidden" name="files[app/hero-detail.component.ts]" value="import { Component, Input } from '@angular/core';
+
+import { Hero } from './hero';
+
+@Component({
+  moduleId: module.id,
+  selector: 'hero-detail',
+  templateUrl: './hero-detail.component.html'
+})
+export class HeroDetailComponent {
+  @Input() hero: Hero;
+}
+
+
+/*
+Copyright 2016 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 http://angular.io/license
+*/"><input type="hidden" name="files[app/hero-list.component.ts]" value="import { Component, OnInit }   from '@angular/core';
+
+import { Hero }                from './hero';
+import { HeroService }         from './hero.service';
+
+@Component({
+  moduleId: module.id,
+  selector:    'hero-list',
+  templateUrl: './hero-list.component.html',
+  providers:  [ HeroService ]
+})
+export class HeroListComponent implements OnInit {
+  heroes: Hero[];
+  selectedHero: Hero;
+
+  constructor(private service: HeroService) { }
+
+  ngOnInit() {
+    this.heroes = this.service.getHeroes();
+  }
+
+  selectHero(hero: Hero) { this.selectedHero = hero; }
+}
+
+
+/*
+Copyright 2016 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 http://angular.io/license
+*/"><input type="hidden" name="files[app/hero.service.ts]" value="import { Injectable } from '@angular/core';
+
+import { Hero } from './hero';
+import { BackendService } from './backend.service';
+import { Logger } from './logger.service';
+
+@Injectable()
+export class HeroService {
+  private heroes: Hero[] = [];
+
+  constructor(
+    private backend: BackendService,
+    private logger: Logger) { }
+
+  getHeroes() {
+    this.backend.getAll(Hero).then( (heroes: Hero[]) => {
+      this.logger.log(`Fetched ${heroes.length} heroes.`);
+      this.heroes.push(...heroes); // fill cache
+    });
+    return this.heroes;
+  }
+}
+
+
+/*
+Copyright 2016 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 http://angular.io/license
+*/"><input type="hidden" name="files[app/hero.ts]" value="let nextId = 1;
+
+export class Hero {
+  id: number;
+  constructor(
+    public name: string,
+    public power?: string) {
+      this.id = nextId++;
+    }
+}
+
+
+/*
+Copyright 2016 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 http://angular.io/license
+*/"><input type="hidden" name="files[app/logger.service.ts]" value="import { Injectable } from '@angular/core';
+
+@Injectable()
+export class Logger {
+  log(msg: any)   { console.log(msg); }
+  error(msg: any) { console.error(msg); }
+  warn(msg: any)  { console.warn(msg); }
+}
+
+
+/*
+Copyright 2016 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 http://angular.io/license
+*/"><input type="hidden" name="files[app/mini-app.ts]" value="// A mini-application
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class Logger {
+  log(message: string) { console.log(message); }
+}
+
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'my-app',
+ template: 'Welcome to Angular'
+})
+export class AppComponent {
+  constructor(logger: Logger) {
+    logger.log('Let the fun begin!');
+  }
+}
+
+import { NgModule }      from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+@NgModule({
+  imports:      [ BrowserModule ],
+  providers:    [ Logger ],
+  declarations: [ AppComponent ],
+  exports:      [ AppComponent ],
+  bootstrap:    [ AppComponent ]
+})
+export class AppModule { }
+
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+platformBrowserDynamic().bootstrapModule(AppModule);
+
+
+/*
+Copyright 2016 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 http://angular.io/license
+*/"><input type="hidden" name="files[app/sales-tax.component.ts]" value="import { Component }       from '@angular/core';
+
+import { SalesTaxService } from './sales-tax.service';
+import { TaxRateService }  from './tax-rate.service';
+
+@Component({
+  selector:    'sales-tax',
+  template: `
+    <h2>Sales Tax Calculator</h2>
+    Amount: <input #amountBox (change)=&quot;0&quot;>
+
+    <div *ngIf=&quot;amountBox.value&quot;>
+    The sales tax is
+     {{ getTax(amountBox.value) | currency:'USD':true:'1.2-2' }}
+    </div>
+  `,
+  providers: [SalesTaxService, TaxRateService]
+})
+export class SalesTaxComponent {
+  constructor(private salesTaxService: SalesTaxService) { }
+
+  getTax(value: string | number) {
+    return this.salesTaxService.getVAT(value);
+  }
+}
+
+
+/*
+Copyright 2016 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 http://angular.io/license
+*/"><input type="hidden" name="files[app/sales-tax.service.ts]" value="import { Injectable } from '@angular/core';
+
+import { TaxRateService } from './tax-rate.service';
+
+@Injectable()
+export class SalesTaxService {
+  constructor(private rateService: TaxRateService) { }
+
+  getVAT(value: string | number) {
+    let amount = (typeof value === 'string') ?
+      parseFloat(value) : value;
+    return (amount || 0) * this.rateService.getRate('VAT');
+  }
+}
+
+
+/*
+Copyright 2016 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 http://angular.io/license
+*/"><input type="hidden" name="files[app/tax-rate.service.ts]" value="import { Injectable } from '@angular/core';
+
+@Injectable()
+export class TaxRateService {
+  getRate(rateName: string) { return 0.10; } // 10% everywhere
+}
+
+
+/*
+Copyright 2016 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 http://angular.io/license
+*/"><input type="hidden" name="files[main.ts]" value="import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { AppModule } from './app/app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);
+
+
+/*
+Copyright 2016 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 http://angular.io/license
+*/"><input type="hidden" name="files[styles.css]" value="/* Master Styles */
+h1 {
+  color: #369;
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 250%;
+}
+h2, h3 {
+  color: #444;
+  font-family: Arial, Helvetica, sans-serif;
+  font-weight: lighter;
+}
+body {
+  margin: 2em;
+}
+body, input[text], button {
+  color: #888;
+  font-family: Cambria, Georgia;
+}
+a {
+  cursor: pointer;
+  cursor: hand;
+}
+button {
+  font-family: Arial;
+  background-color: #eee;
+  border: none;
+  padding: 5px 10px;
+  border-radius: 4px;
+  cursor: pointer;
+  cursor: hand;
+}
+button:hover {
+  background-color: #cfd8dc;
+}
+button:disabled {
+  background-color: #eee;
+  color: #aaa;
+  cursor: auto;
+}
+
+/* Navigation link styles */
+nav a {
+  padding: 5px 10px;
+  text-decoration: none;
+  margin-right: 10px;
+  margin-top: 10px;
+  display: inline-block;
+  background-color: #eee;
+  border-radius: 4px;
+}
+nav a:visited, a:link {
+  color: #607D8B;
+}
+nav a:hover {
+  color: #039be5;
+  background-color: #CFD8DC;
+}
+nav a.active {
+  color: #039be5;
+}
+
+/* items class */
+.items {
+  margin: 0 0 2em 0;
+  list-style-type: none;
+  padding: 0;
+  width: 24em;
+}
+.items li {
+  cursor: pointer;
+  position: relative;
+  left: 0;
+  background-color: #EEE;
+  margin: .5em;
+  padding: .3em 0;
+  height: 1.6em;
+  border-radius: 4px;
+}
+.items li:hover {
+  color: #607D8B;
+  background-color: #DDD;
+  left: .1em;
+}
+.items li.selected {
+  background-color: #CFD8DC;
+  color: white;
+}
+.items li.selected:hover {
+  background-color: #BBD8DC;
+}
+.items .text {
+  position: relative;
+  top: -3px;
+}
+.items .badge {
+  display: inline-block;
+  font-size: small;
+  color: white;
+  padding: 0.8em 0.7em 0 0.7em;
+  background-color: #607D8B;
+  line-height: 1em;
+  position: relative;
+  left: -1px;
+  top: -4px;
+  height: 1.8em;
+  margin-right: .8em;
+  border-radius: 4px 0 0 4px;
+}
+/* everywhere else */
+* {
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+
+/*
+Copyright 2016 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 http://angular.io/license
+*/"><input type="hidden" name="files[app/hero-detail.component.html]" value="<hr>
+<h4>{{hero.name}} Detail</h4>
+<div>Id: {{hero.id}}</div>
+<div>Name:
+  <input [(ngModel)]=&quot;hero.name&quot;>
+</div>
+<div>Power:<input [(ngModel)]=&quot;hero.power&quot;></div>
+
+
+<!-- 
+Copyright 2016 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 http://angular.io/license
+-->"><input type="hidden" name="files[app/hero-list.component.html]" value="<h2>Hero List</h2>
+
+<p><i>Pick a hero from the list</i></p>
+<ul>
+  <li *ngFor=&quot;let hero of heroes&quot; (click)=&quot;selectHero(hero)&quot;>
+    {{hero.name}}
+  </li>
+</ul>
+
+<hero-detail *ngIf=&quot;selectedHero&quot; [hero]=&quot;selectedHero&quot;></hero-detail>
+
+
+<!-- 
+Copyright 2016 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 http://angular.io/license
+-->"><input type="hidden" name="files[index.html]" value="<!DOCTYPE html>
+<html>
+  <head>
+    <title>Architecture of Angular</title>
+    <meta charset=&quot;UTF-8&quot;>
+    <meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;>
+    <script>document.write('<base href=&quot;' + document.location + '&quot; />');</script>
+    <link rel=&quot;stylesheet&quot; href=&quot;styles.css&quot;>
+
+    <!-- Polyfills -->
+    <script src=&quot;https://unpkg.com/core-js/client/shim.min.js&quot;></script>
+
+    <script src=&quot;https://unpkg.com/zone.js@0.7.4?main=browser&quot;></script>
+    <script src=&quot;https://unpkg.com/systemjs@0.19.39/dist/system.src.js&quot;></script>
+
+    <script src=&quot;https://cdn.rawgit.com/angular/angular.io/b3c65a9/public/docs/_examples/_boilerplate/systemjs.config.web.js&quot;></script>
+    <script>
+      System.import('main.js').catch(function(err){ console.error(err); });
+    </script>
+  </head>
+
+  <body>
+    <my-app>Loading...</my-app>
+  </body>
+
+</html>
+
+
+<!-- 
+Copyright 2016 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 http://angular.io/license
+-->"><input type="hidden" name="tags[0]" value="angular"><input type="hidden" name="tags[1]" value="example"><input type="hidden" name="private" value="true"><input type="hidden" name="description" value="Angular Example - Intro to Angular"></form><script>document.getElementById("mainForm").submit();</script></body></html>

aio/content/examples/architecture/ts/src/app/hero-detail.component.ts

@@ -3,6 +3,7 @@ import { Component, Input } from '@angular/core';
 import { Hero } from './hero';
 
 @Component({
+  moduleId: module.id,
   selector: 'hero-detail',
   templateUrl: './hero-detail.component.html'
 })

aio/content/examples/architecture/ts/src/app/hero-list.component.ts

@@ -5,6 +5,7 @@ import { HeroService }         from './hero.service';
 
 // #docregion metadata, providers
 @Component({
+  moduleId: module.id,
   selector:    'hero-list',
   templateUrl: './hero-list.component.html',
   providers:  [ HeroService ]

aio/content/examples/attribute-directives/e2e-spec.ts

@@ -15,7 +15,7 @@ describe('Attribute directives', function () {
   });
 
   it('should be able to select green highlight', function () {
-    let highlightedEle = element(by.cssContainingText('p', 'Highlight me!'));
+    let highlightedEle = element(by.cssContainingText('p', 'Highlight me'));
     let lightGreen = 'rgba(144, 238, 144, 1)';
 
     expect(highlightedEle.getCssValue('background-color')).not.toEqual(lightGreen);

aio/content/examples/attribute-directives/ts/plnkr.no-link.html

@@ -0,0 +1,253 @@
+<html lang="en"><head></head><body><form id="mainForm" method="post" action="http://plnkr.co/edit/?p=preview" target="_self"><input type="hidden" name="files[app/app.component.ts]" value="import { Component } from '@angular/core';
+
+@Component({
+  moduleId: module.id,
+  selector: 'my-app',
+  templateUrl: './app.component.html'
+})
+export class AppComponent {
+  color: string;
+}
+
+
+/*
+Copyright 2016 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 http://angular.io/license
+*/"><input type="hidden" name="files[app/app.module.ts]" value="import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { AppComponent } from './app.component';
+import { HighlightDirective } from './highlight.directive';
+
+@NgModule({
+  imports: [ BrowserModule ],
+  declarations: [
+    AppComponent,
+    HighlightDirective
+  ],
+  bootstrap: [ AppComponent ]
+})
+export class AppModule { }
+
+
+/*
+Copyright 2016 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 http://angular.io/license
+*/"><input type="hidden" name="files[app/highlight.directive.ts]" value="/* tslint:disable:member-ordering */
+import { Directive, ElementRef, HostListener, Input } from '@angular/core';
+
+@Directive({
+  selector: '[myHighlight]'
+})
+export class HighlightDirective {
+
+  constructor(private el: ElementRef) { }
+
+  @Input() defaultColor: string;
+
+  @Input('myHighlight') highlightColor: string;
+
+  @HostListener('mouseenter') onMouseEnter() {
+    this.highlight(this.highlightColor || this.defaultColor || 'red');
+  }
+
+  @HostListener('mouseleave') onMouseLeave() {
+    this.highlight(null);
+  }
+
+  private highlight(color: string) {
+    this.el.nativeElement.style.backgroundColor = color;
+  }
+}
+
+
+/*
+Copyright 2016 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 http://angular.io/license
+*/"><input type="hidden" name="files[main.ts]" value="import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { AppModule } from './app/app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);
+
+
+/*
+Copyright 2016 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 http://angular.io/license
+*/"><input type="hidden" name="files[styles.css]" value="/* Master Styles */
+h1 {
+  color: #369;
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 250%;
+}
+h2, h3 {
+  color: #444;
+  font-family: Arial, Helvetica, sans-serif;
+  font-weight: lighter;
+}
+body {
+  margin: 2em;
+}
+body, input[text], button {
+  color: #888;
+  font-family: Cambria, Georgia;
+}
+a {
+  cursor: pointer;
+  cursor: hand;
+}
+button {
+  font-family: Arial;
+  background-color: #eee;
+  border: none;
+  padding: 5px 10px;
+  border-radius: 4px;
+  cursor: pointer;
+  cursor: hand;
+}
+button:hover {
+  background-color: #cfd8dc;
+}
+button:disabled {
+  background-color: #eee;
+  color: #aaa;
+  cursor: auto;
+}
+
+/* Navigation link styles */
+nav a {
+  padding: 5px 10px;
+  text-decoration: none;
+  margin-right: 10px;
+  margin-top: 10px;
+  display: inline-block;
+  background-color: #eee;
+  border-radius: 4px;
+}
+nav a:visited, a:link {
+  color: #607D8B;
+}
+nav a:hover {
+  color: #039be5;
+  background-color: #CFD8DC;
+}
+nav a.active {
+  color: #039be5;
+}
+
+/* items class */
+.items {
+  margin: 0 0 2em 0;
+  list-style-type: none;
+  padding: 0;
+  width: 24em;
+}
+.items li {
+  cursor: pointer;
+  position: relative;
+  left: 0;
+  background-color: #EEE;
+  margin: .5em;
+  padding: .3em 0;
+  height: 1.6em;
+  border-radius: 4px;
+}
+.items li:hover {
+  color: #607D8B;
+  background-color: #DDD;
+  left: .1em;
+}
+.items li.selected {
+  background-color: #CFD8DC;
+  color: white;
+}
+.items li.selected:hover {
+  background-color: #BBD8DC;
+}
+.items .text {
+  position: relative;
+  top: -3px;
+}
+.items .badge {
+  display: inline-block;
+  font-size: small;
+  color: white;
+  padding: 0.8em 0.7em 0 0.7em;
+  background-color: #607D8B;
+  line-height: 1em;
+  position: relative;
+  left: -1px;
+  top: -4px;
+  height: 1.8em;
+  margin-right: .8em;
+  border-radius: 4px 0 0 4px;
+}
+/* everywhere else */
+* {
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+
+/*
+Copyright 2016 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 http://angular.io/license
+*/"><input type="hidden" name="files[app/app.component.html]" value="<h1>My First Attribute Directive</h1>
+
+<h4>Pick a highlight color</h4>
+<div>
+  <input type=&quot;radio&quot; name=&quot;colors&quot; (click)=&quot;color='lightgreen'&quot;>Green
+  <input type=&quot;radio&quot; name=&quot;colors&quot; (click)=&quot;color='yellow'&quot;>Yellow
+  <input type=&quot;radio&quot; name=&quot;colors&quot; (click)=&quot;color='cyan'&quot;>Cyan
+</div>
+<p [myHighlight]=&quot;color&quot;>Highlight me!</p>
+
+<p [myHighlight]=&quot;color&quot; defaultColor=&quot;violet&quot;>
+  Highlight me too!
+</p>
+
+<hr>
+<p><i>Mouse over the following lines to see fixed highlights</i></p>
+
+<p [myHighlight]=&quot;'yellow'&quot;>Highlighted in yellow</p>
+<p myHighlight=&quot;orange&quot;>Highlighted in orange</p>
+
+
+<!-- 
+Copyright 2016 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 http://angular.io/license
+-->"><input type="hidden" name="files[index.html]" value="<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset=&quot;UTF-8&quot;>
+    <title>Attribute Directives</title>
+    <script>document.write('<base href=&quot;' + document.location + '&quot; />');</script>
+    <meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;>
+    <link rel=&quot;stylesheet&quot; href=&quot;styles.css&quot;>
+
+    <!-- Polyfills -->
+    <script src=&quot;https://unpkg.com/core-js/client/shim.min.js&quot;></script>
+
+    <script src=&quot;https://unpkg.com/zone.js@0.7.4?main=browser&quot;></script>
+    <script src=&quot;https://unpkg.com/systemjs@0.19.39/dist/system.src.js&quot;></script>
+
+    <script src=&quot;https://cdn.rawgit.com/angular/angular.io/b3c65a9/public/docs/_examples/_boilerplate/systemjs.config.web.js&quot;></script>
+    <script>
+      System.import('main.js').catch(function(err){ console.error(err); });
+    </script>
+  </head>
+  <body>
+    <my-app>loading...</my-app>
+  </body>
+</html>
+
+
+<!-- 
+Copyright 2016 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 http://angular.io/license
+-->"><input type="hidden" name="tags[0]" value="angular"><input type="hidden" name="tags[1]" value="example"><input type="hidden" name="tags[2]" value="attribute"><input type="hidden" name="tags[3]" value="directive"><input type="hidden" name="private" value="true"><input type="hidden" name="description" value="Angular Example - Attribute Directive"></form><script>document.getElementById("mainForm").submit();</script></body></html>

aio/content/examples/attribute-directives/ts/src/app/app.component.1.html

@@ -2,13 +2,19 @@
 <h1>My First Attribute Directive</h1>
 <!-- #docregion applied -->
 <p myHighlight>Highlight me!</p>
-<!-- #enddocregion applied,  -->
+<!-- #enddocregion applied -->
+<!-- #enddocregion -->
 
 <!-- #docregion color-1 -->
 <p myHighlight highlightColor="yellow">Highlighted in yellow</p>
 <p myHighlight [highlightColor]="'orange'">Highlighted in orange</p>
+
 <!-- #enddocregion color-1 -->
 
 <!-- #docregion color-2 -->
 <p myHighlight [highlightColor]="color">Highlighted with parent component's color</p>
 <!-- #enddocregion color-2 -->
+
+<!-- #docregion p-style-background -->
+<p [style.background]="'lime'">I am green with envy!</p>
+<!-- #enddocregion p-style-background -->

aio/content/examples/attribute-directives/ts/src/app/app.component.1.ts

@@ -1,6 +1,7 @@
 import { Component } from '@angular/core';
 
 @Component({
+  moduleId: module.id,
   selector: 'my-app',
   templateUrl: './app.component.1.html'
 })
@@ -8,3 +9,4 @@ import { Component } from '@angular/core';
 export class AppComponent {
   color = 'yellow';
 }
+// #enddocregion class

aio/content/examples/attribute-directives/ts/src/app/app.component.html

@@ -1,4 +1,5 @@
-<!-- #docregion v2, -->
+<!-- #docregion -->
+<!-- #docregion v2 -->
 <h1>My First Attribute Directive</h1>
 
 <h4>Pick a highlight color</h4>
@@ -9,13 +10,15 @@
 </div>
 <!-- #docregion color -->
 <p [myHighlight]="color">Highlight me!</p>
-<!-- #enddocregion color, v2 -->
+<!-- #enddocregion color -->
+<!-- #enddocregion v2 -->
 
 <!-- #docregion defaultColor -->
 <p [myHighlight]="color" defaultColor="violet">
   Highlight me too!
 </p>
-<!-- #enddocregion defaultColor, -->
+<!-- #enddocregion defaultColor -->
+<!-- #enddocregion -->
 
 <hr>
 <p><i>Mouse over the following lines to see fixed highlights</i></p>

aio/content/examples/attribute-directives/ts/src/app/app.component.ts

@@ -2,6 +2,7 @@
 import { Component } from '@angular/core';
 
 @Component({
+  moduleId: module.id,
   selector: 'my-app',
   templateUrl: './app.component.html'
 })
@@ -9,3 +10,5 @@ import { Component } from '@angular/core';
 export class AppComponent {
   color: string;
 }
+// #enddocregion class
+// #enddocregion

aio/content/examples/attribute-directives/ts/src/app/highlight.directive.2.ts

@@ -10,6 +10,17 @@ export class HighlightDirective {
   // #docregion ctor
   constructor(private el: ElementRef) { }
   // #enddocregion ctor
+  // #enddocregion
+
+  // #docregion color
+  @Input() highlightColor: string;
+  // #enddocregion color
+
+  // #docregion color-2
+  @Input() myHighlight: string;
+  // #enddocregion color-2
+
+  // #docregion
 
   // #docregion mouse-methods, host
   @HostListener('mouseenter') onMouseEnter() {
@@ -28,14 +39,7 @@ export class HighlightDirective {
   private highlight(color: string) {
     this.el.nativeElement.style.backgroundColor = color;
   }
-  // #enddocregion mouse-methods, 
+  // #enddocregion mouse-methods
 
-  // #docregion color
-  @Input() highlightColor: string;
-  // #enddocregion color
-
-  // #docregion color-2
-  @Input() myHighlight: string;
-  // #enddocregion color-2
 }
-
+// #enddocregion

aio/content/examples/attribute-directives/ts/src/app/highlight.directive.ts

@@ -1,5 +1,7 @@
 /* tslint:disable:member-ordering */
-// #docregion imports, 
+// #docplaster
+// #docregion
+// #docregion imports
 import { Directive, ElementRef, HostListener, Input } from '@angular/core';
 // #enddocregion imports
 

aio/content/examples/cb-ajs-quick-reference/ts/src/app/app.component.ts

@@ -4,6 +4,7 @@ import { MovieService } from './movie.service';
 import { IMovie } from './movie';
 
 @Component({
+  moduleId: module.id,
   selector: 'my-app',
   templateUrl: './app.component.html',
   styleUrls: [ './app.component.css' ],

aio/content/examples/cb-ajs-quick-reference/ts/src/app/movie-list.component.ts

@@ -8,6 +8,7 @@ import { MovieService } from './movie.service';
 
 // #docregion component
 @Component({
+  moduleId: module.id,
   selector: 'movie-list',
   templateUrl: './movie-list.component.html',
 // #docregion style-url

aio/content/examples/cb-aot-compiler/e2e-spec.ts

@@ -9,7 +9,7 @@ describe('AOT Compilation', function () {
         browser.get('');
     });
 
-    it('should load page and click button', function (done: any) {
+    it('should load page and click button', function (done) {
       let headingSelector = element.all(by.css('h1')).get(0);
       expect(headingSelector.getText()).toEqual('Hello Angular');
 

aio/content/examples/cb-aot-compiler/ts/rollup-config.js

@@ -15,6 +15,8 @@ export default {
 
     // should intercept ... but doesn't in some rollup versions
     if ( warning.code === 'THIS_IS_UNDEFINED' ) { return; }
+    // intercepts in some rollup versions
+    if ( warning.indexOf("The 'this' keyword is equivalent to 'undefined'") > -1 ) { return; }
 
     // console.warn everything else
     console.warn( warning.message );

aio/content/examples/cb-aot-compiler/ts/src/app/app.component.ts

@@ -2,6 +2,7 @@
 import { Component } from '@angular/core';
 
 @Component({
+  moduleId: module.id,
   selector: 'my-app',
   templateUrl: './app.component.html'
 })