From f0a55016af3d8a940af1acbee4712332a1448a3c Mon Sep 17 00:00:00 2001
From: Victor Berchet <victor@suumit.com>
Date: Tue, 8 Aug 2017 11:41:12 -0700
Subject: [PATCH 01/83] fix(core): fix platform-browser-dynamic (#18576)

follow-up for #18496
---
 .../platform-browser-dynamic/src/platform-browser-dynamic.ts    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/platform-browser-dynamic/src/platform-browser-dynamic.ts b/packages/platform-browser-dynamic/src/platform-browser-dynamic.ts
index 9b65cf4e95..929ae41858 100644
--- a/packages/platform-browser-dynamic/src/platform-browser-dynamic.ts
+++ b/packages/platform-browser-dynamic/src/platform-browser-dynamic.ts
@@ -18,7 +18,7 @@ export {VERSION} from './version';
  * @experimental
  */
 export const RESOURCE_CACHE_PROVIDER: Provider[] =
-    [{provide: ResourceLoader, useClass: CachedResourceLoader}];
+    [{provide: ResourceLoader, useClass: CachedResourceLoader, deps: []}];
 
 /**
  * @stable

From 6f2038cc852fb31e5cdbab2f15cd3ab80bf3dac7 Mon Sep 17 00:00:00 2001
From: Chuck Jazdzewski <chuckj@google.com>
Date: Tue, 8 Aug 2017 12:40:08 -0700
Subject: [PATCH 02/83] fix(compiler-cli): fix and re-enble expression lowering
 (#18570)

Fixes issue uncovered by #18388 and re-enables expression
lowering disabled by #18513.
---
 .../src/transformers/lower_expressions.ts     | 56 +++++++++++++++++--
 .../compiler-cli/src/transformers/program.ts  |  3 +-
 packages/compiler-cli/test/ngc_spec.ts        | 28 +++++++++-
 .../transformers/lower_expressions_spec.ts    |  8 +--
 4 files changed, 80 insertions(+), 15 deletions(-)

diff --git a/packages/compiler-cli/src/transformers/lower_expressions.ts b/packages/compiler-cli/src/transformers/lower_expressions.ts
index 286ce3b4fa..65c4cd3aff 100644
--- a/packages/compiler-cli/src/transformers/lower_expressions.ts
+++ b/packages/compiler-cli/src/transformers/lower_expressions.ts
@@ -32,6 +32,24 @@ function toMap<T, K>(items: T[], select: (item: T) => K): Map<K, T> {
   return new Map(items.map<[K, T]>(i => [select(i), i]));
 }
 
+// We will never lower expressions in a nested lexical scope so avoid entering them.
+// This also avoids a bug in TypeScript 2.3 where the lexical scopes get out of sync
+// when using visitEachChild.
+function isLexicalScope(node: ts.Node): boolean {
+  switch (node.kind) {
+    case ts.SyntaxKind.ArrowFunction:
+    case ts.SyntaxKind.FunctionExpression:
+    case ts.SyntaxKind.FunctionDeclaration:
+    case ts.SyntaxKind.ClassExpression:
+    case ts.SyntaxKind.ClassDeclaration:
+    case ts.SyntaxKind.FunctionType:
+    case ts.SyntaxKind.TypeLiteral:
+    case ts.SyntaxKind.ArrayType:
+      return true;
+  }
+  return false;
+}
+
 function transformSourceFile(
     sourceFile: ts.SourceFile, requests: RequestLocationMap,
     context: ts.TransformationContext): ts.SourceFile {
@@ -56,11 +74,15 @@ function transformSourceFile(
           declarations.push({name, node});
           return ts.createIdentifier(name);
         }
-        if (node.pos <= max && node.end >= min) return ts.visitEachChild(node, visitNode, context);
-        return node;
+        let result = node;
+        if (node.pos <= max && node.end >= min && !isLexicalScope(node)) {
+          result = ts.visitEachChild(node, visitNode, context);
+        }
+        return result;
       }
 
-      const result = ts.visitEachChild(node, visitNode, context);
+      const result =
+          (node.pos <= max && node.end >= min) ? ts.visitEachChild(node, visitNode, context) : node;
 
       if (declarations.length) {
         inserts.push({priorTo: result, declarations});
@@ -126,6 +148,29 @@ interface MetadataAndLoweringRequests {
   requests: RequestLocationMap;
 }
 
+function shouldLower(node: ts.Node | undefined): boolean {
+  if (node) {
+    switch (node.kind) {
+      case ts.SyntaxKind.SourceFile:
+      case ts.SyntaxKind.Decorator:
+        // Lower expressions that are local to the module scope or
+        // in a decorator.
+        return true;
+      case ts.SyntaxKind.ClassDeclaration:
+      case ts.SyntaxKind.InterfaceDeclaration:
+      case ts.SyntaxKind.EnumDeclaration:
+      case ts.SyntaxKind.FunctionDeclaration:
+        // Don't lower expressions in a declaration.
+        return false;
+      case ts.SyntaxKind.VariableDeclaration:
+        // Avoid lowering expressions already in an exported variable declaration
+        return (ts.getCombinedModifierFlags(node) & ts.ModifierFlags.Export) == 0;
+    }
+    return shouldLower(node.parent);
+  }
+  return true;
+}
+
 export class LowerMetadataCache implements RequestsMap {
   private collector: MetadataCollector;
   private metadataCache = new Map<string, MetadataAndLoweringRequests>();
@@ -162,8 +207,9 @@ export class LowerMetadataCache implements RequestsMap {
     };
 
     const substituteExpression = (value: MetadataValue, node: ts.Node): MetadataValue => {
-      if (node.kind === ts.SyntaxKind.ArrowFunction ||
-          node.kind === ts.SyntaxKind.FunctionExpression) {
+      if ((node.kind === ts.SyntaxKind.ArrowFunction ||
+           node.kind === ts.SyntaxKind.FunctionExpression) &&
+          shouldLower(node)) {
         return replaceNode(node);
       }
       return value;
diff --git a/packages/compiler-cli/src/transformers/program.ts b/packages/compiler-cli/src/transformers/program.ts
index b2753555fa..3970aeb015 100644
--- a/packages/compiler-cli/src/transformers/program.ts
+++ b/packages/compiler-cli/src/transformers/program.ts
@@ -187,8 +187,7 @@ class AngularCompilerProgram implements Program {
     const before: ts.TransformerFactory<ts.SourceFile>[] = [];
     const after: ts.TransformerFactory<ts.SourceFile>[] = [];
     if (!this.options.disableExpressionLowering) {
-      // TODO(chuckj): fix and re-enable + tests - see https://github.com/angular/angular/pull/18388
-      // before.push(getExpressionLoweringTransformFactory(this.metadataCache));
+      before.push(getExpressionLoweringTransformFactory(this.metadataCache));
     }
     if (!this.options.skipTemplateCodegen) {
       after.push(getAngularEmitterTransformFactory(this.generatedFiles));
diff --git a/packages/compiler-cli/test/ngc_spec.ts b/packages/compiler-cli/test/ngc_spec.ts
index 0a994cf6e8..53320cc186 100644
--- a/packages/compiler-cli/test/ngc_spec.ts
+++ b/packages/compiler-cli/test/ngc_spec.ts
@@ -12,7 +12,7 @@ import * as path from 'path';
 import * as ts from 'typescript';
 
 import {main} from '../src/ngc';
-import {performCompilation} from '../src/perform-compile';
+import {performCompilation, readConfiguration} from '../src/perform-compile';
 
 function getNgRootDir() {
   const moduleFilename = module.filename.replace(/\\/g, '/');
@@ -316,7 +316,7 @@ describe('ngc command-line', () => {
           .toBe(true);
     });
 
-    xdescribe('expression lowering', () => {
+    describe('expression lowering', () => {
       beforeEach(() => {
         writeConfig(`{
             "extends": "./tsconfig-base.json",
@@ -424,13 +424,35 @@ describe('ngc command-line', () => {
           })
           export class MyModule {}
         `);
-        expect(compile()).toEqual(0);
+        expect(compile()).toEqual(0, 'Compile failed');
 
         const mymodulejs = path.resolve(outDir, 'mymodule.js');
         const mymoduleSource = fs.readFileSync(mymodulejs, 'utf8');
         expect(mymoduleSource).toContain('var ɵ0 = function () { return new Foo(); }');
         expect(mymoduleSource).toContain('export { ɵ0');
       });
+
+      it('should not lower a lambda that is already exported', () => {
+        write('mymodule.ts', `
+          import {CommonModule} from '@angular/common';
+          import {NgModule} from '@angular/core';
+
+          class Foo {}
+
+          export const factory = () => new Foo();
+
+          @NgModule({
+            imports: [CommonModule],
+            providers: [{provide: 'someToken', useFactory: factory}]
+          })
+          export class MyModule {}
+        `);
+        expect(compile()).toEqual(0);
+
+        const mymodulejs = path.resolve(outDir, 'mymodule.js');
+        const mymoduleSource = fs.readFileSync(mymodulejs, 'utf8');
+        expect(mymoduleSource).not.toContain('ɵ0');
+      });
     });
 
     const shouldExist = (fileName: string) => {
diff --git a/packages/compiler-cli/test/transformers/lower_expressions_spec.ts b/packages/compiler-cli/test/transformers/lower_expressions_spec.ts
index 7588982b03..6b923ed671 100644
--- a/packages/compiler-cli/test/transformers/lower_expressions_spec.ts
+++ b/packages/compiler-cli/test/transformers/lower_expressions_spec.ts
@@ -51,11 +51,9 @@ function convert(annotatedSource: string) {
 
   for (const annotation of annotations) {
     const node = findNode(sourceFile, annotation.start, annotation.length);
-    expect(node).toBeDefined();
-    if (node) {
-      const location = node.pos;
-      requests.set(location, {name: annotation.name, kind: node.kind, location, end: node.end});
-    }
+    if (!node) throw new Error('Invalid test specification. Could not find the node to substitute');
+    const location = node.pos;
+    requests.set(location, {name: annotation.name, kind: node.kind, location, end: node.end});
   }
 
   const program = ts.createProgram(

From 1e1833198dbe18bcc432ce3acf3aa808cf6b6884 Mon Sep 17 00:00:00 2001
From: George Kalpakas <kalpakas.g@gmail.com>
Date: Tue, 8 Aug 2017 23:59:25 +0300
Subject: [PATCH 03/83] ci(aio): fix deploying to firebase (#18590)

---
 aio/scripts/deploy-to-firebase.sh | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/aio/scripts/deploy-to-firebase.sh b/aio/scripts/deploy-to-firebase.sh
index 1542067de0..90ccedd954 100755
--- a/aio/scripts/deploy-to-firebase.sh
+++ b/aio/scripts/deploy-to-firebase.sh
@@ -78,7 +78,7 @@ echo "Build/deploy mode : $deployEnv"
 echo "Firebase project  : $projectId"
 echo "Deployment URL    : $deployedUrl"
 
-if [[ $1 == "--dry-run" ]]; then
+if [[ ${1:-} == "--dry-run" ]]; then
   exit 0
 fi
 

From e54bd59f228c73881c08b8f179f0fcf49e0f74ae Mon Sep 17 00:00:00 2001
From: Marc Laval <mlaval@amadeus.com>
Date: Wed, 9 Aug 2017 23:11:51 +0200
Subject: [PATCH 04/83] fix(core): forbid destroyed views to be inserted or
 moved in VC (#18568)

Fixes #17780
---
 packages/core/src/view/refs.ts                |   6 +
 packages/core/test/linker/integration_spec.ts | 304 ++++++++++--------
 2 files changed, 181 insertions(+), 129 deletions(-)

diff --git a/packages/core/src/view/refs.ts b/packages/core/src/view/refs.ts
index 9db6f7c44d..bb9040f601 100644
--- a/packages/core/src/view/refs.ts
+++ b/packages/core/src/view/refs.ts
@@ -187,6 +187,9 @@ class ViewContainerRef_ implements ViewContainerData {
   }
 
   insert(viewRef: ViewRef, index?: number): ViewRef {
+    if (viewRef.destroyed) {
+      throw new Error('Cannot insert a destroyed View in a ViewContainer!');
+    }
     const viewRef_ = <ViewRef_>viewRef;
     const viewData = viewRef_._view;
     attachEmbeddedView(this._view, this._data, index, viewData);
@@ -195,6 +198,9 @@ class ViewContainerRef_ implements ViewContainerData {
   }
 
   move(viewRef: ViewRef_, currentIndex: number): ViewRef {
+    if (viewRef.destroyed) {
+      throw new Error('Cannot move a destroyed View in a ViewContainer!');
+    }
     const previousIndex = this._embeddedViews.indexOf(viewRef._view);
     moveEmbeddedView(this._data, previousIndex, currentIndex);
     return viewRef;
diff --git a/packages/core/test/linker/integration_spec.ts b/packages/core/test/linker/integration_spec.ts
index ce9ef724f8..f77fc7868e 100644
--- a/packages/core/test/linker/integration_spec.ts
+++ b/packages/core/test/linker/integration_spec.ts
@@ -7,7 +7,7 @@
  */
 
 import {CommonModule} from '@angular/common';
-import {Compiler, ComponentFactory, ErrorHandler, EventEmitter, Host, Inject, Injectable, InjectionToken, Injector, NO_ERRORS_SCHEMA, NgModule, NgModuleRef, OnDestroy, SkipSelf} from '@angular/core';
+import {Compiler, ComponentFactory, ComponentRef, ErrorHandler, EventEmitter, Host, Inject, Injectable, InjectionToken, Injector, NO_ERRORS_SCHEMA, NgModule, NgModuleRef, OnDestroy, SkipSelf, ViewRef} from '@angular/core';
 import {ChangeDetectionStrategy, ChangeDetectorRef, PipeTransform} from '@angular/core/src/change_detection/change_detection';
 import {getDebugContext} from '@angular/core/src/errors';
 import {ComponentFactoryResolver} from '@angular/core/src/linker/component_factory_resolver';
@@ -1030,7 +1030,7 @@ function declareTests({useJit}: {useJit: boolean}) {
         fixture.destroy();
       });
 
-      describe('ViewContainerRef.createComponent', () => {
+      describe('ViewContainerRef', () => {
         beforeEach(() => {
           // we need a module to declarate ChildCompUsingService as an entryComponent otherwise the
           // factory doesn't get created
@@ -1047,146 +1047,184 @@ function declareTests({useJit}: {useJit: boolean}) {
               MyComp, {add: {template: '<div><dynamic-vp #dynamic></dynamic-vp></div>'}});
         });
 
-        it('should allow to create a component at any bound location', async(() => {
-             const fixture = TestBed.configureTestingModule({schemas: [NO_ERRORS_SCHEMA]})
-                                 .createComponent(MyComp);
-             const tc = fixture.debugElement.children[0].children[0];
-             const dynamicVp: DynamicViewport = tc.injector.get(DynamicViewport);
-             dynamicVp.create();
-             fixture.detectChanges();
-             expect(fixture.debugElement.children[0].children[1].nativeElement)
-                 .toHaveText('dynamic greet');
-           }));
+        describe('.createComponent', () => {
+          it('should allow to create a component at any bound location', async(() => {
+               const fixture = TestBed.configureTestingModule({schemas: [NO_ERRORS_SCHEMA]})
+                                   .createComponent(MyComp);
+               const tc = fixture.debugElement.children[0].children[0];
+               const dynamicVp: DynamicViewport = tc.injector.get(DynamicViewport);
+               dynamicVp.create();
+               fixture.detectChanges();
+               expect(fixture.debugElement.children[0].children[1].nativeElement)
+                   .toHaveText('dynamic greet');
+             }));
 
-        it('should allow to create multiple components at a location', async(() => {
-             const fixture = TestBed.configureTestingModule({schemas: [NO_ERRORS_SCHEMA]})
-                                 .createComponent(MyComp);
-             const tc = fixture.debugElement.children[0].children[0];
-             const dynamicVp: DynamicViewport = tc.injector.get(DynamicViewport);
-             dynamicVp.create();
-             dynamicVp.create();
-             fixture.detectChanges();
-             expect(fixture.debugElement.children[0].children[1].nativeElement)
-                 .toHaveText('dynamic greet');
-             expect(fixture.debugElement.children[0].children[2].nativeElement)
-                 .toHaveText('dynamic greet');
-           }));
+          it('should allow to create multiple components at a location', async(() => {
+               const fixture = TestBed.configureTestingModule({schemas: [NO_ERRORS_SCHEMA]})
+                                   .createComponent(MyComp);
+               const tc = fixture.debugElement.children[0].children[0];
+               const dynamicVp: DynamicViewport = tc.injector.get(DynamicViewport);
+               dynamicVp.create();
+               dynamicVp.create();
+               fixture.detectChanges();
+               expect(fixture.debugElement.children[0].children[1].nativeElement)
+                   .toHaveText('dynamic greet');
+               expect(fixture.debugElement.children[0].children[2].nativeElement)
+                   .toHaveText('dynamic greet');
+             }));
 
-        it('should create a component that has been freshly compiled', () => {
-          @Component({template: ''})
-          class RootComp {
-            constructor(public vc: ViewContainerRef) {}
-          }
+          it('should create a component that has been freshly compiled', () => {
+            @Component({template: ''})
+            class RootComp {
+              constructor(public vc: ViewContainerRef) {}
+            }
 
-          @NgModule({
-            declarations: [RootComp],
-            providers: [{provide: 'someToken', useValue: 'someRootValue'}],
-          })
-          class RootModule {
-          }
+            @NgModule({
+              declarations: [RootComp],
+              providers: [{provide: 'someToken', useValue: 'someRootValue'}],
+            })
+            class RootModule {
+            }
 
-          @Component({template: ''})
-          class MyComp {
-            constructor(@Inject('someToken') public someToken: string) {}
-          }
+            @Component({template: ''})
+            class MyComp {
+              constructor(@Inject('someToken') public someToken: string) {}
+            }
 
-          @NgModule({
-            declarations: [MyComp],
-            providers: [{provide: 'someToken', useValue: 'someValue'}],
-          })
-          class MyModule {
-          }
+            @NgModule({
+              declarations: [MyComp],
+              providers: [{provide: 'someToken', useValue: 'someValue'}],
+            })
+            class MyModule {
+            }
 
-          const compFixture =
-              TestBed.configureTestingModule({imports: [RootModule]}).createComponent(RootComp);
-          const compiler = <Compiler>TestBed.get(Compiler);
-          const myCompFactory =
-              <ComponentFactory<MyComp>>compiler.compileModuleAndAllComponentsSync(MyModule)
-                  .componentFactories[0];
+            const compFixture =
+                TestBed.configureTestingModule({imports: [RootModule]}).createComponent(RootComp);
+            const compiler = <Compiler>TestBed.get(Compiler);
+            const myCompFactory =
+                <ComponentFactory<MyComp>>compiler.compileModuleAndAllComponentsSync(MyModule)
+                    .componentFactories[0];
 
-          // Note: the ComponentFactory was created directly via the compiler, i.e. it
-          // does not have an association to an NgModuleRef.
-          // -> expect the providers of the module that the view container belongs to.
-          const compRef = compFixture.componentInstance.vc.createComponent(myCompFactory);
-          expect(compRef.instance.someToken).toBe('someRootValue');
+            // Note: the ComponentFactory was created directly via the compiler, i.e. it
+            // does not have an association to an NgModuleRef.
+            // -> expect the providers of the module that the view container belongs to.
+            const compRef = compFixture.componentInstance.vc.createComponent(myCompFactory);
+            expect(compRef.instance.someToken).toBe('someRootValue');
+          });
+
+          it('should create a component with the passed NgModuleRef', () => {
+            @Component({template: ''})
+            class RootComp {
+              constructor(public vc: ViewContainerRef) {}
+            }
+
+            @Component({template: ''})
+            class MyComp {
+              constructor(@Inject('someToken') public someToken: string) {}
+            }
+
+            @NgModule({
+              declarations: [RootComp, MyComp],
+              entryComponents: [MyComp],
+              providers: [{provide: 'someToken', useValue: 'someRootValue'}],
+            })
+            class RootModule {
+            }
+
+            @NgModule({providers: [{provide: 'someToken', useValue: 'someValue'}]})
+            class MyModule {
+            }
+
+            const compFixture =
+                TestBed.configureTestingModule({imports: [RootModule]}).createComponent(RootComp);
+            const compiler = <Compiler>TestBed.get(Compiler);
+            const myModule = compiler.compileModuleSync(MyModule).create(TestBed.get(NgModuleRef));
+            const myCompFactory = (<ComponentFactoryResolver>TestBed.get(ComponentFactoryResolver))
+                                      .resolveComponentFactory(MyComp);
+
+            // Note: MyComp was declared as entryComponent in the RootModule,
+            // but we pass MyModule to the createComponent call.
+            // -> expect the providers of MyModule!
+            const compRef = compFixture.componentInstance.vc.createComponent(
+                myCompFactory, undefined, undefined, undefined, myModule);
+            expect(compRef.instance.someToken).toBe('someValue');
+          });
+
+          it('should create a component with the NgModuleRef of the ComponentFactoryResolver',
+             () => {
+               @Component({template: ''})
+               class RootComp {
+                 constructor(public vc: ViewContainerRef) {}
+               }
+
+               @NgModule({
+                 declarations: [RootComp],
+                 providers: [{provide: 'someToken', useValue: 'someRootValue'}],
+               })
+               class RootModule {
+               }
+
+               @Component({template: ''})
+               class MyComp {
+                 constructor(@Inject('someToken') public someToken: string) {}
+               }
+
+               @NgModule({
+                 declarations: [MyComp],
+                 entryComponents: [MyComp],
+                 providers: [{provide: 'someToken', useValue: 'someValue'}],
+               })
+               class MyModule {
+               }
+
+               const compFixture = TestBed.configureTestingModule({imports: [RootModule]})
+                                       .createComponent(RootComp);
+               const compiler = <Compiler>TestBed.get(Compiler);
+               const myModule =
+                   compiler.compileModuleSync(MyModule).create(TestBed.get(NgModuleRef));
+               const myCompFactory =
+                   myModule.componentFactoryResolver.resolveComponentFactory(MyComp);
+
+               // Note: MyComp was declared as entryComponent in MyModule,
+               // and we don't pass an explicit ModuleRef to the createComponent call.
+               // -> expect the providers of MyModule!
+               const compRef = compFixture.componentInstance.vc.createComponent(myCompFactory);
+               expect(compRef.instance.someToken).toBe('someValue');
+             });
         });
 
-        it('should create a component with the passed NgModuleRef', () => {
-          @Component({template: ''})
-          class RootComp {
-            constructor(public vc: ViewContainerRef) {}
-          }
+        describe('.insert', () => {
+          it('should throw with destroyed views', async(() => {
+               const fixture = TestBed.configureTestingModule({schemas: [NO_ERRORS_SCHEMA]})
+                                   .createComponent(MyComp);
+               const tc = fixture.debugElement.children[0].children[0];
+               const dynamicVp: DynamicViewport = tc.injector.get(DynamicViewport);
+               const ref = dynamicVp.create();
+               fixture.detectChanges();
 
-          @Component({template: ''})
-          class MyComp {
-            constructor(@Inject('someToken') public someToken: string) {}
-          }
-
-          @NgModule({
-            declarations: [RootComp, MyComp],
-            entryComponents: [MyComp],
-            providers: [{provide: 'someToken', useValue: 'someRootValue'}],
-          })
-          class RootModule {
-          }
-
-          @NgModule({providers: [{provide: 'someToken', useValue: 'someValue'}]})
-          class MyModule {
-          }
-
-          const compFixture =
-              TestBed.configureTestingModule({imports: [RootModule]}).createComponent(RootComp);
-          const compiler = <Compiler>TestBed.get(Compiler);
-          const myModule = compiler.compileModuleSync(MyModule).create(TestBed.get(NgModuleRef));
-          const myCompFactory = (<ComponentFactoryResolver>TestBed.get(ComponentFactoryResolver))
-                                    .resolveComponentFactory(MyComp);
-
-          // Note: MyComp was declared as entryComponent in the RootModule,
-          // but we pass MyModule to the createComponent call.
-          // -> expect the providers of MyModule!
-          const compRef = compFixture.componentInstance.vc.createComponent(
-              myCompFactory, undefined, undefined, undefined, myModule);
-          expect(compRef.instance.someToken).toBe('someValue');
+               ref.destroy();
+               expect(() => {
+                 dynamicVp.insert(ref.hostView);
+               }).toThrowError('Cannot insert a destroyed View in a ViewContainer!');
+             }));
         });
 
-        it('should create a component with the NgModuleRef of the ComponentFactoryResolver', () => {
-          @Component({template: ''})
-          class RootComp {
-            constructor(public vc: ViewContainerRef) {}
-          }
+        describe('.move', () => {
+          it('should throw with destroyed views', async(() => {
+               const fixture = TestBed.configureTestingModule({schemas: [NO_ERRORS_SCHEMA]})
+                                   .createComponent(MyComp);
+               const tc = fixture.debugElement.children[0].children[0];
+               const dynamicVp: DynamicViewport = tc.injector.get(DynamicViewport);
+               const ref = dynamicVp.create();
+               fixture.detectChanges();
 
-          @NgModule({
-            declarations: [RootComp],
-            providers: [{provide: 'someToken', useValue: 'someRootValue'}],
-          })
-          class RootModule {
-          }
-
-          @Component({template: ''})
-          class MyComp {
-            constructor(@Inject('someToken') public someToken: string) {}
-          }
-
-          @NgModule({
-            declarations: [MyComp],
-            entryComponents: [MyComp],
-            providers: [{provide: 'someToken', useValue: 'someValue'}],
-          })
-          class MyModule {
-          }
-
-          const compFixture =
-              TestBed.configureTestingModule({imports: [RootModule]}).createComponent(RootComp);
-          const compiler = <Compiler>TestBed.get(Compiler);
-          const myModule = compiler.compileModuleSync(MyModule).create(TestBed.get(NgModuleRef));
-          const myCompFactory = myModule.componentFactoryResolver.resolveComponentFactory(MyComp);
-
-          // Note: MyComp was declared as entryComponent in MyModule,
-          // and we don't pass an explicit ModuleRef to the createComponent call.
-          // -> expect the providers of MyModule!
-          const compRef = compFixture.componentInstance.vc.createComponent(myCompFactory);
-          expect(compRef.instance.someToken).toBe('someValue');
+               ref.destroy();
+               expect(() => {
+                 dynamicVp.move(ref.hostView, 1);
+               }).toThrowError('Cannot move a destroyed View in a ViewContainer!');
+             }));
         });
+
       });
 
       it('should support static attributes', () => {
@@ -1855,7 +1893,15 @@ class DynamicViewport {
         componentFactoryResolver.resolveComponentFactory(ChildCompUsingService) !;
   }
 
-  create() { this.vc.createComponent(this.componentFactory, this.vc.length, this.injector); }
+  create(): ComponentRef<ChildCompUsingService> {
+    return this.vc.createComponent(this.componentFactory, this.vc.length, this.injector);
+  }
+
+  insert(viewRef: ViewRef, index?: number): ViewRef { return this.vc.insert(viewRef, index); }
+
+  move(viewRef: ViewRef, currentIndex: number): ViewRef {
+    return this.vc.move(viewRef, currentIndex);
+  }
 }
 
 @Directive({selector: '[my-dir]', inputs: ['dirProp: elprop'], exportAs: 'mydir'})

From 2f9d8ff46d8d66cedd335ca3b17cc3b40a49f9b7 Mon Sep 17 00:00:00 2001
From: Marc Laval <mlaval@amadeus.com>
Date: Wed, 9 Aug 2017 23:15:40 +0200
Subject: [PATCH 05/83] test(animations): disable buggy test in Chrome 39
 (#18483)

Fixes #15793
---
 ...ns_with_web_animations_integration_spec.ts | 22 +++++++++++--------
 1 file changed, 13 insertions(+), 9 deletions(-)

diff --git a/packages/core/test/animation/animations_with_web_animations_integration_spec.ts b/packages/core/test/animation/animations_with_web_animations_integration_spec.ts
index 4664815a95..e257209fe0 100644
--- a/packages/core/test/animation/animations_with_web_animations_integration_spec.ts
+++ b/packages/core/test/animation/animations_with_web_animations_integration_spec.ts
@@ -10,11 +10,13 @@ import {AnimationDriver, ɵAnimationEngine, ɵWebAnimationsDriver, ɵWebAnimatio
 import {AnimationGroupPlayer} from '@angular/animations/src/players/animation_group_player';
 import {Component} from '@angular/core';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
+import {browserDetection} from '@angular/platform-browser/testing/src/browser_util';
 
 import {TestBed} from '../../testing';
 
 export function main() {
   // these tests are only mean't to be run within the DOM (for now)
+  // Buggy in Chromium 39, see https://github.com/angular/angular/issues/15793
   if (typeof Element == 'undefined' || !ɵsupportsWebAnimations()) return;
 
   describe('animation integration tests using web animations', function() {
@@ -66,16 +68,18 @@ export function main() {
         {height: '0px', offset: 0}, {height: '100px', offset: 1}
       ]);
 
-      cmp.exp = false;
-      fixture.detectChanges();
-      engine.flush();
+      if (!browserDetection.isOldChrome) {
+        cmp.exp = false;
+        fixture.detectChanges();
+        engine.flush();
 
-      expect(engine.players.length).toEqual(1);
-      webPlayer = engine.players[0].getRealPlayer() as ɵWebAnimationsPlayer;
+        expect(engine.players.length).toEqual(1);
+        webPlayer = engine.players[0].getRealPlayer() as ɵWebAnimationsPlayer;
 
-      expect(webPlayer.keyframes).toEqual([
-        {height: '100px', offset: 0}, {height: '0px', offset: 1}
-      ]);
+        expect(webPlayer.keyframes).toEqual([
+          {height: '100px', offset: 0}, {height: '0px', offset: 1}
+        ]);
+      }
     });
 
     it('should compute (!) animation styles for a container that is being inserted', () => {
@@ -293,4 +297,4 @@ export function main() {
 
 function approximate(value: number, target: number) {
   return Math.abs(target - value) / value;
-}
\ No newline at end of file
+}

From 6fb5250185d9e67409947d08f81c4f1f8a11e85a Mon Sep 17 00:00:00 2001
From: Georgios Kalpakas <kalpakas.g@gmail.com>
Date: Wed, 9 Aug 2017 02:18:31 +0300
Subject: [PATCH 06/83] ci(aio): fix deploying the stable branch to Firebase

The `deploy-to-firebase.sh` always expects there to be a
`src/extra-files/<mode>` directory and breaks if it doesn't exist.
---
 aio/src/extra-files/README.md          | 6 +++++-
 aio/src/extra-files/archive/robots.txt | 3 ++-
 aio/src/extra-files/next/robots.txt    | 3 ++-
 aio/src/extra-files/stable/robots.txt  | 3 +++
 4 files changed, 12 insertions(+), 3 deletions(-)
 create mode 100644 aio/src/extra-files/stable/robots.txt

diff --git a/aio/src/extra-files/README.md b/aio/src/extra-files/README.md
index 2aad208a30..55a09439bf 100644
--- a/aio/src/extra-files/README.md
+++ b/aio/src/extra-files/README.md
@@ -6,4 +6,8 @@ After the AIO application had been built and before it is deployed all files and
 inside the folder with the same name as the current deployment mode (next, stable, archive)
 will be copied to the `dist` folder.
 
-See the `scripts/deploy-to-firebase.sh` script for more detail.
\ No newline at end of file
+See the `scripts/deploy-to-firebase.sh` script for more detail.
+
+**Note:**
+The `deploy-to-firebase.sh` script always expects there to be a folder for the current deployment
+mode (even if it is empty).
diff --git a/aio/src/extra-files/archive/robots.txt b/aio/src/extra-files/archive/robots.txt
index 77470cb39f..35272cac72 100644
--- a/aio/src/extra-files/archive/robots.txt
+++ b/aio/src/extra-files/archive/robots.txt
@@ -1,2 +1,3 @@
+# Disallow all URLs (see http://www.robotstxt.org/robotstxt.html)
 User-agent: *
-Disallow: /
\ No newline at end of file
+Disallow: /
diff --git a/aio/src/extra-files/next/robots.txt b/aio/src/extra-files/next/robots.txt
index 77470cb39f..35272cac72 100644
--- a/aio/src/extra-files/next/robots.txt
+++ b/aio/src/extra-files/next/robots.txt
@@ -1,2 +1,3 @@
+# Disallow all URLs (see http://www.robotstxt.org/robotstxt.html)
 User-agent: *
-Disallow: /
\ No newline at end of file
+Disallow: /
diff --git a/aio/src/extra-files/stable/robots.txt b/aio/src/extra-files/stable/robots.txt
new file mode 100644
index 0000000000..7dbb786bc6
--- /dev/null
+++ b/aio/src/extra-files/stable/robots.txt
@@ -0,0 +1,3 @@
+# Allow all URLs (see http://www.robotstxt.org/robotstxt.html)
+User-agent: *
+Disallow:

From b14250bef951dc6125d527d331f857cd6bc9fdad Mon Sep 17 00:00:00 2001
From: Georgios Kalpakas <kalpakas.g@gmail.com>
Date: Wed, 9 Aug 2017 02:22:12 +0300
Subject: [PATCH 07/83] test(aio): fix the `deploy-to-firebase` tests

This commit also ensures that if the tests fail, the script exits with an error.
---
 aio/scripts/deploy-to-firebase.test.sh | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/aio/scripts/deploy-to-firebase.test.sh b/aio/scripts/deploy-to-firebase.test.sh
index dd9a3235fd..6093a3ab0e 100755
--- a/aio/scripts/deploy-to-firebase.test.sh
+++ b/aio/scripts/deploy-to-firebase.test.sh
@@ -1,4 +1,5 @@
 #!/usr/bin/env bash
+set +x -eu -o pipefail
 
 function check {
   if [[ $1 == $2 ]]; then
@@ -133,11 +134,11 @@ We only deploy archive branches with the major version less than the stable bran
     export TRAVIS_PULL_REQUEST=false
     export TRAVIS_BRANCH=2.4.x
     export STABLE_BRANCH=2.2.x
-    export TRAVIS_COMMIT=$(git ls-remote origin 2.1.x | cut -c-40)
+    export TRAVIS_COMMIT=$(git ls-remote origin 2.4.x | cut -c-40)
     export FIREBASE_TOKEN=XXXXX
     `dirname $0`/deploy-to-firebase.sh --dry-run
   )
-  expected="Skipping deploy of branch \"2.1.x\" to firebase.
+  expected="Skipping deploy of branch \"2.4.x\" to firebase.
 We only deploy archive branches with the major version less than the stable branch: \"2.2.x\""
   check "$actual" "$expected"
 )

From fd6ae571b8180835ba936f6125f184057e9ab498 Mon Sep 17 00:00:00 2001
From: George Kalpakas <kalpakas.g@gmail.com>
Date: Thu, 10 Aug 2017 00:20:25 +0300
Subject: [PATCH 08/83] fix(aio): add missing code snippet (#18547)

The snippet got lost some time during the migration from the old version (it is
[present in v2][1]).

[1]: https://v2.angular.io/docs/ts/latest/cookbook/aot-compiler.html#!#running-the-application

Fixes #18544
---
 aio/content/guide/aot-compiler.md | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/aio/content/guide/aot-compiler.md b/aio/content/guide/aot-compiler.md
index b48baf59b6..a5ddc8315f 100644
--- a/aio/content/guide/aot-compiler.md
+++ b/aio/content/guide/aot-compiler.md
@@ -528,6 +528,11 @@ Compiling with AOT presupposes certain supporting files, most of them discussed
 
 Extend the `scripts` section of the `package.json` with these npm scripts:
 
+<code-example language="json">
+  "build:aot": "ngc -p tsconfig-aot.json && rollup -c rollup-config.js",
+  "serve:aot": "lite-server -c bs-config.aot.json",
+</code-example>
+
 Copy the AOT distribution files into the `/aot` folder with the node script:
 
 <code-example language="none" class="code-shell">

From 7f2037f0b6f1aec0a79a6586fefd7df85e370c83 Mon Sep 17 00:00:00 2001
From: George Kalpakas <kalpakas.g@gmail.com>
Date: Thu, 10 Aug 2017 00:21:10 +0300
Subject: [PATCH 09/83] test(aio): fix running docs examples against local
 builds (#18520)

This commit also updates the version of `@angular/cli` used for docs examples.
The previous (transient) dependency `@ngtools/webpack` was not compatible with
`@angular/compiler-cli@>=5` and was breaking when running against the local
builds (currently at 5.0.0-beta.2). The version of `@ngtools/webpack` used by
the latest `@angular/cli` version is compatible with `@angular/compiler-cli@5`.
---
 aio/tools/examples/example-boilerplate.js     |   8 +-
 .../examples/example-boilerplate.spec.js      |   9 +-
 aio/tools/examples/run-example-e2e.js         |   2 +-
 aio/tools/examples/shared/package.json        |   2 +-
 aio/tools/examples/shared/yarn.lock           | 131 +++++++++++++-----
 scripts/ci/build.sh                           |  10 ++
 scripts/ci/test-aio.sh                        |   8 ++
 7 files changed, 123 insertions(+), 47 deletions(-)

diff --git a/aio/tools/examples/example-boilerplate.js b/aio/tools/examples/example-boilerplate.js
index 7127f1c968..bc8944025a 100644
--- a/aio/tools/examples/example-boilerplate.js
+++ b/aio/tools/examples/example-boilerplate.js
@@ -41,12 +41,9 @@ const ANGULAR_PACKAGES = [
   'platform-browser-dynamic',
   'platform-server',
   'router',
+  'tsc-wrapped',
   'upgrade',
 ];
-const ANGULAR_TOOLS_PACKAGES_PATH = path.resolve(ANGULAR_DIST_PATH, 'tools', '@angular');
-const ANGULAR_TOOLS_PACKAGES = [
-  'tsc-wrapped'
-];
 
 const EXAMPLE_CONFIG_FILENAME = 'example-config.json';
 
@@ -63,7 +60,6 @@ class ExampleBoilerPlate {
     // Replace the Angular packages with those from the dist folder, if necessary
     if (useLocal) {
       ANGULAR_PACKAGES.forEach(packageName => this.overridePackage(ANGULAR_PACKAGES_PATH, packageName));
-      ANGULAR_TOOLS_PACKAGES.forEach(packageName => this.overridePackage(ANGULAR_TOOLS_PACKAGES_PATH, packageName));
     }
 
     // Get all the examples folders, indicated by those that contain a `example-config.json` file
@@ -111,7 +107,7 @@ class ExampleBoilerPlate {
     const sourceFolder = path.resolve(basePath, packageName);
     const destinationFolder = path.resolve(SHARED_NODE_MODULES_PATH, '@angular', packageName);
     shelljs.rm('-rf', destinationFolder);
-    fs.ensureSymlinkSync(sourceFolder, destinationFolder);
+    fs.copySync(sourceFolder, destinationFolder);
   }
 
   getFoldersContaining(basePath, filename, ignore) {
diff --git a/aio/tools/examples/example-boilerplate.spec.js b/aio/tools/examples/example-boilerplate.spec.js
index e5d075afd4..b983e86558 100644
--- a/aio/tools/examples/example-boilerplate.spec.js
+++ b/aio/tools/examples/example-boilerplate.spec.js
@@ -30,8 +30,9 @@ describe('example-boilerplate tool', () => {
       exampleBoilerPlate.add(true);
       expect(exampleBoilerPlate.overridePackage).toHaveBeenCalledTimes(numberOfAngularPackages + numberOfAngularToolsPackages);
       // for example
+      expect(exampleBoilerPlate.overridePackage).toHaveBeenCalledWith(path.resolve(__dirname, '../../../dist/packages-dist'), 'common');
       expect(exampleBoilerPlate.overridePackage).toHaveBeenCalledWith(path.resolve(__dirname, '../../../dist/packages-dist'), 'core');
-      expect(exampleBoilerPlate.overridePackage).toHaveBeenCalledWith(path.resolve(__dirname, '../../../dist/tools/@angular'), 'tsc-wrapped');
+      expect(exampleBoilerPlate.overridePackage).toHaveBeenCalledWith(path.resolve(__dirname, '../../../dist/packages-dist'), 'tsc-wrapped');
     });
 
     it('should process all the example folders', () => {
@@ -90,7 +91,7 @@ describe('example-boilerplate tool', () => {
   describe('overridePackage', () => {
     beforeEach(() => {
       spyOn(shelljs, 'rm');
-      spyOn(fs, 'ensureSymlinkSync');
+      spyOn(fs, 'copySync');
     });
 
     it('should remove the original package from the shared node_modules folder', () => {
@@ -98,9 +99,9 @@ describe('example-boilerplate tool', () => {
       expect(shelljs.rm).toHaveBeenCalledWith('-rf', path.resolve(__dirname, 'shared/node_modules/@angular/somePackage'));
     });
 
-    it('should symlink the source folder to the shared node_modules folder', () => {
+    it('should copy the source folder to the shared node_modules folder', () => {
       exampleBoilerPlate.overridePackage('base/path', 'somePackage');
-      expect(fs.ensureSymlinkSync).toHaveBeenCalledWith(path.resolve('base/path/somePackage'), path.resolve(__dirname, 'shared/node_modules/@angular/somePackage'));
+      expect(fs.copySync).toHaveBeenCalledWith(path.resolve('base/path/somePackage'), path.resolve(__dirname, 'shared/node_modules/@angular/somePackage'));
     });
   });
 
diff --git a/aio/tools/examples/run-example-e2e.js b/aio/tools/examples/run-example-e2e.js
index 0b4e978592..48ceb9cc97 100644
--- a/aio/tools/examples/run-example-e2e.js
+++ b/aio/tools/examples/run-example-e2e.js
@@ -39,7 +39,7 @@ function runE2e() {
   if (argv.setup) {
     // Run setup.
     console.log('runE2e: copy boilerplate');
-    const spawnInfo = spawnExt('yarn', ['boilerplate:add', argv.local ? '-- --local': ''], { cwd: AIO_PATH });
+    const spawnInfo = spawnExt('yarn', ['boilerplate:add', '--', argv.local ? '--local' : ''], { cwd: AIO_PATH });
     promise = spawnInfo.promise
       .then(() => {
         console.log('runE2e: update webdriver');
diff --git a/aio/tools/examples/shared/package.json b/aio/tools/examples/shared/package.json
index 4627b75488..47c5ea6d37 100644
--- a/aio/tools/examples/shared/package.json
+++ b/aio/tools/examples/shared/package.json
@@ -32,7 +32,7 @@
     "zone.js": "^0.8.4"
   },
   "devDependencies": {
-    "@angular/cli": "^1.2.0",
+    "@angular/cli": "^1.2.7",
     "@types/angular": "^1.5.16",
     "@types/angular-animate": "^1.5.5",
     "@types/angular-cookies": "^1.4.2",
diff --git a/aio/tools/examples/shared/yarn.lock b/aio/tools/examples/shared/yarn.lock
index 2fd742b899..03d8325b9d 100644
--- a/aio/tools/examples/shared/yarn.lock
+++ b/aio/tools/examples/shared/yarn.lock
@@ -1,7 +1,5 @@
 # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
 # yarn lockfile v1
-# yarn v0.25.3
-# node v7.8.0
 
 
 "@angular/animations@~4.3.1":
@@ -10,14 +8,15 @@
   dependencies:
     tslib "^1.7.1"
 
-"@angular/cli@^1.2.0":
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/@angular/cli/-/cli-1.2.0.tgz#dfd8b8983ec37c2b6d7f902ead60396d7b571597"
+"@angular/cli@^1.2.7":
+  version "1.2.7"
+  resolved "https://registry.yarnpkg.com/@angular/cli/-/cli-1.2.7.tgz#dd20e8b0da24af5359077c05a6944823cb764132"
   dependencies:
     "@ngtools/json-schema" "1.1.0"
-    "@ngtools/webpack" "1.5.0"
+    "@ngtools/webpack" "1.5.5"
     autoprefixer "^6.5.3"
-    chalk "^1.1.3"
+    chalk "^2.0.1"
+    circular-dependency-plugin "^3.0.0"
     common-tags "^1.3.1"
     core-object "^3.1.0"
     css-loader "^0.28.1"
@@ -29,7 +28,7 @@
     exports-loader "^0.6.3"
     extract-text-webpack-plugin "^2.1.0"
     file-loader "^0.10.0"
-    fs-extra "^3.0.1"
+    fs-extra "^4.0.0"
     get-caller-file "^1.0.0"
     glob "^7.0.3"
     heimdalljs "^0.2.4"
@@ -39,7 +38,7 @@
     inquirer "^3.0.0"
     isbinaryfile "^3.0.0"
     istanbul-instrumenter-loader "^2.0.0"
-    json-loader "^0.5.4"
+    karma-source-map-support "^1.2.0"
     less "^2.7.2"
     less-loader "^4.0.2"
     license-webpack-plugin "^0.4.2"
@@ -48,7 +47,7 @@
     minimatch "^3.0.3"
     node-modules-path "^1.0.0"
     nopt "^4.0.1"
-    opn "4.0.2"
+    opn "~5.1.0"
     portfinder "~1.0.12"
     postcss-loader "^1.3.3"
     postcss-url "^5.1.2"
@@ -61,6 +60,7 @@
     semver "^5.1.0"
     silent-error "^1.0.0"
     source-map-loader "^0.2.0"
+    source-map-support "^0.4.1"
     style-loader "^0.13.1"
     stylus "^0.54.5"
     stylus-loader "^3.0.1"
@@ -72,7 +72,7 @@
     webpack-dev-middleware "^1.10.2"
     webpack-dev-server "~2.4.5"
     webpack-merge "^2.4.0"
-    zone.js "^0.8.4"
+    zone.js "^0.8.14"
   optionalDependencies:
     node-sass "^4.3.0"
 
@@ -156,13 +156,12 @@
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@ngtools/json-schema/-/json-schema-1.1.0.tgz#c3a0c544d62392acc2813a42c8a0dc6f58f86922"
 
-"@ngtools/webpack@1.5.0":
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/@ngtools/webpack/-/webpack-1.5.0.tgz#b6be58d857d41f8999751d6bbc3d21e84bc977ca"
+"@ngtools/webpack@1.5.5":
+  version "1.5.5"
+  resolved "https://registry.yarnpkg.com/@ngtools/webpack/-/webpack-1.5.5.tgz#d6e2a933184015653de3be33d38437fdd81009e7"
   dependencies:
-    enhanced-resolve "^3.1.0"
     loader-utils "^1.0.2"
-    magic-string "^0.19.0"
+    magic-string "^0.22.3"
     source-map "^0.5.6"
 
 "@types/angular-animate@^1.5.5":
@@ -360,6 +359,12 @@ ansi-styles@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-2.2.1.tgz#b432dd3358b634cf75e1e4664368240533c1ddbe"
 
+ansi-styles@^3.1.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-3.2.0.tgz#c159b8d5be0f9e5a6f346dab94f16ce022161b88"
+  dependencies:
+    color-convert "^1.9.0"
+
 anymatch@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-1.3.0.tgz#a3e52fa39168c825ff57b0248126ce5a8ff95507"
@@ -1385,6 +1390,14 @@ chalk@^1.0.0, chalk@^1.1.0, chalk@^1.1.1, chalk@^1.1.3:
     strip-ansi "^3.0.0"
     supports-color "^2.0.0"
 
+chalk@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.0.1.tgz#dbec49436d2ae15f536114e76d14656cdbc0f44d"
+  dependencies:
+    ansi-styles "^3.1.0"
+    escape-string-regexp "^1.0.5"
+    supports-color "^4.0.0"
+
 chokidar@1.7.0, chokidar@^1.4.1, chokidar@^1.4.3, chokidar@^1.6.0, chokidar@^1.6.1:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-1.7.0.tgz#798e689778151c8076b4b360e5edd28cda2bb468"
@@ -1406,6 +1419,10 @@ cipher-base@^1.0.0, cipher-base@^1.0.1, cipher-base@^1.0.3:
   dependencies:
     inherits "^2.0.1"
 
+circular-dependency-plugin@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/circular-dependency-plugin/-/circular-dependency-plugin-3.0.0.tgz#9b68692e35b0e3510998d0164b6ae5011bea5760"
+
 clap@^1.0.9:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/clap/-/clap-1.1.3.tgz#b3bd36e93dd4cbfb395a3c26896352445265c05b"
@@ -1476,7 +1493,7 @@ code-point-at@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77"
 
-color-convert@^1.3.0:
+color-convert@^1.3.0, color-convert@^1.9.0:
   version "1.9.0"
   resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.0.tgz#1accf97dd739b983bf994d56fec8f95853641b7a"
   dependencies:
@@ -2592,7 +2609,7 @@ fs-access@^1.0.0:
   dependencies:
     null-check "^1.0.0"
 
-fs-extra@3.0.1, fs-extra@^3.0.1:
+fs-extra@3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-3.0.1.tgz#3794f378c58b342ea7dbbb23095109c4b3b62291"
   dependencies:
@@ -2609,6 +2626,14 @@ fs-extra@^0.23.1:
     path-is-absolute "^1.0.0"
     rimraf "^2.2.8"
 
+fs-extra@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-4.0.1.tgz#7fc0c6c8957f983f57f306a24e5b9ddd8d0dd880"
+  dependencies:
+    graceful-fs "^4.1.2"
+    jsonfile "^3.0.0"
+    universalify "^0.1.0"
+
 fs-extra@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-1.0.0.tgz#cd3ce5f7e7cb6145883fcae3191e9877f8587950"
@@ -2843,6 +2868,10 @@ has-flag@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-1.0.0.tgz#9d9e793165ce017a00f00418c43f942a7b1d11fa"
 
+has-flag@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-2.0.0.tgz#e8207af1cc7b30d446cc70b734b5e8be18f88d51"
+
 has-unicode@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/has-unicode/-/has-unicode-2.0.1.tgz#e0e6fe6a28cf51138855e086d1691e771de2a8b9"
@@ -3340,6 +3369,10 @@ is-utf8@^0.2.0:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/is-utf8/-/is-utf8-0.2.1.tgz#4b0da1442104d1b336340e80797e865cf39f7d72"
 
+is-wsl@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/is-wsl/-/is-wsl-1.1.0.tgz#1f16e4aa22b04d1336b66188a66af3c600c3a66d"
+
 isarray@0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/isarray/-/isarray-0.0.1.tgz#8a18acfca9a8f4177e09abfc6038939b05d1eedf"
@@ -3539,6 +3572,12 @@ karma-phantomjs-launcher@^1.0.2:
     lodash "^4.0.1"
     phantomjs-prebuilt "^2.1.7"
 
+karma-source-map-support@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/karma-source-map-support/-/karma-source-map-support-1.2.0.tgz#1bf81e7bb4b089627ab352ec4179e117c406a540"
+  dependencies:
+    source-map-support "^0.4.1"
+
 karma-sourcemap-loader@^0.3.7:
   version "0.3.7"
   resolved "https://registry.yarnpkg.com/karma-sourcemap-loader/-/karma-sourcemap-loader-0.3.7.tgz#91322c77f8f13d46fed062b042e1009d4c4505d8"
@@ -3803,6 +3842,12 @@ magic-string@^0.19.0:
   dependencies:
     vlq "^0.2.1"
 
+magic-string@^0.22.3:
+  version "0.22.4"
+  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.22.4.tgz#31039b4e40366395618c1d6cf8193c53917475ff"
+  dependencies:
+    vlq "^0.2.1"
+
 make-error@^1.1.1:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/make-error/-/make-error-1.3.0.tgz#52ad3a339ccf10ce62b4040b708fe707244b8b96"
@@ -4241,6 +4286,12 @@ opn@4.0.2:
     object-assign "^4.0.1"
     pinkie-promise "^2.0.0"
 
+opn@~5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/opn/-/opn-5.1.0.tgz#72ce2306a17dbea58ff1041853352b4a8fc77519"
+  dependencies:
+    is-wsl "^1.1.0"
+
 optimist@0.6.x, optimist@^0.6.1, optimist@~0.6.0:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/optimist/-/optimist-0.6.1.tgz#da3ea74686fa21a19a111c326e90eb15a0196686"
@@ -5112,18 +5163,18 @@ request-progress@~2.0.1:
   dependencies:
     throttleit "^1.0.0"
 
-request@2, request@^2.72.0, request@^2.78.0, request@^2.79.0, request@~2.79.0:
-  version "2.79.0"
-  resolved "https://registry.yarnpkg.com/request/-/request-2.79.0.tgz#4dfe5bf6be8b8cdc37fcf93e04b65577722710de"
+request@2, request@^2.72.0, request@^2.79.0, request@^2.81.0:
+  version "2.81.0"
+  resolved "https://registry.yarnpkg.com/request/-/request-2.81.0.tgz#c6928946a0e06c5f8d6f8a9333469ffda46298a0"
   dependencies:
     aws-sign2 "~0.6.0"
     aws4 "^1.2.1"
-    caseless "~0.11.0"
+    caseless "~0.12.0"
     combined-stream "~1.0.5"
     extend "~3.0.0"
     forever-agent "~0.6.1"
     form-data "~2.1.1"
-    har-validator "~2.0.6"
+    har-validator "~4.2.1"
     hawk "~3.1.3"
     http-signature "~1.1.0"
     is-typedarray "~1.0.0"
@@ -5131,10 +5182,12 @@ request@2, request@^2.72.0, request@^2.78.0, request@^2.79.0, request@~2.79.0:
     json-stringify-safe "~5.0.1"
     mime-types "~2.1.7"
     oauth-sign "~0.8.1"
-    qs "~6.3.0"
+    performance-now "^0.2.0"
+    qs "~6.4.0"
+    safe-buffer "^5.0.1"
     stringstream "~0.0.4"
     tough-cookie "~2.3.0"
-    tunnel-agent "~0.4.1"
+    tunnel-agent "^0.6.0"
     uuid "^3.0.0"
 
 request@2.78.0:
@@ -5162,18 +5215,18 @@ request@2.78.0:
     tough-cookie "~2.3.0"
     tunnel-agent "~0.4.1"
 
-request@^2.81.0:
-  version "2.81.0"
-  resolved "https://registry.yarnpkg.com/request/-/request-2.81.0.tgz#c6928946a0e06c5f8d6f8a9333469ffda46298a0"
+request@^2.78.0, request@~2.79.0:
+  version "2.79.0"
+  resolved "https://registry.yarnpkg.com/request/-/request-2.79.0.tgz#4dfe5bf6be8b8cdc37fcf93e04b65577722710de"
   dependencies:
     aws-sign2 "~0.6.0"
     aws4 "^1.2.1"
-    caseless "~0.12.0"
+    caseless "~0.11.0"
     combined-stream "~1.0.5"
     extend "~3.0.0"
     forever-agent "~0.6.1"
     form-data "~2.1.1"
-    har-validator "~4.2.1"
+    har-validator "~2.0.6"
     hawk "~3.1.3"
     http-signature "~1.1.0"
     is-typedarray "~1.0.0"
@@ -5181,12 +5234,10 @@ request@^2.81.0:
     json-stringify-safe "~5.0.1"
     mime-types "~2.1.7"
     oauth-sign "~0.8.1"
-    performance-now "^0.2.0"
-    qs "~6.4.0"
-    safe-buffer "^5.0.1"
+    qs "~6.3.0"
     stringstream "~0.0.4"
     tough-cookie "~2.3.0"
-    tunnel-agent "^0.6.0"
+    tunnel-agent "~0.4.1"
     uuid "^3.0.0"
 
 require-directory@^2.1.1:
@@ -5696,7 +5747,7 @@ source-map-loader@^0.2.0:
     loader-utils "~0.2.2"
     source-map "~0.1.33"
 
-source-map-support@^0.4.0, source-map-support@^0.4.15, source-map-support@^0.4.2, source-map-support@~0.4.0:
+source-map-support@^0.4.0, source-map-support@^0.4.1, source-map-support@^0.4.15, source-map-support@^0.4.2, source-map-support@~0.4.0:
   version "0.4.15"
   resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.4.15.tgz#03202df65c06d2bd8c7ec2362a193056fef8d3b1"
   dependencies:
@@ -5919,6 +5970,12 @@ supports-color@^3.1.0, supports-color@^3.1.1, supports-color@^3.2.3:
   dependencies:
     has-flag "^1.0.0"
 
+supports-color@^4.0.0:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-4.2.1.tgz#65a4bb2631e90e02420dba5554c375a4754bb836"
+  dependencies:
+    has-flag "^2.0.0"
+
 svgo@^0.7.0:
   version "0.7.2"
   resolved "https://registry.yarnpkg.com/svgo/-/svgo-0.7.2.tgz#9f5772413952135c6fefbf40afe6a4faa88b4bb5"
@@ -6750,6 +6807,10 @@ yn@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/yn/-/yn-2.0.0.tgz#e5adabc8acf408f6385fc76495684c88e6af689a"
 
+zone.js@^0.8.14:
+  version "0.8.16"
+  resolved "https://registry.yarnpkg.com/zone.js/-/zone.js-0.8.16.tgz#ac31b6c418f88c0f918ad6acd8a402aca9313abb"
+
 zone.js@^0.8.4:
   version "0.8.12"
   resolved "https://registry.yarnpkg.com/zone.js/-/zone.js-0.8.12.tgz#86ff5053c98aec291a0bf4bbac501d694a05cfbb"
diff --git a/scripts/ci/build.sh b/scripts/ci/build.sh
index 891d36cdef..700a261264 100755
--- a/scripts/ci/build.sh
+++ b/scripts/ci/build.sh
@@ -40,6 +40,16 @@ if [[ ${CI_MODE:-} == "aio" ]]; then
   exit 0;
 fi
 
+# Build the Angular packages then exit (no further build required)
+if [[ ${CI_MODE:-} == "aio_e2e" ]]; then
+  travisFoldStart "build.aio_e2e"
+  (
+    ./build.sh
+  )
+  travisFoldEnd "build.aio_e2e"
+  exit 0;
+fi
+
 travisFoldStart "tsc tools"
   $(npm bin)/tsc -p tools
   $(npm bin)/tsc -p packages/tsc-wrapped/tsconfig-build.json
diff --git a/scripts/ci/test-aio.sh b/scripts/ci/test-aio.sh
index cd2bcfaf85..12374312f5 100755
--- a/scripts/ci/test-aio.sh
+++ b/scripts/ci/test-aio.sh
@@ -18,6 +18,12 @@ source ${thisDir}/_travis-fold.sh
   travisFoldEnd "test.aio.lint"
 
 
+  # Run unit tests for boilerplate tools
+  travisFoldStart "test.aio.boilerplate.unit"
+    yarn boilerplate:test
+  travisFoldEnd "test.aio.boilerplate.unit"
+
+
   # Run unit tests
   travisFoldStart "test.aio.unit"
     yarn test -- --single-run
@@ -29,11 +35,13 @@ source ${thisDir}/_travis-fold.sh
     yarn e2e
   travisFoldEnd "test.aio.e2e"
 
+
   # Run PWA-score tests
   travisFoldStart "test.aio.pwaScore"
     yarn test-pwa-score-local
   travisFoldEnd "test.aio.pwaScore"
 
+
   # Run unit tests for aio/aio-builds-setup
   travisFoldStart "test.aio.aio-builds-setup"
     ./aio-builds-setup/scripts/test.sh

From dca50deae473aa1d59b7d57a4014b75d67a84053 Mon Sep 17 00:00:00 2001
From: Trotyl <trotyl@qq.com>
Date: Wed, 9 Aug 2017 15:18:05 +0800
Subject: [PATCH 10/83] docs(core): deprecate ReflectiveInjector

closes #18598
---
 packages/core/src/di/reflective_injector.ts | 4 +---
 tools/public_api_guard/core/core.d.ts       | 2 +-
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/core/src/di/reflective_injector.ts b/packages/core/src/di/reflective_injector.ts
index 2dd381b657..5e7e0a481c 100644
--- a/packages/core/src/di/reflective_injector.ts
+++ b/packages/core/src/di/reflective_injector.ts
@@ -13,8 +13,6 @@ import {cyclicDependencyError, instantiationError, noProviderError, outOfBoundsE
 import {ReflectiveKey} from './reflective_key';
 import {ReflectiveDependency, ResolvedReflectiveFactory, ResolvedReflectiveProvider, resolveReflectiveProviders} from './reflective_provider';
 
-
-
 // Threshold for the dynamic version
 const UNDEFINED = new Object();
 
@@ -51,7 +49,7 @@ const UNDEFINED = new Object();
  * Notice, we don't use the `new` operator because we explicitly want to have the `Injector`
  * resolve all of the object's dependencies automatically.
  *
- * @stable
+ * @deprecated from v5 - slow and brings in a lot of code, Use `Injector.create` instead.
  */
 export abstract class ReflectiveInjector implements Injector {
   /**
diff --git a/tools/public_api_guard/core/core.d.ts b/tools/public_api_guard/core/core.d.ts
index 2487babe7c..936b0a0a58 100644
--- a/tools/public_api_guard/core/core.d.ts
+++ b/tools/public_api_guard/core/core.d.ts
@@ -759,7 +759,7 @@ export declare class QueryList<T> {
     toString(): string;
 }
 
-/** @stable */
+/** @deprecated */
 export declare abstract class ReflectiveInjector implements Injector {
     readonly abstract parent: Injector | null;
     abstract createChildFromResolved(providers: ResolvedReflectiveProvider[]): ReflectiveInjector;

From ff5c58be6b843bc8f79613dbefc5e4951c125f3d Mon Sep 17 00:00:00 2001
From: Kara <kara@users.noreply.github.com>
Date: Wed, 9 Aug 2017 15:41:53 -0700
Subject: [PATCH 11/83] feat(forms): add default updateOn values for groups and
 arrays (#18536)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This commit adds support for setting default `updateOn` values
in `FormGroups` and `FormArrays`. If you set `updateOn` to
’blur’` at the group level, all child controls will default to `’blur’`,
unless the child has explicitly specified a different `updateOn` value.

```
const c = new FormGroup({
   one: new FormControl()
}, {updateOn: blur});
```

 It's worth noting that parent groups will always update their value and
validity immediately upon value/validity updates from children. In other
words, if a group is set to update on blur and its children are individually
set to update on change, the group will still update on change with its
children; its default value will simply not be used.
---
 .../form_group_directive.ts                   |   2 +-
 packages/forms/src/directives/shared.ts       |   6 +-
 packages/forms/src/model.ts                   |  54 ++++-
 packages/forms/test/form_control_spec.ts      |  73 ++++++-
 .../forms/test/reactive_integration_spec.ts   | 187 +++++++++++++++++-
 tools/public_api_guard/forms/forms.d.ts       |   1 +
 6 files changed, 302 insertions(+), 21 deletions(-)

diff --git a/packages/forms/src/directives/reactive_directives/form_group_directive.ts b/packages/forms/src/directives/reactive_directives/form_group_directive.ts
index 15d08eeab3..8598d083ae 100644
--- a/packages/forms/src/directives/reactive_directives/form_group_directive.ts
+++ b/packages/forms/src/directives/reactive_directives/form_group_directive.ts
@@ -150,7 +150,7 @@ export class FormGroupDirective extends ControlContainer implements Form,
   _syncPendingControls() {
     this.form._syncPendingControls();
     this.directives.forEach(dir => {
-      if (dir.control._updateOn === 'submit') {
+      if (dir.control.updateOn === 'submit') {
         dir.viewToModelUpdate(dir.control._pendingValue);
       }
     });
diff --git a/packages/forms/src/directives/shared.ts b/packages/forms/src/directives/shared.ts
index 428f502743..50651fe55e 100644
--- a/packages/forms/src/directives/shared.ts
+++ b/packages/forms/src/directives/shared.ts
@@ -84,7 +84,7 @@ function setUpViewChangePipeline(control: FormControl, dir: NgControl): void {
     control._pendingValue = newValue;
     control._pendingDirty = true;
 
-    if (control._updateOn === 'change') updateControl(control, dir);
+    if (control.updateOn === 'change') updateControl(control, dir);
   });
 }
 
@@ -92,8 +92,8 @@ function setUpBlurPipeline(control: FormControl, dir: NgControl): void {
   dir.valueAccessor !.registerOnTouched(() => {
     control._pendingTouched = true;
 
-    if (control._updateOn === 'blur') updateControl(control, dir);
-    if (control._updateOn !== 'submit') control.markAsTouched();
+    if (control.updateOn === 'blur') updateControl(control, dir);
+    if (control.updateOn !== 'submit') control.markAsTouched();
   });
 }
 
diff --git a/packages/forms/src/model.ts b/packages/forms/src/model.ts
index b0d1e64058..acec83c417 100644
--- a/packages/forms/src/model.ts
+++ b/packages/forms/src/model.ts
@@ -118,6 +118,9 @@ export abstract class AbstractControl {
   /** @internal */
   _onCollectionChange = () => {};
 
+  /** @internal */
+  _updateOn: FormHooks;
+
   private _valueChanges: EventEmitter<any>;
   private _statusChanges: EventEmitter<any>;
   private _status: string;
@@ -242,6 +245,15 @@ export abstract class AbstractControl {
    */
   get statusChanges(): Observable<any> { return this._statusChanges; }
 
+  /**
+   * Returns the update strategy of the `AbstractControl` (i.e.
+   * the event on which the control will update itself).
+   * Possible values: `'change'` (default) | `'blur'` | `'submit'`
+   */
+  get updateOn(): FormHooks {
+    return this._updateOn ? this._updateOn : (this.parent ? this.parent.updateOn : 'change');
+  }
+
   /**
    * Sets the synchronous validators that are active on this control.  Calling
    * this will overwrite any existing sync validators.
@@ -624,6 +636,13 @@ export abstract class AbstractControl {
 
   /** @internal */
   _registerOnCollectionChange(fn: () => void): void { this._onCollectionChange = fn; }
+
+  /** @internal */
+  _setUpdateStrategy(opts?: ValidatorFn|ValidatorFn[]|AbstractControlOptions|null): void {
+    if (isOptionsObj(opts) && (opts as AbstractControlOptions).updateOn != null) {
+      this._updateOn = (opts as AbstractControlOptions).updateOn !;
+    }
+  }
 }
 
 /**
@@ -697,9 +716,6 @@ export class FormControl extends AbstractControl {
   /** @internal */
   _onChange: Function[] = [];
 
-  /** @internal */
-  _updateOn: FormHooks = 'change';
-
   /** @internal */
   _pendingValue: any;
 
@@ -841,7 +857,7 @@ export class FormControl extends AbstractControl {
 
   /** @internal */
   _syncPendingControls(): boolean {
-    if (this._updateOn === 'submit') {
+    if (this.updateOn === 'submit') {
       this.setValue(this._pendingValue, {onlySelf: true, emitModelToViewChange: false});
       if (this._pendingDirty) this.markAsDirty();
       if (this._pendingTouched) this.markAsTouched();
@@ -859,12 +875,6 @@ export class FormControl extends AbstractControl {
       this._value = this._pendingValue = formState;
     }
   }
-
-  private _setUpdateStrategy(opts?: ValidatorFn|ValidatorFn[]|AbstractControlOptions|null): void {
-    if (isOptionsObj(opts) && (opts as AbstractControlOptions).updateOn != null) {
-      this._updateOn = (opts as AbstractControlOptions).updateOn !;
-    }
-  }
 }
 
 /**
@@ -925,6 +935,17 @@ export class FormControl extends AbstractControl {
  * }, {validators: passwordMatchValidator, asyncValidators: otherValidator});
  * ```
  *
+ * The options object can also be used to set a default value for each child
+ * control's `updateOn` property. If you set `updateOn` to `'blur'` at the
+ * group level, all child controls will default to 'blur', unless the child
+ * has explicitly specified a different `updateOn` value.
+ *
+ * ```ts
+ * const c = new FormGroup({
+ *    one: new FormControl()
+ * }, {updateOn: 'blur'});
+ * ```
+ *
  * * **npm package**: `@angular/forms`
  *
  * @stable
@@ -938,6 +959,7 @@ export class FormGroup extends AbstractControl {
         coerceToValidator(validatorOrOpts),
         coerceToAsyncValidator(asyncValidator, validatorOrOpts));
     this._initObservables();
+    this._setUpdateStrategy(validatorOrOpts);
     this._setUpControls();
     this.updateValueAndValidity({onlySelf: true, emitEvent: false});
   }
@@ -1242,6 +1264,17 @@ export class FormGroup extends AbstractControl {
  * ], {validators: myValidator, asyncValidators: myAsyncValidator});
  * ```
  *
+ * The options object can also be used to set a default value for each child
+ * control's `updateOn` property. If you set `updateOn` to `'blur'` at the
+ * array level, all child controls will default to 'blur', unless the child
+ * has explicitly specified a different `updateOn` value.
+ *
+ * ```ts
+ * const c = new FormArray([
+ *    new FormControl()
+ * ], {updateOn: 'blur'});
+ * ```
+ *
  * ### Adding or removing controls
  *
  * To change the controls in the array, use the `push`, `insert`, or `removeAt` methods
@@ -1263,6 +1296,7 @@ export class FormArray extends AbstractControl {
         coerceToValidator(validatorOrOpts),
         coerceToAsyncValidator(asyncValidator, validatorOrOpts));
     this._initObservables();
+    this._setUpdateStrategy(validatorOrOpts);
     this._setUpControls();
     this.updateValueAndValidity({onlySelf: true, emitEvent: false});
   }
diff --git a/packages/forms/test/form_control_spec.ts b/packages/forms/test/form_control_spec.ts
index a424a5619a..cd3d1fe07b 100644
--- a/packages/forms/test/form_control_spec.ts
+++ b/packages/forms/test/form_control_spec.ts
@@ -80,17 +80,84 @@ export function main() {
 
       it('should default to on change', () => {
         const c = new FormControl('');
-        expect(c._updateOn).toEqual('change');
+        expect(c.updateOn).toEqual('change');
       });
 
       it('should default to on change with an options obj', () => {
         const c = new FormControl('', {validators: Validators.required});
-        expect(c._updateOn).toEqual('change');
+        expect(c.updateOn).toEqual('change');
       });
 
       it('should set updateOn when updating on blur', () => {
         const c = new FormControl('', {updateOn: 'blur'});
-        expect(c._updateOn).toEqual('blur');
+        expect(c.updateOn).toEqual('blur');
+      });
+
+      describe('in groups and arrays', () => {
+        it('should default to group updateOn when not set in control', () => {
+          const g =
+              new FormGroup({one: new FormControl(), two: new FormControl()}, {updateOn: 'blur'});
+
+          expect(g.get('one') !.updateOn).toEqual('blur');
+          expect(g.get('two') !.updateOn).toEqual('blur');
+        });
+
+        it('should default to array updateOn when not set in control', () => {
+          const a = new FormArray([new FormControl(), new FormControl()], {updateOn: 'blur'});
+
+          expect(a.get([0]) !.updateOn).toEqual('blur');
+          expect(a.get([1]) !.updateOn).toEqual('blur');
+        });
+
+        it('should set updateOn with nested groups', () => {
+          const g = new FormGroup(
+              {
+                group: new FormGroup({one: new FormControl(), two: new FormControl()}),
+              },
+              {updateOn: 'blur'});
+
+          expect(g.get('group.one') !.updateOn).toEqual('blur');
+          expect(g.get('group.two') !.updateOn).toEqual('blur');
+          expect(g.get('group') !.updateOn).toEqual('blur');
+        });
+
+        it('should set updateOn with nested arrays', () => {
+          const g = new FormGroup(
+              {
+                arr: new FormArray([new FormControl(), new FormControl()]),
+              },
+              {updateOn: 'blur'});
+
+          expect(g.get(['arr', 0]) !.updateOn).toEqual('blur');
+          expect(g.get(['arr', 1]) !.updateOn).toEqual('blur');
+          expect(g.get('arr') !.updateOn).toEqual('blur');
+        });
+
+        it('should allow control updateOn to override group updateOn', () => {
+          const g = new FormGroup(
+              {one: new FormControl('', {updateOn: 'change'}), two: new FormControl()},
+              {updateOn: 'blur'});
+
+          expect(g.get('one') !.updateOn).toEqual('change');
+          expect(g.get('two') !.updateOn).toEqual('blur');
+        });
+
+        it('should set updateOn with complex setup', () => {
+          const g = new FormGroup({
+            group: new FormGroup(
+                {one: new FormControl('', {updateOn: 'change'}), two: new FormControl()},
+                {updateOn: 'blur'}),
+            groupTwo: new FormGroup({one: new FormControl()}, {updateOn: 'submit'}),
+            three: new FormControl()
+          });
+
+          expect(g.get('group.one') !.updateOn).toEqual('change');
+          expect(g.get('group.two') !.updateOn).toEqual('blur');
+          expect(g.get('groupTwo.one') !.updateOn).toEqual('submit');
+          expect(g.get('three') !.updateOn).toEqual('change');
+        });
+
+
       });
 
     });
diff --git a/packages/forms/test/reactive_integration_spec.ts b/packages/forms/test/reactive_integration_spec.ts
index 4db317ca6e..a37ea8f458 100644
--- a/packages/forms/test/reactive_integration_spec.ts
+++ b/packages/forms/test/reactive_integration_spec.ts
@@ -931,7 +931,6 @@ export function main() {
           sub.unsubscribe();
         });
 
-
         it('should mark as pristine properly if pending dirty', () => {
           const fixture = initTest(FormControlComp);
           const control = new FormControl('', {updateOn: 'blur'});
@@ -955,6 +954,94 @@ export function main() {
           expect(control.dirty).toBe(false, 'Expected pending dirty value to reset.');
         });
 
+        it('should update on blur with group updateOn', () => {
+          const fixture = initTest(FormGroupComp);
+          const control = new FormControl('', Validators.required);
+          const formGroup = new FormGroup({login: control}, {updateOn: 'blur'});
+          fixture.componentInstance.form = formGroup;
+          fixture.detectChanges();
+
+          const input = fixture.debugElement.query(By.css('input')).nativeElement;
+          input.value = 'Nancy';
+          dispatchEvent(input, 'input');
+          fixture.detectChanges();
+
+          expect(control.value).toEqual('', 'Expected value to remain unchanged until blur.');
+          expect(control.valid).toBe(false, 'Expected no validation to occur until blur.');
+
+          dispatchEvent(input, 'blur');
+          fixture.detectChanges();
+
+          expect(control.value)
+              .toEqual('Nancy', 'Expected value to change once control is blurred.');
+          expect(control.valid).toBe(true, 'Expected validation to run once control is blurred.');
+
+        });
+
+        it('should update on blur with array updateOn', () => {
+          const fixture = initTest(FormArrayComp);
+          const control = new FormControl('', Validators.required);
+          const cityArray = new FormArray([control], {updateOn: 'blur'});
+          const formGroup = new FormGroup({cities: cityArray});
+          fixture.componentInstance.form = formGroup;
+          fixture.componentInstance.cityArray = cityArray;
+          fixture.detectChanges();
+
+          const input = fixture.debugElement.query(By.css('input')).nativeElement;
+          input.value = 'Nancy';
+          dispatchEvent(input, 'input');
+          fixture.detectChanges();
+
+          expect(control.value).toEqual('', 'Expected value to remain unchanged until blur.');
+          expect(control.valid).toBe(false, 'Expected no validation to occur until blur.');
+
+          dispatchEvent(input, 'blur');
+          fixture.detectChanges();
+
+          expect(control.value)
+              .toEqual('Nancy', 'Expected value to change once control is blurred.');
+          expect(control.valid).toBe(true, 'Expected validation to run once control is blurred.');
+
+        });
+
+
+        it('should allow child control updateOn blur to override group updateOn', () => {
+          const fixture = initTest(NestedFormGroupComp);
+          const loginControl =
+              new FormControl('', {validators: Validators.required, updateOn: 'change'});
+          const passwordControl = new FormControl('', Validators.required);
+          const formGroup = new FormGroup(
+              {signin: new FormGroup({login: loginControl, password: passwordControl})},
+              {updateOn: 'blur'});
+          fixture.componentInstance.form = formGroup;
+          fixture.detectChanges();
+
+          const [loginInput, passwordInput] = fixture.debugElement.queryAll(By.css('input'));
+          loginInput.nativeElement.value = 'Nancy';
+          dispatchEvent(loginInput.nativeElement, 'input');
+          fixture.detectChanges();
+
+          expect(loginControl.value).toEqual('Nancy', 'Expected value change on input.');
+          expect(loginControl.valid).toBe(true, 'Expected validation to run on input.');
+
+          passwordInput.nativeElement.value = 'Carson';
+          dispatchEvent(passwordInput.nativeElement, 'input');
+          fixture.detectChanges();
+
+          expect(passwordControl.value)
+              .toEqual('', 'Expected value to remain unchanged until blur.');
+          expect(passwordControl.valid).toBe(false, 'Expected no validation to occur until blur.');
+
+          dispatchEvent(passwordInput.nativeElement, 'blur');
+          fixture.detectChanges();
+
+          expect(passwordControl.value)
+              .toEqual('Carson', 'Expected value to change once control is blurred.');
+          expect(passwordControl.valid)
+              .toBe(true, 'Expected validation to run once control is blurred.');
+        });
+
+
       });
 
       describe('on submit', () => {
@@ -1193,7 +1280,6 @@ export function main() {
 
         });
 
-
         it('should mark as untouched properly if pending touched', () => {
           const fixture = initTest(FormGroupComp);
           const formGroup = new FormGroup({login: new FormControl('', {updateOn: 'submit'})});
@@ -1216,6 +1302,99 @@ export function main() {
           expect(formGroup.touched).toBe(false, 'Expected touched to stay false on submit.');
         });
 
+        it('should update on submit with group updateOn', () => {
+          const fixture = initTest(FormGroupComp);
+          const control = new FormControl('', Validators.required);
+          const formGroup = new FormGroup({login: control}, {updateOn: 'submit'});
+          fixture.componentInstance.form = formGroup;
+          fixture.detectChanges();
+
+          const input = fixture.debugElement.query(By.css('input')).nativeElement;
+          input.value = 'Nancy';
+          dispatchEvent(input, 'input');
+          fixture.detectChanges();
+
+          expect(control.value).toEqual('', 'Expected value to remain unchanged until submit.');
+          expect(control.valid).toBe(false, 'Expected no validation to occur until submit.');
+
+          dispatchEvent(input, 'blur');
+          fixture.detectChanges();
+
+          expect(control.value).toEqual('', 'Expected value to remain unchanged until submit.');
+          expect(control.valid).toBe(false, 'Expected no validation to occur until submit.');
+
+          const form = fixture.debugElement.query(By.css('form')).nativeElement;
+          dispatchEvent(form, 'submit');
+          fixture.detectChanges();
+
+          expect(control.value).toEqual('Nancy', 'Expected value to change on submit.');
+          expect(control.valid).toBe(true, 'Expected validation to run on submit.');
+
+        });
+
+        it('should update on submit with array updateOn', () => {
+          const fixture = initTest(FormArrayComp);
+          const control = new FormControl('', Validators.required);
+          const cityArray = new FormArray([control], {updateOn: 'submit'});
+          const formGroup = new FormGroup({cities: cityArray});
+          fixture.componentInstance.form = formGroup;
+          fixture.componentInstance.cityArray = cityArray;
+          fixture.detectChanges();
+
+          const input = fixture.debugElement.query(By.css('input')).nativeElement;
+          input.value = 'Nancy';
+          dispatchEvent(input, 'input');
+          fixture.detectChanges();
+
+          expect(control.value).toEqual('', 'Expected value to remain unchanged until submit.');
+          expect(control.valid).toBe(false, 'Expected no validation to occur until submit.');
+
+
+          const form = fixture.debugElement.query(By.css('form')).nativeElement;
+          dispatchEvent(form, 'submit');
+          fixture.detectChanges();
+
+          expect(control.value).toEqual('Nancy', 'Expected value to change once control on submit');
+          expect(control.valid).toBe(true, 'Expected validation to run on submit.');
+
+        });
+
+        it('should allow child control updateOn submit to override group updateOn', () => {
+          const fixture = initTest(NestedFormGroupComp);
+          const loginControl =
+              new FormControl('', {validators: Validators.required, updateOn: 'change'});
+          const passwordControl = new FormControl('', Validators.required);
+          const formGroup = new FormGroup(
+              {signin: new FormGroup({login: loginControl, password: passwordControl})},
+              {updateOn: 'submit'});
+          fixture.componentInstance.form = formGroup;
+          fixture.detectChanges();
+
+          const [loginInput, passwordInput] = fixture.debugElement.queryAll(By.css('input'));
+          loginInput.nativeElement.value = 'Nancy';
+          dispatchEvent(loginInput.nativeElement, 'input');
+          fixture.detectChanges();
+
+          expect(loginControl.value).toEqual('Nancy', 'Expected value change on input.');
+          expect(loginControl.valid).toBe(true, 'Expected validation to run on input.');
+
+          passwordInput.nativeElement.value = 'Carson';
+          dispatchEvent(passwordInput.nativeElement, 'input');
+          fixture.detectChanges();
+
+          expect(passwordControl.value)
+              .toEqual('', 'Expected value to remain unchanged until submit.');
+          expect(passwordControl.valid)
+              .toBe(false, 'Expected no validation to occur until submit.');
+
+          const form = fixture.debugElement.query(By.css('form')).nativeElement;
+          dispatchEvent(form, 'submit');
+          fixture.detectChanges();
+
+          expect(passwordControl.value).toEqual('Carson', 'Expected value to change on submit.');
+          expect(passwordControl.valid).toBe(true, 'Expected validation to run on submit.');
+        });
+
       });
 
     });
@@ -2008,13 +2187,13 @@ class NestedFormGroupComp {
 @Component({
   selector: 'form-array-comp',
   template: `
-    <div [formGroup]="form">
+    <form [formGroup]="form">
       <div formArrayName="cities">
         <div *ngFor="let city of cityArray.controls; let i=index">
           <input [formControlName]="i">
         </div>
       </div>
-     </div>`
+     </form>`
 })
 class FormArrayComp {
   form: FormGroup;
diff --git a/tools/public_api_guard/forms/forms.d.ts b/tools/public_api_guard/forms/forms.d.ts
index e82c9caf13..e5d27c631f 100644
--- a/tools/public_api_guard/forms/forms.d.ts
+++ b/tools/public_api_guard/forms/forms.d.ts
@@ -14,6 +14,7 @@ export declare abstract class AbstractControl {
     readonly statusChanges: Observable<any>;
     readonly touched: boolean;
     readonly untouched: boolean;
+    readonly updateOn: FormHooks;
     readonly valid: boolean;
     validator: ValidatorFn | null;
     readonly value: any;

From f0ec31e47f343283335046a8af1ef5f44abc34c0 Mon Sep 17 00:00:00 2001
From: Victor Berchet <victor@suumit.com>
Date: Wed, 9 Aug 2017 16:04:57 -0700
Subject: [PATCH 12/83] release: cut the 5.0.0-beta.3 release

---
 package.json                       | 2 +-
 packages/compiler-cli/package.json | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 41e326ee97..6801b85669 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "angular-srcs",
-  "version": "5.0.0-beta.2",
+  "version": "5.0.0-beta.3",
   "private": true,
   "branchPattern": "2.0.*",
   "description": "Angular - a web framework for modern web apps",
diff --git a/packages/compiler-cli/package.json b/packages/compiler-cli/package.json
index ef1ce4b573..67d7093596 100644
--- a/packages/compiler-cli/package.json
+++ b/packages/compiler-cli/package.json
@@ -9,7 +9,7 @@
     "ng-xi18n": "./src/extract_i18n.js"
   },
   "dependencies": {
-    "@angular/tsc-wrapped": "5.0.0-beta.2",
+    "@angular/tsc-wrapped": "5.0.0-beta.3",
     "reflect-metadata": "^0.1.2",
     "minimist": "^1.2.0"
   },

From cea02414b0302b9e3f5f43f2b3f05c03f5206238 Mon Sep 17 00:00:00 2001
From: Victor Berchet <victor@suumit.com>
Date: Wed, 9 Aug 2017 16:07:37 -0700
Subject: [PATCH 13/83] docs: add changelog for 5.0.0-beta.3

---
 CHANGELOG.md | 67 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 67 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b46f8db760..c633364927 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,70 @@
+<a name="5.0.0-beta.3"></a>
+# [5.0.0-beta.3](https://github.com/angular/angular/compare/5.0.0-beta.2...5.0.0-beta.3) (2017-08-09)
+
+
+### Bug Fixes
+
+* **animations:** revert container/queried animations accordingly during cancel ([#18516](https://github.com/angular/angular/issues/18516)) ([c0c03dc](https://github.com/angular/angular/commit/c0c03dc))
+* **animations:** support persisting dynamic styles within animation states ([#18468](https://github.com/angular/angular/issues/18468)) ([05472cb](https://github.com/angular/angular/commit/05472cb)), closes [#18423](https://github.com/angular/angular/issues/18423) [#17505](https://github.com/angular/angular/issues/17505)
+* **benchpress:** compile cleanly with TS 2.4 ([#18455](https://github.com/angular/angular/issues/18455)) ([e25b3dd](https://github.com/angular/angular/commit/e25b3dd))
+* **common:** don't recreate view when context shape doesn't change ([#18277](https://github.com/angular/angular/issues/18277)) ([685cc26](https://github.com/angular/angular/commit/685cc26)), closes [#13407](https://github.com/angular/angular/issues/13407)
+* **compiler:** cleanly compile with TypeScript 2.4 ([#18456](https://github.com/angular/angular/issues/18456)) ([7c47b62](https://github.com/angular/angular/commit/7c47b62))
+* **compiler:** ignore [@import](https://github.com/import) in multi-line css ([#18452](https://github.com/angular/angular/issues/18452)) ([1dca575](https://github.com/angular/angular/commit/1dca575)), closes [#18038](https://github.com/angular/angular/issues/18038)
+* **compiler-cli:** disable buggy expression lowering ([#18513](https://github.com/angular/angular/issues/18513)) ([ca695e0](https://github.com/angular/angular/commit/ca695e0))
+* **compiler-cli:** fix and re-enable expression lowering ([#18570](https://github.com/angular/angular/issues/18570)) ([6f2038c](https://github.com/angular/angular/commit/6f2038c)), closes [#18388](https://github.com/angular/angular/issues/18388)
+* **compiler-cli:** modified ngc to throw all errors, not just syntax ([#18388](https://github.com/angular/angular/issues/18388)) ([5651e4a](https://github.com/angular/angular/commit/5651e4a))
+* **compiler-cli:** remove minimist dependency of compiler-cli/index ([#18532](https://github.com/angular/angular/issues/18532)) ([5b7432b](https://github.com/angular/angular/commit/5b7432b))
+* **core:** fix platform-browser-dynamic ([#18576](https://github.com/angular/angular/issues/18576)) ([f0a5501](https://github.com/angular/angular/commit/f0a5501))
+* **core:** forbid destroyed views to be inserted or moved in VC ([#18568](https://github.com/angular/angular/issues/18568)) ([e54bd59](https://github.com/angular/angular/commit/e54bd59)), closes [#17780](https://github.com/angular/angular/issues/17780)
+
+### Features
+
+* **core:** Create StaticInjector which does not depend on Reflect polyfill. ([d9d00bd](https://github.com/angular/angular/commit/d9d00bd))
+* **forms:** add default updateOn values for groups and arrays ([#18536](https://github.com/angular/angular/issues/18536)) ([ff5c58b](https://github.com/angular/angular/commit/ff5c58b))
+* **forms:** add updateOn blur option to FormControls ([#18408](https://github.com/angular/angular/issues/18408)) ([333a708](https://github.com/angular/angular/commit/333a708)), closes [#7113](https://github.com/angular/angular/issues/7113)
+* **forms:** add updateOn submit option to FormControls ([#18514](https://github.com/angular/angular/issues/18514)) ([f69561b](https://github.com/angular/angular/commit/f69561b))
+
+### Performance Improvements
+
+* switch angular to use StaticInjector instead of ReflectiveInjector ([fcadbf4](https://github.com/angular/angular/commit/fcadbf4)), closes [#18496](https://github.com/angular/angular/issues/18496)
+
+
+### BREAKING CHANGES
+
+* `platformXXXX()` no longer accepts providers which depend on reflection.
+Specifically the method signature when from `Provider[]` to
+`StaticProvider[]`.
+
+Example:
+Before:
+```
+[
+  MyClass,
+  {provide: ClassA, useClass: SubClassA}
+]
+
+```
+
+After:
+```
+[
+  {provide: MyClass, deps: [Dep1,...]},
+  {provide: ClassA, useClass: SubClassA, deps: [Dep1,...]}
+]
+```
+
+NOTE: This only applies to platform creation and providers for the JIT
+compiler. It does not apply to `@Component` or `@NgModule` provides
+declarations.
+
+Benchpress note: Previously Benchpress also supported reflective
+provides, which now require static providers.
+
+DEPRECATION:
+
+- `ReflectiveInjector` is now deprecated as it will be remove. Use
+  `Injector.create` as a replacement.
+
 <a name="5.0.0-beta.2"></a>
 # [5.0.0-beta.2](https://github.com/angular/angular/compare/5.0.0-beta.1...5.0.0-beta.2) (2017-08-02)
 

From 4d523fda98ff007a28ae110475dfc6aa017c6b72 Mon Sep 17 00:00:00 2001
From: Georgios Kalpakas <kalpakas.g@gmail.com>
Date: Thu, 10 Aug 2017 03:54:10 +0300
Subject: [PATCH 14/83] fix(aio): fix compilation error by using the correct
 type for `providers`

---
 aio/content/examples/i18n/src/app/i18n-providers.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/aio/content/examples/i18n/src/app/i18n-providers.ts b/aio/content/examples/i18n/src/app/i18n-providers.ts
index 0e820bbcfd..3c74d0e8e0 100644
--- a/aio/content/examples/i18n/src/app/i18n-providers.ts
+++ b/aio/content/examples/i18n/src/app/i18n-providers.ts
@@ -1,15 +1,15 @@
 // #docplaster
 // #docregion without-missing-translation
-import { TRANSLATIONS, TRANSLATIONS_FORMAT, LOCALE_ID, MissingTranslationStrategy } from '@angular/core';
+import { TRANSLATIONS, TRANSLATIONS_FORMAT, LOCALE_ID, MissingTranslationStrategy, StaticProvider } from '@angular/core';
 import { CompilerConfig } from '@angular/compiler';
 
-export function getTranslationProviders(): Promise<Object[]> {
+export function getTranslationProviders(): Promise<StaticProvider[]> {
 
   // Get the locale id from the global
   const locale = document['locale'] as string;
 
   // return no providers if fail to get translation file for locale
-  const noProviders: Object[] = [];
+  const noProviders: StaticProvider[] = [];
 
   // No locale or U.S. English: no translation providers
   if (!locale || locale === 'en-US') {

From 06faac8b5cb08cf838a39f2666ebf473f0f063ec Mon Sep 17 00:00:00 2001
From: Georgios Kalpakas <kalpakas.g@gmail.com>
Date: Thu, 3 Aug 2017 11:40:39 +0300
Subject: [PATCH 15/83] fix(aio): skip PWA test when redeploying non-public
 commit

---
 .../scripts-js/lib/upload-server/build-creator.ts  |  3 ++-
 .../lib/verify-setup/upload-server.e2e.ts          |  7 ++++---
 .../test/upload-server/build-creator.spec.ts       |  6 ++++--
 .../dockerbuild/scripts-js/tslint.json             |  2 +-
 .../docs/overview--http-status-codes.md            |  7 ++++---
 aio/scripts/deploy-preview.sh                      | 14 +++++++-------
 6 files changed, 22 insertions(+), 17 deletions(-)

diff --git a/aio/aio-builds-setup/dockerbuild/scripts-js/lib/upload-server/build-creator.ts b/aio/aio-builds-setup/dockerbuild/scripts-js/lib/upload-server/build-creator.ts
index 183bf9a196..cfb3ba616f 100644
--- a/aio/aio-builds-setup/dockerbuild/scripts-js/lib/upload-server/build-creator.ts
+++ b/aio/aio-builds-setup/dockerbuild/scripts-js/lib/upload-server/build-creator.ts
@@ -32,7 +32,8 @@ export class BuildCreator extends EventEmitter {
       then(() => Promise.all([this.exists(prDir), this.exists(shaDir)])).
       then(([prDirExisted, shaDirExisted]) => {
         if (shaDirExisted) {
-          throw new UploadError(409, `Request to overwrite existing directory: ${shaDir}`);
+          const publicOrNot = isPublic ? 'public' : 'non-public';
+          throw new UploadError(409, `Request to overwrite existing ${publicOrNot} directory: ${shaDir}`);
         }
 
         dirToRemoveOnError = prDirExisted ? shaDir : prDir;
diff --git a/aio/aio-builds-setup/dockerbuild/scripts-js/lib/verify-setup/upload-server.e2e.ts b/aio/aio-builds-setup/dockerbuild/scripts-js/lib/verify-setup/upload-server.e2e.ts
index 6191a495f4..002d93de3e 100644
--- a/aio/aio-builds-setup/dockerbuild/scripts-js/lib/verify-setup/upload-server.e2e.ts
+++ b/aio/aio-builds-setup/dockerbuild/scripts-js/lib/verify-setup/upload-server.e2e.ts
@@ -110,6 +110,7 @@ describe('upload-server (on HTTP)', () => {
       const authorizationHeader2 = isPublic ?
         authorizationHeader : `--header "Authorization: ${c.BV_verify_verifiedNotTrusted}"`;
       const cmdPrefix = curl('', `${authorizationHeader2} ${xFileHeader}`);
+      const overwriteRe = RegExp(`^Request to overwrite existing ${isPublic ? 'public' : 'non-public'} directory`);
 
 
       it('should not overwrite existing builds', done => {
@@ -120,7 +121,7 @@ describe('upload-server (on HTTP)', () => {
         expect(h.readBuildFile(pr, sha9, 'index.html', isPublic)).toBe('My content');
 
         h.runCmd(`${cmdPrefix} http://${host}/create-build/${pr}/${sha9}`).
-          then(h.verifyResponse(409, /^Request to overwrite existing directory/)).
+          then(h.verifyResponse(409, overwriteRe)).
           then(() => expect(h.readBuildFile(pr, sha9, 'index.html', isPublic)).toBe('My content')).
           then(done);
       });
@@ -141,7 +142,7 @@ describe('upload-server (on HTTP)', () => {
         expect(h.readBuildFile(pr, sha9, 'index.html', isPublic)).toBe('My content');
 
         h.runCmd(`${cmdPrefix} http://${host}/create-build/${pr}/${sha9Almost}`).
-          then(h.verifyResponse(409, /^Request to overwrite existing directory/)).
+          then(h.verifyResponse(409, overwriteRe)).
           then(() => expect(h.readBuildFile(pr, sha9, 'index.html', isPublic)).toBe('My content')).
           then(done);
       });
@@ -310,7 +311,7 @@ describe('upload-server (on HTTP)', () => {
           expect(h.buildExists(pr, sha0, isPublic)).toBe(false);
 
           uploadBuild(sha0).
-            then(h.verifyResponse(409, /^Request to overwrite existing directory/)).
+            then(h.verifyResponse(409, overwriteRe)).
             then(() => {
               checkPrVisibility(isPublic);
               expect(h.readBuildFile(pr, sha0, 'index.html', isPublic)).toContain(pr);
diff --git a/aio/aio-builds-setup/dockerbuild/scripts-js/test/upload-server/build-creator.spec.ts b/aio/aio-builds-setup/dockerbuild/scripts-js/test/upload-server/build-creator.spec.ts
index 6125205ba3..d5b1f91576 100644
--- a/aio/aio-builds-setup/dockerbuild/scripts-js/test/upload-server/build-creator.spec.ts
+++ b/aio/aio-builds-setup/dockerbuild/scripts-js/test/upload-server/build-creator.spec.ts
@@ -153,7 +153,8 @@ describe('BuildCreator', () => {
         it('should abort and skip further operations if the build does already exist', done => {
           existsValues[shaDir] = true;
           bc.create(pr, sha, archive, isPublic).catch(err => {
-            expectToBeUploadError(err, 409, `Request to overwrite existing directory: ${shaDir}`);
+            const publicOrNot = isPublic ? 'public' : 'non-public';
+            expectToBeUploadError(err, 409, `Request to overwrite existing ${publicOrNot} directory: ${shaDir}`);
             expect(shellMkdirSpy).not.toHaveBeenCalled();
             expect(bcExtractArchiveSpy).not.toHaveBeenCalled();
             expect(bcEmitSpy).not.toHaveBeenCalled();
@@ -169,7 +170,8 @@ describe('BuildCreator', () => {
           expect(bcExistsSpy(shaDir)).toBe(false);
 
           bc.create(pr, sha, archive, isPublic).catch(err => {
-            expectToBeUploadError(err, 409, `Request to overwrite existing directory: ${shaDir}`);
+            const publicOrNot = isPublic ? 'public' : 'non-public';
+            expectToBeUploadError(err, 409, `Request to overwrite existing ${publicOrNot} directory: ${shaDir}`);
             expect(shellMkdirSpy).not.toHaveBeenCalled();
             expect(bcExtractArchiveSpy).not.toHaveBeenCalled();
             expect(bcEmitSpy).not.toHaveBeenCalled();
diff --git a/aio/aio-builds-setup/dockerbuild/scripts-js/tslint.json b/aio/aio-builds-setup/dockerbuild/scripts-js/tslint.json
index d773f53668..59d3ff1d9f 100644
--- a/aio/aio-builds-setup/dockerbuild/scripts-js/tslint.json
+++ b/aio/aio-builds-setup/dockerbuild/scripts-js/tslint.json
@@ -6,7 +6,7 @@
     "interface-name": [true, "never-prefix"],
     "max-classes-per-file": [true, 4],
     "no-consecutive-blank-lines": [true, 2],
-    "no-console": false,
+    "no-console": [false],
     "no-namespace": [true, "allow-declarations"],
     "no-string-literal": false,
     "quotemark": [true, "single"],
diff --git a/aio/aio-builds-setup/docs/overview--http-status-codes.md b/aio/aio-builds-setup/docs/overview--http-status-codes.md
index 54b06f66e8..1a041ffbcf 100644
--- a/aio/aio-builds-setup/docs/overview--http-status-codes.md
+++ b/aio/aio-builds-setup/docs/overview--http-status-codes.md
@@ -46,8 +46,8 @@ with a bried explanation of what they mean:
   Request method other than POST.
 
 - **409 (Conflict)**:
-  Request to overwrite existing directory (e.g. deploy existing build or change PR visibility when
-  the destination directory does already exist).
+  Request to overwrite existing (public or non-public) directory (e.g. deploy existing build or
+  change PR visibility when the destination directory does already exist).
 
 - **413 (Payload Too Large)**:
   Payload larger than size specified in `AIO_UPLOAD_MAX_SIZE`.
@@ -71,7 +71,8 @@ with a bried explanation of what they mean:
   Request method other than POST.
 
 - **409 (Conflict)**:
-  Request to overwrite existing directory (i.e. directories for both visibilities exist).
+  Request to overwrite existing (public or non-public) directory (i.e. directories for both
+  visibilities exist).
   (Normally, this should not happen.)
 
 
diff --git a/aio/scripts/deploy-preview.sh b/aio/scripts/deploy-preview.sh
index 4afd49a5cf..e49bd99482 100755
--- a/aio/scripts/deploy-preview.sh
+++ b/aio/scripts/deploy-preview.sh
@@ -26,31 +26,31 @@ readonly relevantChangedFilesCount=$(git diff --name-only $TRAVIS_COMMIT_RANGE |
   fi
 
   # Build the app
-  if [ "$skipBuild" != "true" ]; then
+  if [[ "$skipBuild" != "true" ]]; then
     yarn build
   fi
   tar --create --gzip --directory "$INPUT_DIR" --file "$OUTPUT_FILE" .
   yarn payload-size
 
   # Deploy to staging
-  readonly httpCode=$(
+  readonly output=$(
     curl --include --location --request POST --silent --write-out "\nHTTP_CODE: %{http_code}\n" \
         --header "Authorization: Token $NGBUILDS_IO_KEY" --data-binary "@$OUTPUT_FILE" "$UPLOAD_URL" \
     | sed 's/\r\n/\n/' \
-    | tee /dev/fd/3 \
-    | tail -1 \
-    | sed 's/HTTP_CODE: //'
+    | tee /dev/fd/3
   )
+  readonly isHidden=$([[ `echo $output | grep 'non-public'` ]] && echo "true" || echo "")
+  readonly httpCode=$(echo "$output" | tail -1 | sed 's/HTTP_CODE: //')
 
   # Exit with an error if the request failed.
   # (Ignore 409 failures, which mean trying to re-deploy for the same PR/SHA.)
-  if [ $httpCode -lt 200 ] || ([ $httpCode -ge 400 ] && [ $httpCode -ne 409 ]); then
+  if [[ $httpCode -lt 200 ]] || ([[ $httpCode -ge 400 ]] && [[ $httpCode -ne 409 ]]); then
     exit 1
   fi
 
   # Run PWA-score tests (unless the deployment is not public yet;
   # i.e. it could not be automatically verified).
-  if [ $httpCode -ne 202 ]; then
+  if [[ $httpCode -ne 202 ]] && [[ "$isHidden" != "true" ]]; then
     yarn test-pwa-score -- "$DEPLOYED_URL" "$MIN_PWA_SCORE"
   fi
 )

From 679608db6543c2f9633e33841a6074548006fbe2 Mon Sep 17 00:00:00 2001
From: Victor Berchet <victor@suumit.com>
Date: Wed, 2 Aug 2017 11:20:07 -0700
Subject: [PATCH 16/83] refactor(compiler-cli): use the transformer based
 compiler by default

The source map does not currently work with the transformer pipeline.
It will be re-enabled after TypeScript 2.4 is made the min version.

To revert to the former compiler, use the `disableTransformerPipeline` in
tsconfig.json:

```
{
  "angularCompilerOptions": {
    "disableTransformerPipeline": true
  }
}
```
---
 integration/hello_world__closure/package.json |   2 +-
 integration/i18n/closure.conf                 |  30 ++++
 integration/i18n/e2e/app.e2e-spec.ts          |  10 ++
 integration/i18n/e2e/browser.config.json      |  15 ++
 integration/i18n/e2e/protractor.config.js     |  16 ++
 integration/i18n/e2e/tsconfig.json            |   8 +
 integration/i18n/package.json                 |  32 ++++
 integration/i18n/src/app.ts                   |  11 ++
 integration/i18n/src/hello-world.component.ts |   9 +
 integration/i18n/src/index.html               |  18 ++
 integration/i18n/src/main.ts                  |   4 +
 integration/i18n/tsconfig.json                |  30 ++++
 .../integrationtest/alt/src/bootstrap.ts      |  12 --
 .../integrationtest/test/basic_spec.ts        |  11 +-
 .../integrationtest/test/source_map_spec.ts   |   3 +-
 .../integrationtest/test/util_alt.ts          |  33 ----
 .../integrationtest/tsconfig-build-alt.json   |  32 ----
 .../integrationtest/tsconfig-build.json       |   4 +-
 packages/compiler-cli/package.json            |   3 +-
 .../src/diagnostics/expression_diagnostics.ts |   6 +-
 packages/compiler-cli/src/main.ts             |  24 ++-
 packages/compiler-cli/src/ngc.ts              |  34 +++-
 packages/compiler-cli/src/perform-compile.ts  |  60 +++----
 packages/compiler-cli/src/transformers/api.ts |  35 +++-
 .../src/transformers/lower_expressions.ts     |  22 ++-
 .../src/transformers/node_emitter.ts          |  32 ++--
 .../compiler-cli/src/transformers/program.ts  | 170 ++++++++++++------
 packages/compiler-cli/test/ngc_spec.ts        | 124 +++++++++++--
 .../test/transformers/node_emitter_spec.ts    |   6 +-
 .../integrationtest/package.json              |   2 +-
 scripts/ci/offline_compiler_test.sh           |   5 +-
 tools/ngc-wrapped/index.ts                    |  13 +-
 32 files changed, 569 insertions(+), 247 deletions(-)
 create mode 100644 integration/i18n/closure.conf
 create mode 100644 integration/i18n/e2e/app.e2e-spec.ts
 create mode 100644 integration/i18n/e2e/browser.config.json
 create mode 100644 integration/i18n/e2e/protractor.config.js
 create mode 100644 integration/i18n/e2e/tsconfig.json
 create mode 100644 integration/i18n/package.json
 create mode 100644 integration/i18n/src/app.ts
 create mode 100644 integration/i18n/src/hello-world.component.ts
 create mode 100644 integration/i18n/src/index.html
 create mode 100644 integration/i18n/src/main.ts
 create mode 100644 integration/i18n/tsconfig.json
 delete mode 100644 packages/compiler-cli/integrationtest/alt/src/bootstrap.ts
 delete mode 100644 packages/compiler-cli/integrationtest/test/util_alt.ts
 delete mode 100644 packages/compiler-cli/integrationtest/tsconfig-build-alt.json

diff --git a/integration/hello_world__closure/package.json b/integration/hello_world__closure/package.json
index b5cecce1de..14d555606d 100644
--- a/integration/hello_world__closure/package.json
+++ b/integration/hello_world__closure/package.json
@@ -13,7 +13,7 @@
     "@angular/tsc-wrapped": "file:../../dist/packages-dist/tsc-wrapped",
     "google-closure-compiler": "20170409.0.0",
     "rxjs": "5.3.1",
-    "typescript": "2.1.6",
+    "typescript": "~2.3.1",
     "zone.js": "0.8.6"
   },
   "devDependencies": {
diff --git a/integration/i18n/closure.conf b/integration/i18n/closure.conf
new file mode 100644
index 0000000000..8393a38b29
--- /dev/null
+++ b/integration/i18n/closure.conf
@@ -0,0 +1,30 @@
+--compilation_level=ADVANCED_OPTIMIZATIONS
+--language_out=ES5
+--js_output_file=dist/bundle.js
+--output_manifest=dist/manifest.MF
+--variable_renaming_report=dist/variable_renaming_report
+--property_renaming_report=dist/property_renaming_report
+--create_source_map=%outname%.map
+
+--warning_level=QUIET
+--dependency_mode=STRICT
+--rewrite_polyfills=false
+
+node_modules/zone.js/dist/zone_externs.js
+
+--js node_modules/rxjs/**.js
+--process_common_js_modules
+--module_resolution=node
+
+node_modules/@angular/core/@angular/core.js
+--js_module_root=node_modules/@angular/core
+node_modules/@angular/core/src/testability/testability.externs.js
+
+node_modules/@angular/common/@angular/common.js
+--js_module_root=node_modules/@angular/common
+
+node_modules/@angular/platform-browser/@angular/platform-browser.js
+--js_module_root=node_modules/@angular/platform-browser
+
+--js built/**.js
+--entry_point=built/src/main
diff --git a/integration/i18n/e2e/app.e2e-spec.ts b/integration/i18n/e2e/app.e2e-spec.ts
new file mode 100644
index 0000000000..afcc36025a
--- /dev/null
+++ b/integration/i18n/e2e/app.e2e-spec.ts
@@ -0,0 +1,10 @@
+import { browser, element, by } from 'protractor';
+
+describe('i18n E2E Tests', function () {
+  it('remove i18n attributes', function () {
+    browser.get('');
+    const div = element(by.css('div'));
+    expect(div.getAttribute('title')).not.toBe(null);
+    expect(div.getAttribute('i18n')).toBe(null);
+  });
+});
diff --git a/integration/i18n/e2e/browser.config.json b/integration/i18n/e2e/browser.config.json
new file mode 100644
index 0000000000..dcdae63008
--- /dev/null
+++ b/integration/i18n/e2e/browser.config.json
@@ -0,0 +1,15 @@
+{
+  "open": false,
+  "logLevel": "silent",
+  "port": 8080,
+  "server": {
+    "baseDir": "src",
+    "routes": {
+      "/dist": "dist",
+      "/node_modules": "node_modules"
+    },
+    "middleware": {
+      "0": null
+    }
+  }
+}
\ No newline at end of file
diff --git a/integration/i18n/e2e/protractor.config.js b/integration/i18n/e2e/protractor.config.js
new file mode 100644
index 0000000000..5bc4f6e640
--- /dev/null
+++ b/integration/i18n/e2e/protractor.config.js
@@ -0,0 +1,16 @@
+exports.config = {
+  specs: [
+    '../built/e2e/*.e2e-spec.js'
+  ],
+  capabilities: {
+    browserName: 'chrome',
+    chromeOptions: {
+      args: ['--no-sandbox'],
+      binary: process.env.CHROME_BIN,
+    }
+  },
+  directConnect: true,
+  baseUrl: 'http://localhost:8080/',
+  framework: 'jasmine',
+  useAllAngular2AppRoots: true
+};
diff --git a/integration/i18n/e2e/tsconfig.json b/integration/i18n/e2e/tsconfig.json
new file mode 100644
index 0000000000..e112859422
--- /dev/null
+++ b/integration/i18n/e2e/tsconfig.json
@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "outDir": "../built/e2e",
+    "types": ["jasmine"],
+    // TODO(alexeagle): was required for Protractor 4.0.11
+    "skipLibCheck": true
+  }
+}
\ No newline at end of file
diff --git a/integration/i18n/package.json b/integration/i18n/package.json
new file mode 100644
index 0000000000..14d555606d
--- /dev/null
+++ b/integration/i18n/package.json
@@ -0,0 +1,32 @@
+{
+  "name": "angular-integration",
+  "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/platform-browser": "file:../../dist/packages-dist/platform-browser",
+    "@angular/platform-server": "file:../../dist/packages-dist/platform-server",
+    "@angular/tsc-wrapped": "file:../../dist/packages-dist/tsc-wrapped",
+    "google-closure-compiler": "20170409.0.0",
+    "rxjs": "5.3.1",
+    "typescript": "~2.3.1",
+    "zone.js": "0.8.6"
+  },
+  "devDependencies": {
+    "@types/jasmine": "2.5.41",
+    "concurrently": "3.4.0",
+    "lite-server": "2.2.2",
+    "protractor": "file:../../node_modules/protractor"
+  },
+  "scripts": {
+    "closure": "java -jar node_modules/google-closure-compiler/compiler.jar --flagfile closure.conf",
+    "test": "ngc && yarn run closure && concurrently \"yarn run serve\" \"yarn run protractor\" --kill-others --success first",
+    "serve": "lite-server -c e2e/browser.config.json",
+    "preprotractor": "tsc -p e2e",
+    "protractor": "protractor e2e/protractor.config.js"
+  }
+}
\ No newline at end of file
diff --git a/integration/i18n/src/app.ts b/integration/i18n/src/app.ts
new file mode 100644
index 0000000000..31ecac712b
--- /dev/null
+++ b/integration/i18n/src/app.ts
@@ -0,0 +1,11 @@
+import {HelloWorldComponent} from './hello-world.component';
+
+import {NgModule} from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+
+@NgModule({
+  declarations: [HelloWorldComponent],
+  bootstrap: [HelloWorldComponent],
+  imports: [BrowserModule],
+})
+export class AppModule {}
diff --git a/integration/i18n/src/hello-world.component.ts b/integration/i18n/src/hello-world.component.ts
new file mode 100644
index 0000000000..5aabbddd93
--- /dev/null
+++ b/integration/i18n/src/hello-world.component.ts
@@ -0,0 +1,9 @@
+import {Component} from '@angular/core';
+
+@Component({
+  selector: 'hello-world-app',
+  template: `<div i18n="desc|meaning" title="i18n attribute should be removed">Hello {{ name }}!</div>`,
+})
+export class HelloWorldComponent {
+  name: string = 'world';
+}
diff --git a/integration/i18n/src/index.html b/integration/i18n/src/index.html
new file mode 100644
index 0000000000..ffbd2616e9
--- /dev/null
+++ b/integration/i18n/src/index.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <title>Hello World</title>
+  <base href="/">
+</head>
+
+<body>
+  <hello-world-app>Loading...</hello-world-app>
+
+  <script src="node_modules/zone.js/dist/zone.min.js"></script>
+  <script src="dist/bundle.js"></script>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/integration/i18n/src/main.ts b/integration/i18n/src/main.ts
new file mode 100644
index 0000000000..81d2aa7b15
--- /dev/null
+++ b/integration/i18n/src/main.ts
@@ -0,0 +1,4 @@
+import {platformBrowser} from '@angular/platform-browser';
+import {AppModuleNgFactory} from './app.ngfactory';
+
+platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);
diff --git a/integration/i18n/tsconfig.json b/integration/i18n/tsconfig.json
new file mode 100644
index 0000000000..34cc0b9fb2
--- /dev/null
+++ b/integration/i18n/tsconfig.json
@@ -0,0 +1,30 @@
+{
+  "angularCompilerOptions": {
+    "annotationsAs": "static fields",
+    "annotateForClosureCompiler": true,
+    "alwaysCompileGeneratedCode": true
+  },
+
+  "compilerOptions": {
+    "module": "es2015",
+    "moduleResolution": "node",
+    // TODO(i): strictNullChecks should turned on but are temporarily disabled due to #15432
+    "strictNullChecks": false,
+    "target": "es6",
+    "noImplicitAny": false,
+    "sourceMap": false,
+    "experimentalDecorators": true,
+    "outDir": "built",
+    "rootDir": ".",
+    "declaration": true,
+    "types": []
+  },
+
+  "exclude": [
+    "vendor",
+    "node_modules",
+    "built",
+    "dist",
+    "e2e"
+  ]
+}
\ No newline at end of file
diff --git a/packages/compiler-cli/integrationtest/alt/src/bootstrap.ts b/packages/compiler-cli/integrationtest/alt/src/bootstrap.ts
deleted file mode 100644
index d6d7aedc7f..0000000000
--- a/packages/compiler-cli/integrationtest/alt/src/bootstrap.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-/**
- * @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 {BasicComp} from '../../src/basic';
-import {MainModuleNgFactory} from './module.ngfactory';
-
-MainModuleNgFactory.create(null).instance.appRef.bootstrap(BasicComp);
diff --git a/packages/compiler-cli/integrationtest/test/basic_spec.ts b/packages/compiler-cli/integrationtest/test/basic_spec.ts
index e48e60074d..e9e7f0ac46 100644
--- a/packages/compiler-cli/integrationtest/test/basic_spec.ts
+++ b/packages/compiler-cli/integrationtest/test/basic_spec.ts
@@ -12,7 +12,6 @@ import * as path from 'path';
 import {MultipleComponentsMyComp} from '../src/a/multiple_components';
 import {BasicComp} from '../src/basic';
 import {createComponent} from './util';
-import {createComponentAlt} from './util_alt';
 
 describe('template codegen output', () => {
   const outDir = 'src';
@@ -37,9 +36,9 @@ describe('template codegen output', () => {
     expect(fs.readFileSync(dtsOutput, {encoding: 'utf-8'})).toContain('Basic');
   });
 
-  it('should write .ngfactory.ts for .d.ts inputs', () => {
+  it('should write .ngfactory.js for .d.ts inputs', () => {
     const factoryOutput =
-        path.join('node_modules', '@angular2-material', 'button', 'button.ngfactory.ts');
+        path.join('node_modules', '@angular2-material', 'button', 'button.ngfactory.js');
     expect(fs.existsSync(factoryOutput)).toBeTruthy();
   });
 
@@ -95,11 +94,5 @@ describe('template codegen output', () => {
       expect(containerElement.attributes['title']).toBe('käännä teksti');
       expect(containerElement.attributes['i18n-title']).toBeUndefined();
     });
-
-    it('should have removed i18n markup event without translations', () => {
-      const containerElement = createComponentAlt(BasicComp).debugElement.children[0];
-      expect(containerElement.attributes['title']).toBe('translate me');
-      expect(containerElement.attributes['i18n-title']).toBeUndefined();
-    });
   });
 });
diff --git a/packages/compiler-cli/integrationtest/test/source_map_spec.ts b/packages/compiler-cli/integrationtest/test/source_map_spec.ts
index 431cccc4dd..25b4dd7b1b 100644
--- a/packages/compiler-cli/integrationtest/test/source_map_spec.ts
+++ b/packages/compiler-cli/integrationtest/test/source_map_spec.ts
@@ -10,7 +10,8 @@ import './init';
 import {BindingErrorComp} from '../src/errors';
 import {createComponent} from './util';
 
-describe('source maps', () => {
+// TODO(tbosch): source maps does not currently work with the transformer pipeline
+xdescribe('source maps', () => {
   it('should report source location for binding errors', () => {
     const comp = createComponent(BindingErrorComp);
     let error: any;
diff --git a/packages/compiler-cli/integrationtest/test/util_alt.ts b/packages/compiler-cli/integrationtest/test/util_alt.ts
deleted file mode 100644
index 972dc03ac9..0000000000
--- a/packages/compiler-cli/integrationtest/test/util_alt.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-/**
- * @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 {NgModuleRef} from '@angular/core';
-import {ComponentFixture} from '@angular/core/testing';
-import {platformServerTesting} from '@angular/platform-server/testing';
-
-import {MainModuleNgFactory} from '../alt/src/module.ngfactory';
-import {MainModule} from '../src/module';
-
-let mainModuleRef: NgModuleRef<MainModule> = null !;
-beforeEach((done) => {
-  platformServerTesting().bootstrapModuleFactory(MainModuleNgFactory).then((moduleRef: any) => {
-    mainModuleRef = moduleRef;
-    done();
-  });
-});
-
-export function createModule(): NgModuleRef<MainModule> {
-  return mainModuleRef;
-}
-
-export function createComponentAlt<C>(comp: {new (...args: any[]): C}): ComponentFixture<C> {
-  const moduleRef = createModule();
-  const compRef =
-      moduleRef.componentFactoryResolver.resolveComponentFactory(comp).create(moduleRef.injector);
-  return new ComponentFixture(compRef, null, false);
-}
diff --git a/packages/compiler-cli/integrationtest/tsconfig-build-alt.json b/packages/compiler-cli/integrationtest/tsconfig-build-alt.json
deleted file mode 100644
index 2a1553a619..0000000000
--- a/packages/compiler-cli/integrationtest/tsconfig-build-alt.json
+++ /dev/null
@@ -1,32 +0,0 @@
-{
-  "angularCompilerOptions": {
-    // For TypeScript 1.8, we have to lay out generated files
-    // in the same source directory with your code.
-    "genDir": "./alt",
-    "debug": true,
-    "enableSummariesForJit": true,
-    "alwaysCompileGeneratedCode": true
-  },
-
-  "compilerOptions": {
-    "target": "es5",
-    "experimentalDecorators": true,
-    "noImplicitAny": true,
-    "strictNullChecks": true,
-    "skipLibCheck": true,
-    "moduleResolution": "node",
-    "rootDir": "",
-    "declaration": true,
-    "lib": ["es6", "dom"],
-    "baseUrl": ".",
-    // Prevent scanning up the directory tree for types
-    "typeRoots": ["node_modules/@types"],
-    "noUnusedLocals": true,
-    "sourceMap": true
-  },
-
-  "files": [
-    "src/module",
-    "alt/src/bootstrap"
-  ]
-}
diff --git a/packages/compiler-cli/integrationtest/tsconfig-build.json b/packages/compiler-cli/integrationtest/tsconfig-build.json
index 2928fa0a65..5c753f89ba 100644
--- a/packages/compiler-cli/integrationtest/tsconfig-build.json
+++ b/packages/compiler-cli/integrationtest/tsconfig-build.json
@@ -5,7 +5,9 @@
     "genDir": ".",
     "debug": true,
     "enableSummariesForJit": true,
-    "alwaysCompileGeneratedCode": true
+    "alwaysCompileGeneratedCode": true,
+    "locale": "fi",
+    "i18nFormat": "xlf"
   },
 
   "compilerOptions": {
diff --git a/packages/compiler-cli/package.json b/packages/compiler-cli/package.json
index 67d7093596..c11e9febf0 100644
--- a/packages/compiler-cli/package.json
+++ b/packages/compiler-cli/package.json
@@ -11,7 +11,8 @@
   "dependencies": {
     "@angular/tsc-wrapped": "5.0.0-beta.3",
     "reflect-metadata": "^0.1.2",
-    "minimist": "^1.2.0"
+    "minimist": "^1.2.0",
+    "tsickle": "^0.23.4"
   },
   "peerDependencies": {
     "typescript": "^2.0.2",
diff --git a/packages/compiler-cli/src/diagnostics/expression_diagnostics.ts b/packages/compiler-cli/src/diagnostics/expression_diagnostics.ts
index 3a60d67709..4bc0721c60 100644
--- a/packages/compiler-cli/src/diagnostics/expression_diagnostics.ts
+++ b/packages/compiler-cli/src/diagnostics/expression_diagnostics.ts
@@ -56,7 +56,7 @@ function getReferences(info: DiagnosticTemplateInfo): SymbolDeclaration[] {
         name: reference.name,
         kind: 'reference',
         type: type || info.query.getBuiltinType(BuiltinType.Any),
-        get definition() { return getDefintionOf(info, reference); }
+        get definition() { return getDefinitionOf(info, reference); }
       });
     }
   }
@@ -77,7 +77,7 @@ function getReferences(info: DiagnosticTemplateInfo): SymbolDeclaration[] {
   return result;
 }
 
-function getDefintionOf(info: DiagnosticTemplateInfo, ast: TemplateAst): Definition|undefined {
+function getDefinitionOf(info: DiagnosticTemplateInfo, ast: TemplateAst): Definition|undefined {
   if (info.fileName) {
     const templateOffset = info.offset;
     return [{
@@ -124,7 +124,7 @@ function getVarDeclarations(
         }
         result.push({
           name,
-          kind: 'variable', type, get definition() { return getDefintionOf(info, variable); }
+          kind: 'variable', type, get definition() { return getDefinitionOf(info, variable); }
         });
       }
     }
diff --git a/packages/compiler-cli/src/main.ts b/packages/compiler-cli/src/main.ts
index 3dc68977d9..9e4f171760 100644
--- a/packages/compiler-cli/src/main.ts
+++ b/packages/compiler-cli/src/main.ts
@@ -7,14 +7,19 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-
 // Must be imported first, because Angular decorators throw on load.
 import 'reflect-metadata';
 
 import * as ts from 'typescript';
 import * as tsc from '@angular/tsc-wrapped';
+import * as fs from 'fs';
+import * as path from 'path';
+import * as ngc from './ngc';
+
 import {isSyntaxError} from '@angular/compiler';
 
+import {readConfiguration} from './perform-compile';
+
 import {CodeGenerator} from './codegen';
 
 function codegen(
@@ -46,6 +51,19 @@ export function main(
 
 // CLI entry point
 if (require.main === module) {
-  const args = require('minimist')(process.argv.slice(2));
-  main(args).then((exitCode: number) => process.exit(exitCode));
+  const args = process.argv.slice(2);
+  const parsedArgs = require('minimist')(args);
+  const project = parsedArgs.p || parsedArgs.project || '.';
+
+  const projectDir = fs.lstatSync(project).isFile() ? path.dirname(project) : project;
+
+  // file names in tsconfig are resolved relative to this absolute path
+  const basePath = path.resolve(process.cwd(), projectDir);
+  const {ngOptions} = readConfiguration(project, basePath);
+
+  if (ngOptions.disableTransformerPipeline) {
+    main(parsedArgs).then((exitCode: number) => process.exit(exitCode));
+  } else {
+    process.exit(ngc.main(args, s => console.error(s)));
+  }
 }
diff --git a/packages/compiler-cli/src/ngc.ts b/packages/compiler-cli/src/ngc.ts
index 658ed31d6e..788b1f4cb1 100644
--- a/packages/compiler-cli/src/ngc.ts
+++ b/packages/compiler-cli/src/ngc.ts
@@ -9,11 +9,12 @@
 // Must be imported first, because Angular decorators throw on load.
 import 'reflect-metadata';
 
-import {isSyntaxError, syntaxError} from '@angular/compiler';
+import {isSyntaxError} from '@angular/compiler';
 import * as fs from 'fs';
 import * as path from 'path';
 
 import {performCompilation, readConfiguration, throwOnDiagnostics} from './perform-compile';
+import {CompilerOptions} from './transformers/api';
 
 export function main(
     args: string[], consoleError: (s: string) => void = console.error,
@@ -27,16 +28,41 @@ export function main(
     // file names in tsconfig are resolved relative to this absolute path
     const basePath = path.resolve(process.cwd(), projectDir);
     const {parsed, ngOptions} = readConfiguration(project, basePath, checkFunc);
-    return performCompilation(
-        basePath, parsed.fileNames, parsed.options, ngOptions, consoleError, checkFunc);
+
+    // CLI arguments can override the i18n options
+    const ngcOptions = mergeCommandLine(parsedArgs, ngOptions);
+
+    const res = performCompilation(
+        basePath, parsed.fileNames, parsed.options, ngcOptions, consoleError, checkFunc);
+
+    return res.errorCode;
   } catch (e) {
+    if (isSyntaxError(e)) {
+      consoleError(e.message);
+      return 1;
+    }
+
     consoleError(e.stack);
     consoleError('Compilation failed');
     return 2;
   }
 }
 
+// Merge command line parameters
+function mergeCommandLine(
+    parsedArgs: {[k: string]: string}, options: CompilerOptions): CompilerOptions {
+  if (parsedArgs.i18nFile) options.i18nInFile = parsedArgs.i18nFile;
+  if (parsedArgs.i18nFormat) options.i18nInFormat = parsedArgs.i18nFormat;
+  if (parsedArgs.locale) options.i18nInLocale = parsedArgs.locale;
+  const mt = parsedArgs.missingTranslation;
+  if (mt === 'error' || mt === 'warning' || mt === 'ignore') {
+    options.i18nInMissingTranslations = mt;
+  }
+
+  return options;
+}
+
 // CLI entry point
 if (require.main === module) {
   process.exit(main(process.argv.slice(2), s => console.error(s)));
-}
+}
\ No newline at end of file
diff --git a/packages/compiler-cli/src/perform-compile.ts b/packages/compiler-cli/src/perform-compile.ts
index 55feddb347..b7efcb2bf9 100644
--- a/packages/compiler-cli/src/perform-compile.ts
+++ b/packages/compiler-cli/src/perform-compile.ts
@@ -7,10 +7,11 @@
  */
 
 import {isSyntaxError, syntaxError} from '@angular/compiler';
-import {MetadataBundler, createBundleIndexHost} from '@angular/tsc-wrapped';
+import {createBundleIndexHost} from '@angular/tsc-wrapped';
 import * as fs from 'fs';
 import * as path from 'path';
 import * as ts from 'typescript';
+
 import * as api from './transformers/api';
 import * as ng from './transformers/entry_points';
 
@@ -70,17 +71,6 @@ export function throwOnDiagnostics(cwd: string, ...args: Diagnostics[]) {
   }
 }
 
-function syntheticError(message: string): ts.Diagnostic {
-  return {
-    file: null as any as ts.SourceFile,
-    start: 0,
-    length: 0,
-    messageText: message,
-    category: ts.DiagnosticCategory.Error,
-    code: 0
-  };
-}
-
 export function readConfiguration(
     project: string, basePath: string,
     checkFunc: (cwd: string, ...args: any[]) => void = throwOnDiagnostics,
@@ -111,28 +101,22 @@ export function readConfiguration(
   return {parsed, ngOptions};
 }
 
-function getProjectDirectory(project: string): string {
-  let isFile: boolean;
-  try {
-    isFile = fs.lstatSync(project).isFile();
-  } catch (e) {
-    // Project doesn't exist. Assume it is a file has an extension. This case happens
-    // when the project file is passed to set basePath but no tsconfig.json file exists.
-    // It is used in tests to ensure that the options can be passed in without there being
-    // an actual config file.
-    isFile = path.extname(project) !== '';
-  }
-
-  // If project refers to a file, the project directory is the file's parent directory
-  // otherwise project is the project directory.
-  return isFile ? path.dirname(project) : project;
-}
-
+/**
+ * Returns an object with two properties:
+ * - `errorCode` is 0 when the compilation was successful,
+ * - `result` is an `EmitResult` when the errorCode is 0, `undefined` otherwise.
+ */
 export function performCompilation(
-    basePath: string, files: string[], options: ts.CompilerOptions, ngOptions: any,
+    basePath: string, files: string[], options: ts.CompilerOptions, ngOptions: api.CompilerOptions,
     consoleError: (s: string) => void = console.error,
     checkFunc: (cwd: string, ...args: any[]) => void = throwOnDiagnostics,
-    tsCompilerHost?: ts.CompilerHost) {
+    tsCompilerHost?: ts.CompilerHost): {errorCode: number, result?: api.EmitResult} {
+  const [major, minor] = ts.version.split('.');
+
+  if (+major < 2 || (+major === 2 && +minor < 3)) {
+    throw new Error('Must use TypeScript > 2.3 to have transformer support');
+  }
+
   try {
     ngOptions.basePath = basePath;
     ngOptions.genDir = basePath;
@@ -175,18 +159,20 @@ export function performCompilation(
     // Check Angular semantic diagnostics
     checkFunc(basePath, ngProgram.getNgSemanticDiagnostics());
 
-    ngProgram.emit({
+    const result = ngProgram.emit({
       emitFlags: api.EmitFlags.Default |
           ((ngOptions.skipMetadataEmit || ngOptions.flatModuleOutFile) ? 0 : api.EmitFlags.Metadata)
     });
+
+    checkFunc(basePath, result.diagnostics);
+
+    return {errorCode: 0, result};
   } catch (e) {
     if (isSyntaxError(e)) {
-      console.error(e.message);
       consoleError(e.message);
-      return 1;
+      return {errorCode: 1};
     }
+
     throw e;
   }
-
-  return 0;
-}
+}
\ No newline at end of file
diff --git a/packages/compiler-cli/src/transformers/api.ts b/packages/compiler-cli/src/transformers/api.ts
index de1ccc3b9d..c48c67327b 100644
--- a/packages/compiler-cli/src/transformers/api.ts
+++ b/packages/compiler-cli/src/transformers/api.ts
@@ -24,6 +24,7 @@ export interface Diagnostic {
 export interface CompilerOptions extends ts.CompilerOptions {
   // Absolute path to a directory where generated file structure is written.
   // If unspecified, generated files will be written alongside sources.
+  // @deprecated - no effect
   genDir?: string;
 
   // Path to the directory containing the tsconfig.json file.
@@ -95,6 +96,27 @@ export interface CompilerOptions extends ts.CompilerOptions {
   // Whether to enable lowering expressions lambdas and expressions in a reference value
   // position.
   disableExpressionLowering?: boolean;
+
+  // The list of expected files, when provided:
+  // - extra files are filtered out,
+  // - missing files are created empty.
+  expectedOut?: string[];
+
+  // Locale of the application
+  i18nOutLocale?: string;
+  // Export format (xlf, xlf2 or xmb)
+  i18nOutFormat?: string;
+  // Path to the extracted message file
+  i18nOutFile?: string;
+
+  // Import format if different from `i18nFormat`
+  i18nInFormat?: string;
+  // Locale of the imported translations
+  i18nInLocale?: string;
+  // Path to the translation file
+  i18nInFile?: string;
+  // How to handle missing messages
+  i18nInMissingTranslations?: 'error'|'warning'|'ignore';
 }
 
 export interface ModuleFilenameResolver {
@@ -146,6 +168,11 @@ export enum EmitFlags {
 //   afterTs?: ts.TransformerFactory<ts.SourceFile>[];
 // }
 
+export interface EmitResult extends ts.EmitResult {
+  modulesManifest: {modules: string[]; fileNames: string[];};
+  externs: {[fileName: string]: string;};
+}
+
 export interface Program {
   /**
    * Retrieve the TypeScript program used to produce semantic diagnostics and emit the sources.
@@ -155,7 +182,7 @@ export interface Program {
   getTsProgram(): ts.Program;
 
   /**
-   * Retreive options diagnostics for the TypeScript options used to create the program. This is
+   * Retrieve options diagnostics for the TypeScript options used to create the program. This is
    * faster than calling `getTsProgram().getOptionsDiagnostics()` since it does not need to
    * collect Angular structural information to produce the errors.
    */
@@ -167,7 +194,7 @@ export interface Program {
   getNgOptionDiagnostics(cancellationToken?: ts.CancellationToken): Diagnostic[];
 
   /**
-   * Retrive the syntax diagnostics from TypeScript. This is faster than calling
+   * Retrieve the syntax diagnostics from TypeScript. This is faster than calling
    * `getTsProgram().getSyntacticDiagnostics()` since it does not need to collect Angular structural
    * information to produce the errors.
    */
@@ -188,7 +215,7 @@ export interface Program {
   getNgStructuralDiagnostics(cancellationToken?: ts.CancellationToken): Diagnostic[];
 
   /**
-   * Retreive the semantic diagnostics from TypeScript. This is equivilent to calling
+   * Retrieve the semantic diagnostics from TypeScript. This is equivilent to calling
    * `getTsProgram().getSemanticDiagnostics()` directly and is included for completeness.
    */
   getTsSemanticDiagnostics(sourceFile?: ts.SourceFile, cancellationToken?: ts.CancellationToken):
@@ -227,5 +254,5 @@ export interface Program {
     emitFlags: EmitFlags,
     // transformers?: CustomTransformers, // See TODO above
     cancellationToken?: ts.CancellationToken,
-  }): void;
+  }): EmitResult;
 }
diff --git a/packages/compiler-cli/src/transformers/lower_expressions.ts b/packages/compiler-cli/src/transformers/lower_expressions.ts
index 65c4cd3aff..1a2edb825e 100644
--- a/packages/compiler-cli/src/transformers/lower_expressions.ts
+++ b/packages/compiler-cli/src/transformers/lower_expressions.ts
@@ -55,19 +55,26 @@ function transformSourceFile(
     context: ts.TransformationContext): ts.SourceFile {
   const inserts: DeclarationInsert[] = [];
 
-  // Calculate the range of intersting locations. The transform will only visit nodes in this
+  // Calculate the range of interesting locations. The transform will only visit nodes in this
   // range to improve the performance on large files.
   const locations = Array.from(requests.keys());
   const min = Math.min(...locations);
   const max = Math.max(...locations);
 
+  // Visit nodes matching the request and synthetic nodes added by tsickle
+  function shouldVisit(pos: number, end: number): boolean {
+    return (pos <= max && end >= min) || pos == -1;
+  }
+
   function visitSourceFile(sourceFile: ts.SourceFile): ts.SourceFile {
     function topLevelStatement(node: ts.Node): ts.Node {
       const declarations: Declaration[] = [];
 
       function visitNode(node: ts.Node): ts.Node {
-        const nodeRequest = requests.get(node.pos);
-        if (nodeRequest && nodeRequest.kind == node.kind && nodeRequest.end == node.end) {
+        // Get the original node before tsickle
+        const {pos, end, kind} = ts.getOriginalNode(node);
+        const nodeRequest = requests.get(pos);
+        if (nodeRequest && nodeRequest.kind == kind && nodeRequest.end == end) {
           // This node is requested to be rewritten as a reference to the exported name.
           // Record that the node needs to be moved to an exported variable with the given name
           const name = nodeRequest.name;
@@ -75,14 +82,16 @@ function transformSourceFile(
           return ts.createIdentifier(name);
         }
         let result = node;
-        if (node.pos <= max && node.end >= min && !isLexicalScope(node)) {
+
+        if (shouldVisit(pos, end) && !isLexicalScope(node)) {
           result = ts.visitEachChild(node, visitNode, context);
         }
         return result;
       }
 
-      const result =
-          (node.pos <= max && node.end >= min) ? ts.visitEachChild(node, visitNode, context) : node;
+      // Get the original node before tsickle
+      const {pos, end} = ts.getOriginalNode(node);
+      const result = shouldVisit(pos, end) ? ts.visitEachChild(node, visitNode, context) : node;
 
       if (declarations.length) {
         inserts.push({priorTo: result, declarations});
@@ -91,6 +100,7 @@ function transformSourceFile(
     }
 
     const traversedSource = ts.visitEachChild(sourceFile, topLevelStatement, context);
+
     if (inserts.length) {
       // Insert the declarations before the rewritten statement that references them.
       const insertMap = toMap(inserts, i => i.priorTo);
diff --git a/packages/compiler-cli/src/transformers/node_emitter.ts b/packages/compiler-cli/src/transformers/node_emitter.ts
index 8adc7e8f64..29cd86863c 100644
--- a/packages/compiler-cli/src/transformers/node_emitter.ts
+++ b/packages/compiler-cli/src/transformers/node_emitter.ts
@@ -19,8 +19,10 @@ export class TypeScriptNodeEmitter {
   updateSourceFile(sourceFile: ts.SourceFile, stmts: Statement[], preamble?: string):
       [ts.SourceFile, Map<ts.Node, Node>] {
     const converter = new _NodeEmitterVisitor();
-    const statements =
-        stmts.map(stmt => stmt.visitStatement(converter, null)).filter(stmt => stmt != null);
+    // [].concat flattens the result so that each `visit...` method can also return an array of
+    // stmts.
+    const statements: any[] = [].concat(
+        ...stmts.map(stmt => stmt.visitStatement(converter, null)).filter(stmt => stmt != null));
     const newSourceFile = ts.updateSourceFileNode(
         sourceFile, [...converter.getReexports(), ...converter.getImports(), ...statements]);
     if (preamble) {
@@ -118,20 +120,30 @@ class _NodeEmitterVisitor implements StatementVisitor, ExpressionVisitor {
       }
     }
 
-    return this.record(
-        stmt, ts.createVariableStatement(
-                  this.getModifiers(stmt),
-                  ts.createVariableDeclarationList([ts.createVariableDeclaration(
-                      ts.createIdentifier(stmt.name),
-                      /* type */ undefined,
-                      (stmt.value && stmt.value.visitExpression(this, null)) || undefined)])));
+    const varDeclList = ts.createVariableDeclarationList([ts.createVariableDeclaration(
+        ts.createIdentifier(stmt.name),
+        /* type */ undefined,
+        (stmt.value && stmt.value.visitExpression(this, null)) || undefined)]);
+
+    if (stmt.hasModifier(StmtModifier.Exported)) {
+      // Note: We need to add an explicit variable and export declaration so that
+      // the variable can be referred in the same file as well.
+      const tsVarStmt =
+          this.record(stmt, ts.createVariableStatement(/* modifiers */[], varDeclList));
+      const exportStmt = this.record(
+          stmt, ts.createExportDeclaration(
+                    /*decorators*/ undefined, /*modifiers*/ undefined,
+                    ts.createNamedExports([ts.createExportSpecifier(stmt.name, stmt.name)])));
+      return [tsVarStmt, exportStmt];
+    }
+    return this.record(stmt, ts.createVariableStatement(this.getModifiers(stmt), varDeclList));
   }
 
   visitDeclareFunctionStmt(stmt: DeclareFunctionStmt, context: any) {
     return this.record(
         stmt, ts.createFunctionDeclaration(
                   /* decorators */ undefined, this.getModifiers(stmt),
-                  /* astrictToken */ undefined, stmt.name, /* typeParameters */ undefined,
+                  /* asteriskToken */ undefined, stmt.name, /* typeParameters */ undefined,
                   stmt.params.map(
                       p => ts.createParameter(
                           /* decorators */ undefined, /* modifiers */ undefined,
diff --git a/packages/compiler-cli/src/transformers/program.ts b/packages/compiler-cli/src/transformers/program.ts
index 3970aeb015..c1c0fe2da6 100644
--- a/packages/compiler-cli/src/transformers/program.ts
+++ b/packages/compiler-cli/src/transformers/program.ts
@@ -6,20 +6,22 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {AotCompiler, GeneratedFile, NgAnalyzedModules, createAotCompiler, getParseErrors, isSyntaxError, toTypeScript} from '@angular/compiler';
-import {MetadataCollector, ModuleMetadata} from '@angular/tsc-wrapped';
-import {writeFileSync} from 'fs';
+import {AotCompiler, AotCompilerOptions, GeneratedFile, NgAnalyzedModules, createAotCompiler, getParseErrors, isSyntaxError, toTypeScript} from '@angular/compiler';
+import {MissingTranslationStrategy} from '@angular/core';
+import * as fs from 'fs';
 import * as path from 'path';
+import * as tsickle from 'tsickle';
 import * as ts from 'typescript';
 
-import {CompilerHost as AotCompilerHost, CompilerHostContext} from '../compiler_host';
+import {CompilerHost as AotCompilerHost} from '../compiler_host';
 import {TypeChecker} from '../diagnostics/check_types';
 
-import {CompilerHost, CompilerOptions, Diagnostic, DiagnosticCategory, EmitFlags, Program} from './api';
+import {CompilerHost, CompilerOptions, Diagnostic, DiagnosticCategory, EmitFlags, EmitResult, Program} from './api';
 import {LowerMetadataCache, getExpressionLoweringTransformFactory} from './lower_expressions';
 import {getAngularEmitterTransformFactory} from './node_emitter_transform';
 
 const GENERATED_FILES = /\.ngfactory\.js$|\.ngstyle\.js$|\.ngsummary\.js$/;
+
 const SUMMARY_JSON_FILES = /\.ngsummary.json$/;
 
 const emptyModules: NgAnalyzedModules = {
@@ -52,17 +54,20 @@ class AngularCompilerProgram implements Program {
       private rootNames: string[], private options: CompilerOptions, private host: CompilerHost,
       private oldProgram?: Program) {
     this.oldTsProgram = oldProgram ? oldProgram.getTsProgram() : undefined;
-
     this.tsProgram = ts.createProgram(rootNames, options, host, this.oldTsProgram);
-    this.srcNames = this.tsProgram.getSourceFiles().map(sf => sf.fileName);
+    this.srcNames =
+        this.tsProgram.getSourceFiles()
+            .map(sf => sf.fileName)
+            .filter(f => !f.match(/\.ngfactory\.[\w.]+$|\.ngstyle\.[\w.]+$|\.ngsummary\.[\w.]+$/));
     this.metadataCache = new LowerMetadataCache({quotedNames: true}, !!options.strictMetadataEmit);
     this.aotCompilerHost = new AotCompilerHost(
         this.tsProgram, options, host, /* collectorOptions */ undefined, this.metadataCache);
     if (host.readResource) {
       this.aotCompilerHost.loadResource = host.readResource.bind(host);
     }
-    const {compiler} = createAotCompiler(this.aotCompilerHost, options);
-    this.compiler = compiler;
+
+    const aotOptions = getAotCompilerOptions(options);
+    this.compiler = createAotCompiler(this.aotCompilerHost, aotOptions).compiler;
   }
 
   // Program implementation
@@ -115,25 +120,56 @@ class AngularCompilerProgram implements Program {
   getLazyRoutes(cancellationToken?: ts.CancellationToken): {[route: string]: string} { return {}; }
 
   emit({emitFlags = EmitFlags.Default, cancellationToken}:
-           {emitFlags?: EmitFlags, cancellationToken?: ts.CancellationToken}): ts.EmitResult {
+           {emitFlags?: EmitFlags, cancellationToken?: ts.CancellationToken}): EmitResult {
     const emitMap = new Map<string, string>();
-    const result = this.programWithStubs.emit(
+
+    const tsickleCompilerHostOptions: tsickle.TransformerOptions = {
+      googmodule: false,
+      untyped: true,
+      convertIndexImportShorthand: true,
+      transformDecorators: this.options.annotationsAs !== 'decorators',
+      transformTypesToClosure: this.options.annotateForClosureCompiler,
+    };
+
+    const tsickleHost: tsickle.TransformerHost = {
+      shouldSkipTsickleProcessing: (fileName) => /\.d\.ts$/.test(fileName),
+      pathToModuleName: (context, importPath) => '',
+      shouldIgnoreWarningsForPath: (filePath) => false,
+      fileNameToModuleId: (fileName) => fileName,
+    };
+
+    const expectedOut = this.options.expectedOut ?
+        this.options.expectedOut.map(f => path.resolve(process.cwd(), f)) :
+        undefined;
+
+    const result = tsickle.emitWithTsickle(
+        this.programWithStubs, tsickleHost, tsickleCompilerHostOptions, this.host, this.options,
         /* targetSourceFile */ undefined,
-        createWriteFileCallback(emitFlags, this.host, this.metadataCache, emitMap),
+        createWriteFileCallback(emitFlags, this.host, this.metadataCache, emitMap, expectedOut),
         cancellationToken, (emitFlags & (EmitFlags.DTS | EmitFlags.JS)) == EmitFlags.DTS,
         this.calculateTransforms());
 
     this.generatedFiles.forEach(file => {
+      // In order not to replicate the TS calculation of the out folder for files
+      // derive the out location for .json files from the out location of the .ts files
       if (file.source && file.source.length && SUMMARY_JSON_FILES.test(file.genFileUrl)) {
         // If we have emitted the ngsummary.ts file, ensure the ngsummary.json file is emitted to
         // the same location.
+
         const emittedFile = emitMap.get(file.srcFileUrl);
-        const fileName = emittedFile ?
-            path.join(path.dirname(emittedFile), path.basename(file.genFileUrl)) :
-            file.genFileUrl;
-        this.host.writeFile(fileName, file.source, false, error => {});
+
+        if (emittedFile) {
+          const fileName = path.join(path.dirname(emittedFile), path.basename(file.genFileUrl));
+          this.host.writeFile(fileName, file.source, false, error => {});
+        }
       }
     });
+
+    // Ensure that expected output files exist.
+    for (const out of expectedOut || []) {
+      fs.appendFileSync(out, '', 'utf8');
+    }
+
     return result;
   }
 
@@ -183,19 +219,15 @@ class AngularCompilerProgram implements Program {
     return this.generatedFiles && this._generatedFileDiagnostics !;
   }
 
-  private calculateTransforms(): ts.CustomTransformers {
-    const before: ts.TransformerFactory<ts.SourceFile>[] = [];
-    const after: ts.TransformerFactory<ts.SourceFile>[] = [];
+  private calculateTransforms(): tsickle.EmitTransformers {
+    const beforeTs: ts.TransformerFactory<ts.SourceFile>[] = [];
     if (!this.options.disableExpressionLowering) {
-      before.push(getExpressionLoweringTransformFactory(this.metadataCache));
+      beforeTs.push(getExpressionLoweringTransformFactory(this.metadataCache));
     }
     if (!this.options.skipTemplateCodegen) {
-      after.push(getAngularEmitterTransformFactory(this.generatedFiles));
+      beforeTs.push(getAngularEmitterTransformFactory(this.generatedFiles));
     }
-    const result: ts.CustomTransformers = {};
-    if (before.length) result.before = before;
-    if (after.length) result.after = after;
-    return result;
+    return {beforeTs};
   }
 
   private catchAnalysisError(e: any): NgAnalyzedModules {
@@ -228,8 +260,8 @@ class AngularCompilerProgram implements Program {
   private generateStubs() {
     return this.options.skipTemplateCodegen ? [] :
                                               this.options.generateCodeForLibraries === false ?
-                                              this.compiler.emitAllStubs(this.analyzedModules) :
-                                              this.compiler.emitPartialStubs(this.analyzedModules);
+                                              this.compiler.emitPartialStubs(this.analyzedModules) :
+                                              this.compiler.emitAllStubs(this.analyzedModules);
   }
 
   private generateFiles() {
@@ -270,6 +302,40 @@ export function createProgram(
   return new AngularCompilerProgram(rootNames, options, host, oldProgram);
 }
 
+// Compute the AotCompiler options
+function getAotCompilerOptions(options: CompilerOptions): AotCompilerOptions {
+  let missingTranslation = MissingTranslationStrategy.Warning;
+
+  switch (options.i18nInMissingTranslations) {
+    case 'ignore':
+      missingTranslation = MissingTranslationStrategy.Ignore;
+      break;
+    case 'error':
+      missingTranslation = MissingTranslationStrategy.Error;
+      break;
+  }
+
+  let translations: string = '';
+
+  if (options.i18nInFile) {
+    if (!options.locale) {
+      throw new Error(`The translation file (${options.i18nInFile}) locale must be provided.`);
+    }
+    translations = fs.readFileSync(options.i18nInFile, 'utf8');
+  } else {
+    // No translations are provided, ignore any errors
+    // We still go through i18n to remove i18n attributes
+    missingTranslation = MissingTranslationStrategy.Ignore;
+  }
+
+  return {
+    locale: options.i18nInLocale,
+    i18nFormat: options.i18nInFormat || options.i18nOutFormat, translations, missingTranslation,
+    enableLegacyTemplate: options.enableLegacyTemplate,
+    enableSummariesForJit: true,
+  };
+}
+
 function writeMetadata(
     emitFilePath: string, sourceFile: ts.SourceFile, metadataCache: LowerMetadataCache) {
   if (/\.js$/.test(emitFilePath)) {
@@ -287,38 +353,36 @@ function writeMetadata(
     const metadata = metadataCache.getMetadata(collectableFile);
     if (metadata) {
       const metadataText = JSON.stringify([metadata]);
-      writeFileSync(path, metadataText, {encoding: 'utf-8'});
+      fs.writeFileSync(path, metadataText, {encoding: 'utf-8'});
     }
   }
 }
 
 function createWriteFileCallback(
     emitFlags: EmitFlags, host: ts.CompilerHost, metadataCache: LowerMetadataCache,
-    emitMap: Map<string, string>) {
-  const withMetadata =
-      (fileName: string, data: string, writeByteOrderMark: boolean,
-       onError?: (message: string) => void, sourceFiles?: ts.SourceFile[]) => {
-        const generatedFile = GENERATED_FILES.test(fileName);
-        if (!generatedFile || data != '') {
-          host.writeFile(fileName, data, writeByteOrderMark, onError, sourceFiles);
-        }
-        if (!generatedFile && sourceFiles && sourceFiles.length == 1) {
-          emitMap.set(sourceFiles[0].fileName, fileName);
-          writeMetadata(fileName, sourceFiles[0], metadataCache);
-        }
-      };
-  const withoutMetadata =
-      (fileName: string, data: string, writeByteOrderMark: boolean,
-       onError?: (message: string) => void, sourceFiles?: ts.SourceFile[]) => {
-        const generatedFile = GENERATED_FILES.test(fileName);
-        if (!generatedFile || data != '') {
-          host.writeFile(fileName, data, writeByteOrderMark, onError, sourceFiles);
-        }
-        if (!generatedFile && sourceFiles && sourceFiles.length == 1) {
-          emitMap.set(sourceFiles[0].fileName, fileName);
-        }
-      };
-  return (emitFlags & EmitFlags.Metadata) != 0 ? withMetadata : withoutMetadata;
+    emitMap: Map<string, string>, expectedOut?: string[]) {
+  return (fileName: string, data: string, writeByteOrderMark: boolean,
+          onError?: (message: string) => void, sourceFiles?: ts.SourceFile[]) => {
+
+    let srcFile: ts.SourceFile|undefined;
+
+    if (sourceFiles && sourceFiles.length == 1) {
+      srcFile = sourceFiles[0];
+      emitMap.set(srcFile.fileName, fileName);
+    }
+
+    const absFile = path.resolve(process.cwd(), fileName);
+    const generatedFile = GENERATED_FILES.test(fileName);
+
+    // Don't emit unexpected files nor empty generated files
+    if ((!expectedOut || expectedOut.indexOf(absFile) > -1) && (!generatedFile || data)) {
+      host.writeFile(fileName, data, writeByteOrderMark, onError, sourceFiles);
+
+      if (srcFile && !generatedFile && (emitFlags & EmitFlags.Metadata) != 0) {
+        writeMetadata(fileName, srcFile, metadataCache);
+      }
+    }
+  };
 }
 
 function getNgOptionDiagnostics(options: CompilerOptions): Diagnostic[] {
diff --git a/packages/compiler-cli/test/ngc_spec.ts b/packages/compiler-cli/test/ngc_spec.ts
index 53320cc186..165582a09c 100644
--- a/packages/compiler-cli/test/ngc_spec.ts
+++ b/packages/compiler-cli/test/ngc_spec.ts
@@ -82,19 +82,19 @@ describe('ngc command-line', () => {
 
     spyOn(mockConsole, 'error');
 
-    const result = performCompilation(
-        basePath, [path.join(basePath, 'test.ts')], {
-          experimentalDecorators: true,
-          skipLibCheck: true,
-          types: [],
-          outDir: path.join(basePath, 'built'),
-          declaration: true,
-          module: ts.ModuleKind.ES2015,
-          moduleResolution: ts.ModuleResolutionKind.NodeJs,
-        },
-        {}, mockConsole.error);
-    expect(mockConsole.error).not.toHaveBeenCalled();
-    expect(result).toBe(0);
+    expect(
+        () => performCompilation(
+            basePath, [path.join(basePath, 'test.ts')], {
+              experimentalDecorators: true,
+              skipLibCheck: true,
+              types: [],
+              outDir: path.join(basePath, 'built'),
+              declaration: true,
+              module: ts.ModuleKind.ES2015,
+              moduleResolution: ts.ModuleResolutionKind.NodeJs,
+            },
+            {}))
+        .not.toThrow();
   });
 
   it('should not print the stack trace if user input file does not exist', () => {
@@ -292,7 +292,7 @@ describe('ngc command-line', () => {
           .toBe(true);
     });
 
-    it('should compile with a explicit tsconfig reference', () => {
+    it('should compile with an explicit tsconfig reference', () => {
       writeConfig(`{
           "extends": "./tsconfig-base.json",
           "files": ["mymodule.ts"]
@@ -316,6 +316,92 @@ describe('ngc command-line', () => {
           .toBe(true);
     });
 
+    describe('closure', () => {
+      it('should not generate closure specific code by default', () => {
+        writeConfig(`{
+          "extends": "./tsconfig-base.json",
+          "files": ["mymodule.ts"]
+        }`);
+        write('mymodule.ts', `
+        import {NgModule, Component} from '@angular/core';
+
+        @Component({template: ''})
+        export class MyComp {}
+
+        @NgModule({declarations: [MyComp]})
+        export class MyModule {}
+      `);
+
+        const mockConsole = {error: (s: string) => {}};
+        const exitCode = main(['-p', basePath], mockConsole.error);
+        expect(exitCode).toEqual(0);
+
+        const mymodulejs = path.resolve(outDir, 'mymodule.js');
+        const mymoduleSource = fs.readFileSync(mymodulejs, 'utf8');
+        expect(mymoduleSource).not.toContain('@fileoverview added by tsickle');
+        expect(mymoduleSource).toContain('MyComp.decorators = [');
+      });
+
+      it('should add closure annotations', () => {
+        writeConfig(`{
+          "extends": "./tsconfig-base.json",
+          "angularCompilerOptions": {
+            "annotateForClosureCompiler": true
+          },
+          "files": ["mymodule.ts"]
+        }`);
+        write('mymodule.ts', `
+        import {NgModule, Component} from '@angular/core';
+
+        @Component({template: ''})
+        export class MyComp {
+          fn(p: any) {}
+        }
+
+        @NgModule({declarations: [MyComp]})
+        export class MyModule {}
+      `);
+
+        const mockConsole = {error: (s: string) => {}};
+        const exitCode = main(['-p', basePath], mockConsole.error);
+        expect(exitCode).toEqual(0);
+
+        const mymodulejs = path.resolve(outDir, 'mymodule.js');
+        const mymoduleSource = fs.readFileSync(mymodulejs, 'utf8');
+        expect(mymoduleSource).toContain('@fileoverview added by tsickle');
+        expect(mymoduleSource).toContain('@param {?} p');
+      });
+
+      it('should add metadata as decorators', () => {
+        writeConfig(`{
+          "extends": "./tsconfig-base.json",
+          "angularCompilerOptions": {
+            "annotationsAs": "decorators"
+          },
+          "files": ["mymodule.ts"]
+        }`);
+        write('mymodule.ts', `
+        import {NgModule, Component} from '@angular/core';
+
+        @Component({template: ''})
+        export class MyComp {
+          fn(p: any) {}
+        }
+
+        @NgModule({declarations: [MyComp]})
+        export class MyModule {}
+      `);
+
+        const mockConsole = {error: (s: string) => {}};
+        const exitCode = main(['-p', basePath], mockConsole.error);
+        expect(exitCode).toEqual(0);
+
+        const mymodulejs = path.resolve(outDir, 'mymodule.js');
+        const mymoduleSource = fs.readFileSync(mymodulejs, 'utf8');
+        expect(mymoduleSource).toContain('MyComp = __decorate([');
+      });
+    });
+
     describe('expression lowering', () => {
       beforeEach(() => {
         writeConfig(`{
@@ -437,7 +523,7 @@ describe('ngc command-line', () => {
           import {CommonModule} from '@angular/common';
           import {NgModule} from '@angular/core';
 
-          class Foo {}
+          export class Foo {}
 
           export const factory = () => new Foo();
 
@@ -557,7 +643,7 @@ describe('ngc command-line', () => {
         export class FlatModule {
         }`);
 
-      const exitCode = performCompilation(
+      const emitResult = performCompilation(
           basePath, [path.join(basePath, 'public-api.ts')], {
             target: ts.ScriptTarget.ES5,
             experimentalDecorators: true,
@@ -578,7 +664,7 @@ describe('ngc command-line', () => {
           });
 
 
-      expect(exitCode).toEqual(0);
+      expect(emitResult.errorCode).toEqual(0);
       shouldExist('index.js');
       shouldExist('index.metadata.json');
     });
@@ -758,7 +844,7 @@ describe('ngc command-line', () => {
           write(path.join(dir, 'tsconfig.json'), `
           {
             "angularCompilerOptions": {
-              "generateCodeForLibraries": false,
+              "generateCodeForLibraries": true,
               "enableSummariesForJit": true
             },
             "compilerOptions": {
@@ -820,7 +906,7 @@ describe('ngc command-line', () => {
         shouldExist('lib1/module.ngfactory.d.ts');
       });
 
-      it('should be able to compiler library 2', () => {
+      it('should be able to compile library 2', () => {
         expect(main(['-p', path.join(basePath, 'lib1')])).toBe(0);
         expect(main(['-p', path.join(basePath, 'lib2')])).toBe(0);
         shouldExist('lib2/module.js');
diff --git a/packages/compiler-cli/test/transformers/node_emitter_spec.ts b/packages/compiler-cli/test/transformers/node_emitter_spec.ts
index 2918e70535..f7b169c2a7 100644
--- a/packages/compiler-cli/test/transformers/node_emitter_spec.ts
+++ b/packages/compiler-cli/test/transformers/node_emitter_spec.ts
@@ -63,7 +63,7 @@ describe('TypeScriptNodeEmitter', () => {
     expect(emitStmt(someVar.set(o.literal(1)).toDeclStmt(null, [o.StmtModifier.Final])))
         .toEqual(`var someVar = 1;`);
     expect(emitStmt(someVar.set(o.literal(1)).toDeclStmt(null, [o.StmtModifier.Exported])))
-        .toEqual(`exports.someVar = 1;`);
+        .toEqual(`var someVar = 1; exports.someVar = someVar;`);
   });
 
   describe('declare variables with ExternExpressions as values', () => {
@@ -71,7 +71,7 @@ describe('TypeScriptNodeEmitter', () => {
       // identifier is in the same module -> no reexport
       expect(emitStmt(someVar.set(o.importExpr(sameModuleIdentifier)).toDeclStmt(null, [
         o.StmtModifier.Exported
-      ]))).toEqual('exports.someVar = someLocalId;');
+      ]))).toEqual('var someVar = someLocalId; exports.someVar = someVar;');
     });
 
     it('should create no reexport if the variable is not exported', () => {
@@ -84,7 +84,7 @@ describe('TypeScriptNodeEmitter', () => {
       expect(emitStmt(someVar.set(o.importExpr(externalModuleIdentifier))
                           .toDeclStmt(o.DYNAMIC_TYPE, [o.StmtModifier.Exported])))
           .toEqual(
-              `const i0 = require("/somePackage/someOtherPath"); exports.someVar = i0.someExternalId;`);
+              `const i0 = require("/somePackage/someOtherPath"); var someVar = i0.someExternalId; exports.someVar = someVar;`);
     });
 
     it('should create a reexport', () => {
diff --git a/packages/platform-server/integrationtest/package.json b/packages/platform-server/integrationtest/package.json
index 19c499fa9f..0016512b7b 100644
--- a/packages/platform-server/integrationtest/package.json
+++ b/packages/platform-server/integrationtest/package.json
@@ -18,7 +18,7 @@
     "@angular/platform-server": "file:../../../dist/packages-dist/platform-server",
     "express": "^4.14.1",
     "rxjs": "file:../../../node_modules/rxjs",
-    "typescript": "2.1.6",
+    "typescript": "2.3.x",
     "zone.js": "^0.8.10"
   },
   "devDependencies": {
diff --git a/scripts/ci/offline_compiler_test.sh b/scripts/ci/offline_compiler_test.sh
index f419884f85..b8a0703557 100755
--- a/scripts/ci/offline_compiler_test.sh
+++ b/scripts/ci/offline_compiler_test.sh
@@ -8,7 +8,7 @@ LINKABLE_PKGS=(
   $(pwd)/dist/packages-dist/{common,forms,core,compiler,compiler-cli,platform-{browser,server},platform-browser-dynamic,router,http,animations,tsc-wrapped}
 )
 
-TYPESCRIPT_2_1=typescript@2.1.5
+TYPESCRIPT_2_3=typescript@2.3.x
 PKGS=(
   reflect-metadata@0.1.8
   zone.js@0.6.25
@@ -33,7 +33,7 @@ cp -v package.json $TMP
 (
   cd $TMP
   set -ex -o pipefail
-  npm install ${PKGS[*]} $TYPESCRIPT_2_1
+  npm install ${PKGS[*]} $TYPESCRIPT_2_3
   # TODO(alexeagle): allow this to be npm link instead
   npm install ${LINKABLE_PKGS[*]}
 
@@ -54,7 +54,6 @@ cp -v package.json $TMP
   # Copy the html files from source to the emitted output
   cp flat_module/src/*.html node_modules/flat_module/src
 
-  ./node_modules/.bin/ngc -p tsconfig-build-alt.json --missingTranslation=error --i18nFormat=xlf
   ./node_modules/.bin/ngc -p tsconfig-build.json --i18nFile=src/messages.fi.xlf --locale=fi --i18nFormat=xlf
 
   ./node_modules/.bin/ng-xi18n -p tsconfig-xi18n.json --i18nFormat=xlf --locale=fr
diff --git a/tools/ngc-wrapped/index.ts b/tools/ngc-wrapped/index.ts
index 37d88317dd..0d32fce43b 100644
--- a/tools/ngc-wrapped/index.ts
+++ b/tools/ngc-wrapped/index.ts
@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-// TODO(chuckj): Remove the requirment for a fake 'reflect` implementation from
+// TODO(chuckj): Remove the requirement for a fake 'reflect` implementation from
 // the compiler
 import 'reflect-metadata';
 import {performCompilation} from '@angular/compiler-cli';
@@ -28,16 +28,7 @@ function main(args: string[]) {
   const basePath = path.resolve(process.cwd(), projectDir);
   const result = performCompilation(basePath, files, options, ngOptions, undefined);
 
-  if (result === 0) {
-    // Ensure that expected output files exist.
-    if (ngOptions && ngOptions.expectedOut) {
-      for (const out of ngOptions.expectedOut) {
-        fs.appendFileSync(out, '', 'utf-8');
-      }
-    }
-  }
-
-  return result;
+  return result.errorCode;
 }
 
 if (require.main === module) {

From cac130eff9b9cb608f2308ae40c42c9cd1850c4d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mis=CC=8Cko=20Hevery?= <misko@hevery.com>
Date: Tue, 8 Aug 2017 14:03:27 -0700
Subject: [PATCH 17/83] perf(core): Remove decorator DSL which depends on
 Reflect
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

BREAKING CHANGE

It is no longer possible to declare classes in this format.

```
Component({...}).
Class({
  constructor: function() {...}
})
```

This format would only work with JIT and with ES5. This mode doesn’t
allow build tools like Webpack to process and optimize the code, which
results in prohibitively large bundles. We are removing this API
because we are trying to ensure that everyone is on the fast path by
default, and it is not possible to get on the fast path using the ES5
DSL. The replacement is to use TypeScript and `@Decorator` format.

```
@Component({...})
class {
  constructor() {...}
}
```
---
 packages/core/src/core.ts                     |   2 +-
 packages/core/src/di/reflective_injector.ts   |   5 +-
 packages/core/src/metadata/di.ts              |  12 -
 .../platform_reflection_capabilities.ts       |  12 +
 .../src/reflection/reflection_capabilities.ts |  22 +-
 packages/core/src/util/decorators.ts          | 261 +------
 .../core/test/metadata/decorators_spec.ts     |  32 -
 packages/core/test/util/decorators_spec.ts    | 101 +--
 .../upgrade/src/dynamic/upgrade_adapter.ts    |  26 +-
 .../src/dynamic/upgrade_ng1_adapter.ts        |  37 +-
 packages/upgrade/test/dynamic/upgrade_spec.ts | 688 ++++++++++--------
 tools/public_api_guard/core/core.d.ts         |  13 -
 12 files changed, 456 insertions(+), 755 deletions(-)
 delete mode 100644 packages/core/test/metadata/decorators_spec.ts

diff --git a/packages/core/src/core.ts b/packages/core/src/core.ts
index 772da782a8..2ce897f2de 100644
--- a/packages/core/src/core.ts
+++ b/packages/core/src/core.ts
@@ -13,7 +13,7 @@
  */
 export * from './metadata';
 export * from './version';
-export {Class, ClassDefinition, TypeDecorator} from './util/decorators';
+export {TypeDecorator} from './util/decorators';
 export * from './di';
 export {createPlatform, assertPlatform, destroyPlatform, getPlatform, PlatformRef, ApplicationRef, enableProdMode, isDevMode, createPlatformFactory, NgProbeToken} from './application_ref';
 export {APP_ID, PACKAGE_ROOT_URL, PLATFORM_INITIALIZER, PLATFORM_ID, APP_BOOTSTRAP_LISTENER} from './application_tokens';
diff --git a/packages/core/src/di/reflective_injector.ts b/packages/core/src/di/reflective_injector.ts
index 5e7e0a481c..6b7f4c47d0 100644
--- a/packages/core/src/di/reflective_injector.ts
+++ b/packages/core/src/di/reflective_injector.ts
@@ -277,6 +277,7 @@ export abstract class ReflectiveInjector implements Injector {
 }
 
 export class ReflectiveInjector_ implements ReflectiveInjector {
+  private static INJECTOR_KEY = ReflectiveKey.get(Injector);
   /** @internal */
   _constructionCounter: number = 0;
   /** @internal */
@@ -389,7 +390,7 @@ export class ReflectiveInjector_ implements ReflectiveInjector {
   }
 
   private _getByKey(key: ReflectiveKey, visibility: Self|SkipSelf|null, notFoundValue: any): any {
-    if (key === INJECTOR_KEY) {
+    if (key === ReflectiveInjector_.INJECTOR_KEY) {
       return this;
     }
 
@@ -463,8 +464,6 @@ export class ReflectiveInjector_ implements ReflectiveInjector {
   toString(): string { return this.displayName; }
 }
 
-const INJECTOR_KEY = ReflectiveKey.get(Injector);
-
 function _mapProviders(injector: ReflectiveInjector_, fn: Function): any[] {
   const res: any[] = new Array(injector._providers.length);
   for (let i = 0; i < injector._providers.length; ++i) {
diff --git a/packages/core/src/metadata/di.ts b/packages/core/src/metadata/di.ts
index 5efabd0033..e12522be12 100644
--- a/packages/core/src/metadata/di.ts
+++ b/packages/core/src/metadata/di.ts
@@ -73,18 +73,6 @@ export interface AttributeDecorator {
    *
    * {@example core/ts/metadata/metadata.ts region='attributeFactory'}
    *
-   * ### Example as ES5 DSL
-   *
-   * ```
-   * var MyComponent = ng
-   *   .Component({...})
-   *   .Class({
-   *     constructor: [new ng.Attribute('title'), function(title) {
-   *       ...
-   *     }]
-   *   })
-   * ```
-   *
    * ### Example as ES5 annotation
    *
    * ```
diff --git a/packages/core/src/reflection/platform_reflection_capabilities.ts b/packages/core/src/reflection/platform_reflection_capabilities.ts
index 22fa0cd656..8cc5b7862b 100644
--- a/packages/core/src/reflection/platform_reflection_capabilities.ts
+++ b/packages/core/src/reflection/platform_reflection_capabilities.ts
@@ -13,8 +13,20 @@ export interface PlatformReflectionCapabilities {
   isReflectionEnabled(): boolean;
   factory(type: Type<any>): Function;
   hasLifecycleHook(type: any, lcProperty: string): boolean;
+
+  /**
+   * Return a list of annotations/types for constructor parameters
+   */
   parameters(type: Type<any>): any[][];
+
+  /**
+   * Return a list of annotations declared on the class
+   */
   annotations(type: Type<any>): any[];
+
+  /**
+   * Return a object literal which describes the annotations on Class fields/properties.
+   */
   propMetadata(typeOrFunc: Type<any>): {[key: string]: any[]};
   getter(name: string): GetterFn;
   setter(name: string): SetterFn;
diff --git a/packages/core/src/reflection/reflection_capabilities.ts b/packages/core/src/reflection/reflection_capabilities.ts
index b7aa346ebf..4f74baf886 100644
--- a/packages/core/src/reflection/reflection_capabilities.ts
+++ b/packages/core/src/reflection/reflection_capabilities.ts
@@ -8,9 +8,12 @@
 
 import {Type, isType} from '../type';
 import {global, stringify} from '../util';
+import {ANNOTATIONS, PARAMETERS, PROP_METADATA} from '../util/decorators';
+
 import {PlatformReflectionCapabilities} from './platform_reflection_capabilities';
 import {GetterFn, MethodFn, SetterFn} from './types';
 
+
 /**
  * Attention: This regex has to hold even if the code is minified!
  */
@@ -85,12 +88,11 @@ export class ReflectionCapabilities implements PlatformReflectionCapabilities {
     }
 
     // API for metadata created by invoking the decorators.
-    if (this._reflect != null && this._reflect.getOwnMetadata != null) {
-      const paramAnnotations = this._reflect.getOwnMetadata('parameters', type);
-      const paramTypes = this._reflect.getOwnMetadata('design:paramtypes', type);
-      if (paramTypes || paramAnnotations) {
-        return this._zipTypesAndAnnotations(paramTypes, paramAnnotations);
-      }
+    const paramAnnotations = type.hasOwnProperty(PARAMETERS) && (type as any)[PARAMETERS];
+    const paramTypes = this._reflect && this._reflect.getOwnMetadata &&
+        this._reflect.getOwnMetadata('design:paramtypes', type);
+    if (paramTypes || paramAnnotations) {
+      return this._zipTypesAndAnnotations(paramTypes, paramAnnotations);
     }
 
     // If a class has no decorators, at least create metadata
@@ -130,8 +132,8 @@ export class ReflectionCapabilities implements PlatformReflectionCapabilities {
     }
 
     // API for metadata created by invoking the decorators.
-    if (this._reflect && this._reflect.getOwnMetadata) {
-      return this._reflect.getOwnMetadata('annotations', typeOrFunc);
+    if (typeOrFunc.hasOwnProperty(ANNOTATIONS)) {
+      return (typeOrFunc as any)[ANNOTATIONS];
     }
     return null;
   }
@@ -169,8 +171,8 @@ export class ReflectionCapabilities implements PlatformReflectionCapabilities {
     }
 
     // API for metadata created by invoking the decorators.
-    if (this._reflect && this._reflect.getOwnMetadata) {
-      return this._reflect.getOwnMetadata('propMetadata', typeOrFunc);
+    if (typeOrFunc.hasOwnProperty(PROP_METADATA)) {
+      return (typeOrFunc as any)[PROP_METADATA];
     }
     return null;
   }
diff --git a/packages/core/src/util/decorators.ts b/packages/core/src/util/decorators.ts
index 1acf99b60b..2aae8c6a1d 100644
--- a/packages/core/src/util/decorators.ts
+++ b/packages/core/src/util/decorators.ts
@@ -7,54 +7,12 @@
  */
 
 import {Type} from '../type';
-import {global, stringify} from '../util';
-
-let _nextClassId = 0;
-const Reflect = global['Reflect'];
-
-/**
- * Declares the interface to be used with {@link Class}.
- *
- * @stable
- */
-export type ClassDefinition = {
-  /**
-   * Optional argument for specifying the superclass.
-   */
-  extends?: Type<any>;
-
-  /**
-   * Required constructor function for a class.
-   *
-   * The function may be optionally wrapped in an `Array`, in which case additional parameter
-   * annotations may be specified.
-   * The number of arguments and the number of parameter annotations must match.
-   *
-   * See {@link Class} for example of usage.
-   */
-  constructor: Function | any[];
-} &
-{
-  /**
-   * Other methods on the class. Note that values should have type 'Function' but TS requires
-   * all properties to have a narrower type than the index signature.
-   */
-  [x: string]: Type<any>|Function|any[];
-};
 
 /**
  * An interface implemented by all Angular type decorators, which allows them to be used as ES7
  * decorators as well as
  * Angular DSL syntax.
  *
- * DSL syntax:
- *
- * ```
- * var MyClass = ng
- *   .Component({...})
- *   .Class({...});
- * ```
- *
  * ES7 syntax:
  *
  * ```
@@ -74,189 +32,11 @@ export interface TypeDecorator {
   // so we cannot declare this interface as a subtype.
   // see https://github.com/angular/angular/issues/3379#issuecomment-126169417
   (target: Object, propertyKey?: string|symbol, parameterIndex?: number): void;
-
-  /**
-   * Storage for the accumulated annotations so far used by the DSL syntax.
-   *
-   * Used by {@link Class} to annotate the generated class.
-   */
-  annotations: any[];
-
-  /**
-   * Generate a class from the definition and annotate it with {@link TypeDecorator#annotations}.
-   */
-  Class(obj: ClassDefinition): Type<any>;
 }
 
-function extractAnnotation(annotation: any): any {
-  if (typeof annotation === 'function' && annotation.hasOwnProperty('annotation')) {
-    // it is a decorator, extract annotation
-    annotation = annotation.annotation;
-  }
-  return annotation;
-}
-
-function applyParams(fnOrArray: Function | any[] | undefined, key: string): Function {
-  if (fnOrArray === Object || fnOrArray === String || fnOrArray === Function ||
-      fnOrArray === Number || fnOrArray === Array) {
-    throw new Error(`Can not use native ${stringify(fnOrArray)} as constructor`);
-  }
-
-  if (typeof fnOrArray === 'function') {
-    return fnOrArray;
-  }
-
-  if (Array.isArray(fnOrArray)) {
-    const annotations: any[] = fnOrArray as any[];
-    const annoLength = annotations.length - 1;
-    const fn: Function = fnOrArray[annoLength];
-    if (typeof fn !== 'function') {
-      throw new Error(
-          `Last position of Class method array must be Function in key ${key} was '${stringify(fn)}'`);
-    }
-    if (annoLength != fn.length) {
-      throw new Error(
-          `Number of annotations (${annoLength}) does not match number of arguments (${fn.length}) in the function: ${stringify(fn)}`);
-    }
-    const paramsAnnotations: any[][] = [];
-    for (let i = 0, ii = annotations.length - 1; i < ii; i++) {
-      const paramAnnotations: any[] = [];
-      paramsAnnotations.push(paramAnnotations);
-      const annotation = annotations[i];
-      if (Array.isArray(annotation)) {
-        for (let j = 0; j < annotation.length; j++) {
-          paramAnnotations.push(extractAnnotation(annotation[j]));
-        }
-      } else if (typeof annotation === 'function') {
-        paramAnnotations.push(extractAnnotation(annotation));
-      } else {
-        paramAnnotations.push(annotation);
-      }
-    }
-    Reflect.defineMetadata('parameters', paramsAnnotations, fn);
-    return fn;
-  }
-
-  throw new Error(
-      `Only Function or Array is supported in Class definition for key '${key}' is '${stringify(fnOrArray)}'`);
-}
-
-/**
- * Provides a way for expressing ES6 classes with parameter annotations in ES5.
- *
- * ## Basic Example
- *
- * ```
- * var Greeter = ng.Class({
- *   constructor: function(name) {
- *     this.name = name;
- *   },
- *
- *   greet: function() {
- *     alert('Hello ' + this.name + '!');
- *   }
- * });
- * ```
- *
- * is equivalent to ES6:
- *
- * ```
- * class Greeter {
- *   constructor(name) {
- *     this.name = name;
- *   }
- *
- *   greet() {
- *     alert('Hello ' + this.name + '!');
- *   }
- * }
- * ```
- *
- * or equivalent to ES5:
- *
- * ```
- * var Greeter = function (name) {
- *   this.name = name;
- * }
- *
- * Greeter.prototype.greet = function () {
- *   alert('Hello ' + this.name + '!');
- * }
- * ```
- *
- * ### Example with parameter annotations
- *
- * ```
- * var MyService = ng.Class({
- *   constructor: [String, [new Optional(), Service], function(name, myService) {
- *     ...
- *   }]
- * });
- * ```
- *
- * is equivalent to ES6:
- *
- * ```
- * class MyService {
- *   constructor(name: string, @Optional() myService: Service) {
- *     ...
- *   }
- * }
- * ```
- *
- * ### Example with inheritance
- *
- * ```
- * var Shape = ng.Class({
- *   constructor: (color) {
- *     this.color = color;
- *   }
- * });
- *
- * var Square = ng.Class({
- *   extends: Shape,
- *   constructor: function(color, size) {
- *     Shape.call(this, color);
- *     this.size = size;
- *   }
- * });
- * ```
- * @suppress {globalThis}
- * @stable
- */
-export function Class(clsDef: ClassDefinition): Type<any> {
-  const constructor = applyParams(
-      clsDef.hasOwnProperty('constructor') ? clsDef.constructor : undefined, 'constructor');
-
-  let proto = constructor.prototype;
-
-  if (clsDef.hasOwnProperty('extends')) {
-    if (typeof clsDef.extends === 'function') {
-      (<Function>constructor).prototype = proto =
-          Object.create((<Function>clsDef.extends).prototype);
-    } else {
-      throw new Error(
-          `Class definition 'extends' property must be a constructor function was: ${stringify(clsDef.extends)}`);
-    }
-  }
-
-  for (const key in clsDef) {
-    if (key !== 'extends' && key !== 'prototype' && clsDef.hasOwnProperty(key)) {
-      proto[key] = applyParams(clsDef[key], key);
-    }
-  }
-
-  if (this && this.annotations instanceof Array) {
-    Reflect.defineMetadata('annotations', this.annotations, constructor);
-  }
-
-  const constructorName = constructor['name'];
-  if (!constructorName || constructorName === 'constructor') {
-    (constructor as any)['overriddenName'] = `class${_nextClassId++}`;
-  }
-
-  return <Type<any>>constructor;
-}
+export const ANNOTATIONS = '__annotations__';
+export const PARAMETERS = '__paramaters__';
+export const PROP_METADATA = '__prop__metadata__';
 
 /**
  * @suppress {globalThis}
@@ -268,27 +48,21 @@ export function makeDecorator(
   const metaCtor = makeMetadataCtor(props);
 
   function DecoratorFactory(objOrType: any): (cls: any) => any {
-    if (!(Reflect && Reflect.getOwnMetadata)) {
-      throw 'reflect-metadata shim is required when using class decorators';
-    }
-
     if (this instanceof DecoratorFactory) {
       metaCtor.call(this, objOrType);
       return this;
     }
 
     const annotationInstance = new (<any>DecoratorFactory)(objOrType);
-    const chainAnnotation =
-        typeof this === 'function' && Array.isArray(this.annotations) ? this.annotations : [];
-    chainAnnotation.push(annotationInstance);
     const TypeDecorator: TypeDecorator = <TypeDecorator>function TypeDecorator(cls: Type<any>) {
-      const annotations = Reflect.getOwnMetadata('annotations', cls) || [];
+      // Use of Object.defineProperty is important since it creates non-enumerable property which
+      // prevents the property is copied during subclassing.
+      const annotations = cls.hasOwnProperty(ANNOTATIONS) ?
+          (cls as any)[ANNOTATIONS] :
+          Object.defineProperty(cls, ANNOTATIONS, {value: []})[ANNOTATIONS];
       annotations.push(annotationInstance);
-      Reflect.defineMetadata('annotations', annotations, cls);
       return cls;
     };
-    TypeDecorator.annotations = chainAnnotation;
-    TypeDecorator.Class = Class;
     if (chainFn) chainFn(TypeDecorator);
     return TypeDecorator;
   }
@@ -327,7 +101,11 @@ export function makeParamDecorator(
     return ParamDecorator;
 
     function ParamDecorator(cls: any, unusedKey: any, index: number): any {
-      const parameters: (any[] | null)[] = Reflect.getOwnMetadata('parameters', cls) || [];
+      // Use of Object.defineProperty is important since it creates non-enumerable property which
+      // prevents the property is copied during subclassing.
+      const parameters = cls.hasOwnProperty(PARAMETERS) ?
+          (cls as any)[PARAMETERS] :
+          Object.defineProperty(cls, PARAMETERS, {value: []})[PARAMETERS];
 
       // there might be gaps if some in between parameters do not have annotations.
       // we pad with nulls.
@@ -335,10 +113,7 @@ export function makeParamDecorator(
         parameters.push(null);
       }
 
-      parameters[index] = parameters[index] || [];
-      parameters[index] !.push(annotationInstance);
-
-      Reflect.defineMetadata('parameters', parameters, cls);
+      (parameters[index] = parameters[index] || []).push(annotationInstance);
       return cls;
     }
   }
@@ -363,10 +138,14 @@ export function makePropDecorator(
     const decoratorInstance = new (<any>PropDecoratorFactory)(...args);
 
     return function PropDecorator(target: any, name: string) {
-      const meta = Reflect.getOwnMetadata('propMetadata', target.constructor) || {};
+      const constructor = target.constructor;
+      // Use of Object.defineProperty is important since it creates non-enumerable property which
+      // prevents the property is copied during subclassing.
+      const meta = constructor.hasOwnProperty(PROP_METADATA) ?
+          (constructor as any)[PROP_METADATA] :
+          Object.defineProperty(constructor, PROP_METADATA, {value: {}})[PROP_METADATA];
       meta[name] = meta.hasOwnProperty(name) && meta[name] || [];
       meta[name].unshift(decoratorInstance);
-      Reflect.defineMetadata('propMetadata', meta, target.constructor);
     };
   }
 
diff --git a/packages/core/test/metadata/decorators_spec.ts b/packages/core/test/metadata/decorators_spec.ts
deleted file mode 100644
index bff20fbf66..0000000000
--- a/packages/core/test/metadata/decorators_spec.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-/**
- * @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 {Component, Directive} from '@angular/core';
-import {reflector} from '@angular/core/src/reflection/reflection';
-import {describe, expect, it} from '@angular/core/testing/src/testing_internal';
-
-export function main() {
-  describe('es5 decorators', () => {
-    it('should declare directive class', () => {
-      const MyDirective = Directive({}).Class({constructor: function() { this.works = true; }});
-      expect(new MyDirective().works).toEqual(true);
-    });
-
-    it('should declare Component class', () => {
-      const MyComponent = Component({}).Class({constructor: function() { this.works = true; }});
-      expect(new MyComponent().works).toEqual(true);
-    });
-
-    it('should create type in ES5', () => {
-      class MyComponent {};
-      let as: any /** TODO #9100 */;
-      (<any>MyComponent).annotations = as = Component({});
-      expect(reflector.annotations(MyComponent)).toEqual(as.annotations);
-    });
-  });
-}
diff --git a/packages/core/test/util/decorators_spec.ts b/packages/core/test/util/decorators_spec.ts
index aa7a8cadda..7de8af451f 100644
--- a/packages/core/test/util/decorators_spec.ts
+++ b/packages/core/test/util/decorators_spec.ts
@@ -6,17 +6,13 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Inject} from '@angular/core';
-import {reflector} from '@angular/core/src/reflection/reflection';
-import {global} from '@angular/core/src/util';
-import {Class, makeDecorator, makePropDecorator} from '@angular/core/src/util/decorators';
+import {reflector} from '../../src/reflection/reflection';
+import {ANNOTATIONS, makeDecorator, makePropDecorator} from '../../src/util/decorators';
 
 class DecoratedParent {}
 class DecoratedChild extends DecoratedParent {}
 
 export function main() {
-  const Reflect = global['Reflect'];
-
   const TerminalDecorator =
       makeDecorator('TerminalDecorator', (data: any) => ({terminal: true, ...data}));
   const TestDecorator = makeDecorator(
@@ -54,7 +50,7 @@ export function main() {
     it('should invoke as decorator', () => {
       function Type() {}
       TestDecorator({marker: 'WORKS'})(Type);
-      const annotations = Reflect.getOwnMetadata('annotations', Type);
+      const annotations = (Type as any)[ANNOTATIONS];
       expect(annotations[0].marker).toEqual('WORKS');
     });
 
@@ -64,102 +60,13 @@ export function main() {
       expect(annotation.marker).toEqual('WORKS');
     });
 
-    it('should invoke as chain', () => {
-      let chain: any = TestDecorator({marker: 'WORKS'});
-      expect(typeof chain.Terminal).toEqual('function');
-      chain = chain.Terminal();
-      expect(chain.annotations[0] instanceof TestDecorator).toEqual(true);
-      expect(chain.annotations[0].marker).toEqual('WORKS');
-      expect(chain.annotations[1] instanceof TerminalDecorator).toEqual(true);
-    });
-
     it('should not apply decorators from the prototype chain', function() {
       TestDecorator({marker: 'parent'})(DecoratedParent);
       TestDecorator({marker: 'child'})(DecoratedChild);
 
-      const annotations = Reflect.getOwnMetadata('annotations', DecoratedChild);
+      const annotations = (DecoratedChild as any)[ANNOTATIONS];
       expect(annotations.length).toBe(1);
       expect(annotations[0].marker).toEqual('child');
     });
-
-    describe('Class', () => {
-      it('should create a class', () => {
-        let i0: any;
-        let i1: any;
-        const MyClass = (<any>TestDecorator({marker: 'test-works'})).Class(<any>{
-          extends: Class(<any>{
-            constructor: function() {},
-            extendWorks: function() { return 'extend ' + this.arg; }
-          }),
-          constructor: [String, function(arg: any) { this.arg = arg; }],
-          methodA: [
-            i0 = new Inject(String),
-            [i1 = Inject(String), Number],
-            function(a: any, b: any) {},
-          ],
-          works: function() { return this.arg; },
-          prototype: 'IGNORE'
-        });
-
-        const obj: any = new MyClass('WORKS');
-        expect(obj.arg).toEqual('WORKS');
-        expect(obj.works()).toEqual('WORKS');
-        expect(obj.extendWorks()).toEqual('extend WORKS');
-        expect(reflector.parameters(MyClass)).toEqual([[String]]);
-        expect(reflector.parameters(obj.methodA)).toEqual([[i0], [i1.annotation, Number]]);
-
-        const proto = (<Function>MyClass).prototype;
-        expect(proto.extends).toEqual(undefined);
-        expect(proto.prototype).toEqual(undefined);
-
-        expect(reflector.annotations(MyClass)[0].marker).toEqual('test-works');
-      });
-
-      describe('errors', () => {
-        it('should ensure that last constructor is required', () => {
-          expect(() => { (<Function>Class)({}); })
-              .toThrowError(
-                  'Only Function or Array is supported in Class definition for key \'constructor\' is \'undefined\'');
-        });
-
-
-        it('should ensure that we dont accidentally patch native objects', () => {
-          expect(() => {
-            (<Function>Class)({constructor: Object});
-          }).toThrowError('Can not use native Object as constructor');
-        });
-
-
-        it('should ensure that last position is function', () => {
-          expect(() => { Class({constructor: []}); })
-              .toThrowError(
-                  'Last position of Class method array must be Function in key constructor was \'undefined\'');
-        });
-
-        it('should ensure that annotation count matches parameters count', () => {
-          expect(() => {
-            Class({constructor: [String, function MyType() {}]});
-          })
-              .toThrowError(
-                  'Number of annotations (1) does not match number of arguments (0) in the function: MyType');
-        });
-
-        it('should ensure that only Function|Arrays are supported', () => {
-          expect(() => { Class({constructor: function() {}, method: <any>'non_function'}); })
-              .toThrowError(
-                  'Only Function or Array is supported in Class definition for key \'method\' is \'non_function\'');
-        });
-
-        it('should ensure that extends is a Function', () => {
-          expect(() => { Class({extends: <any>'non_type', constructor: function() {}}); })
-              .toThrowError(
-                  'Class definition \'extends\' property must be a constructor function was: non_type');
-        });
-
-        it('should assign an overridden name for anonymous constructor functions', () => {
-          expect((Class({constructor: function() {}}) as any).overriddenName).not.toBeUndefined();
-        });
-      });
-    });
   });
 }
diff --git a/packages/upgrade/src/dynamic/upgrade_adapter.ts b/packages/upgrade/src/dynamic/upgrade_adapter.ts
index f4e744007b..8cc8e65c36 100644
--- a/packages/upgrade/src/dynamic/upgrade_adapter.ts
+++ b/packages/upgrade/src/dynamic/upgrade_adapter.ts
@@ -551,19 +551,19 @@ export class UpgradeAdapter {
             .then(() => {
               // At this point we have ng1 injector and we have prepared
               // ng1 components to be upgraded, we now can bootstrap ng2.
-              const DynamicNgUpgradeModule =
-                  NgModule({
-                    providers: [
-                      {provide: $INJECTOR, useFactory: () => ng1Injector},
-                      {provide: $COMPILE, useFactory: () => ng1Injector.get($COMPILE)},
-                      this.upgradedProviders
-                    ],
-                    imports: [this.ng2AppModule],
-                    entryComponents: this.downgradedComponents
-                  }).Class({
-                    constructor: function DynamicNgUpgradeModule() {},
-                    ngDoBootstrap: function() {}
-                  });
+              @NgModule({
+                providers: [
+                  {provide: $INJECTOR, useFactory: () => ng1Injector},
+                  {provide: $COMPILE, useFactory: () => ng1Injector.get($COMPILE)},
+                  this.upgradedProviders
+                ],
+                imports: [this.ng2AppModule],
+                entryComponents: this.downgradedComponents
+              })
+              class DynamicNgUpgradeModule {
+                constructor() {}
+                ngDoBootstrap() {}
+              }
               (platformRef as any)
                   ._bootstrapModuleWithZone(
                       DynamicNgUpgradeModule, this.compilerOptions, this.ngZone)
diff --git a/packages/upgrade/src/dynamic/upgrade_ng1_adapter.ts b/packages/upgrade/src/dynamic/upgrade_ng1_adapter.ts
index 366fd82f0b..59d5bace78 100644
--- a/packages/upgrade/src/dynamic/upgrade_ng1_adapter.ts
+++ b/packages/upgrade/src/dynamic/upgrade_ng1_adapter.ts
@@ -38,23 +38,26 @@ export class UpgradeNg1ComponentAdapterBuilder {
         name.replace(CAMEL_CASE, (all: string, next: string) => '-' + next.toLowerCase());
     const self = this;
 
-    this.type =
-        Directive({selector: selector, inputs: this.inputsRename, outputs: this.outputsRename})
-            .Class({
-              constructor: [
-                new Inject($SCOPE), Injector, ElementRef,
-                function(scope: angular.IScope, injector: Injector, elementRef: ElementRef) {
-                  const helper = new UpgradeHelper(injector, name, elementRef, this.directive);
-                  return new UpgradeNg1ComponentAdapter(
-                      helper, scope, self.template, self.inputs, self.outputs, self.propertyOutputs,
-                      self.checkProperties, self.propertyMap);
-                }
-              ],
-              ngOnInit: function() { /* needs to be here for ng2 to properly detect it */ },
-              ngOnChanges: function() { /* needs to be here for ng2 to properly detect it */ },
-              ngDoCheck: function() { /* needs to be here for ng2 to properly detect it */ },
-              ngOnDestroy: function() { /* needs to be here for ng2 to properly detect it */ },
-            });
+    @Directive({selector: selector, inputs: this.inputsRename, outputs: this.outputsRename})
+    class MyClass {
+      directive: angular.IDirective;
+      constructor(
+          @Inject($SCOPE) scope: angular.IScope, injector: Injector, elementRef: ElementRef) {
+        const helper = new UpgradeHelper(injector, name, elementRef, this.directive);
+        return new UpgradeNg1ComponentAdapter(
+            helper, scope, self.template, self.inputs, self.outputs, self.propertyOutputs,
+            self.checkProperties, self.propertyMap) as any;
+      }
+      ngOnInit() { /* needs to be here for ng2 to properly detect it */
+      }
+      ngOnChanges() { /* needs to be here for ng2 to properly detect it */
+      }
+      ngDoCheck() { /* needs to be here for ng2 to properly detect it */
+      }
+      ngOnDestroy() { /* needs to be here for ng2 to properly detect it */
+      }
+    };
+    this.type = MyClass;
   }
 
   extractBindings() {
diff --git a/packages/upgrade/test/dynamic/upgrade_spec.ts b/packages/upgrade/test/dynamic/upgrade_spec.ts
index ff35abb500..9a32de8acd 100644
--- a/packages/upgrade/test/dynamic/upgrade_spec.ts
+++ b/packages/upgrade/test/dynamic/upgrade_spec.ts
@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {ChangeDetectorRef, Class, Component, EventEmitter, Input, NO_ERRORS_SCHEMA, NgModule, NgZone, OnChanges, SimpleChange, SimpleChanges, Testability, destroyPlatform, forwardRef} from '@angular/core';
+import {ChangeDetectorRef, Component, EventEmitter, Input, NO_ERRORS_SCHEMA, NgModule, NgZone, OnChanges, SimpleChange, SimpleChanges, Testability, destroyPlatform, forwardRef} from '@angular/core';
 import {async, fakeAsync, flushMicrotasks, tick} from '@angular/core/testing';
 import {BrowserModule} from '@angular/platform-browser';
 import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
@@ -25,14 +25,16 @@ export function main() {
       it('should instantiate ng2 in ng1 template and project content', async(() => {
            const ng1Module = angular.module('ng1', []);
 
-           const Ng2 = Component({
-                         selector: 'ng2',
-                         template: `{{ 'NG2' }}(<ng-content></ng-content>)`,
-                       }).Class({constructor: function() {}});
+           @Component({
+             selector: 'ng2',
+             template: `{{ 'NG2' }}(<ng-content></ng-content>)`,
+           })
+           class Ng2 {
+           }
 
-           const Ng2Module = NgModule({declarations: [Ng2], imports: [BrowserModule]}).Class({
-             constructor: function() {}
-           });
+           @NgModule({declarations: [Ng2], imports: [BrowserModule]})
+           class Ng2Module {
+           }
 
            const element =
                html('<div>{{ \'ng1[\' }}<ng2>~{{ \'ng-content\' }}~</ng2>{{ \']\' }}</div>');
@@ -49,15 +51,19 @@ export function main() {
            const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module));
            const ng1Module = angular.module('ng1', []);
 
-           const Ng2 = Component({
-                         selector: 'ng2',
-                         template: `{{ 'ng2(' }}<ng1>{{'transclude'}}</ng1>{{ ')' }}`,
-                       }).Class({constructor: function Ng2() {}});
+           @Component({
+             selector: 'ng2',
+             template: `{{ 'ng2(' }}<ng1>{{'transclude'}}</ng1>{{ ')' }}`,
+           })
+           class Ng2 {
+           };
 
-           const Ng2Module = NgModule({
-                               declarations: [adapter.upgradeNg1Component('ng1'), Ng2],
-                               imports: [BrowserModule],
-                             }).Class({constructor: function Ng2Module() {}});
+           @NgModule({
+             declarations: [adapter.upgradeNg1Component('ng1'), Ng2],
+             imports: [BrowserModule],
+           })
+           class Ng2Module {
+           }
 
            ng1Module.directive('ng1', () => {
              return {transclude: true, template: '{{ "ng1" }}(<ng-transclude></ng-transclude>)'};
@@ -77,19 +83,20 @@ export function main() {
            spyOn(platformRef, '_bootstrapModuleWithZone').and.callThrough();
 
            const ng1Module = angular.module('ng1', []);
-           const Ng2 = Component({
-                         selector: 'ng2',
-                         template: `{{ 'NG2' }}(<ng-content></ng-content>)`
-                       }).Class({constructor: function() {}});
+           @Component({selector: 'ng2', template: `{{ 'NG2' }}(<ng-content></ng-content>)`})
+           class Ng2 {
+           }
 
            const element =
                html('<div>{{ \'ng1[\' }}<ng2>~{{ \'ng-content\' }}~</ng2>{{ \']\' }}</div>');
 
-           const Ng2AppModule =
-               NgModule({
-                 declarations: [Ng2],
-                 imports: [BrowserModule],
-               }).Class({constructor: function Ng2AppModule() {}, ngDoBootstrap: function() {}});
+           @NgModule({
+             declarations: [Ng2],
+             imports: [BrowserModule],
+           })
+           class Ng2AppModule {
+             ngDoBootstrap() {}
+           };
 
            const adapter: UpgradeAdapter = new UpgradeAdapter(Ng2AppModule, {providers: []});
            ng1Module.directive('ng2', adapter.downgradeNg2Component(Ng2));
@@ -107,15 +114,19 @@ export function main() {
       beforeEach(() => {
         angular.module('ng1', []);
 
-        const ng2Component = Component({
-                               selector: 'ng2',
-                               template: `<BAD TEMPLATE div></div>`,
-                             }).Class({constructor: function() {}});
+        @Component({
+          selector: 'ng2',
+          template: `<BAD TEMPLATE div></div>`,
+        })
+        class ng2Component {
+        }
 
-        const Ng2Module = NgModule({
-                            declarations: [ng2Component],
-                            imports: [BrowserModule],
-                          }).Class({constructor: function() {}});
+        @NgModule({
+          declarations: [ng2Component],
+          imports: [BrowserModule],
+        })
+        class Ng2Module {
+        }
 
         adapter = new UpgradeAdapter(Ng2Module);
       });
@@ -161,18 +172,22 @@ export function main() {
              $rootScope.reset = () => log.length = 0;
            });
 
-           const Ng2 = Component({
-                         selector: 'ng2',
-                         template: `{{l('2A')}}<ng1a></ng1a>{{l('2B')}}<ng1b></ng1b>{{l('2C')}}`
-                       }).Class({constructor: function() { this.l = l; }});
+           @Component({
+             selector: 'ng2',
+             template: `{{l('2A')}}<ng1a></ng1a>{{l('2B')}}<ng1b></ng1b>{{l('2C')}}`
+           })
+           class Ng2 {
+             l: any;
+             constructor() { this.l = l; }
+           }
 
-           const Ng2Module =
-               NgModule({
-                 declarations: [
-                   adapter.upgradeNg1Component('ng1a'), adapter.upgradeNg1Component('ng1b'), Ng2
-                 ],
-                 imports: [BrowserModule],
-               }).Class({constructor: function() {}});
+           @NgModule({
+             declarations:
+                 [adapter.upgradeNg1Component('ng1a'), adapter.upgradeNg1Component('ng1b'), Ng2],
+             imports: [BrowserModule],
+           })
+           class Ng2Module {
+           }
 
            ng1Module.directive('ng2', adapter.downgradeNg2Component(Ng2));
 
@@ -302,37 +317,35 @@ export function main() {
              $rootScope.eventA = '?';
              $rootScope.eventB = '?';
            });
-           const Ng2 = Component({
-                         selector: 'ng2',
-                         inputs:
-                             ['literal', 'interpolate', 'oneWayA', 'oneWayB', 'twoWayA', 'twoWayB'],
-                         outputs: [
-                           'eventA', 'eventB', 'twoWayAEmitter: twoWayAChange',
-                           'twoWayBEmitter: twoWayBChange'
-                         ],
-                         template: 'ignore: {{ignore}}; ' +
-                             'literal: {{literal}}; interpolate: {{interpolate}}; ' +
-                             'oneWayA: {{oneWayA}}; oneWayB: {{oneWayB}}; ' +
-                             'twoWayA: {{twoWayA}}; twoWayB: {{twoWayB}}; ({{ngOnChangesCount}})'
-                       }).Class({
-             constructor: function() {
-               this.ngOnChangesCount = 0;
-               this.ignore = '-';
-               this.literal = '?';
-               this.interpolate = '?';
-               this.oneWayA = '?';
-               this.oneWayB = '?';
-               this.twoWayA = '?';
-               this.twoWayB = '?';
-               this.eventA = new EventEmitter();
-               this.eventB = new EventEmitter();
-               this.twoWayAEmitter = new EventEmitter();
-               this.twoWayBEmitter = new EventEmitter();
-             },
-             ngOnChanges: function(changes: SimpleChanges) {
+           @Component({
+             selector: 'ng2',
+             inputs: ['literal', 'interpolate', 'oneWayA', 'oneWayB', 'twoWayA', 'twoWayB'],
+             outputs: [
+               'eventA', 'eventB', 'twoWayAEmitter: twoWayAChange', 'twoWayBEmitter: twoWayBChange'
+             ],
+             template: 'ignore: {{ignore}}; ' +
+                 'literal: {{literal}}; interpolate: {{interpolate}}; ' +
+                 'oneWayA: {{oneWayA}}; oneWayB: {{oneWayB}}; ' +
+                 'twoWayA: {{twoWayA}}; twoWayB: {{twoWayB}}; ({{ngOnChangesCount}})'
+           })
+           class Ng2 {
+             ngOnChangesCount = 0;
+             ignore = '-';
+             literal = '?';
+             interpolate = '?';
+             oneWayA = '?';
+             oneWayB = '?';
+             twoWayA = '?';
+             twoWayB = '?';
+             eventA = new EventEmitter();
+             eventB = new EventEmitter();
+             twoWayAEmitter = new EventEmitter();
+             twoWayBEmitter = new EventEmitter();
+             ngOnChanges(changes: SimpleChanges) {
                const assert = (prop: string, value: any) => {
-                 if (this[prop] != value) {
-                   throw new Error(`Expected: '${prop}' to be '${value}' but was '${this[prop]}'`);
+                 if ((this as any)[prop] != value) {
+                   throw new Error(
+                       `Expected: '${prop}' to be '${value}' but was '${(this as any)[prop]}'`);
                  }
                };
 
@@ -374,13 +387,15 @@ export function main() {
                    throw new Error('Called too many times! ' + JSON.stringify(changes));
                }
              }
-           });
+           }
            ng1Module.directive('ng2', adapter.downgradeNg2Component(Ng2));
 
-           const Ng2Module = NgModule({
-                               declarations: [Ng2],
-                               imports: [BrowserModule],
-                             }).Class({constructor: function() {}});
+           @NgModule({
+             declarations: [Ng2],
+             imports: [BrowserModule],
+           })
+           class Ng2Module {
+           };
 
            const element = html(`<div>
               <ng2 literal="Text" interpolate="Hello {{name}}"
@@ -493,11 +508,13 @@ export function main() {
            ng1Module.directive('ng2', adapter.downgradeNg2Component(Ng2));
            const element = html(`<div><ng2 ng-model="modelA"></ng2> | {{modelA}}</div>`);
 
-           const Ng2Module = NgModule({
-                               declarations: [Ng2],
-                               imports: [BrowserModule],
-                               schemas: [NO_ERRORS_SCHEMA],
-                             }).Class({constructor: function() {}});
+           @NgModule({
+             declarations: [Ng2],
+             imports: [BrowserModule],
+             schemas: [NO_ERRORS_SCHEMA],
+           })
+           class Ng2Module {
+           }
 
            adapter.bootstrap(element, ['ng1']).ready((ref) => {
              let $rootScope: any = ref.ng1RootScope;
@@ -537,15 +554,17 @@ export function main() {
              };
            });
 
-           const Ng2 = Component({selector: 'ng2', template: 'test'}).Class({
-             constructor: function() {},
-             ngOnDestroy: function() { onDestroyed.emit('destroyed'); }
-           });
+           @Component({selector: 'ng2', template: 'test'})
+           class Ng2 {
+             ngOnDestroy() { onDestroyed.emit('destroyed'); }
+           }
 
-           const Ng2Module = NgModule({
-                               declarations: [Ng2],
-                               imports: [BrowserModule],
-                             }).Class({constructor: function() {}});
+           @NgModule({
+             declarations: [Ng2],
+             imports: [BrowserModule],
+           })
+           class Ng2Module {
+           }
 
            ng1Module.directive('ng2', adapter.downgradeNg2Component(Ng2));
            const element = html('<ng1></ng1>');
@@ -571,13 +590,16 @@ export function main() {
              }
            ]);
 
-           const Ng2 =
-               Component({selector: 'ng2', template: 'test'}).Class({constructor: function() {}});
+           @Component({selector: 'ng2', template: 'test'})
+           class Ng2 {
+           };
 
-           const Ng2Module = NgModule({
-                               declarations: [Ng2],
-                               imports: [BrowserModule],
-                             }).Class({constructor: function() {}});
+           @NgModule({
+             declarations: [Ng2],
+             imports: [BrowserModule],
+           })
+           class Ng2Module {
+           }
 
            ng1Module.directive('ng2', adapter.downgradeNg2Component(Ng2));
            const element = html('<ng1></ng1>');
@@ -590,15 +612,17 @@ export function main() {
       it('should support multi-slot projection', async(() => {
            const ng1Module = angular.module('ng1', []);
 
-           const Ng2 = Component({
-                         selector: 'ng2',
-                         template: '2a(<ng-content select=".ng1a"></ng-content>)' +
-                             '2b(<ng-content select=".ng1b"></ng-content>)'
-                       }).Class({constructor: function() {}});
+           @Component({
+             selector: 'ng2',
+             template: '2a(<ng-content select=".ng1a"></ng-content>)' +
+                 '2b(<ng-content select=".ng1b"></ng-content>)'
+           })
+           class Ng2 {
+           }
 
-           const Ng2Module = NgModule({declarations: [Ng2], imports: [BrowserModule]}).Class({
-             constructor: function() {}
-           });
+           @NgModule({declarations: [Ng2], imports: [BrowserModule]})
+           class Ng2Module {
+           }
 
            // The ng-if on one of the projected children is here to make sure
            // the correct slot is targeted even with structural directives in play.
@@ -942,27 +966,27 @@ export function main() {
              };
            };
            ng1Module.directive('ng1', ng1);
-           const Ng2 =
-               Component({
-                 selector: 'ng2',
-                 template:
-                     '<ng1 fullName="{{last}}, {{first}}, {{city}}" [dataA]="first" [(dataB)]="last" [modelC]="city" ' +
-                     '(event)="event=$event"></ng1>' +
-                     '<ng1 fullName="{{\'TEST\'}}" dataA="First" dataB="Last" modelC="City"></ng1>' +
-                     '{{event}}-{{last}}, {{first}}, {{city}}'
-               }).Class({
-                 constructor: function() {
-                   this.first = 'Victor';
-                   this.last = 'Savkin';
-                   this.city = 'SF';
-                   this.event = '?';
-                 }
-               });
+           @Component({
+             selector: 'ng2',
+             template:
+                 '<ng1 fullName="{{last}}, {{first}}, {{city}}" [dataA]="first" [(dataB)]="last" [modelC]="city" ' +
+                 '(event)="event=$event"></ng1>' +
+                 '<ng1 fullName="{{\'TEST\'}}" dataA="First" dataB="Last" modelC="City"></ng1>' +
+                 '{{event}}-{{last}}, {{first}}, {{city}}'
+           })
+           class Ng2 {
+             first = 'Victor';
+             last = 'Savkin';
+             city = 'SF';
+             event = '?';
+           }
 
-           const Ng2Module = NgModule({
-                               declarations: [adapter.upgradeNg1Component('ng1'), Ng2],
-                               imports: [BrowserModule],
-                             }).Class({constructor: function() {}});
+           @NgModule({
+             declarations: [adapter.upgradeNg1Component('ng1'), Ng2],
+             imports: [BrowserModule],
+           })
+           class Ng2Module {
+           }
 
            ng1Module.directive('ng2', adapter.downgradeNg2Component(Ng2));
            const element = html(`<div><ng2></ng2></div>`);
@@ -989,23 +1013,24 @@ export function main() {
              };
            };
            ng1Module.directive('ng1', ng1);
-           const Ng2 = Component({
-                         selector: 'ng2',
-                         template: '<ng1 [dataA]="first" [modelB]="last"></ng1>' +
-                             '<ng1 dataA="First" modelB="Last"></ng1>' +
-                             '<ng1></ng1>' +
-                             '<ng1></ng1>'
-                       }).Class({
-             constructor: function() {
-               this.first = 'Victor';
-               this.last = 'Savkin';
-             }
-           });
+           @Component({
+             selector: 'ng2',
+             template: '<ng1 [dataA]="first" [modelB]="last"></ng1>' +
+                 '<ng1 dataA="First" modelB="Last"></ng1>' +
+                 '<ng1></ng1>' +
+                 '<ng1></ng1>'
+           })
+           class Ng2 {
+             first = 'Victor';
+             last = 'Savkin';
+           }
 
-           const Ng2Module = NgModule({
-                               declarations: [adapter.upgradeNg1Component('ng1'), Ng2],
-                               imports: [BrowserModule],
-                             }).Class({constructor: function() {}});
+           @NgModule({
+             declarations: [adapter.upgradeNg1Component('ng1'), Ng2],
+             imports: [BrowserModule],
+           })
+           class Ng2Module {
+           }
 
            ng1Module.directive('ng2', adapter.downgradeNg2Component(Ng2));
            const element = html(`<div><ng2></ng2></div>`);
@@ -1036,23 +1061,22 @@ export function main() {
            };
 
            ng1Module.directive('ng1', ng1);
-           const Ng2 =
-               Component({
-                 selector: 'ng2',
-                 template:
-                     '{{someText}} - Length: {{dataList.length}} | <ng1 [(data)]="dataList"></ng1>'
-               }).Class({
+           @Component({
+             selector: 'ng2',
+             template:
+                 '{{someText}} - Length: {{dataList.length}} | <ng1 [(data)]="dataList"></ng1>'
+           })
+           class Ng2 {
+             dataList = [1, 2, 3];
+             someText = 'ng2';
+           }
 
-                 constructor: function() {
-                   this.dataList = [1, 2, 3];
-                   this.someText = 'ng2';
-                 }
-               });
-
-           const Ng2Module = NgModule({
-                               declarations: [adapter.upgradeNg1Component('ng1'), Ng2],
-                               imports: [BrowserModule],
-                             }).Class({constructor: function() {}});
+           @NgModule({
+             declarations: [adapter.upgradeNg1Component('ng1'), Ng2],
+             imports: [BrowserModule],
+           })
+           class Ng2Module {
+           }
 
            ng1Module.directive('ng2', adapter.downgradeNg2Component(Ng2));
            const element = html(`<div><ng2></ng2></div>`);
@@ -1081,23 +1105,22 @@ export function main() {
            };
 
            ng1Module.directive('ng1', ng1);
-           const Ng2 =
-               Component({
-                 selector: 'ng2',
-                 template:
-                     '{{someText}} - Length: {{dataList.length}} | <ng1 [(data)]="dataList"></ng1>'
-               }).Class({
+           @Component({
+             selector: 'ng2',
+             template:
+                 '{{someText}} - Length: {{dataList.length}} | <ng1 [(data)]="dataList"></ng1>'
+           })
+           class Ng2 {
+             dataList = [1, 2, 3];
+             someText = 'ng2';
+           }
 
-                 constructor: function() {
-                   this.dataList = [1, 2, 3];
-                   this.someText = 'ng2';
-                 }
-               });
-
-           const Ng2Module = NgModule({
-                               declarations: [adapter.upgradeNg1Component('ng1'), Ng2],
-                               imports: [BrowserModule],
-                             }).Class({constructor: function() {}});
+           @NgModule({
+             declarations: [adapter.upgradeNg1Component('ng1'), Ng2],
+             imports: [BrowserModule],
+           })
+           class Ng2Module {
+           }
 
            ng1Module.directive('ng2', adapter.downgradeNg2Component(Ng2));
            const element = html(`<div><ng2></ng2></div>`);
@@ -1122,14 +1145,16 @@ export function main() {
 
            const ng1 = () => { return {templateUrl: 'url.html'}; };
            ng1Module.directive('ng1', ng1);
-           const Ng2 = Component({selector: 'ng2', template: '<ng1></ng1>'}).Class({
-             constructor: function() {}
-           });
+           @Component({selector: 'ng2', template: '<ng1></ng1>'})
+           class Ng2 {
+           }
 
-           const Ng2Module = NgModule({
-                               declarations: [adapter.upgradeNg1Component('ng1'), Ng2],
-                               imports: [BrowserModule],
-                             }).Class({constructor: function() {}});
+           @NgModule({
+             declarations: [adapter.upgradeNg1Component('ng1'), Ng2],
+             imports: [BrowserModule],
+           })
+           class Ng2Module {
+           }
 
            ng1Module.directive('ng2', adapter.downgradeNg2Component(Ng2));
            const element = html(`<div><ng2></ng2></div>`);
@@ -1149,14 +1174,16 @@ export function main() {
 
            const ng1 = () => { return {templateUrl() { return 'url.html'; }}; };
            ng1Module.directive('ng1', ng1);
-           const Ng2 = Component({selector: 'ng2', template: '<ng1></ng1>'}).Class({
-             constructor: function() {}
-           });
+           @Component({selector: 'ng2', template: '<ng1></ng1>'})
+           class Ng2 {
+           }
 
-           const Ng2Module = NgModule({
-                               declarations: [adapter.upgradeNg1Component('ng1'), Ng2],
-                               imports: [BrowserModule],
-                             }).Class({constructor: function() {}});
+           @NgModule({
+             declarations: [adapter.upgradeNg1Component('ng1'), Ng2],
+             imports: [BrowserModule],
+           })
+           class Ng2Module {
+           }
 
            ng1Module.directive('ng2', adapter.downgradeNg2Component(Ng2));
            const element = html(`<div><ng2></ng2></div>`);
@@ -1173,14 +1200,16 @@ export function main() {
            const ng1 = () => { return {template: ''}; };
            ng1Module.directive('ng1', ng1);
 
-           const Ng2 = Component({selector: 'ng2', template: '<ng1></ng1>'}).Class({
-             constructor: function() {}
-           });
+           @Component({selector: 'ng2', template: '<ng1></ng1>'})
+           class Ng2 {
+           }
 
-           const Ng2Module = NgModule({
-                               declarations: [adapter.upgradeNg1Component('ng1'), Ng2],
-                               imports: [BrowserModule],
-                             }).Class({constructor: function() {}});
+           @NgModule({
+             declarations: [adapter.upgradeNg1Component('ng1'), Ng2],
+             imports: [BrowserModule],
+           })
+           class Ng2Module {
+           }
 
            ng1Module.directive('ng2', adapter.downgradeNg2Component(Ng2));
            const element = html(`<div><ng2></ng2></div>`);
@@ -1197,14 +1226,16 @@ export function main() {
            const ng1 = () => { return {template() { return ''; }}; };
            ng1Module.directive('ng1', ng1);
 
-           const Ng2 = Component({selector: 'ng2', template: '<ng1></ng1>'}).Class({
-             constructor: function() {}
-           });
+           @Component({selector: 'ng2', template: '<ng1></ng1>'})
+           class Ng2 {
+           }
 
-           const Ng2Module = NgModule({
-                               declarations: [adapter.upgradeNg1Component('ng1'), Ng2],
-                               imports: [BrowserModule],
-                             }).Class({constructor: function() {}});
+           @NgModule({
+             declarations: [adapter.upgradeNg1Component('ng1'), Ng2],
+             imports: [BrowserModule],
+           })
+           class Ng2Module {
+           }
 
            ng1Module.directive('ng2', adapter.downgradeNg2Component(Ng2));
            const element = html(`<div><ng2></ng2></div>`);
@@ -1222,14 +1253,16 @@ export function main() {
            const ng1 = () => { return {templateUrl: 'url.html'}; };
            ng1Module.directive('ng1', ng1);
 
-           const Ng2 = Component({selector: 'ng2', template: '<ng1></ng1>'}).Class({
-             constructor: function() {}
-           });
+           @Component({selector: 'ng2', template: '<ng1></ng1>'})
+           class Ng2 {
+           }
 
-           const Ng2Module = NgModule({
-                               declarations: [adapter.upgradeNg1Component('ng1'), Ng2],
-                               imports: [BrowserModule],
-                             }).Class({constructor: function() {}});
+           @NgModule({
+             declarations: [adapter.upgradeNg1Component('ng1'), Ng2],
+             imports: [BrowserModule],
+           })
+           class Ng2Module {
+           }
 
            ng1Module.directive('ng2', adapter.downgradeNg2Component(Ng2));
            const element = html(`<div><ng2></ng2></div>`);
@@ -1249,30 +1282,31 @@ export function main() {
                template:
                    '{{ctl.scope}}; {{ctl.isClass}}; {{ctl.hasElement}}; {{ctl.isPublished()}}',
                controllerAs: 'ctl',
-               controller: Class({
-                 constructor: function($scope: any, $element: any) {
-                   (<any>this).verifyIAmAClass();
+               controller: class {
+                 scope: any; hasElement: string; $element: any; isClass: any;
+                 constructor($scope: any, $element: any) {
+                   this.verifyIAmAClass();
                    this.scope = $scope.$parent.$parent == $scope.$root ? 'scope' : 'wrong-scope';
                    this.hasElement = $element[0].nodeName;
                    this.$element = $element;
-                 },
-                 verifyIAmAClass: function() { this.isClass = 'isClass'; },
-                 isPublished: function() {
+                 } verifyIAmAClass() { this.isClass = 'isClass'; } isPublished() {
                    return this.$element.controller('ng1') == this ? 'published' : 'not-published';
                  }
-               })
+               }
              };
            };
            ng1Module.directive('ng1', ng1);
 
-           const Ng2 = Component({selector: 'ng2', template: '<ng1></ng1>'}).Class({
-             constructor: function() {}
-           });
+           @Component({selector: 'ng2', template: '<ng1></ng1>'})
+           class Ng2 {
+           }
 
-           const Ng2Module = NgModule({
-                               declarations: [adapter.upgradeNg1Component('ng1'), Ng2],
-                               imports: [BrowserModule],
-                             }).Class({constructor: function() {}});
+           @NgModule({
+             declarations: [adapter.upgradeNg1Component('ng1'), Ng2],
+             imports: [BrowserModule],
+           })
+           class Ng2Module {
+           }
 
            ng1Module.directive('ng2', adapter.downgradeNg2Component(Ng2));
            const element = html(`<div><ng2></ng2></div>`);
@@ -1292,19 +1326,21 @@ export function main() {
                bindToController: true,
                template: '{{ctl.title}}',
                controllerAs: 'ctl',
-               controller: Class({constructor: function() {}})
+               controller: class {}
              };
            };
            ng1Module.directive('ng1', ng1);
 
-           const Ng2 = Component({selector: 'ng2', template: '<ng1 title="WORKS"></ng1>'}).Class({
-             constructor: function() {}
-           });
+           @Component({selector: 'ng2', template: '<ng1 title="WORKS"></ng1>'})
+           class Ng2 {
+           }
 
-           const Ng2Module = NgModule({
-                               declarations: [adapter.upgradeNg1Component('ng1'), Ng2],
-                               imports: [BrowserModule],
-                             }).Class({constructor: function() {}});
+           @NgModule({
+             declarations: [adapter.upgradeNg1Component('ng1'), Ng2],
+             imports: [BrowserModule],
+           })
+           class Ng2Module {
+           }
 
            ng1Module.directive('ng2', adapter.downgradeNg2Component(Ng2));
            const element = html(`<div><ng2></ng2></div>`);
@@ -1324,19 +1360,21 @@ export function main() {
                bindToController: {title: '@'},
                template: '{{ctl.title}}',
                controllerAs: 'ctl',
-               controller: Class({constructor: function() {}})
+               controller: class {}
              };
            };
            ng1Module.directive('ng1', ng1);
 
-           const Ng2 = Component({selector: 'ng2', template: '<ng1 title="WORKS"></ng1>'}).Class({
-             constructor: function() {}
-           });
+           @Component({selector: 'ng2', template: '<ng1 title="WORKS"></ng1>'})
+           class Ng2 {
+           }
 
-           const Ng2Module = NgModule({
-                               declarations: [adapter.upgradeNg1Component('ng1'), Ng2],
-                               imports: [BrowserModule],
-                             }).Class({constructor: function() {}});
+           @NgModule({
+             declarations: [adapter.upgradeNg1Component('ng1'), Ng2],
+             imports: [BrowserModule],
+           })
+           class Ng2Module {
+           }
 
            ng1Module.directive('ng2', adapter.downgradeNg2Component(Ng2));
            const element = html(`<div><ng2></ng2></div>`);
@@ -1357,7 +1395,7 @@ export function main() {
                template: '{{ctl.status}}',
                require: 'ng1',
                controllerAs: 'ctrl',
-               controller: Class({constructor: function() { this.status = 'WORKS'; }}),
+               controller: class {status = 'WORKS';},
                link: function(scope: any, element: any, attrs: any, linkController: any) {
                  expect(scope.$root).toEqual($rootScope);
                  expect(element[0].nodeName).toEqual('NG1');
@@ -1368,14 +1406,16 @@ export function main() {
            };
            ng1Module.directive('ng1', ng1);
 
-           const Ng2 = Component({selector: 'ng2', template: '<ng1></ng1>'}).Class({
-             constructor: function() {}
-           });
+           @Component({selector: 'ng2', template: '<ng1></ng1>'})
+           class Ng2 {
+           }
 
-           const Ng2Module = NgModule({
-                               declarations: [adapter.upgradeNg1Component('ng1'), Ng2],
-                               imports: [BrowserModule],
-                             }).Class({constructor: function() {}});
+           @NgModule({
+             declarations: [adapter.upgradeNg1Component('ng1'), Ng2],
+             imports: [BrowserModule],
+           })
+           class Ng2Module {
+           }
 
            ng1Module.directive('ng2', adapter.downgradeNg2Component(Ng2));
            const element = html(`<div><ng2></ng2></div>`);
@@ -1389,9 +1429,7 @@ export function main() {
            const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module));
            const ng1Module = angular.module('ng1', []);
 
-           const parent = () => {
-             return {controller: Class({constructor: function() { this.parent = 'PARENT'; }})};
-           };
+           const parent = () => { return {controller: class {parent = 'PARENT';}}; };
            const ng1 = () => {
              return {
                scope: {title: '@'},
@@ -1399,7 +1437,7 @@ export function main() {
                template: '{{parent.parent}}:{{ng1.status}}',
                require: ['ng1', '^parent', '?^^notFound'],
                controllerAs: 'ctrl',
-               controller: Class({constructor: function() { this.status = 'WORKS'; }}),
+               controller: class {status = 'WORKS';},
                link: function(scope: any, element: any, attrs: any, linkControllers: any) {
                  expect(linkControllers[0].status).toEqual('WORKS');
                  expect(linkControllers[1].parent).toEqual('PARENT');
@@ -1412,14 +1450,16 @@ export function main() {
            ng1Module.directive('parent', parent);
            ng1Module.directive('ng1', ng1);
 
-           const Ng2 = Component({selector: 'ng2', template: '<ng1></ng1>'}).Class({
-             constructor: function() {}
-           });
+           @Component({selector: 'ng2', template: '<ng1></ng1>'})
+           class Ng2 {
+           }
 
-           const Ng2Module = NgModule({
-                               declarations: [adapter.upgradeNg1Component('ng1'), Ng2],
-                               imports: [BrowserModule],
-                             }).Class({constructor: function() {}});
+           @NgModule({
+             declarations: [adapter.upgradeNg1Component('ng1'), Ng2],
+             imports: [BrowserModule],
+           })
+           class Ng2Module {
+           }
 
            ng1Module.directive('ng2', adapter.downgradeNg2Component(Ng2));
            const element = html(`<div><parent><ng2></ng2></parent></div>`);
@@ -1835,7 +1875,8 @@ export function main() {
              }
 
              // On browsers that don't support `requestAnimationFrame` (IE 9, Android <= 4.3),
-             // `$animate` will use `setTimeout(..., 16.6)` instead. This timeout will still be on
+             // `$animate` will use `setTimeout(..., 16.6)` instead. This timeout will still be
+             // on
              // the queue at the end of the test, causing it to fail.
              // Mocking animations (via `ngAnimateMock`) avoids the issue.
              angular.module('ng1', ['ngAnimateMock'])
@@ -1923,7 +1964,8 @@ export function main() {
              }
 
              // On browsers that don't support `requestAnimationFrame` (IE 9, Android <= 4.3),
-             // `$animate` will use `setTimeout(..., 16.6)` instead. This timeout will still be on
+             // `$animate` will use `setTimeout(..., 16.6)` instead. This timeout will still be
+             // on
              // the queue at the end of the test, causing it to fail.
              // Mocking animations (via `ngAnimateMock`) avoids the issue.
              angular.module('ng1', ['ngAnimateMock'])
@@ -2618,19 +2660,21 @@ export function main() {
            const ng1 = {
              bindings: {personProfile: '<'},
              template: 'Hello {{$ctrl.personProfile.firstName}} {{$ctrl.personProfile.lastName}}',
-             controller: Class({constructor: function() {}})
+             controller: class {}
            };
            ng1Module.component('ng1', ng1);
 
-           const Ng2 =
-               Component({selector: 'ng2', template: '<ng1 [personProfile]="goku"></ng1>'}).Class({
-                 constructor: function() { this.goku = {firstName: 'GOKU', lastName: 'SAN'}; }
-               });
+           @Component({selector: 'ng2', template: '<ng1 [personProfile]="goku"></ng1>'})
+           class Ng2 {
+             goku = {firstName: 'GOKU', lastName: 'SAN'};
+           }
 
-           const Ng2Module = NgModule({
-                               declarations: [adapter.upgradeNg1Component('ng1'), Ng2],
-                               imports: [BrowserModule],
-                             }).Class({constructor: function() {}});
+           @NgModule({
+             declarations: [adapter.upgradeNg1Component('ng1'), Ng2],
+             imports: [BrowserModule],
+           })
+           class Ng2Module {
+           }
 
            ng1Module.directive('ng2', adapter.downgradeNg2Component(Ng2));
 
@@ -2650,19 +2694,22 @@ export function main() {
            };
            ng1Module.component('ng1', ng1);
 
-           const Ng2a = Component({selector: 'ng2a', template: 'ng2a(<ng1></ng1>)'}).Class({
-             constructor: function() {}
-           });
+           @Component({selector: 'ng2a', template: 'ng2a(<ng1></ng1>)'})
+           class Ng2a {
+           }
            ng1Module.directive('ng2a', adapter.downgradeNg2Component(Ng2a));
 
-           const Ng2b =
-               Component({selector: 'ng2b', template: 'ng2b'}).Class({constructor: function() {}});
+           @Component({selector: 'ng2b', template: 'ng2b'})
+           class Ng2b {
+           }
            ng1Module.directive('ng2b', adapter.downgradeNg2Component(Ng2b));
 
-           const Ng2Module = NgModule({
-                               declarations: [adapter.upgradeNg1Component('ng1'), Ng2a, Ng2b],
-                               imports: [BrowserModule],
-                             }).Class({constructor: function() {}});
+           @NgModule({
+             declarations: [adapter.upgradeNg1Component('ng1'), Ng2a, Ng2b],
+             imports: [BrowserModule],
+           })
+           class Ng2Module {
+           }
 
            const element = html(`<div><ng2a></ng2a></div>`);
            adapter.bootstrap(element, ['ng1']).ready((ref) => {
@@ -2675,10 +2722,12 @@ export function main() {
       function SomeToken() {}
 
       it('should export ng2 instance to ng1', async(() => {
-           const MyNg2Module = NgModule({
-                                 providers: [{provide: SomeToken, useValue: 'correct_value'}],
-                                 imports: [BrowserModule],
-                               }).Class({constructor: function() {}});
+           @NgModule({
+             providers: [{provide: SomeToken, useValue: 'correct_value'}],
+             imports: [BrowserModule],
+           })
+           class MyNg2Module {
+           }
 
            const adapter: UpgradeAdapter = new UpgradeAdapter(MyNg2Module);
            const module = angular.module('myExample', []);
@@ -2690,8 +2739,9 @@ export function main() {
          }));
 
       it('should export ng1 instance to ng2', async(() => {
-           const MyNg2Module =
-               NgModule({imports: [BrowserModule]}).Class({constructor: function() {}});
+           @NgModule({imports: [BrowserModule]})
+           class MyNg2Module {
+           };
 
            const adapter: UpgradeAdapter = new UpgradeAdapter(MyNg2Module);
            const module = angular.module('myExample', []);
@@ -2710,18 +2760,17 @@ export function main() {
       it('should respect hierarchical dependency injection for ng2', async(() => {
            const ng1Module = angular.module('ng1', []);
 
-           const Ng2Parent = Component({
-                               selector: 'ng2-parent',
-                               template: `ng2-parent(<ng-content></ng-content>)`
-                             }).Class({constructor: function() {}});
-           const Ng2Child = Component({selector: 'ng2-child', template: `ng2-child`}).Class({
-             constructor: [Ng2Parent, function(parent: any) {}]
-           });
+           @Component({selector: 'ng2-parent', template: `ng2-parent(<ng-content></ng-content>)`})
+           class Ng2Parent {
+           }
+           @Component({selector: 'ng2-child', template: `ng2-child`})
+           class Ng2Child {
+             constructor(parent: Ng2Parent) {}
+           }
 
-           const Ng2Module =
-               NgModule({declarations: [Ng2Parent, Ng2Child], imports: [BrowserModule]}).Class({
-                 constructor: function() {}
-               });
+           @NgModule({declarations: [Ng2Parent, Ng2Child], imports: [BrowserModule]})
+           class Ng2Module {
+           }
 
            const element = html('<ng2-parent><ng2-child></ng2-child></ng2-parent>');
 
@@ -2737,8 +2786,9 @@ export function main() {
 
     describe('testability', () => {
       it('should handle deferred bootstrap', async(() => {
-           const MyNg2Module =
-               NgModule({imports: [BrowserModule]}).Class({constructor: function() {}});
+           @NgModule({imports: [BrowserModule]})
+           class MyNg2Module {
+           }
 
            const adapter: UpgradeAdapter = new UpgradeAdapter(MyNg2Module);
            angular.module('ng1', []);
@@ -2759,8 +2809,9 @@ export function main() {
          }));
 
       it('should wait for ng2 testability', async(() => {
-           const MyNg2Module =
-               NgModule({imports: [BrowserModule]}).Class({constructor: function() {}});
+           @NgModule({imports: [BrowserModule]})
+           class MyNg2Module {
+           }
 
            const adapter: UpgradeAdapter = new UpgradeAdapter(MyNg2Module);
            angular.module('ng1', []);
@@ -2797,17 +2848,20 @@ export function main() {
            };
            module.directive('ng1', ng1);
 
-           const Ng2 =
-               Component({
-                 selector: 'ng2',
-                 inputs: ['name'],
-                 template: 'ng2[<ng1 [title]="name">transclude</ng1>](<ng-content></ng-content>)'
-               }).Class({constructor: function() {}});
+           @Component({
+             selector: 'ng2',
+             inputs: ['name'],
+             template: 'ng2[<ng1 [title]="name">transclude</ng1>](<ng-content></ng-content>)'
+           })
+           class Ng2 {
+           }
 
-           const Ng2Module = NgModule({
-                               declarations: [adapter.upgradeNg1Component('ng1'), Ng2],
-                               imports: [BrowserModule],
-                             }).Class({constructor: function() {}});
+           @NgModule({
+             declarations: [adapter.upgradeNg1Component('ng1'), Ng2],
+             imports: [BrowserModule],
+           })
+           class Ng2Module {
+           }
 
            module.directive('ng2', adapter.downgradeNg2Component(Ng2));
 
@@ -2829,14 +2883,16 @@ export function main() {
       beforeEach(() => {
         const ng1Module = angular.module('ng1', []);
 
-        const Ng2 = Component({
-                      selector: 'ng2',
-                      template: 'Hello World',
-                    }).Class({constructor: function() {}});
+        @Component({
+          selector: 'ng2',
+          template: 'Hello World',
+        })
+        class Ng2 {
+        }
 
-        const Ng2Module = NgModule({declarations: [Ng2], imports: [BrowserModule]}).Class({
-          constructor: function() {}
-        });
+        @NgModule({declarations: [Ng2], imports: [BrowserModule]})
+        class Ng2Module {
+        }
 
         const upgradeAdapter = new UpgradeAdapter(Ng2Module);
         ng1Module.directive('ng2', upgradeAdapter.downgradeNg2Component(Ng2));
diff --git a/tools/public_api_guard/core/core.d.ts b/tools/public_api_guard/core/core.d.ts
index 936b0a0a58..97233f5bc6 100644
--- a/tools/public_api_guard/core/core.d.ts
+++ b/tools/public_api_guard/core/core.d.ts
@@ -163,17 +163,6 @@ export declare abstract class ChangeDetectorRef {
     abstract reattach(): void;
 }
 
-/** @stable */
-export declare function Class(clsDef: ClassDefinition): Type<any>;
-
-/** @stable */
-export declare type ClassDefinition = {
-    extends?: Type<any>;
-    constructor: Function | any[];
-} & {
-    [x: string]: Type<any> | Function | any[];
-};
-
 /** @stable */
 export interface ClassProvider {
     multi?: boolean;
@@ -1029,10 +1018,8 @@ export declare const Type: FunctionConstructor;
 
 /** @stable */
 export interface TypeDecorator {
-    annotations: any[];
     (target: Object, propertyKey?: string | symbol, parameterIndex?: number): void;
     <T extends Type<any>>(type: T): T;
-    Class(obj: ClassDefinition): Type<any>;
 }
 
 /** @stable */

From 27d901a51d1440c2ffa50ee0fb9bfc80e01b1485 Mon Sep 17 00:00:00 2001
From: Tobias Bosch <tbosch1009@gmail.com>
Date: Wed, 9 Aug 2017 13:45:45 -0700
Subject: [PATCH 18/83] refactor(compiler-cli): cleanup API for transformer
 based ngc

This is in preparation for watch mode.
---
 packages/compiler-cli/index.ts                |   2 +-
 .../src/diagnostics/check_types.ts            |   9 +-
 packages/compiler-cli/src/main.ts             | 114 ++++++---
 packages/compiler-cli/src/ngc.ts              |  68 ------
 packages/compiler-cli/src/perform-compile.ts  | 224 ++++++++---------
 packages/compiler-cli/src/transformers/api.ts |   8 +-
 .../src/transformers/entry_points.ts          |   5 +-
 .../compiler-cli/src/transformers/program.ts  |  34 ++-
 packages/compiler-cli/test/main_spec.ts       | 110 +++------
 packages/compiler-cli/test/ngc_spec.ts        | 230 ++++--------------
 packages/compiler-cli/tsconfig-build.json     |   1 -
 packages/tsc-wrapped/src/compiler_host.ts     |  73 +++---
 packages/tsc-wrapped/src/main.ts              |   8 +-
 tools/ngc-wrapped/index.ts                    |  25 +-
 14 files changed, 359 insertions(+), 552 deletions(-)
 delete mode 100644 packages/compiler-cli/src/ngc.ts

diff --git a/packages/compiler-cli/index.ts b/packages/compiler-cli/index.ts
index 482b8ecba8..e7095d0698 100644
--- a/packages/compiler-cli/index.ts
+++ b/packages/compiler-cli/index.ts
@@ -20,7 +20,7 @@ export {BuiltinType, DeclarationKind, Definition, PipeInfo, Pipes, Signature, Sp
 export * from './src/transformers/api';
 export * from './src/transformers/entry_points';
 
-export {performCompilation} from './src/perform-compile';
+export {performCompilation, readConfiguration, formatDiagnostics, calcProjectFileAndBasePath, createNgCompilerOptions} from './src/perform-compile';
 
 // TODO(hansl): moving to Angular 4 need to update this API.
 export {NgTools_InternalApi_NG_2 as __NGTOOLS_PRIVATE_API_2} from './src/ngtools_api';
diff --git a/packages/compiler-cli/src/diagnostics/check_types.ts b/packages/compiler-cli/src/diagnostics/check_types.ts
index 0029f2fe60..48584a8493 100644
--- a/packages/compiler-cli/src/diagnostics/check_types.ts
+++ b/packages/compiler-cli/src/diagnostics/check_types.ts
@@ -9,7 +9,7 @@
 import {AotCompiler, AotCompilerHost, AotCompilerOptions, EmitterVisitorContext, GeneratedFile, NgAnalyzedModules, ParseSourceSpan, Statement, StaticReflector, TypeScriptEmitter, createAotCompiler} from '@angular/compiler';
 import * as ts from 'typescript';
 
-import {Diagnostic, DiagnosticCategory} from '../transformers/api';
+import {Diagnostic} from '../transformers/api';
 
 interface FactoryInfo {
   source: ts.SourceFile;
@@ -143,7 +143,7 @@ export class TypeChecker {
           const diagnosticsList = diagnosticsFor(fileName);
           diagnosticsList.push({
             message: diagnosticMessageToString(diagnostic.messageText),
-            category: diagnosticCategoryConverter(diagnostic.category), span
+            category: diagnostic.category, span
           });
         }
       }
@@ -166,11 +166,6 @@ function diagnosticMessageToString(message: ts.DiagnosticMessageChain | string):
   return ts.flattenDiagnosticMessageText(message, '\n');
 }
 
-function diagnosticCategoryConverter(kind: ts.DiagnosticCategory) {
-  // The diagnostics kind matches ts.DiagnosticCategory. Review this code if this changes.
-  return kind as any as DiagnosticCategory;
-}
-
 function createFactoryInfo(emitter: TypeScriptEmitter, file: GeneratedFile): FactoryInfo {
   const {sourceText, context} =
       emitter.emitStatementsAndContext(file.srcFileUrl, file.genFileUrl, file.stmts !);
diff --git a/packages/compiler-cli/src/main.ts b/packages/compiler-cli/src/main.ts
index 9e4f171760..28d9d86ab9 100644
--- a/packages/compiler-cli/src/main.ts
+++ b/packages/compiler-cli/src/main.ts
@@ -14,15 +14,87 @@ import * as ts from 'typescript';
 import * as tsc from '@angular/tsc-wrapped';
 import * as fs from 'fs';
 import * as path from 'path';
-import * as ngc from './ngc';
+import * as api from './transformers/api';
+import * as ngc from './transformers/entry_points';
+import {performCompilation, readConfiguration, formatDiagnostics, Diagnostics, ParsedConfiguration} from './perform-compile';
 
 import {isSyntaxError} from '@angular/compiler';
-
-import {readConfiguration} from './perform-compile';
-
 import {CodeGenerator} from './codegen';
 
-function codegen(
+export function main(
+    args: string[], consoleError: (s: string) => void = console.error): Promise<number> {
+  const parsedArgs = require('minimist')(args);
+  const {rootNames, options, errors: configErrors} = readCommandLineAndConfiguration(parsedArgs);
+  if (configErrors.length) {
+    return Promise.resolve(reportErrorsAndExit(options, configErrors, consoleError));
+  }
+  if (options.disableTransformerPipeline) {
+    return disabledTransformerPipelineNgcMain(parsedArgs, consoleError);
+  }
+  const {diagnostics: compileDiags} = performCompilation(rootNames, options);
+  return Promise.resolve(reportErrorsAndExit(options, compileDiags, consoleError));
+}
+
+export function mainSync(
+    args: string[], consoleError: (s: string) => void = console.error): number {
+  const parsedArgs = require('minimist')(args);
+  const {rootNames, options, errors: configErrors} = readCommandLineAndConfiguration(parsedArgs);
+  if (configErrors.length) {
+    return reportErrorsAndExit(options, configErrors, consoleError);
+  }
+  const {diagnostics: compileDiags} = performCompilation(rootNames, options);
+  return reportErrorsAndExit(options, compileDiags, consoleError);
+}
+
+function readCommandLineAndConfiguration(args: any): ParsedConfiguration {
+  const project = args.p || args.project || '.';
+  const allDiagnostics: Diagnostics = [];
+  const config = readConfiguration(project);
+  const options = mergeCommandLineParams(args, config.options);
+  return {rootNames: config.rootNames, options, errors: config.errors};
+}
+
+function reportErrorsAndExit(
+    options: api.CompilerOptions, allDiagnostics: Diagnostics,
+    consoleError: (s: string) => void = console.error): number {
+  const exitCode = allDiagnostics.some(d => d.category === ts.DiagnosticCategory.Error) ? 1 : 0;
+  if (allDiagnostics.length) {
+    consoleError(formatDiagnostics(options, allDiagnostics));
+  }
+  return exitCode;
+}
+
+function mergeCommandLineParams(
+    cliArgs: {[k: string]: string}, options: api.CompilerOptions): api.CompilerOptions {
+  // TODO: also merge in tsc command line parameters by calling
+  // ts.readCommandLine.
+  if (cliArgs.i18nFile) options.i18nInFile = cliArgs.i18nFile;
+  if (cliArgs.i18nFormat) options.i18nInFormat = cliArgs.i18nFormat;
+  if (cliArgs.locale) options.i18nInLocale = cliArgs.locale;
+  const mt = cliArgs.missingTranslation;
+  if (mt === 'error' || mt === 'warning' || mt === 'ignore') {
+    options.i18nInMissingTranslations = mt;
+  }
+  return options;
+}
+
+function disabledTransformerPipelineNgcMain(
+    args: any, consoleError: (s: string) => void = console.error): Promise<number> {
+  const cliOptions = new tsc.NgcCliOptions(args);
+  const project = args.p || args.project || '.';
+  return tsc.main(project, cliOptions, disabledTransformerPipelineCodegen)
+      .then(() => 0)
+      .catch(e => {
+        if (e instanceof tsc.UserError || isSyntaxError(e)) {
+          consoleError(e.message);
+        } else {
+          consoleError(e.stack);
+        }
+        return Promise.resolve(1);
+      });
+}
+
+function disabledTransformerPipelineCodegen(
     ngOptions: tsc.AngularCompilerOptions, cliOptions: tsc.NgcCliOptions, program: ts.Program,
     host: ts.CompilerHost) {
   if (ngOptions.enableSummariesForJit === undefined) {
@@ -32,38 +104,8 @@ function codegen(
   return CodeGenerator.create(ngOptions, cliOptions, program, host).codegen();
 }
 
-export function main(
-    args: any, consoleError: (s: string) => void = console.error): Promise<number> {
-  const project = args.p || args.project || '.';
-  const cliOptions = new tsc.NgcCliOptions(args);
-
-  return tsc.main(project, cliOptions, codegen).then(() => 0).catch(e => {
-    if (e instanceof tsc.UserError || isSyntaxError(e)) {
-      consoleError(e.message);
-      return Promise.resolve(1);
-    } else {
-      consoleError(e.stack);
-      consoleError('Compilation failed');
-      return Promise.resolve(1);
-    }
-  });
-}
-
 // CLI entry point
 if (require.main === module) {
   const args = process.argv.slice(2);
-  const parsedArgs = require('minimist')(args);
-  const project = parsedArgs.p || parsedArgs.project || '.';
-
-  const projectDir = fs.lstatSync(project).isFile() ? path.dirname(project) : project;
-
-  // file names in tsconfig are resolved relative to this absolute path
-  const basePath = path.resolve(process.cwd(), projectDir);
-  const {ngOptions} = readConfiguration(project, basePath);
-
-  if (ngOptions.disableTransformerPipeline) {
-    main(parsedArgs).then((exitCode: number) => process.exit(exitCode));
-  } else {
-    process.exit(ngc.main(args, s => console.error(s)));
-  }
+  main(args).then((exitCode: number) => process.exitCode = exitCode);
 }
diff --git a/packages/compiler-cli/src/ngc.ts b/packages/compiler-cli/src/ngc.ts
deleted file mode 100644
index 788b1f4cb1..0000000000
--- a/packages/compiler-cli/src/ngc.ts
+++ /dev/null
@@ -1,68 +0,0 @@
-/**
- * @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
- */
-
-// Must be imported first, because Angular decorators throw on load.
-import 'reflect-metadata';
-
-import {isSyntaxError} from '@angular/compiler';
-import * as fs from 'fs';
-import * as path from 'path';
-
-import {performCompilation, readConfiguration, throwOnDiagnostics} from './perform-compile';
-import {CompilerOptions} from './transformers/api';
-
-export function main(
-    args: string[], consoleError: (s: string) => void = console.error,
-    checkFunc: (cwd: string, ...args: any[]) => void = throwOnDiagnostics): number {
-  try {
-    const parsedArgs = require('minimist')(args);
-    const project = parsedArgs.p || parsedArgs.project || '.';
-
-    const projectDir = fs.lstatSync(project).isFile() ? path.dirname(project) : project;
-
-    // file names in tsconfig are resolved relative to this absolute path
-    const basePath = path.resolve(process.cwd(), projectDir);
-    const {parsed, ngOptions} = readConfiguration(project, basePath, checkFunc);
-
-    // CLI arguments can override the i18n options
-    const ngcOptions = mergeCommandLine(parsedArgs, ngOptions);
-
-    const res = performCompilation(
-        basePath, parsed.fileNames, parsed.options, ngcOptions, consoleError, checkFunc);
-
-    return res.errorCode;
-  } catch (e) {
-    if (isSyntaxError(e)) {
-      consoleError(e.message);
-      return 1;
-    }
-
-    consoleError(e.stack);
-    consoleError('Compilation failed');
-    return 2;
-  }
-}
-
-// Merge command line parameters
-function mergeCommandLine(
-    parsedArgs: {[k: string]: string}, options: CompilerOptions): CompilerOptions {
-  if (parsedArgs.i18nFile) options.i18nInFile = parsedArgs.i18nFile;
-  if (parsedArgs.i18nFormat) options.i18nInFormat = parsedArgs.i18nFormat;
-  if (parsedArgs.locale) options.i18nInLocale = parsedArgs.locale;
-  const mt = parsedArgs.missingTranslation;
-  if (mt === 'error' || mt === 'warning' || mt === 'ignore') {
-    options.i18nInMissingTranslations = mt;
-  }
-
-  return options;
-}
-
-// CLI entry point
-if (require.main === module) {
-  process.exit(main(process.argv.slice(2), s => console.error(s)));
-}
\ No newline at end of file
diff --git a/packages/compiler-cli/src/perform-compile.ts b/packages/compiler-cli/src/perform-compile.ts
index b7efcb2bf9..258a094ce8 100644
--- a/packages/compiler-cli/src/perform-compile.ts
+++ b/packages/compiler-cli/src/perform-compile.ts
@@ -17,24 +17,25 @@ import * as ng from './transformers/entry_points';
 
 const TS_EXT = /\.ts$/;
 
-export type Diagnostics = ts.Diagnostic[] | api.Diagnostic[];
+export type Diagnostics = Array<ts.Diagnostic|api.Diagnostic>;
 
-function isTsDiagnostics(diagnostics: any): diagnostics is ts.Diagnostic[] {
-  return diagnostics && diagnostics[0] && (diagnostics[0].file || diagnostics[0].messageText);
+function isTsDiagnostic(diagnostic: any): diagnostic is ts.Diagnostic {
+  return diagnostic && (diagnostic.file || diagnostic.messageText);
 }
 
-function formatDiagnostics(cwd: string, diags: Diagnostics): string {
+export function formatDiagnostics(options: api.CompilerOptions, diags: Diagnostics): string {
   if (diags && diags.length) {
-    if (isTsDiagnostics(diags)) {
-      return ts.formatDiagnostics(diags, {
-        getCurrentDirectory: () => cwd,
-        getCanonicalFileName: fileName => fileName,
-        getNewLine: () => ts.sys.newLine
-      });
-    } else {
-      return diags
-          .map(d => {
-            let res = api.DiagnosticCategory[d.category];
+    const tsFormatHost: ts.FormatDiagnosticsHost = {
+      getCurrentDirectory: () => options.basePath || process.cwd(),
+      getCanonicalFileName: fileName => fileName,
+      getNewLine: () => ts.sys.newLine
+    };
+    return diags
+        .map(d => {
+          if (isTsDiagnostic(d)) {
+            return ts.formatDiagnostics([d], tsFormatHost);
+          } else {
+            let res = ts.DiagnosticCategory[d.category];
             if (d.span) {
               res +=
                   ` at ${d.span.start.file.url}(${d.span.start.line + 1},${d.span.start.col + 1})`;
@@ -45,134 +46,133 @@ function formatDiagnostics(cwd: string, diags: Diagnostics): string {
               res += `: ${d.message}\n`;
             }
             return res;
-          })
-          .join();
-    }
+          }
+        })
+        .join();
   } else
     return '';
 }
 
-/**
- * Throw a syntax error exception with a message formatted for output
- * if the args parameter contains diagnostics errors.
- *
- * @param cwd   The directory to report error as relative to.
- * @param args  A list of potentially empty diagnostic errors.
- */
-export function throwOnDiagnostics(cwd: string, ...args: Diagnostics[]) {
-  if (args.some(diags => !!(diags && diags[0]))) {
-    throw syntaxError(args.map(diags => {
-                            if (diags && diags[0]) {
-                              return formatDiagnostics(cwd, diags);
-                            }
-                          })
-                          .filter(message => !!message)
-                          .join(''));
-  }
+export interface ParsedConfiguration {
+  options: api.CompilerOptions;
+  rootNames: string[];
+  errors: Diagnostics;
+}
+
+export function calcProjectFileAndBasePath(project: string):
+    {projectFile: string, basePath: string} {
+  const projectIsDir = fs.lstatSync(project).isDirectory();
+  const projectFile = projectIsDir ? path.join(project, 'tsconfig.json') : project;
+  const projectDir = projectIsDir ? project : path.dirname(project);
+  const basePath = path.resolve(process.cwd(), projectDir);
+  return {projectFile, basePath};
+}
+
+export function createNgCompilerOptions(
+    basePath: string, config: any, tsOptions: ts.CompilerOptions): api.CompilerOptions {
+  return {...tsOptions, ...config.angularCompilerOptions, genDir: basePath, basePath};
 }
 
 export function readConfiguration(
-    project: string, basePath: string,
-    checkFunc: (cwd: string, ...args: any[]) => void = throwOnDiagnostics,
-    existingOptions?: ts.CompilerOptions) {
-  // Allow a directory containing tsconfig.json as the project value
-  // Note, TS@next returns an empty array, while earlier versions throw
-  const projectFile =
-      fs.lstatSync(project).isDirectory() ? path.join(project, 'tsconfig.json') : project;
-  let {config, error} = ts.readConfigFile(projectFile, ts.sys.readFile);
+    project: string, existingOptions?: ts.CompilerOptions): ParsedConfiguration {
+  try {
+    const {projectFile, basePath} = calcProjectFileAndBasePath(project);
 
-  if (error) checkFunc(basePath, [error]);
-  const parseConfigHost = {
-    useCaseSensitiveFileNames: true,
-    fileExists: fs.existsSync,
-    readDirectory: ts.sys.readDirectory,
-    readFile: ts.sys.readFile
-  };
-  const parsed = ts.parseJsonConfigFileContent(config, parseConfigHost, basePath, existingOptions);
+    let {config, error} = ts.readConfigFile(projectFile, ts.sys.readFile);
 
-  checkFunc(basePath, parsed.errors);
+    if (error) {
+      return {errors: [error], rootNames: [], options: {}};
+    }
+    const parseConfigHost = {
+      useCaseSensitiveFileNames: true,
+      fileExists: fs.existsSync,
+      readDirectory: ts.sys.readDirectory,
+      readFile: ts.sys.readFile
+    };
+    const parsed =
+        ts.parseJsonConfigFileContent(config, parseConfigHost, basePath, existingOptions);
+    const rootNames = parsed.fileNames.map(f => path.normalize(f));
 
-  // Default codegen goes to the current directory
-  // Parsed options are already converted to absolute paths
-  const ngOptions = config.angularCompilerOptions || {};
-  // Ignore the genDir option
-  ngOptions.genDir = basePath;
-
-  return {parsed, ngOptions};
+    const options = createNgCompilerOptions(basePath, config, parsed.options);
+    return {rootNames, options, errors: parsed.errors};
+  } catch (e) {
+    const errors: Diagnostics = [{
+      category: ts.DiagnosticCategory.Error,
+      message: e.stack,
+    }];
+    return {errors, rootNames: [], options: {}};
+  }
 }
 
-/**
- * Returns an object with two properties:
- * - `errorCode` is 0 when the compilation was successful,
- * - `result` is an `EmitResult` when the errorCode is 0, `undefined` otherwise.
- */
 export function performCompilation(
-    basePath: string, files: string[], options: ts.CompilerOptions, ngOptions: api.CompilerOptions,
-    consoleError: (s: string) => void = console.error,
-    checkFunc: (cwd: string, ...args: any[]) => void = throwOnDiagnostics,
-    tsCompilerHost?: ts.CompilerHost): {errorCode: number, result?: api.EmitResult} {
+    rootNames: string[], options: api.CompilerOptions, host?: api.CompilerHost,
+    oldProgram?: api.Program): {
+  program?: api.Program,
+  emitResult?: api.EmitResult,
+  diagnostics: Diagnostics,
+} {
   const [major, minor] = ts.version.split('.');
 
-  if (+major < 2 || (+major === 2 && +minor < 3)) {
+  if (Number(major) < 2 || (Number(major) === 2 && Number(minor) < 3)) {
     throw new Error('Must use TypeScript > 2.3 to have transformer support');
   }
 
+  const allDiagnostics: Diagnostics = [];
+
+  function checkDiagnostics(diags: Diagnostics | undefined) {
+    if (diags) {
+      allDiagnostics.push(...diags);
+      return diags.every(d => d.category !== ts.DiagnosticCategory.Error);
+    }
+    return true;
+  }
+
+  let program: api.Program|undefined;
+  let emitResult: api.EmitResult|undefined;
   try {
-    ngOptions.basePath = basePath;
-    ngOptions.genDir = basePath;
-
-    let host = tsCompilerHost || ts.createCompilerHost(options, true);
-    host.realpath = p => p;
-
-    const rootFileNames = files.map(f => path.normalize(f));
-
-    const addGeneratedFileName = (fileName: string) => {
-      if (fileName.startsWith(basePath) && TS_EXT.exec(fileName)) {
-        rootFileNames.push(fileName);
-      }
-    };
-
-    if (ngOptions.flatModuleOutFile && !ngOptions.skipMetadataEmit) {
-      const {host: bundleHost, indexName, errors} =
-          createBundleIndexHost(ngOptions, rootFileNames, host);
-      if (errors) checkFunc(basePath, errors);
-      if (indexName) addGeneratedFileName(indexName);
-      host = bundleHost;
+    if (!host) {
+      host = ng.createNgCompilerHost({options});
     }
 
-    const ngHostOptions = {...options, ...ngOptions};
-    const ngHost = ng.createHost({tsHost: host, options: ngHostOptions});
-
-    const ngProgram =
-        ng.createProgram({rootNames: rootFileNames, host: ngHost, options: ngHostOptions});
+    program = ng.createProgram({rootNames, host, options, oldProgram});
 
+    let shouldEmit = true;
     // Check parameter diagnostics
-    checkFunc(basePath, ngProgram.getTsOptionDiagnostics(), ngProgram.getNgOptionDiagnostics());
+    shouldEmit = shouldEmit && checkDiagnostics([
+                   ...program !.getTsOptionDiagnostics(), ...program !.getNgOptionDiagnostics()
+                 ]);
 
     // Check syntactic diagnostics
-    checkFunc(basePath, ngProgram.getTsSyntacticDiagnostics());
+    shouldEmit = shouldEmit && checkDiagnostics(program !.getTsSyntacticDiagnostics());
 
     // Check TypeScript semantic and Angular structure diagnostics
-    checkFunc(
-        basePath, ngProgram.getTsSemanticDiagnostics(), ngProgram.getNgStructuralDiagnostics());
+    shouldEmit =
+        shouldEmit &&
+        checkDiagnostics(
+            [...program !.getTsSemanticDiagnostics(), ...program !.getNgStructuralDiagnostics()]);
 
     // Check Angular semantic diagnostics
-    checkFunc(basePath, ngProgram.getNgSemanticDiagnostics());
+    shouldEmit = shouldEmit && checkDiagnostics(program !.getNgSemanticDiagnostics());
 
-    const result = ngProgram.emit({
-      emitFlags: api.EmitFlags.Default |
-          ((ngOptions.skipMetadataEmit || ngOptions.flatModuleOutFile) ? 0 : api.EmitFlags.Metadata)
-    });
-
-    checkFunc(basePath, result.diagnostics);
-
-    return {errorCode: 0, result};
-  } catch (e) {
-    if (isSyntaxError(e)) {
-      consoleError(e.message);
-      return {errorCode: 1};
+    if (shouldEmit) {
+      const emitResult = program !.emit({
+        emitFlags: api.EmitFlags.Default |
+            ((options.skipMetadataEmit || options.flatModuleOutFile) ? 0 : api.EmitFlags.Metadata)
+      });
+      allDiagnostics.push(...emitResult.diagnostics);
     }
-
-    throw e;
+  } catch (e) {
+    let errMsg: string;
+    if (isSyntaxError(e)) {
+      // don't report the stack for syntax errors as they are well known errors.
+      errMsg = e.message;
+    } else {
+      errMsg = e.stack;
+    }
+    allDiagnostics.push({
+      category: ts.DiagnosticCategory.Error,
+      message: errMsg,
+    });
   }
+  return {program, emitResult, diagnostics: allDiagnostics};
 }
\ No newline at end of file
diff --git a/packages/compiler-cli/src/transformers/api.ts b/packages/compiler-cli/src/transformers/api.ts
index c48c67327b..2c463c1437 100644
--- a/packages/compiler-cli/src/transformers/api.ts
+++ b/packages/compiler-cli/src/transformers/api.ts
@@ -9,16 +9,10 @@
 import {ParseSourceSpan} from '@angular/compiler';
 import * as ts from 'typescript';
 
-export enum DiagnosticCategory {
-  Warning = 0,
-  Error = 1,
-  Message = 2,
-}
-
 export interface Diagnostic {
   message: string;
   span?: ParseSourceSpan;
-  category: DiagnosticCategory;
+  category: ts.DiagnosticCategory;
 }
 
 export interface CompilerOptions extends ts.CompilerOptions {
diff --git a/packages/compiler-cli/src/transformers/entry_points.ts b/packages/compiler-cli/src/transformers/entry_points.ts
index 4e4f5b1721..b6d991a4c9 100644
--- a/packages/compiler-cli/src/transformers/entry_points.ts
+++ b/packages/compiler-cli/src/transformers/entry_points.ts
@@ -13,8 +13,9 @@ import {createModuleFilenameResolver} from './module_filename_resolver';
 export {createProgram} from './program';
 export {createModuleFilenameResolver};
 
-export function createHost({tsHost, options}: {tsHost: ts.CompilerHost, options: CompilerOptions}):
-    CompilerHost {
+export function createNgCompilerHost(
+    {options, tsHost = ts.createCompilerHost(options, true)}:
+        {options: CompilerOptions, tsHost?: ts.CompilerHost}): CompilerHost {
   const resolver = createModuleFilenameResolver(tsHost, options);
 
   const host = Object.create(tsHost);
diff --git a/packages/compiler-cli/src/transformers/program.ts b/packages/compiler-cli/src/transformers/program.ts
index c1c0fe2da6..9e1cc3a84c 100644
--- a/packages/compiler-cli/src/transformers/program.ts
+++ b/packages/compiler-cli/src/transformers/program.ts
@@ -8,6 +8,7 @@
 
 import {AotCompiler, AotCompilerOptions, GeneratedFile, NgAnalyzedModules, createAotCompiler, getParseErrors, isSyntaxError, toTypeScript} from '@angular/compiler';
 import {MissingTranslationStrategy} from '@angular/core';
+import {createBundleIndexHost} from '@angular/tsc-wrapped';
 import * as fs from 'fs';
 import * as path from 'path';
 import * as tsickle from 'tsickle';
@@ -16,7 +17,7 @@ import * as ts from 'typescript';
 import {CompilerHost as AotCompilerHost} from '../compiler_host';
 import {TypeChecker} from '../diagnostics/check_types';
 
-import {CompilerHost, CompilerOptions, Diagnostic, DiagnosticCategory, EmitFlags, EmitResult, Program} from './api';
+import {CompilerHost, CompilerOptions, Diagnostic, EmitFlags, EmitResult, Program} from './api';
 import {LowerMetadataCache, getExpressionLoweringTransformFactory} from './lower_expressions';
 import {getAngularEmitterTransformFactory} from './node_emitter_transform';
 
@@ -31,8 +32,6 @@ const emptyModules: NgAnalyzedModules = {
 };
 
 class AngularCompilerProgram implements Program {
-  // Initialized in the constructor
-  private oldTsProgram: ts.Program|undefined;
   private tsProgram: ts.Program;
   private aotCompilerHost: AotCompilerHost;
   private compiler: AotCompiler;
@@ -49,12 +48,26 @@ class AngularCompilerProgram implements Program {
   private _generatedFileDiagnostics: Diagnostic[]|undefined;
   private _typeChecker: TypeChecker|undefined;
   private _semanticDiagnostics: Diagnostic[]|undefined;
+  private _optionsDiagnostics: Diagnostic[] = [];
 
   constructor(
       private rootNames: string[], private options: CompilerOptions, private host: CompilerHost,
       private oldProgram?: Program) {
-    this.oldTsProgram = oldProgram ? oldProgram.getTsProgram() : undefined;
-    this.tsProgram = ts.createProgram(rootNames, options, host, this.oldTsProgram);
+    if (options.flatModuleOutFile && !options.skipMetadataEmit) {
+      const {host: bundleHost, indexName, errors} = createBundleIndexHost(options, rootNames, host);
+      if (errors) {
+        // TODO(tbosch): once we move MetadataBundler from tsc_wrapped into compiler_cli,
+        // directly create ng.Diagnostic instead of using ts.Diagnostic here.
+        this._optionsDiagnostics.push(
+            ...errors.map(e => ({category: e.category, message: e.messageText as string})));
+      } else {
+        rootNames.push(indexName !);
+        this.host = host = bundleHost;
+      }
+    }
+
+    const oldTsProgram = oldProgram ? oldProgram.getTsProgram() : undefined;
+    this.tsProgram = ts.createProgram(rootNames, options, host, oldTsProgram);
     this.srcNames =
         this.tsProgram.getSourceFiles()
             .map(sf => sf.fileName)
@@ -78,7 +91,7 @@ class AngularCompilerProgram implements Program {
   }
 
   getNgOptionDiagnostics(cancellationToken?: ts.CancellationToken): Diagnostic[] {
-    return getNgOptionDiagnostics(this.options);
+    return [...this._optionsDiagnostics, ...getNgOptionDiagnostics(this.options)];
   }
 
   getTsSyntacticDiagnostics(sourceFile?: ts.SourceFile, cancellationToken?: ts.CancellationToken):
@@ -237,11 +250,11 @@ class AngularCompilerProgram implements Program {
         this._structuralDiagnostics =
             parserErrors.map<Diagnostic>(e => ({
                                            message: e.contextualMessage(),
-                                           category: DiagnosticCategory.Error,
+                                           category: ts.DiagnosticCategory.Error,
                                            span: e.span
                                          }));
       } else {
-        this._structuralDiagnostics = [{message: e.message, category: DiagnosticCategory.Error}];
+        this._structuralDiagnostics = [{message: e.message, category: ts.DiagnosticCategory.Error}];
       }
       this._analyzedModules = emptyModules;
       return emptyModules;
@@ -272,7 +285,8 @@ class AngularCompilerProgram implements Program {
       return this.options.skipTemplateCodegen ? [] : result;
     } catch (e) {
       if (isSyntaxError(e)) {
-        this._generatedFileDiagnostics = [{message: e.message, category: DiagnosticCategory.Error}];
+        this._generatedFileDiagnostics =
+            [{message: e.message, category: ts.DiagnosticCategory.Error}];
         return [];
       }
       throw e;
@@ -395,7 +409,7 @@ function getNgOptionDiagnostics(options: CompilerOptions): Diagnostic[] {
         return [{
           message:
               'Angular compiler options "annotationsAs" only supports "static fields" and "decorators"',
-          category: DiagnosticCategory.Error
+          category: ts.DiagnosticCategory.Error
         }];
     }
   }
diff --git a/packages/compiler-cli/test/main_spec.ts b/packages/compiler-cli/test/main_spec.ts
index a69e50c1b7..46b109846e 100644
--- a/packages/compiler-cli/test/main_spec.ts
+++ b/packages/compiler-cli/test/main_spec.ts
@@ -18,16 +18,22 @@ function getNgRootDir() {
   return moduleFilename.substr(0, distIndex);
 }
 
-describe('compiler-cli', () => {
+describe('compiler-cli with disableTransformerPipeline', () => {
   let basePath: string;
   let outDir: string;
   let write: (fileName: string, content: string) => void;
+  let errorSpy: jasmine.Spy&((s: string) => void);
 
   function writeConfig(tsconfig: string = '{"extends": "./tsconfig-base.json"}') {
-    write('tsconfig.json', tsconfig);
+    const json = JSON.parse(tsconfig);
+    // Note: 'extends' does not work for "angularCompilerOptions" yet.
+    const ngOptions = json['angularCompilerOptions'] = json['angularCompilerOptions'] || {};
+    ngOptions['disableTransformerPipeline'] = true;
+    write('tsconfig.json', JSON.stringify(json));
   }
 
   beforeEach(() => {
+    errorSpy = jasmine.createSpy('consoleError');
     basePath = makeTempDir();
     write = (fileName: string, content: string) => {
       fs.writeFileSync(path.join(basePath, fileName), content, {encoding: 'utf-8'});
@@ -58,13 +64,9 @@ describe('compiler-cli', () => {
     writeConfig();
     write('test.ts', 'export const A = 1;');
 
-    const mockConsole = {error: (s: string) => {}};
-
-    spyOn(mockConsole, 'error');
-
-    main({p: basePath}, mockConsole.error)
+    main(['-p', basePath], errorSpy)
         .then((exitCode) => {
-          expect(mockConsole.error).not.toHaveBeenCalled();
+          expect(errorSpy).not.toHaveBeenCalled();
           expect(exitCode).toEqual(0);
           done();
         })
@@ -76,16 +78,11 @@ describe('compiler-cli', () => {
       "extends": "./tsconfig-base.json",
       "files": ["test.ts"]
     }`);
-    const mockConsole = {error: (s: string) => {}};
 
-    spyOn(mockConsole, 'error');
-
-    main({p: basePath}, mockConsole.error)
+    main(['-p', basePath], errorSpy)
         .then((exitCode) => {
-          expect(mockConsole.error)
-              .toHaveBeenCalledWith(
-                  `Error File '` + path.join(basePath, 'test.ts') + `' not found.`);
-          expect(mockConsole.error).not.toHaveBeenCalledWith('Compilation failed');
+          expect(errorSpy).toHaveBeenCalledWith(
+              `Error File '` + path.join(basePath, 'test.ts') + `' not found.`);
           expect(exitCode).toEqual(1);
           done();
         })
@@ -96,16 +93,10 @@ describe('compiler-cli', () => {
     writeConfig();
     write('test.ts', 'foo;');
 
-    const mockConsole = {error: (s: string) => {}};
-
-    spyOn(mockConsole, 'error');
-
-    main({p: basePath}, mockConsole.error)
+    main(['-p', basePath], errorSpy)
         .then((exitCode) => {
-          expect(mockConsole.error)
-              .toHaveBeenCalledWith(
-                  'Error at ' + path.join(basePath, 'test.ts') + `:1:1: Cannot find name 'foo'.`);
-          expect(mockConsole.error).not.toHaveBeenCalledWith('Compilation failed');
+          expect(errorSpy).toHaveBeenCalledWith(
+              'Error at ' + path.join(basePath, 'test.ts') + `:1:1: Cannot find name 'foo'.`);
           expect(exitCode).toEqual(1);
           done();
         })
@@ -116,17 +107,11 @@ describe('compiler-cli', () => {
     writeConfig();
     write('test.ts', `import {MyClass} from './not-exist-deps';`);
 
-    const mockConsole = {error: (s: string) => {}};
-
-    spyOn(mockConsole, 'error');
-
-    main({p: basePath}, mockConsole.error)
+    main(['-p', basePath], errorSpy)
         .then((exitCode) => {
-          expect(mockConsole.error)
-              .toHaveBeenCalledWith(
-                  'Error at ' + path.join(basePath, 'test.ts') +
-                  `:1:23: Cannot find module './not-exist-deps'.`);
-          expect(mockConsole.error).not.toHaveBeenCalledWith('Compilation failed');
+          expect(errorSpy).toHaveBeenCalledWith(
+              'Error at ' + path.join(basePath, 'test.ts') +
+              `:1:23: Cannot find module './not-exist-deps'.`);
           expect(exitCode).toEqual(1);
           done();
         })
@@ -138,17 +123,11 @@ describe('compiler-cli', () => {
     write('empty-deps.ts', 'export const A = 1;');
     write('test.ts', `import {MyClass} from './empty-deps';`);
 
-    const mockConsole = {error: (s: string) => {}};
-
-    spyOn(mockConsole, 'error');
-
-    main({p: basePath}, mockConsole.error)
+    main(['-p', basePath], errorSpy)
         .then((exitCode) => {
-          expect(mockConsole.error)
-              .toHaveBeenCalledWith(
-                  'Error at ' + path.join(basePath, 'test.ts') + `:1:9: Module '"` +
-                  path.join(basePath, 'empty-deps') + `"' has no exported member 'MyClass'.`);
-          expect(mockConsole.error).not.toHaveBeenCalledWith('Compilation failed');
+          expect(errorSpy).toHaveBeenCalledWith(
+              'Error at ' + path.join(basePath, 'test.ts') + `:1:9: Module '"` +
+              path.join(basePath, 'empty-deps') + `"' has no exported member 'MyClass'.`);
           expect(exitCode).toEqual(1);
           done();
         })
@@ -163,18 +142,12 @@ describe('compiler-cli', () => {
       A();
     `);
 
-    const mockConsole = {error: (s: string) => {}};
-
-    spyOn(mockConsole, 'error');
-
-    main({p: basePath}, mockConsole.error)
+    main(['-p', basePath], errorSpy)
         .then((exitCode) => {
-          expect(mockConsole.error)
-              .toHaveBeenCalledWith(
-                  'Error at ' + path.join(basePath, 'test.ts') +
-                  ':3:7: Cannot invoke an expression whose type lacks a call signature. ' +
-                  'Type \'String\' has no compatible call signatures.');
-          expect(mockConsole.error).not.toHaveBeenCalledWith('Compilation failed');
+          expect(errorSpy).toHaveBeenCalledWith(
+              'Error at ' + path.join(basePath, 'test.ts') +
+              ':3:7: Cannot invoke an expression whose type lacks a call signature. ' +
+              'Type \'String\' has no compatible call signatures.');
           expect(exitCode).toEqual(1);
           done();
         })
@@ -184,14 +157,11 @@ describe('compiler-cli', () => {
   it('should print the stack trace on compiler internal errors', (done) => {
     write('test.ts', 'export const A = 1;');
 
-    const mockConsole = {error: (s: string) => {}};
-
-    spyOn(mockConsole, 'error');
-
-    main({p: 'not-exist'}, mockConsole.error)
+    main(['-p', 'not-exist'], errorSpy)
         .then((exitCode) => {
-          expect(mockConsole.error).toHaveBeenCalled();
-          expect(mockConsole.error).toHaveBeenCalledWith('Compilation failed');
+          expect(errorSpy).toHaveBeenCalled();
+          expect(errorSpy.calls.mostRecent().args[0]).toContain('no such file or directory');
+          expect(errorSpy.calls.mostRecent().args[0]).toContain('at Error (native)');
           expect(exitCode).toEqual(1);
           done();
         })
@@ -215,7 +185,7 @@ describe('compiler-cli', () => {
         export class MyModule {}
       `);
 
-         main({p: basePath})
+         main(['-p', basePath], errorSpy)
              .then((exitCode) => {
                expect(exitCode).toEqual(0);
 
@@ -244,11 +214,7 @@ describe('compiler-cli', () => {
         export class MyModule {}
       `);
 
-      const mockConsole = {error: (s: string) => {}};
-
-      const errorSpy = spyOn(mockConsole, 'error');
-
-      main({p: basePath}, mockConsole.error)
+      main(['-p', basePath], errorSpy)
           .then((exitCode) => {
             expect(errorSpy).toHaveBeenCalledTimes(1);
             expect(errorSpy.calls.mostRecent().args[0])
@@ -280,7 +246,7 @@ describe('compiler-cli', () => {
         export class MyModule {}
       `);
 
-      main({p: basePath})
+      main(['-p', basePath], errorSpy)
           .then((exitCode) => {
             expect(exitCode).toEqual(0);
 
@@ -307,7 +273,7 @@ describe('compiler-cli', () => {
         export class MyModule {}
       `);
 
-      main({p: basePath})
+      main(['-p', basePath], errorSpy)
           .then((exitCode) => {
             expect(exitCode).toEqual(0);
             expect(fs.existsSync(path.resolve(outDir, 'mymodule.ngsummary.js'))).toBe(false);
@@ -333,7 +299,7 @@ describe('compiler-cli', () => {
         export class MyModule {}
       `);
 
-      main({p: basePath})
+      main(['-p', basePath], errorSpy)
           .then((exitCode) => {
             expect(exitCode).toEqual(0);
             expect(fs.existsSync(path.resolve(outDir, 'mymodule.ngsummary.js'))).toBe(true);
diff --git a/packages/compiler-cli/test/ngc_spec.ts b/packages/compiler-cli/test/ngc_spec.ts
index 165582a09c..893068872b 100644
--- a/packages/compiler-cli/test/ngc_spec.ts
+++ b/packages/compiler-cli/test/ngc_spec.ts
@@ -11,8 +11,7 @@ import * as fs from 'fs';
 import * as path from 'path';
 import * as ts from 'typescript';
 
-import {main} from '../src/ngc';
-import {performCompilation, readConfiguration} from '../src/perform-compile';
+import {mainSync} from '../src/main';
 
 function getNgRootDir() {
   const moduleFilename = module.filename.replace(/\\/g, '/');
@@ -20,16 +19,18 @@ function getNgRootDir() {
   return moduleFilename.substr(0, distIndex);
 }
 
-describe('ngc command-line', () => {
+describe('ngc transformer command-line', () => {
   let basePath: string;
   let outDir: string;
   let write: (fileName: string, content: string) => void;
+  let errorSpy: jasmine.Spy&((s: string) => void);
 
   function writeConfig(tsconfig: string = '{"extends": "./tsconfig-base.json"}') {
     write('tsconfig.json', tsconfig);
   }
 
   beforeEach(() => {
+    errorSpy = jasmine.createSpy('consoleError');
     basePath = makeTempDir();
     write = (fileName: string, content: string) => {
       const dir = path.dirname(fileName);
@@ -66,35 +67,9 @@ describe('ngc command-line', () => {
     writeConfig();
     write('test.ts', 'export const A = 1;');
 
-    const mockConsole = {error: (s: string) => {}};
-
-    spyOn(mockConsole, 'error');
-
-    const result = main(['-p', basePath], mockConsole.error);
-    expect(mockConsole.error).not.toHaveBeenCalled();
-    expect(result).toBe(0);
-  });
-
-  it('should be able to be called without a config file by passing options explicitly', () => {
-    write('test.ts', 'export const A = 1;');
-
-    const mockConsole = {error: (s: string) => {}};
-
-    spyOn(mockConsole, 'error');
-
-    expect(
-        () => performCompilation(
-            basePath, [path.join(basePath, 'test.ts')], {
-              experimentalDecorators: true,
-              skipLibCheck: true,
-              types: [],
-              outDir: path.join(basePath, 'built'),
-              declaration: true,
-              module: ts.ModuleKind.ES2015,
-              moduleResolution: ts.ModuleResolutionKind.NodeJs,
-            },
-            {}))
-        .not.toThrow();
+    const exitCode = mainSync(['-p', basePath], errorSpy);
+    expect(errorSpy).not.toHaveBeenCalled();
+    expect(exitCode).toBe(0);
   });
 
   it('should not print the stack trace if user input file does not exist', () => {
@@ -102,16 +77,11 @@ describe('ngc command-line', () => {
       "extends": "./tsconfig-base.json",
       "files": ["test.ts"]
     }`);
-    const mockConsole = {error: (s: string) => {}};
 
-    spyOn(mockConsole, 'error');
-
-    const exitCode = main(['-p', basePath], mockConsole.error);
-    expect(mockConsole.error)
-        .toHaveBeenCalledWith(
-            `error TS6053: File '` + path.join(basePath, 'test.ts') + `' not found.` +
-            '\n');
-    expect(mockConsole.error).not.toHaveBeenCalledWith('Compilation failed');
+    const exitCode = mainSync(['-p', basePath], errorSpy);
+    expect(errorSpy).toHaveBeenCalledWith(
+        `error TS6053: File '` + path.join(basePath, 'test.ts') + `' not found.` +
+        '\n');
     expect(exitCode).toEqual(1);
   });
 
@@ -119,16 +89,10 @@ describe('ngc command-line', () => {
     writeConfig();
     write('test.ts', 'foo;');
 
-    const mockConsole = {error: (s: string) => {}};
-
-    spyOn(mockConsole, 'error');
-
-    const exitCode = main(['-p', basePath], mockConsole.error);
-    expect(mockConsole.error)
-        .toHaveBeenCalledWith(
-            `test.ts(1,1): error TS2304: Cannot find name 'foo'.` +
-            '\n');
-    expect(mockConsole.error).not.toHaveBeenCalledWith('Compilation failed');
+    const exitCode = mainSync(['-p', basePath], errorSpy);
+    expect(errorSpy).toHaveBeenCalledWith(
+        `test.ts(1,1): error TS2304: Cannot find name 'foo'.` +
+        '\n');
     expect(exitCode).toEqual(1);
   });
 
@@ -136,16 +100,10 @@ describe('ngc command-line', () => {
     writeConfig();
     write('test.ts', `import {MyClass} from './not-exist-deps';`);
 
-    const mockConsole = {error: (s: string) => {}};
-
-    spyOn(mockConsole, 'error');
-
-    const exitCode = main(['-p', basePath], mockConsole.error);
-    expect(mockConsole.error)
-        .toHaveBeenCalledWith(
-            `test.ts(1,23): error TS2307: Cannot find module './not-exist-deps'.` +
-            '\n');
-    expect(mockConsole.error).not.toHaveBeenCalledWith('Compilation failed');
+    const exitCode = mainSync(['-p', basePath], errorSpy);
+    expect(errorSpy).toHaveBeenCalledWith(
+        `test.ts(1,23): error TS2307: Cannot find module './not-exist-deps'.` +
+        '\n');
     expect(exitCode).toEqual(1);
   });
 
@@ -154,17 +112,11 @@ describe('ngc command-line', () => {
     write('empty-deps.ts', 'export const A = 1;');
     write('test.ts', `import {MyClass} from './empty-deps';`);
 
-    const mockConsole = {error: (s: string) => {}};
-
-    spyOn(mockConsole, 'error');
-
-    const exitCode = main(['-p', basePath], mockConsole.error);
-    expect(mockConsole.error)
-        .toHaveBeenCalledWith(
-            `test.ts(1,9): error TS2305: Module '"` + path.join(basePath, 'empty-deps') +
-            `"' has no exported member 'MyClass'.` +
-            '\n');
-    expect(mockConsole.error).not.toHaveBeenCalledWith('Compilation failed');
+    const exitCode = mainSync(['-p', basePath], errorSpy);
+    expect(errorSpy).toHaveBeenCalledWith(
+        `test.ts(1,9): error TS2305: Module '"` + path.join(basePath, 'empty-deps') +
+        `"' has no exported member 'MyClass'.` +
+        '\n');
     expect(exitCode).toEqual(1);
   });
 
@@ -176,30 +128,21 @@ describe('ngc command-line', () => {
       A();
     `);
 
-    const mockConsole = {error: (s: string) => {}};
-
-    spyOn(mockConsole, 'error');
-
-    const exitCode = main(['-p', basePath], mockConsole.error);
-    expect(mockConsole.error)
-        .toHaveBeenCalledWith(
-            'test.ts(3,7): error TS2349: Cannot invoke an expression whose type lacks a call signature. ' +
-            'Type \'String\' has no compatible call signatures.\n');
-    expect(mockConsole.error).not.toHaveBeenCalledWith('Compilation failed');
+    const exitCode = mainSync(['-p', basePath], errorSpy);
+    expect(errorSpy).toHaveBeenCalledWith(
+        'test.ts(3,7): error TS2349: Cannot invoke an expression whose type lacks a call signature. ' +
+        'Type \'String\' has no compatible call signatures.\n');
     expect(exitCode).toEqual(1);
   });
 
   it('should print the stack trace on compiler internal errors', () => {
     write('test.ts', 'export const A = 1;');
 
-    const mockConsole = {error: (s: string) => {}};
-
-    spyOn(mockConsole, 'error');
-
-    const exitCode = main(['-p', 'not-exist'], mockConsole.error);
-    expect(mockConsole.error).toHaveBeenCalled();
-    expect(mockConsole.error).toHaveBeenCalledWith('Compilation failed');
-    expect(exitCode).toEqual(2);
+    const exitCode = mainSync(['-p', 'not-exist'], errorSpy);
+    expect(errorSpy).toHaveBeenCalledTimes(1);
+    expect(errorSpy.calls.mostRecent().args[0]).toContain('no such file or directory');
+    expect(errorSpy.calls.mostRecent().args[0]).toContain('at Error (native)');
+    expect(exitCode).toEqual(1);
   });
 
   describe('compile ngfactory files', () => {
@@ -218,11 +161,7 @@ describe('ngc command-line', () => {
         export class MyModule {}
       `);
 
-      const mockConsole = {error: (s: string) => {}};
-
-      const errorSpy = spyOn(mockConsole, 'error');
-
-      const exitCode = main(['-p', basePath], mockConsole.error);
+      const exitCode = mainSync(['-p', basePath], errorSpy);
       expect(errorSpy).toHaveBeenCalledTimes(1);
       expect(errorSpy.calls.mostRecent().args[0])
           .toContain('Error at ng://' + path.join(basePath, 'mymodule.ts.MyComp.html'));
@@ -253,11 +192,7 @@ describe('ngc command-line', () => {
         export class MyModule {}
       `);
 
-      const mockConsole = {error: (s: string) => {}};
-
-      const errorSpy = spyOn(mockConsole, 'error');
-
-      const exitCode = main(['-p', basePath], mockConsole.error);
+      const exitCode = mainSync(['-p', basePath], errorSpy);
       expect(errorSpy).toHaveBeenCalledTimes(1);
       expect(errorSpy.calls.mostRecent().args[0])
           .toContain('Error at ng://' + path.join(basePath, 'my.component.html(1,5):'));
@@ -282,7 +217,7 @@ describe('ngc command-line', () => {
         export class MyModule {}
       `);
 
-      const exitCode = main(['-p', basePath]);
+      const exitCode = mainSync(['-p', basePath], errorSpy);
       expect(exitCode).toEqual(0);
 
       expect(fs.existsSync(path.resolve(outDir, 'mymodule.ngfactory.js'))).toBe(true);
@@ -307,7 +242,7 @@ describe('ngc command-line', () => {
         export class MyModule {}
       `);
 
-      const exitCode = main(['-p', path.join(basePath, 'tsconfig.json')]);
+      const exitCode = mainSync(['-p', path.join(basePath, 'tsconfig.json')], errorSpy);
       expect(exitCode).toEqual(0);
       expect(fs.existsSync(path.resolve(outDir, 'mymodule.ngfactory.js'))).toBe(true);
       expect(fs.existsSync(path.resolve(
@@ -332,8 +267,7 @@ describe('ngc command-line', () => {
         export class MyModule {}
       `);
 
-        const mockConsole = {error: (s: string) => {}};
-        const exitCode = main(['-p', basePath], mockConsole.error);
+        const exitCode = mainSync(['-p', basePath], errorSpy);
         expect(exitCode).toEqual(0);
 
         const mymodulejs = path.resolve(outDir, 'mymodule.js');
@@ -362,8 +296,7 @@ describe('ngc command-line', () => {
         export class MyModule {}
       `);
 
-        const mockConsole = {error: (s: string) => {}};
-        const exitCode = main(['-p', basePath], mockConsole.error);
+        const exitCode = mainSync(['-p', basePath], errorSpy);
         expect(exitCode).toEqual(0);
 
         const mymodulejs = path.resolve(outDir, 'mymodule.js');
@@ -392,8 +325,7 @@ describe('ngc command-line', () => {
         export class MyModule {}
       `);
 
-        const mockConsole = {error: (s: string) => {}};
-        const exitCode = main(['-p', basePath], mockConsole.error);
+        const exitCode = mainSync(['-p', basePath], errorSpy);
         expect(exitCode).toEqual(0);
 
         const mymodulejs = path.resolve(outDir, 'mymodule.js');
@@ -411,9 +343,9 @@ describe('ngc command-line', () => {
       });
 
       function compile(): number {
-        const errors: string[] = [];
-        const result = main(['-p', path.join(basePath, 'tsconfig.json')], s => errors.push(s));
-        expect(errors).toEqual([]);
+        errorSpy.calls.reset();
+        const result = mainSync(['-p', path.join(basePath, 'tsconfig.json')], errorSpy);
+        expect(errorSpy).not.toHaveBeenCalled();
         return result;
       }
 
@@ -607,68 +539,12 @@ describe('ngc command-line', () => {
         export class FlatModule {
         }`);
 
-      const exitCode = main(['-p', path.join(basePath, 'tsconfig.json')]);
+      const exitCode = mainSync(['-p', path.join(basePath, 'tsconfig.json')], errorSpy);
       expect(exitCode).toEqual(0);
       shouldExist('index.js');
       shouldExist('index.metadata.json');
     });
 
-    it('should be able to build a flat module passing explicit options', () => {
-      write('public-api.ts', `
-        export * from './src/flat.component';
-        export * from './src/flat.module';`);
-      write('src/flat.component.html', '<div>flat module component</div>');
-      write('src/flat.component.ts', `
-        import {Component} from '@angular/core';
-
-        @Component({
-          selector: 'flat-comp',
-          templateUrl: 'flat.component.html',
-        })
-        export class FlatComponent {
-        }`);
-      write('src/flat.module.ts', `
-        import {NgModule} from '@angular/core';
-
-        import {FlatComponent} from './flat.component';
-
-        @NgModule({
-          declarations: [
-            FlatComponent,
-          ],
-          exports: [
-            FlatComponent,
-          ]
-        })
-        export class FlatModule {
-        }`);
-
-      const emitResult = performCompilation(
-          basePath, [path.join(basePath, 'public-api.ts')], {
-            target: ts.ScriptTarget.ES5,
-            experimentalDecorators: true,
-            noImplicitAny: true,
-            moduleResolution: ts.ModuleResolutionKind.NodeJs,
-            rootDir: basePath,
-            declaration: true,
-            lib: ['lib.es2015.d.ts', 'lib.dom.d.ts'],
-            baseUrl: basePath,
-            outDir: path.join(basePath, 'built'),
-            typeRoots: [path.join(basePath, 'node_modules/@types')]
-          },
-          {
-            genDir: 'ng',
-            flatModuleId: 'flat_module',
-            flatModuleOutFile: 'index.js',
-            skipTemplateCodegen: true
-          });
-
-
-      expect(emitResult.errorCode).toEqual(0);
-      shouldExist('index.js');
-      shouldExist('index.metadata.json');
-    });
-
     describe('with a third-party library', () => {
       const writeGenConfig = (skipCodegen: boolean) => {
         writeConfig(`{
@@ -756,7 +632,7 @@ describe('ngc command-line', () => {
       it('should honor skip code generation', () => {
         // First ensure that we skip code generation when requested;.
         writeGenConfig(/* skipCodegen */ true);
-        const exitCode = main(['-p', path.join(basePath, 'tsconfig.json')]);
+        const exitCode = mainSync(['-p', path.join(basePath, 'tsconfig.json')], errorSpy);
         expect(exitCode).toEqual(0);
         modules.forEach(moduleName => {
           shouldExist(moduleName + '.js');
@@ -772,7 +648,7 @@ describe('ngc command-line', () => {
       it('should produce factories', () => {
         // First ensure that we skip code generation when requested;.
         writeGenConfig(/* skipCodegen */ false);
-        const exitCode = main(['-p', path.join(basePath, 'tsconfig.json')]);
+        const exitCode = mainSync(['-p', path.join(basePath, 'tsconfig.json')], errorSpy);
         expect(exitCode).toEqual(0);
         modules.forEach(moduleName => {
           shouldExist(moduleName + '.js');
@@ -823,7 +699,7 @@ describe('ngc command-line', () => {
       });
 
       it('should compile without error', () => {
-        expect(main(['-p', path.join(basePath, 'tsconfig.json')])).toBe(0);
+        expect(mainSync(['-p', path.join(basePath, 'tsconfig.json')], errorSpy)).toBe(0);
       });
     });
 
@@ -897,7 +773,7 @@ describe('ngc command-line', () => {
       });
 
       it('should be able to compile library 1', () => {
-        expect(main(['-p', path.join(basePath, 'lib1')])).toBe(0);
+        expect(mainSync(['-p', path.join(basePath, 'lib1')], errorSpy)).toBe(0);
         shouldExist('lib1/module.js');
         shouldExist('lib1/module.ngsummary.json');
         shouldExist('lib1/module.ngsummary.js');
@@ -907,8 +783,8 @@ describe('ngc command-line', () => {
       });
 
       it('should be able to compile library 2', () => {
-        expect(main(['-p', path.join(basePath, 'lib1')])).toBe(0);
-        expect(main(['-p', path.join(basePath, 'lib2')])).toBe(0);
+        expect(mainSync(['-p', path.join(basePath, 'lib1')], errorSpy)).toBe(0);
+        expect(mainSync(['-p', path.join(basePath, 'lib2')], errorSpy)).toBe(0);
         shouldExist('lib2/module.js');
         shouldExist('lib2/module.ngsummary.json');
         shouldExist('lib2/module.ngsummary.js');
@@ -919,12 +795,12 @@ describe('ngc command-line', () => {
 
       describe('building an application', () => {
         beforeEach(() => {
-          expect(main(['-p', path.join(basePath, 'lib1')])).toBe(0);
-          expect(main(['-p', path.join(basePath, 'lib2')])).toBe(0);
+          expect(mainSync(['-p', path.join(basePath, 'lib1')], errorSpy)).toBe(0);
+          expect(mainSync(['-p', path.join(basePath, 'lib2')], errorSpy)).toBe(0);
         });
 
         it('should build without error', () => {
-          expect(main(['-p', path.join(basePath, 'app')])).toBe(0);
+          expect(mainSync(['-p', path.join(basePath, 'app')], errorSpy)).toBe(0);
           shouldExist('app/main.js');
         });
       });
diff --git a/packages/compiler-cli/tsconfig-build.json b/packages/compiler-cli/tsconfig-build.json
index 6937d14a26..3f1d3a822c 100644
--- a/packages/compiler-cli/tsconfig-build.json
+++ b/packages/compiler-cli/tsconfig-build.json
@@ -32,7 +32,6 @@
   "files": [
     "index.ts",
     "src/main.ts",
-    "src/ngc.ts",
     "src/extract_i18n.ts",
     "../../node_modules/@types/node/index.d.ts",
     "../../node_modules/@types/jasmine/index.d.ts",
diff --git a/packages/tsc-wrapped/src/compiler_host.ts b/packages/tsc-wrapped/src/compiler_host.ts
index eaff682940..47f7358dc7 100644
--- a/packages/tsc-wrapped/src/compiler_host.ts
+++ b/packages/tsc-wrapped/src/compiler_host.ts
@@ -120,51 +120,40 @@ export class MetadataWriterHost extends DelegatingHost {
       }
 }
 
-export class SyntheticIndexHost extends DelegatingHost {
-  private normalSyntheticIndexName: string;
-  private indexContent: string;
-  private indexMetadata: string;
+export function createSyntheticIndexHost<H extends ts.CompilerHost>(
+    delegate: H, syntheticIndex: {name: string, content: string, metadata: string}): H {
+  const normalSyntheticIndexName = normalize(syntheticIndex.name);
+  const indexContent = syntheticIndex.content;
+  const indexMetadata = syntheticIndex.metadata;
 
-  constructor(
-      delegate: ts.CompilerHost,
-      syntheticIndex: {name: string, content: string, metadata: string}) {
-    super(delegate);
-    this.normalSyntheticIndexName = normalize(syntheticIndex.name);
-    this.indexContent = syntheticIndex.content;
-    this.indexMetadata = syntheticIndex.metadata;
-  }
+  const newHost = Object.create(delegate);
+  newHost.fileExists = (fileName: string): boolean => {
+    return normalize(fileName) == normalSyntheticIndexName || delegate.fileExists(fileName);
+  };
 
-  fileExists = (fileName: string):
-      boolean => {
-        return normalize(fileName) == this.normalSyntheticIndexName ||
-            this.delegate.fileExists(fileName);
-      }
+  newHost.readFile = (fileName: string) => {
+    return normalize(fileName) == normalSyntheticIndexName ? indexContent :
+                                                             delegate.readFile(fileName);
+  };
 
-  readFile =
-      (fileName: string) => {
-        return normalize(fileName) == this.normalSyntheticIndexName ?
-            this.indexContent :
-            this.delegate.readFile(fileName);
-      }
-
-  getSourceFile =
-      (fileName: string, languageVersion: ts.ScriptTarget,
-       onError?: (message: string) => void) => {
-        if (normalize(fileName) == this.normalSyntheticIndexName) {
-          return ts.createSourceFile(fileName, this.indexContent, languageVersion, true);
+  newHost.getSourceFile =
+      (fileName: string, languageVersion: ts.ScriptTarget, onError?: (message: string) => void) => {
+        if (normalize(fileName) == normalSyntheticIndexName) {
+          return ts.createSourceFile(fileName, indexContent, languageVersion, true);
         }
-        return this.delegate.getSourceFile(fileName, languageVersion, onError);
-      }
+        return delegate.getSourceFile(fileName, languageVersion, onError);
+      };
 
-                                               writeFile: ts.WriteFileCallback =
-          (fileName: string, data: string, writeByteOrderMark: boolean,
-           onError?: (message: string) => void, sourceFiles?: ts.SourceFile[]) => {
-            this.delegate.writeFile(fileName, data, writeByteOrderMark, onError, sourceFiles);
-            if (fileName.match(DTS) && sourceFiles && sourceFiles.length == 1 &&
-                normalize(sourceFiles[0].fileName) == this.normalSyntheticIndexName) {
-              // If we are writing the synthetic index, write the metadata along side.
-              const metadataName = fileName.replace(DTS, '.metadata.json');
-              writeFileSync(metadataName, this.indexMetadata, {encoding: 'utf8'});
-            }
-          }
+  newHost.writeFile =
+      (fileName: string, data: string, writeByteOrderMark: boolean,
+       onError?: (message: string) => void, sourceFiles?: ts.SourceFile[]) => {
+        delegate.writeFile(fileName, data, writeByteOrderMark, onError, sourceFiles);
+        if (fileName.match(DTS) && sourceFiles && sourceFiles.length == 1 &&
+            normalize(sourceFiles[0].fileName) == normalSyntheticIndexName) {
+          // If we are writing the synthetic index, write the metadata along side.
+          const metadataName = fileName.replace(DTS, '.metadata.json');
+          writeFileSync(metadataName, indexMetadata, {encoding: 'utf8'});
+        }
+      };
+  return newHost;
 }
\ No newline at end of file
diff --git a/packages/tsc-wrapped/src/main.ts b/packages/tsc-wrapped/src/main.ts
index 10a5cf0fbb..d2882da481 100644
--- a/packages/tsc-wrapped/src/main.ts
+++ b/packages/tsc-wrapped/src/main.ts
@@ -13,7 +13,7 @@ import * as ts from 'typescript';
 
 import {CompilerHostAdapter, MetadataBundler} from './bundler';
 import {CliOptions} from './cli_options';
-import {MetadataWriterHost, SyntheticIndexHost} from './compiler_host';
+import {MetadataWriterHost, createSyntheticIndexHost} from './compiler_host';
 import {privateEntriesToIndex} from './index_writer';
 import NgOptions from './options';
 import {check, tsc} from './tsc';
@@ -33,9 +33,9 @@ export interface CodegenExtension {
    host: ts.CompilerHost): Promise<string[]>;
 }
 
-export function createBundleIndexHost(
+export function createBundleIndexHost<H extends ts.CompilerHost>(
     ngOptions: NgOptions, rootFiles: string[],
-    host: ts.CompilerHost): {host: ts.CompilerHost, indexName?: string, errors?: ts.Diagnostic[]} {
+    host: H): {host: H, indexName?: string, errors?: ts.Diagnostic[]} {
   const files = rootFiles.filter(f => !DTS.test(f));
   if (files.length != 1) {
     return {
@@ -61,7 +61,7 @@ export function createBundleIndexHost(
       path.join(path.dirname(indexModule), ngOptions.flatModuleOutFile !.replace(JS_EXT, '.ts'));
   const libraryIndex = `./${path.basename(indexModule)}`;
   const content = privateEntriesToIndex(libraryIndex, metadataBundle.privates);
-  host = new SyntheticIndexHost(host, {name, content, metadata});
+  host = createSyntheticIndexHost(host, {name, content, metadata});
   return {host, indexName: name};
 }
 
diff --git a/tools/ngc-wrapped/index.ts b/tools/ngc-wrapped/index.ts
index 0d32fce43b..3a6c0fb37c 100644
--- a/tools/ngc-wrapped/index.ts
+++ b/tools/ngc-wrapped/index.ts
@@ -9,26 +9,25 @@
 // TODO(chuckj): Remove the requirement for a fake 'reflect` implementation from
 // the compiler
 import 'reflect-metadata';
-import {performCompilation} from '@angular/compiler-cli';
+
+import {calcProjectFileAndBasePath, createNgCompilerOptions, formatDiagnostics, performCompilation} from '@angular/compiler-cli';
 import * as fs from 'fs';
 import * as path from 'path';
 // Note, the tsc_wrapped module comes from rules_typescript, not from @angular/tsc-wrapped
 import {parseTsconfig} from 'tsc_wrapped';
+import * as ts from 'typescript';
 
 function main(args: string[]) {
-  const [{options, bazelOpts, files, config}] = parseTsconfig(args[1]);
-  const ngOptions: {expectedOut: string[]} = (config as any).angularCompilerOptions;
+  const project = args[1];
+  const [{options: tsOptions, bazelOpts, files, config}] = parseTsconfig(project);
+  const {basePath} = calcProjectFileAndBasePath(project);
+  const ngOptions = createNgCompilerOptions(basePath, config, tsOptions);
 
-  const parsedArgs = require('minimist')(args);
-  const project = parsedArgs.p || parsedArgs.project || '.';
-
-  const projectDir = fs.lstatSync(project).isFile() ? path.dirname(project) : project;
-
-  // file names in tsconfig are resolved relative to this absolute path
-  const basePath = path.resolve(process.cwd(), projectDir);
-  const result = performCompilation(basePath, files, options, ngOptions, undefined);
-
-  return result.errorCode;
+  const {diagnostics} = performCompilation(files, ngOptions);
+  if (diagnostics.length) {
+    console.error(formatDiagnostics(ngOptions, diagnostics));
+  }
+  return diagnostics.some(d => d.category === ts.DiagnosticCategory.Error) ? 1 : 0;
 }
 
 if (require.main === module) {

From 088532bf2e608ab5dce8b58eb37e8e8c644b4c50 Mon Sep 17 00:00:00 2001
From: Kara Erickson <karakara@google.com>
Date: Wed, 9 Aug 2017 16:39:49 -0700
Subject: [PATCH 19/83] perf(aio): update to new version of build-optimizer

---
 aio/scripts/_payload-limits.sh | 2 +-
 aio/yarn.lock                  | 9 ++++-----
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/aio/scripts/_payload-limits.sh b/aio/scripts/_payload-limits.sh
index b855e8e681..46f5338ba8 100755
--- a/aio/scripts/_payload-limits.sh
+++ b/aio/scripts/_payload-limits.sh
@@ -3,7 +3,7 @@
 set -u -e -o pipefail
 
 declare -A limitUncompressed
-limitUncompressed=(["inline"]=1600 ["main"]=600000 ["polyfills"]=35000)
+limitUncompressed=(["inline"]=1600 ["main"]=550000 ["polyfills"]=35000)
 declare -A limitGzip7
 limitGzip7=(["inline"]=1000 ["main"]=140000 ["polyfills"]=12500)
 declare -A limitGzip9
diff --git a/aio/yarn.lock b/aio/yarn.lock
index 9e32cc0b32..c47e8cc0ee 100644
--- a/aio/yarn.lock
+++ b/aio/yarn.lock
@@ -2,12 +2,11 @@
 # yarn lockfile v1
 
 
-"@angular-devkit/build-optimizer@0.0.3":
-  version "0.0.3"
-  resolved "https://registry.yarnpkg.com/@angular-devkit/build-optimizer/-/build-optimizer-0.0.3.tgz#092bdf732b79a779ce540f9bb99d6590dd971204"
+"@angular-devkit/build-optimizer@0.0.13":
+  version "0.0.13"
+  resolved "https://registry.yarnpkg.com/@angular-devkit/build-optimizer/-/build-optimizer-0.0.13.tgz#cf397af76abe899aa909d4a735106694ca1f08cf"
   dependencies:
     loader-utils "^1.1.0"
-    magic-string "^0.19.1"
     source-map "^0.5.6"
     typescript "^2.3.3"
 
@@ -27,7 +26,7 @@
   version "1.3.0-rc.3"
   resolved "https://registry.yarnpkg.com/@angular/cli/-/cli-1.3.0-rc.3.tgz#5a6999382f956b6109d3042569659972bca38a63"
   dependencies:
-    "@angular-devkit/build-optimizer" "0.0.3"
+    "@angular-devkit/build-optimizer" "0.0.13"
     "@ngtools/json-schema" "1.1.0"
     "@ngtools/webpack" "1.6.0-rc.3"
     autoprefixer "^6.5.3"

From d2c0d986d44f3a7a29bdeacbe973a5550f5c6839 Mon Sep 17 00:00:00 2001
From: Pawel Kozlowski <pkozlowski.opensource@gmail.com>
Date: Fri, 28 Jul 2017 15:58:28 +0200
Subject: [PATCH 20/83] perf(core): add option to remove blank text nodes from
 compiled templates

---
 packages/compiler-cli/src/transformers/api.ts |   4 +
 .../compiler-cli/src/transformers/program.ts  |   3 +-
 packages/compiler/src/aot/compiler.ts         |   3 +-
 packages/compiler/src/aot/compiler_factory.ts |   1 +
 packages/compiler/src/aot/compiler_options.ts |   1 +
 packages/compiler/src/compile_metadata.ts     |  10 +-
 packages/compiler/src/compiler.ts             |   2 +-
 packages/compiler/src/config.ts               |  17 ++-
 packages/compiler/src/directive_normalizer.ts |  15 ++-
 packages/compiler/src/directive_resolver.ts   |   3 +-
 packages/compiler/src/jit/compiler.ts         |   4 +-
 packages/compiler/src/jit/compiler_factory.ts |   3 +
 packages/compiler/src/metadata_resolver.ts    |   6 +-
 .../src/ml_parser/html_whitespaces.ts         |  83 ++++++++++++
 packages/compiler/src/ml_parser/tags.ts       |   7 ++
 .../src/template_parser/template_parser.ts    |  23 ++--
 .../test/directive_normalizer_spec.ts         |  54 +++++++-
 .../compiler/test/directive_resolver_spec.ts  |   8 +-
 packages/compiler/test/integration_spec.ts    |   1 -
 .../test/ml_parser/ast_serializer_spec.ts     |   2 +-
 .../test/ml_parser/html_whitespaces_spec.ts   | 118 ++++++++++++++++++
 .../template_parser/template_parser_spec.ts   |  68 ++++++++--
 .../testing/src/directive_resolver_mock.ts    |   3 +-
 packages/core/src/linker/compiler.ts          |   1 +
 packages/core/src/metadata/directives.ts      |  10 ++
 packages/core/test/linker/integration_spec.ts |  45 +++++++
 tools/public_api_guard/core/core.d.ts         |   1 +
 27 files changed, 450 insertions(+), 46 deletions(-)
 create mode 100644 packages/compiler/src/ml_parser/html_whitespaces.ts
 create mode 100644 packages/compiler/test/ml_parser/html_whitespaces_spec.ts

diff --git a/packages/compiler-cli/src/transformers/api.ts b/packages/compiler-cli/src/transformers/api.ts
index 2c463c1437..1d3b5b6d34 100644
--- a/packages/compiler-cli/src/transformers/api.ts
+++ b/packages/compiler-cli/src/transformers/api.ts
@@ -111,6 +111,10 @@ export interface CompilerOptions extends ts.CompilerOptions {
   i18nInFile?: string;
   // How to handle missing messages
   i18nInMissingTranslations?: 'error'|'warning'|'ignore';
+
+  // Whether to remove blank text nodes from compiled templates. It is `true` by default
+  // in Angular 5 and will be re-visited in Angular 6.
+  preserveWhitespaces?: boolean;
 }
 
 export interface ModuleFilenameResolver {
diff --git a/packages/compiler-cli/src/transformers/program.ts b/packages/compiler-cli/src/transformers/program.ts
index 9e1cc3a84c..5c079304ce 100644
--- a/packages/compiler-cli/src/transformers/program.ts
+++ b/packages/compiler-cli/src/transformers/program.ts
@@ -347,6 +347,7 @@ function getAotCompilerOptions(options: CompilerOptions): AotCompilerOptions {
     i18nFormat: options.i18nInFormat || options.i18nOutFormat, translations, missingTranslation,
     enableLegacyTemplate: options.enableLegacyTemplate,
     enableSummariesForJit: true,
+    preserveWhitespaces: options.preserveWhitespaces,
   };
 }
 
@@ -480,4 +481,4 @@ function createProgramWithStubsHost(
     fileExists = (fileName: string) =>
         this.generatedFiles.has(fileName) || originalHost.fileExists(fileName);
   };
-}
\ No newline at end of file
+}
diff --git a/packages/compiler/src/aot/compiler.ts b/packages/compiler/src/aot/compiler.ts
index 03b1e34aac..9a4b870f90 100644
--- a/packages/compiler/src/aot/compiler.ts
+++ b/packages/compiler/src/aot/compiler.ts
@@ -322,9 +322,10 @@ export class AotCompiler {
     const pipes = ngModule.transitiveModule.pipes.map(
         pipe => this._metadataResolver.getPipeSummary(pipe.reference));
 
+    const preserveWhitespaces = compMeta !.template !.preserveWhitespaces;
     const {template: parsedTemplate, pipes: usedPipes} = this._templateParser.parse(
         compMeta, compMeta.template !.template !, directives, pipes, ngModule.schemas,
-        templateSourceUrl(ngModule.type, compMeta, compMeta.template !));
+        templateSourceUrl(ngModule.type, compMeta, compMeta.template !), preserveWhitespaces);
     const stylesExpr = componentStyles ? o.variable(componentStyles.stylesVar) : o.literalArr([]);
     const viewResult = this._viewCompiler.compileComponent(
         outputCtx, compMeta, parsedTemplate, stylesExpr, usedPipes);
diff --git a/packages/compiler/src/aot/compiler_factory.ts b/packages/compiler/src/aot/compiler_factory.ts
index 7d911e4c81..cbdbc806ec 100644
--- a/packages/compiler/src/aot/compiler_factory.ts
+++ b/packages/compiler/src/aot/compiler_factory.ts
@@ -54,6 +54,7 @@ export function createAotCompiler(compilerHost: AotCompilerHost, options: AotCom
     useJit: false,
     enableLegacyTemplate: options.enableLegacyTemplate !== false,
     missingTranslation: options.missingTranslation,
+    preserveWhitespaces: options.preserveWhitespaces,
   });
   const normalizer = new DirectiveNormalizer(
       {get: (url: string) => compilerHost.loadResource(url)}, urlResolver, htmlParser, config);
diff --git a/packages/compiler/src/aot/compiler_options.ts b/packages/compiler/src/aot/compiler_options.ts
index ed260b3a6a..063c4d137b 100644
--- a/packages/compiler/src/aot/compiler_options.ts
+++ b/packages/compiler/src/aot/compiler_options.ts
@@ -15,4 +15,5 @@ export interface AotCompilerOptions {
   missingTranslation?: MissingTranslationStrategy;
   enableLegacyTemplate?: boolean;
   enableSummariesForJit?: boolean;
+  preserveWhitespaces?: boolean;
 }
diff --git a/packages/compiler/src/compile_metadata.ts b/packages/compiler/src/compile_metadata.ts
index 8d2b5c4f1e..9c62149604 100644
--- a/packages/compiler/src/compile_metadata.ts
+++ b/packages/compiler/src/compile_metadata.ts
@@ -252,8 +252,9 @@ export class CompileTemplateMetadata {
   animations: any[];
   ngContentSelectors: string[];
   interpolation: [string, string]|null;
+  preserveWhitespaces: boolean;
   constructor({encapsulation, template, templateUrl, styles, styleUrls, externalStylesheets,
-               animations, ngContentSelectors, interpolation, isInline}: {
+               animations, ngContentSelectors, interpolation, isInline, preserveWhitespaces}: {
     encapsulation: ViewEncapsulation | null,
     template: string|null,
     templateUrl: string|null,
@@ -263,7 +264,8 @@ export class CompileTemplateMetadata {
     ngContentSelectors: string[],
     animations: any[],
     interpolation: [string, string]|null,
-    isInline: boolean
+    isInline: boolean,
+    preserveWhitespaces: boolean
   }) {
     this.encapsulation = encapsulation;
     this.template = template;
@@ -278,6 +280,7 @@ export class CompileTemplateMetadata {
     }
     this.interpolation = interpolation;
     this.isInline = isInline;
+    this.preserveWhitespaces = preserveWhitespaces;
   }
 
   toSummary(): CompileTemplateSummary {
@@ -516,7 +519,8 @@ export function createHostComponentMeta(
       animations: [],
       isInline: true,
       externalStylesheets: [],
-      interpolation: null
+      interpolation: null,
+      preserveWhitespaces: false,
     }),
     exportAs: null,
     changeDetection: ChangeDetectionStrategy.Default,
diff --git a/packages/compiler/src/compiler.ts b/packages/compiler/src/compiler.ts
index 8a88d720b9..f3f9fa87d8 100644
--- a/packages/compiler/src/compiler.ts
+++ b/packages/compiler/src/compiler.ts
@@ -24,7 +24,7 @@
 export {VERSION} from './version';
 export * from './template_parser/template_ast';
 export {TEMPLATE_TRANSFORMS} from './template_parser/template_parser';
-export {CompilerConfig} from './config';
+export {CompilerConfig, preserveWhitespacesDefault} from './config';
 export * from './compile_metadata';
 export * from './aot/compiler_factory';
 export * from './aot/compiler';
diff --git a/packages/compiler/src/config.ts b/packages/compiler/src/config.ts
index 75be193731..8ab10926e5 100644
--- a/packages/compiler/src/config.ts
+++ b/packages/compiler/src/config.ts
@@ -6,11 +6,8 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {InjectionToken, MissingTranslationStrategy, ViewEncapsulation, isDevMode} from '@angular/core';
-
-import {CompileIdentifierMetadata} from './compile_metadata';
-import {Identifiers} from './identifiers';
-
+import {MissingTranslationStrategy, ViewEncapsulation} from '@angular/core';
+import {noUndefined} from './util';
 
 export class CompilerConfig {
   public defaultEncapsulation: ViewEncapsulation|null;
@@ -19,18 +16,26 @@ export class CompilerConfig {
   public enableLegacyTemplate: boolean;
   public useJit: boolean;
   public missingTranslation: MissingTranslationStrategy|null;
+  public preserveWhitespaces: boolean;
 
   constructor(
       {defaultEncapsulation = ViewEncapsulation.Emulated, useJit = true, missingTranslation,
-       enableLegacyTemplate}: {
+       enableLegacyTemplate, preserveWhitespaces}: {
         defaultEncapsulation?: ViewEncapsulation,
         useJit?: boolean,
         missingTranslation?: MissingTranslationStrategy,
         enableLegacyTemplate?: boolean,
+        preserveWhitespaces?: boolean
       } = {}) {
     this.defaultEncapsulation = defaultEncapsulation;
     this.useJit = !!useJit;
     this.missingTranslation = missingTranslation || null;
     this.enableLegacyTemplate = enableLegacyTemplate !== false;
+    this.preserveWhitespaces = preserveWhitespacesDefault(noUndefined(preserveWhitespaces));
   }
 }
+
+export function preserveWhitespacesDefault(
+    preserveWhitespacesOption: boolean | null, defaultSetting = true): boolean {
+  return preserveWhitespacesOption === null ? defaultSetting : preserveWhitespacesOption;
+}
diff --git a/packages/compiler/src/directive_normalizer.ts b/packages/compiler/src/directive_normalizer.ts
index e9484a34ae..299263feeb 100644
--- a/packages/compiler/src/directive_normalizer.ts
+++ b/packages/compiler/src/directive_normalizer.ts
@@ -9,7 +9,7 @@
 import {ViewEncapsulation, ɵstringify as stringify} from '@angular/core';
 
 import {CompileAnimationEntryMetadata, CompileDirectiveMetadata, CompileStylesheetMetadata, CompileTemplateMetadata, templateSourceUrl} from './compile_metadata';
-import {CompilerConfig} from './config';
+import {CompilerConfig, preserveWhitespacesDefault} from './config';
 import {CompilerInjectable} from './injectable';
 import * as html from './ml_parser/ast';
 import {HtmlParser} from './ml_parser/html_parser';
@@ -31,6 +31,7 @@ export interface PrenormalizedTemplateMetadata {
   interpolation: [string, string]|null;
   encapsulation: ViewEncapsulation|null;
   animations: CompileAnimationEntryMetadata[];
+  preserveWhitespaces: boolean|null;
 }
 
 @CompilerInjectable()
@@ -82,6 +83,13 @@ export class DirectiveNormalizer {
       throw syntaxError(
           `No template specified for component ${stringify(prenormData.componentType)}`);
     }
+
+    if (isDefined(prenormData.preserveWhitespaces) &&
+        typeof prenormData.preserveWhitespaces !== 'boolean') {
+      throw syntaxError(
+          `The preserveWhitespaces option for component ${stringify(prenormData.componentType)} must be a boolean`);
+    }
+
     return SyncAsync.then(
         this.normalizeTemplateOnly(prenormData),
         (result: CompileTemplateMetadata) => this.normalizeExternalStylesheets(result));
@@ -149,7 +157,9 @@ export class DirectiveNormalizer {
       ngContentSelectors: visitor.ngContentSelectors,
       animations: prenormData.animations,
       interpolation: prenormData.interpolation, isInline,
-      externalStylesheets: []
+      externalStylesheets: [],
+      preserveWhitespaces: preserveWhitespacesDefault(
+          prenormData.preserveWhitespaces, this._config.preserveWhitespaces),
     });
   }
 
@@ -168,6 +178,7 @@ export class DirectiveNormalizer {
           animations: templateMeta.animations,
           interpolation: templateMeta.interpolation,
           isInline: templateMeta.isInline,
+          preserveWhitespaces: templateMeta.preserveWhitespaces,
         }));
   }
 
diff --git a/packages/compiler/src/directive_resolver.ts b/packages/compiler/src/directive_resolver.ts
index 2b1790305f..599dc26678 100644
--- a/packages/compiler/src/directive_resolver.ts
+++ b/packages/compiler/src/directive_resolver.ts
@@ -152,7 +152,8 @@ export class DirectiveResolver {
         styleUrls: directive.styleUrls,
         encapsulation: directive.encapsulation,
         animations: directive.animations,
-        interpolation: directive.interpolation
+        interpolation: directive.interpolation,
+        preserveWhitespaces: directive.preserveWhitespaces,
       });
     } else {
       return new Directive({
diff --git a/packages/compiler/src/jit/compiler.ts b/packages/compiler/src/jit/compiler.ts
index 7cf3a447b3..4a3fbf9430 100644
--- a/packages/compiler/src/jit/compiler.ts
+++ b/packages/compiler/src/jit/compiler.ts
@@ -262,6 +262,7 @@ export class JitCompiler implements Compiler {
     const externalStylesheetsByModuleUrl = new Map<string, CompiledStylesheet>();
     const outputContext = createOutputContext();
     const componentStylesheet = this._styleCompiler.compileComponent(outputContext, compMeta);
+    const preserveWhitespaces = compMeta !.template !.preserveWhitespaces;
     compMeta.template !.externalStylesheets.forEach((stylesheetMeta) => {
       const compiledStylesheet =
           this._styleCompiler.compileStyles(createOutputContext(), compMeta, stylesheetMeta);
@@ -274,7 +275,8 @@ export class JitCompiler implements Compiler {
         pipe => this._metadataResolver.getPipeSummary(pipe.reference));
     const {template: parsedTemplate, pipes: usedPipes} = this._templateParser.parse(
         compMeta, compMeta.template !.template !, directives, pipes, template.ngModule.schemas,
-        templateSourceUrl(template.ngModule.type, template.compMeta, template.compMeta.template !));
+        templateSourceUrl(template.ngModule.type, template.compMeta, template.compMeta.template !),
+        preserveWhitespaces);
     const compileResult = this._viewCompiler.compileComponent(
         outputContext, compMeta, parsedTemplate, ir.variable(componentStylesheet.stylesVar),
         usedPipes);
diff --git a/packages/compiler/src/jit/compiler_factory.ts b/packages/compiler/src/jit/compiler_factory.ts
index 1e51157f0d..b57b2bf0c8 100644
--- a/packages/compiler/src/jit/compiler_factory.ts
+++ b/packages/compiler/src/jit/compiler_factory.ts
@@ -123,6 +123,7 @@ export class JitCompilerFactory implements CompilerFactory {
       defaultEncapsulation: ViewEncapsulation.Emulated,
       missingTranslation: MissingTranslationStrategy.Warning,
       enableLegacyTemplate: true,
+      preserveWhitespaces: true,
     };
 
     this._defaultOptions = [compilerOptions, ...defaultOptions];
@@ -142,6 +143,7 @@ export class JitCompilerFactory implements CompilerFactory {
             defaultEncapsulation: opts.defaultEncapsulation,
             missingTranslation: opts.missingTranslation,
             enableLegacyTemplate: opts.enableLegacyTemplate,
+            preserveWhitespaces: opts.preserveWhitespaces,
           });
         },
         deps: []
@@ -169,6 +171,7 @@ function _mergeOptions(optionsArr: CompilerOptions[]): CompilerOptions {
     providers: _mergeArrays(optionsArr.map(options => options.providers !)),
     missingTranslation: _lastDefined(optionsArr.map(options => options.missingTranslation)),
     enableLegacyTemplate: _lastDefined(optionsArr.map(options => options.enableLegacyTemplate)),
+    preserveWhitespaces: _lastDefined(optionsArr.map(options => options.preserveWhitespaces)),
   };
 }
 
diff --git a/packages/compiler/src/metadata_resolver.ts b/packages/compiler/src/metadata_resolver.ts
index 5efad1d1d5..5a1a9e3f25 100644
--- a/packages/compiler/src/metadata_resolver.ts
+++ b/packages/compiler/src/metadata_resolver.ts
@@ -219,7 +219,8 @@ export class CompileMetadataResolver {
         styles: template.styles,
         styleUrls: template.styleUrls,
         animations: template.animations,
-        interpolation: template.interpolation
+        interpolation: template.interpolation,
+        preserveWhitespaces: template.preserveWhitespaces
       });
       if (isPromise(templateMeta) && isSync) {
         this._reportError(componentStillLoadingError(directiveType), directiveType);
@@ -267,7 +268,8 @@ export class CompileMetadataResolver {
         interpolation: noUndefined(dirMeta.interpolation),
         isInline: !!dirMeta.template,
         externalStylesheets: [],
-        ngContentSelectors: []
+        ngContentSelectors: [],
+        preserveWhitespaces: noUndefined(dirMeta.preserveWhitespaces),
       });
     }
 
diff --git a/packages/compiler/src/ml_parser/html_whitespaces.ts b/packages/compiler/src/ml_parser/html_whitespaces.ts
new file mode 100644
index 0000000000..f2cd01f7e3
--- /dev/null
+++ b/packages/compiler/src/ml_parser/html_whitespaces.ts
@@ -0,0 +1,83 @@
+/**
+ * @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 html from './ast';
+import {ParseTreeResult} from './parser';
+import {NGSP_UNICODE} from './tags';
+
+export const PRESERVE_WS_ATTR_NAME = 'ngPreserveWhitespaces';
+
+const SKIP_WS_TRIM_TAGS = new Set(['pre', 'template', 'textarea', 'script', 'style']);
+
+function hasPreserveWhitespacesAttr(attrs: html.Attribute[]): boolean {
+  return attrs.some((attr: html.Attribute) => attr.name === PRESERVE_WS_ATTR_NAME);
+}
+
+/**
+ * This visitor can walk HTML parse tree and remove / trim text nodes using the following rules:
+ * - consider spaces, tabs and new lines as whitespace characters;
+ * - drop text nodes consisting of whitespace characters only;
+ * - for all other text nodes replace consecutive whitespace characters with one space;
+ * - convert &ngsp; pseudo-entity to a single space;
+ *
+ * The idea of using &ngsp; as a placeholder for non-removable space was originally introduced in
+ * Angular Dart, see:
+ * https://github.com/dart-lang/angular/blob/0bb611387d29d65b5af7f9d2515ab571fd3fbee4/_tests/test/compiler/preserve_whitespace_test.dart#L25-L32
+ * In Angular Dart &ngsp; is converted to the 0xE500 PUA (Private Use Areas) unicode character
+ * and later on replaced by a space. We are re-implementing the same idea here.
+ *
+ * Removal and trimming of whitespaces have positive performance impact (less code to generate
+ * while compiling templates, faster view creation). At the same time it can be "destructive"
+ * in some cases (whitespaces can influence layout). Becouse of the potential of breaking layout
+ * this visitor is not activated by default in Angular 5 and people need to explicitly opt-in for
+ * whitespace removal. The default option for whitespace removal will be revisited in Angular 6
+ * and might be changed to "on" by default.
+ */
+class WhitespaceVisitor implements html.Visitor {
+  visitElement(element: html.Element, context: any): any {
+    if (SKIP_WS_TRIM_TAGS.has(element.name) || hasPreserveWhitespacesAttr(element.attrs)) {
+      // don't descent into elements where we need to preserve whitespaces
+      // but still visit all attributes to eliminate one used as a market to preserve WS
+      return new html.Element(
+          element.name, html.visitAll(this, element.attrs), element.children, element.sourceSpan,
+          element.startSourceSpan, element.endSourceSpan);
+    }
+
+    return new html.Element(
+        element.name, element.attrs, html.visitAll(this, element.children), element.sourceSpan,
+        element.startSourceSpan, element.endSourceSpan);
+  }
+
+  visitAttribute(attribute: html.Attribute, context: any): any {
+    return attribute.name !== PRESERVE_WS_ATTR_NAME ? attribute : null;
+  }
+
+  visitText(text: html.Text, context: any): any {
+    const isBlank = text.value.trim().length === 0;
+
+    if (!isBlank) {
+      // lexer is replacing the &ngsp; pseudo-entity with NGSP_UNICODE
+      return new html.Text(
+          text.value.replace(NGSP_UNICODE, ' ').replace(/\s\s+/g, ' '), text.sourceSpan);
+    }
+
+    return null;
+  }
+
+  visitComment(comment: html.Comment, context: any): any { return comment; }
+
+  visitExpansion(expansion: html.Expansion, context: any): any { return expansion; }
+
+  visitExpansionCase(expansionCase: html.ExpansionCase, context: any): any { return expansionCase; }
+}
+
+export function removeWhitespaces(htmlAstWithErrors: ParseTreeResult): ParseTreeResult {
+  return new ParseTreeResult(
+      html.visitAll(new WhitespaceVisitor(), htmlAstWithErrors.rootNodes),
+      htmlAstWithErrors.errors);
+}
diff --git a/packages/compiler/src/ml_parser/tags.ts b/packages/compiler/src/ml_parser/tags.ts
index 5f06c3fd25..8fb6580d7c 100644
--- a/packages/compiler/src/ml_parser/tags.ts
+++ b/packages/compiler/src/ml_parser/tags.ts
@@ -71,6 +71,7 @@ export function mergeNsAndName(prefix: string, localName: string): string {
 // This list is not exhaustive to keep the compiler footprint low.
 // The `&#123;` / `&#x1ab;` syntax should be used when the named character reference does not
 // exist.
+
 export const NAMED_ENTITIES: {[k: string]: string} = {
   'Aacute': '\u00C1',
   'aacute': '\u00E1',
@@ -325,3 +326,9 @@ export const NAMED_ENTITIES: {[k: string]: string} = {
   'zwj': '\u200D',
   'zwnj': '\u200C',
 };
+
+// The &ngsp; pseudo-entity is denoting a space. see:
+// https://github.com/dart-lang/angular/blob/0bb611387d29d65b5af7f9d2515ab571fd3fbee4/_tests/test/compiler/preserve_whitespace_test.dart
+export const NGSP_UNICODE = '\uE500';
+
+NAMED_ENTITIES['ngsp'] = NGSP_UNICODE;
diff --git a/packages/compiler/src/template_parser/template_parser.ts b/packages/compiler/src/template_parser/template_parser.ts
index 9d342c2dda..ae5dab1455 100644
--- a/packages/compiler/src/template_parser/template_parser.ts
+++ b/packages/compiler/src/template_parser/template_parser.ts
@@ -18,6 +18,7 @@ import {Identifiers, createTokenForExternalReference, createTokenForReference} f
 import {CompilerInjectable} from '../injectable';
 import * as html from '../ml_parser/ast';
 import {ParseTreeResult} from '../ml_parser/html_parser';
+import {removeWhitespaces} from '../ml_parser/html_whitespaces';
 import {expandNodes} from '../ml_parser/icu_ast_expander';
 import {InterpolationConfig} from '../ml_parser/interpolation_config';
 import {isNgTemplate, splitNsName} from '../ml_parser/tags';
@@ -113,9 +114,10 @@ export class TemplateParser {
 
   parse(
       component: CompileDirectiveMetadata, template: string, directives: CompileDirectiveSummary[],
-      pipes: CompilePipeSummary[], schemas: SchemaMetadata[],
-      templateUrl: string): {template: TemplateAst[], pipes: CompilePipeSummary[]} {
-    const result = this.tryParse(component, template, directives, pipes, schemas, templateUrl);
+      pipes: CompilePipeSummary[], schemas: SchemaMetadata[], templateUrl: string,
+      preserveWhitespaces: boolean): {template: TemplateAst[], pipes: CompilePipeSummary[]} {
+    const result = this.tryParse(
+        component, template, directives, pipes, schemas, templateUrl, preserveWhitespaces);
     const warnings =
         result.errors !.filter(error => error.level === ParseErrorLevel.WARNING)
             .filter(warnOnlyOnce(
@@ -137,12 +139,17 @@ export class TemplateParser {
 
   tryParse(
       component: CompileDirectiveMetadata, template: string, directives: CompileDirectiveSummary[],
-      pipes: CompilePipeSummary[], schemas: SchemaMetadata[],
-      templateUrl: string): TemplateParseResult {
+      pipes: CompilePipeSummary[], schemas: SchemaMetadata[], templateUrl: string,
+      preserveWhitespaces: boolean): TemplateParseResult {
+    let htmlParseResult = this._htmlParser !.parse(
+        template, templateUrl, true, this.getInterpolationConfig(component));
+
+    if (!preserveWhitespaces) {
+      htmlParseResult = removeWhitespaces(htmlParseResult);
+    }
+
     return this.tryParseHtml(
-        this.expandHtml(this._htmlParser !.parse(
-            template, templateUrl, true, this.getInterpolationConfig(component))),
-        component, directives, pipes, schemas);
+        this.expandHtml(htmlParseResult), component, directives, pipes, schemas);
   }
 
   tryParseHtml(
diff --git a/packages/compiler/test/directive_normalizer_spec.ts b/packages/compiler/test/directive_normalizer_spec.ts
index bd68115eb1..a2a1c06cc4 100644
--- a/packages/compiler/test/directive_normalizer_spec.ts
+++ b/packages/compiler/test/directive_normalizer_spec.ts
@@ -6,8 +6,8 @@
  * found in the LICENSE file at https://angular.io/license
  */
 import {CompileAnimationEntryMetadata} from '@angular/compiler';
-import {CompileDirectiveMetadata, CompileStylesheetMetadata, CompileTemplateMetadata, CompileTypeMetadata} from '@angular/compiler/src/compile_metadata';
-import {CompilerConfig} from '@angular/compiler/src/config';
+import {CompileStylesheetMetadata, CompileTemplateMetadata} from '@angular/compiler/src/compile_metadata';
+import {CompilerConfig, preserveWhitespacesDefault} from '@angular/compiler/src/config';
 import {DirectiveNormalizer} from '@angular/compiler/src/directive_normalizer';
 import {ResourceLoader} from '@angular/compiler/src/resource_loader';
 import {MockResourceLoader} from '@angular/compiler/testing/src/resource_loader_mock';
@@ -31,6 +31,7 @@ function normalizeTemplate(normalizer: DirectiveNormalizer, o: {
   interpolation?: [string, string] | null;
   encapsulation?: ViewEncapsulation | null;
   animations?: CompileAnimationEntryMetadata[];
+  preserveWhitespaces?: boolean | null;
 }) {
   return normalizer.normalizeTemplate({
     ngModuleType: noUndefined(o.ngModuleType),
@@ -42,7 +43,8 @@ function normalizeTemplate(normalizer: DirectiveNormalizer, o: {
     styleUrls: noUndefined(o.styleUrls),
     interpolation: noUndefined(o.interpolation),
     encapsulation: noUndefined(o.encapsulation),
-    animations: noUndefined(o.animations)
+    animations: noUndefined(o.animations),
+    preserveWhitespaces: noUndefined(o.preserveWhitespaces),
   });
 }
 
@@ -54,6 +56,7 @@ function normalizeTemplateOnly(normalizer: DirectiveNormalizer, o: {
   interpolation?: [string, string] | null;
   encapsulation?: ViewEncapsulation | null;
   animations?: CompileAnimationEntryMetadata[];
+  preserveWhitespaces?: boolean | null;
 }) {
   return normalizer.normalizeTemplateOnly({
     ngModuleType: noUndefined(o.ngModuleType),
@@ -65,13 +68,14 @@ function normalizeTemplateOnly(normalizer: DirectiveNormalizer, o: {
     styleUrls: noUndefined(o.styleUrls),
     interpolation: noUndefined(o.interpolation),
     encapsulation: noUndefined(o.encapsulation),
-    animations: noUndefined(o.animations)
+    animations: noUndefined(o.animations),
+    preserveWhitespaces: noUndefined(o.preserveWhitespaces),
   });
 }
 
 function compileTemplateMetadata({encapsulation, template, templateUrl, styles, styleUrls,
                                   externalStylesheets, animations, ngContentSelectors,
-                                  interpolation, isInline}: {
+                                  interpolation, isInline, preserveWhitespaces}: {
   encapsulation?: ViewEncapsulation | null,
   template?: string | null,
   templateUrl?: string | null,
@@ -81,7 +85,8 @@ function compileTemplateMetadata({encapsulation, template, templateUrl, styles,
   ngContentSelectors?: string[],
   animations?: any[],
   interpolation?: [string, string] | null,
-  isInline?: boolean
+  isInline?: boolean,
+  preserveWhitespaces?: boolean | null
 }): CompileTemplateMetadata {
   return new CompileTemplateMetadata({
     encapsulation: encapsulation || null,
@@ -94,6 +99,7 @@ function compileTemplateMetadata({encapsulation, template, templateUrl, styles,
     animations: animations || [],
     interpolation: interpolation || null,
     isInline: !!isInline,
+    preserveWhitespaces: preserveWhitespacesDefault(noUndefined(preserveWhitespaces)),
   });
 }
 
@@ -106,6 +112,7 @@ function normalizeLoadedTemplate(
       interpolation?: [string, string] | null;
       encapsulation?: ViewEncapsulation | null;
       animations?: CompileAnimationEntryMetadata[];
+      preserveWhitespaces?: boolean;
     },
     template: string, templateAbsUrl: string) {
   return normalizer.normalizeLoadedTemplate(
@@ -120,6 +127,7 @@ function normalizeLoadedTemplate(
         interpolation: o.interpolation || null,
         encapsulation: o.encapsulation || null,
         animations: o.animations || [],
+        preserveWhitespaces: noUndefined(o.preserveWhitespaces),
       },
       template, templateAbsUrl);
 }
@@ -169,6 +177,18 @@ export function main() {
                   }))
                .toThrowError(`'SomeComp' component cannot define both template and templateUrl`);
          }));
+      it('should throw if preserveWhitespaces is not a boolean',
+         inject([DirectiveNormalizer], (normalizer: DirectiveNormalizer) => {
+           expect(() => normalizeTemplate(normalizer, {
+                    ngModuleType: null,
+                    componentType: SomeComp,
+                    moduleUrl: SOME_MODULE_URL,
+                    template: '',
+                    preserveWhitespaces: <any>'WRONG',
+                  }))
+               .toThrowError(
+                   'The preserveWhitespaces option for component SomeComp must be a boolean');
+         }));
     });
 
     describe('normalizeTemplateOnly sync', () => {
@@ -431,6 +451,28 @@ export function main() {
            expect(template.encapsulation).toBe(viewEncapsulation);
          }));
 
+      it('should use preserveWhitespaces setting from compiler config if none provided',
+         inject(
+             [DirectiveNormalizer, CompilerConfig],
+             (normalizer: DirectiveNormalizer, config: CompilerConfig) => {
+               const template = normalizeLoadedTemplate(normalizer, {}, '', '');
+               expect(template.preserveWhitespaces).toBe(config.preserveWhitespaces);
+             }));
+
+      it('should store the preserveWhitespaces=false in the result',
+         inject([DirectiveNormalizer], (normalizer: DirectiveNormalizer) => {
+           const template =
+               normalizeLoadedTemplate(normalizer, {preserveWhitespaces: false}, '', '');
+           expect(template.preserveWhitespaces).toBe(false);
+         }));
+
+      it('should store the preserveWhitespaces=true in the result',
+         inject([DirectiveNormalizer], (normalizer: DirectiveNormalizer) => {
+           const template =
+               normalizeLoadedTemplate(normalizer, {preserveWhitespaces: true}, '', '');
+           expect(template.preserveWhitespaces).toBe(true);
+         }));
+
       it('should keep the template as html',
          inject([DirectiveNormalizer], (normalizer: DirectiveNormalizer) => {
            const template = normalizeLoadedTemplate(
diff --git a/packages/compiler/test/directive_resolver_spec.ts b/packages/compiler/test/directive_resolver_spec.ts
index 7322277350..b98eb0eab0 100644
--- a/packages/compiler/test/directive_resolver_spec.ts
+++ b/packages/compiler/test/directive_resolver_spec.ts
@@ -79,7 +79,12 @@ class SomeDirectiveWithViewChild {
   c: any;
 }
 
-@Component({selector: 'sample', template: 'some template', styles: ['some styles']})
+@Component({
+  selector: 'sample',
+  template: 'some template',
+  styles: ['some styles'],
+  preserveWhitespaces: true
+})
 class ComponentWithTemplate {
 }
 
@@ -439,6 +444,7 @@ export function main() {
         const compMetadata: Component = resolver.resolve(ComponentWithTemplate);
         expect(compMetadata.template).toEqual('some template');
         expect(compMetadata.styles).toEqual(['some styles']);
+        expect(compMetadata.preserveWhitespaces).toBe(true);
       });
     });
   });
diff --git a/packages/compiler/test/integration_spec.ts b/packages/compiler/test/integration_spec.ts
index c8c4e15e4a..321b37c0d9 100644
--- a/packages/compiler/test/integration_spec.ts
+++ b/packages/compiler/test/integration_spec.ts
@@ -9,7 +9,6 @@
 import {Component, Directive, Input} from '@angular/core';
 import {ComponentFixture, TestBed, async} from '@angular/core/testing';
 import {By} from '@angular/platform-browser/src/dom/debug/by';
-import {getDOM} from '@angular/platform-browser/src/dom/dom_adapter';
 import {browserDetection} from '@angular/platform-browser/testing/src/browser_util';
 import {expect} from '@angular/platform-browser/testing/src/matchers';
 
diff --git a/packages/compiler/test/ml_parser/ast_serializer_spec.ts b/packages/compiler/test/ml_parser/ast_serializer_spec.ts
index 9452c3c9fb..5e33a302d5 100644
--- a/packages/compiler/test/ml_parser/ast_serializer_spec.ts
+++ b/packages/compiler/test/ml_parser/ast_serializer_spec.ts
@@ -97,4 +97,4 @@ const serializerVisitor = new _SerializerVisitor();
 
 export function serializeNodes(nodes: html.Node[]): string[] {
   return nodes.map(node => node.visit(serializerVisitor, null));
-}
\ No newline at end of file
+}
diff --git a/packages/compiler/test/ml_parser/html_whitespaces_spec.ts b/packages/compiler/test/ml_parser/html_whitespaces_spec.ts
new file mode 100644
index 0000000000..7f9f6fa898
--- /dev/null
+++ b/packages/compiler/test/ml_parser/html_whitespaces_spec.ts
@@ -0,0 +1,118 @@
+/**
+ * @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 html from '../../src/ml_parser/ast';
+import {HtmlParser} from '../../src/ml_parser/html_parser';
+import {PRESERVE_WS_ATTR_NAME, removeWhitespaces} from '../../src/ml_parser/html_whitespaces';
+
+import {humanizeDom} from './ast_spec_utils';
+
+export function main() {
+  describe('removeWhitespaces', () => {
+
+    function parseAndRemoveWS(template: string): any[] {
+      return humanizeDom(removeWhitespaces(new HtmlParser().parse(template, 'TestComp')));
+    }
+
+    it('should remove blank text nodes', () => {
+      expect(parseAndRemoveWS(' ')).toEqual([]);
+      expect(parseAndRemoveWS('\n')).toEqual([]);
+      expect(parseAndRemoveWS('\t')).toEqual([]);
+      expect(parseAndRemoveWS('    \t    \n ')).toEqual([]);
+    });
+
+    it('should remove whitespaces (space, tab, new line) between elements', () => {
+      expect(parseAndRemoveWS('<br>  <br>\t<br>\n<br>')).toEqual([
+        [html.Element, 'br', 0],
+        [html.Element, 'br', 0],
+        [html.Element, 'br', 0],
+        [html.Element, 'br', 0],
+      ]);
+    });
+
+    it('should remove whitespaces from child text nodes', () => {
+      expect(parseAndRemoveWS('<div><span> </span></div>')).toEqual([
+        [html.Element, 'div', 0],
+        [html.Element, 'span', 1],
+      ]);
+    });
+
+    it('should remove whitespaces from the beginning and end of a template', () => {
+      expect(parseAndRemoveWS(` <br>\t`)).toEqual([
+        [html.Element, 'br', 0],
+      ]);
+    });
+
+    it('should convert &ngsp; to a space and preserve it', () => {
+      expect(parseAndRemoveWS('<div><span>foo</span>&ngsp;<span>bar</span></div>')).toEqual([
+        [html.Element, 'div', 0],
+        [html.Element, 'span', 1],
+        [html.Text, 'foo', 2],
+        [html.Text, ' ', 1],
+        [html.Element, 'span', 1],
+        [html.Text, 'bar', 2],
+      ]);
+    });
+
+    it('should replace multiple whitespaces with one space', () => {
+      expect(parseAndRemoveWS('\n\n\nfoo\t\t\t')).toEqual([[html.Text, ' foo ', 0]]);
+      expect(parseAndRemoveWS('   \n foo  \t ')).toEqual([[html.Text, ' foo ', 0]]);
+    });
+
+    it('should not replace single tab and newline with spaces', () => {
+      expect(parseAndRemoveWS('\nfoo')).toEqual([[html.Text, '\nfoo', 0]]);
+      expect(parseAndRemoveWS('\tfoo')).toEqual([[html.Text, '\tfoo', 0]]);
+    });
+
+    it('should preserve single whitespaces between interpolations', () => {
+      expect(parseAndRemoveWS(`{{fooExp}} {{barExp}}`)).toEqual([
+        [html.Text, '{{fooExp}} {{barExp}}', 0],
+      ]);
+      expect(parseAndRemoveWS(`{{fooExp}}\t{{barExp}}`)).toEqual([
+        [html.Text, '{{fooExp}}\t{{barExp}}', 0],
+      ]);
+      expect(parseAndRemoveWS(`{{fooExp}}\n{{barExp}}`)).toEqual([
+        [html.Text, '{{fooExp}}\n{{barExp}}', 0],
+      ]);
+    });
+
+    it('should preserve whitespaces around interpolations', () => {
+      expect(parseAndRemoveWS(` {{exp}} `)).toEqual([
+        [html.Text, ' {{exp}} ', 0],
+      ]);
+    });
+
+    it('should preserve whitespaces inside <pre> elements', () => {
+      expect(parseAndRemoveWS(`<pre><strong>foo</strong>\n<strong>bar</strong></pre>`)).toEqual([
+        [html.Element, 'pre', 0],
+        [html.Element, 'strong', 1],
+        [html.Text, 'foo', 2],
+        [html.Text, '\n', 1],
+        [html.Element, 'strong', 1],
+        [html.Text, 'bar', 2],
+      ]);
+    });
+
+    it('should skip whitespace trimming in <textarea>', () => {
+      expect(parseAndRemoveWS(`<textarea>foo\n\n  bar</textarea>`)).toEqual([
+        [html.Element, 'textarea', 0],
+        [html.Text, 'foo\n\n  bar', 1],
+      ]);
+    });
+
+    it(`should preserve whitespaces inside elements annotated with ${PRESERVE_WS_ATTR_NAME}`,
+       () => {
+         expect(parseAndRemoveWS(`<div ${PRESERVE_WS_ATTR_NAME}><img> <img></div>`)).toEqual([
+           [html.Element, 'div', 0],
+           [html.Element, 'img', 1],
+           [html.Text, ' ', 1],
+           [html.Element, 'img', 1],
+         ]);
+       });
+  });
+}
diff --git a/packages/compiler/test/template_parser/template_parser_spec.ts b/packages/compiler/test/template_parser/template_parser_spec.ts
index 8204b2f67c..7ffb4dfe58 100644
--- a/packages/compiler/test/template_parser/template_parser_spec.ts
+++ b/packages/compiler/test/template_parser/template_parser_spec.ts
@@ -5,7 +5,7 @@
  * 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 {CompileQueryMetadata, CompilerConfig, JitReflector, ProxyClass, StaticSymbol} from '@angular/compiler';
+import {CompileQueryMetadata, CompilerConfig, JitReflector, ProxyClass, StaticSymbol, preserveWhitespacesDefault} from '@angular/compiler';
 import {CompileAnimationEntryMetadata, CompileDiDependencyMetadata, CompileDirectiveMetadata, CompileDirectiveSummary, CompilePipeMetadata, CompilePipeSummary, CompileProviderMetadata, CompileTemplateMetadata, CompileTokenMetadata, CompileTypeMetadata, tokenReference} from '@angular/compiler/src/compile_metadata';
 import {DomElementSchemaRegistry} from '@angular/compiler/src/schema/dom_element_schema_registry';
 import {ElementSchemaRegistry} from '@angular/compiler/src/schema/element_schema_registry';
@@ -84,7 +84,7 @@ function compileDirectiveMetadataCreate(
 
 function compileTemplateMetadata({encapsulation, template, templateUrl, styles, styleUrls,
                                   externalStylesheets, animations, ngContentSelectors,
-                                  interpolation, isInline}: {
+                                  interpolation, isInline, preserveWhitespaces}: {
   encapsulation?: ViewEncapsulation | null,
   template?: string | null,
   templateUrl?: string | null,
@@ -94,7 +94,8 @@ function compileTemplateMetadata({encapsulation, template, templateUrl, styles,
   ngContentSelectors?: string[],
   animations?: any[],
   interpolation?: [string, string] | null,
-  isInline?: boolean
+  isInline?: boolean,
+  preserveWhitespaces?: boolean | null,
 }): CompileTemplateMetadata {
   return new CompileTemplateMetadata({
     encapsulation: noUndefined(encapsulation),
@@ -106,7 +107,8 @@ function compileTemplateMetadata({encapsulation, template, templateUrl, styles,
     animations: animations || [],
     ngContentSelectors: ngContentSelectors || [],
     interpolation: noUndefined(interpolation),
-    isInline: !!isInline
+    isInline: !!isInline,
+    preserveWhitespaces: preserveWhitespacesDefault(noUndefined(preserveWhitespaces)),
   });
 }
 
@@ -116,7 +118,7 @@ export function main() {
   let ngIf: CompileDirectiveSummary;
   let parse: (
       template: string, directives: CompileDirectiveSummary[], pipes?: CompilePipeSummary[],
-      schemas?: SchemaMetadata[]) => TemplateAst[];
+      schemas?: SchemaMetadata[], preserveWhitespaces?: boolean) => TemplateAst[];
   let console: ArrayConsole;
 
   function commonBeforeEach() {
@@ -148,12 +150,15 @@ export function main() {
 
       parse =
           (template: string, directives: CompileDirectiveSummary[],
-           pipes: CompilePipeSummary[] | null = null,
-           schemas: SchemaMetadata[] = []): TemplateAst[] => {
+           pipes: CompilePipeSummary[] | null = null, schemas: SchemaMetadata[] = [],
+           preserveWhitespaces = true): TemplateAst[] => {
             if (pipes === null) {
               pipes = [];
             }
-            return parser.parse(component, template, directives, pipes, schemas, 'TestComp')
+            return parser
+                .parse(
+                    component, template, directives, pipes, schemas, 'TestComp',
+                    preserveWhitespaces)
                 .template;
           };
     }));
@@ -398,7 +403,8 @@ export function main() {
                externalStylesheets: [],
                styleUrls: [],
                styles: [],
-               encapsulation: null
+               encapsulation: null,
+               preserveWhitespaces: preserveWhitespacesDefault(null),
              }),
              isHost: false,
              exportAs: null,
@@ -417,7 +423,7 @@ export function main() {
 
            });
            expect(humanizeTplAst(
-                      parser.parse(component, '{%a%}', [], [], [], 'TestComp').template,
+                      parser.parse(component, '{%a%}', [], [], [], 'TestComp', true).template,
                       {start: '{%', end: '%}'}))
                .toEqual([[BoundTextAst, '{% a %}']]);
          }));
@@ -2052,6 +2058,48 @@ The pipe 'test' could not be found ("{{[ERROR ->]a | test}}"): TestComp@0:2`);
     });
   });
 
+  describe('whitespaces removal', () => {
+
+    it('should not remove whitespaces by default', () => {
+      expect(humanizeTplAst(parse(' <br>  <br>\t<br>\n<br> ', []))).toEqual([
+        [TextAst, ' '],
+        [ElementAst, 'br'],
+        [TextAst, '  '],
+        [ElementAst, 'br'],
+        [TextAst, '\t'],
+        [ElementAst, 'br'],
+        [TextAst, '\n'],
+        [ElementAst, 'br'],
+        [TextAst, ' '],
+      ]);
+    });
+
+    it('should remove whitespaces when explicitly requested', () => {
+      expect(humanizeTplAst(parse(' <br>  <br>\t<br>\n<br> ', [], [], [], false))).toEqual([
+        [ElementAst, 'br'],
+        [ElementAst, 'br'],
+        [ElementAst, 'br'],
+        [ElementAst, 'br'],
+      ]);
+    });
+
+    it('should remove whitespace between ICU expansions when not preserving whitespaces', () => {
+      const shortForm = '{ count, plural, =0 {small} many {big} }';
+      const expandedForm = '<ng-container [ngPlural]="count">' +
+          '<ng-template ngPluralCase="=0">small</ng-template>' +
+          '<ng-template ngPluralCase="many">big</ng-template>' +
+          '</ng-container>';
+      const humanizedExpandedForm = humanizeTplAst(parse(expandedForm, []));
+
+      // ICU expansions are converted to `<ng-container>` tags and all blank text nodes are reomved
+      // so any whitespace between ICU exansions are removed as well
+      expect(humanizeTplAst(parse(`${shortForm} ${shortForm}`, [], [], [], false))).toEqual([
+        ...humanizedExpandedForm, ...humanizedExpandedForm
+      ]);
+    });
+
+  });
+
   describe('Template Parser - opt-out `<template>` support', () => {
     beforeEach(() => {
       TestBed.configureCompiler({
diff --git a/packages/compiler/testing/src/directive_resolver_mock.ts b/packages/compiler/testing/src/directive_resolver_mock.ts
index ad8176fdaf..c03bb61645 100644
--- a/packages/compiler/testing/src/directive_resolver_mock.ts
+++ b/packages/compiler/testing/src/directive_resolver_mock.ts
@@ -85,7 +85,8 @@ export class MockDirectiveResolver extends DirectiveResolver {
         styles: view.styles,
         styleUrls: view.styleUrls,
         encapsulation: view.encapsulation,
-        interpolation: view.interpolation
+        interpolation: view.interpolation,
+        preserveWhitespaces: view.preserveWhitespaces,
       });
     }
 
diff --git a/packages/core/src/linker/compiler.ts b/packages/core/src/linker/compiler.ts
index f92bfc1f87..5770e1f9f7 100644
--- a/packages/core/src/linker/compiler.ts
+++ b/packages/core/src/linker/compiler.ts
@@ -107,6 +107,7 @@ export type CompilerOptions = {
   // Whether to support the `<template>` tag and the `template` attribute to define angular
   // templates. They have been deprecated in 4.x, `<ng-template>` should be used instead.
   enableLegacyTemplate?: boolean,
+  preserveWhitespaces?: boolean,
 };
 
 /**
diff --git a/packages/core/src/metadata/directives.ts b/packages/core/src/metadata/directives.ts
index 501f758e08..8ae0808f67 100644
--- a/packages/core/src/metadata/directives.ts
+++ b/packages/core/src/metadata/directives.ts
@@ -675,6 +675,16 @@ export interface Component extends Directive {
    * {@link ComponentFactoryResolver}.
    */
   entryComponents?: Array<Type<any>|any[]>;
+
+  /**
+   * If preserveWhitespaces is set to `false` potentially superfluous blank characters (space, tab,
+   * new line) will be removed from compiled templates. This can greatly reduce generated code size
+   * as well as speed up components' creation. The whitespace removal algorithm will drop all
+   * the blank text nodes and collapse series of whitespaces to just one space.
+   * Those transformations can potentially influence layout of the generated markup so
+   * the `preserveWhitespaces` should be used with care.
+   */
+  preserveWhitespaces?: boolean;
 }
 
 /**
diff --git a/packages/core/test/linker/integration_spec.ts b/packages/core/test/linker/integration_spec.ts
index f77fc7868e..5491c1c131 100644
--- a/packages/core/test/linker/integration_spec.ts
+++ b/packages/core/test/linker/integration_spec.ts
@@ -1758,6 +1758,51 @@ function declareTests({useJit}: {useJit: boolean}) {
       });
     });
 
+    describe('whitespaces in templates', () => {
+      it('should not remove whitespaces by default', async(() => {
+           @Component({
+             selector: 'comp',
+             template: '<span>foo</span>  <span>bar</span>',
+           })
+           class MyCmp {
+           }
+
+           const f = TestBed.configureTestingModule({declarations: [MyCmp]}).createComponent(MyCmp);
+           f.detectChanges();
+
+           expect(f.nativeElement.childNodes.length).toBe(3);
+         }));
+
+      it('should not remove whitespaces when explicitly requested not to do so', async(() => {
+           @Component({
+             selector: 'comp',
+             template: '<span>foo</span>  <span>bar</span>',
+             preserveWhitespaces: true,
+           })
+           class MyCmp {
+           }
+
+           const f = TestBed.configureTestingModule({declarations: [MyCmp]}).createComponent(MyCmp);
+           f.detectChanges();
+
+           expect(f.nativeElement.childNodes.length).toBe(3);
+         }));
+
+      it('should remove whitespaces when explicitly requested to do so', async(() => {
+           @Component({
+             selector: 'comp',
+             template: '<span>foo</span>  <span>bar</span>',
+             preserveWhitespaces: false,
+           })
+           class MyCmp {
+           }
+
+           const f = TestBed.configureTestingModule({declarations: [MyCmp]}).createComponent(MyCmp);
+           f.detectChanges();
+
+           expect(f.nativeElement.childNodes.length).toBe(2);
+         }));
+    });
 
     if (getDOM().supportsDOMEvents()) {
       describe('svg', () => {
diff --git a/tools/public_api_guard/core/core.d.ts b/tools/public_api_guard/core/core.d.ts
index 97233f5bc6..cb514a7881 100644
--- a/tools/public_api_guard/core/core.d.ts
+++ b/tools/public_api_guard/core/core.d.ts
@@ -201,6 +201,7 @@ export declare type CompilerOptions = {
     providers?: StaticProvider[];
     missingTranslation?: MissingTranslationStrategy;
     enableLegacyTemplate?: boolean;
+    preserveWhitespaces?: boolean;
 };
 
 /** @stable */

From 9320f34f196e65866478ed71c5485ba9ac91a581 Mon Sep 17 00:00:00 2001
From: Kapunahele Wong <kapunahelewong@gmail.com>
Date: Thu, 3 Aug 2017 15:10:42 -0400
Subject: [PATCH 21/83] =?UTF-8?q?docs(aio):=20add=20Metadata=20guide=20bas?=
 =?UTF-8?q?ed=20on=20Chuck=E2=80=99s=20docs?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Chuck’s gist
https://gist.github.com/chuckjaz/65dcc2fd5f4f5463e492ed0cb93bca60#file-Angular%20Metadata-md
Also chuck’s doc on metadata-related errors (link needed)
---
 aio/content/guide/metadata.md | 874 ++++++++++++++++++++++++++++++++++
 aio/content/navigation.json   |   5 +
 2 files changed, 879 insertions(+)
 create mode 100644 aio/content/guide/metadata.md

diff --git a/aio/content/guide/metadata.md b/aio/content/guide/metadata.md
new file mode 100644
index 0000000000..f7f42cdc8a
--- /dev/null
+++ b/aio/content/guide/metadata.md
@@ -0,0 +1,874 @@
+# Angular Metadata and AOT
+
+The Angular **AOT compiler** turns your TypeScript source code into runnable JavaScript.
+As part of that process, the compiler extracts and interprets **metadata** about the parts of the application that Angular is supposed to manage.
+
+You write metadata in a _subset_ of TypeScript. This guide explains why a subset is necessary, describes the subset constraints, and what happens when you step outside of those constraints.
+
+## Angular metadata
+Angular metadata tells Angular how to construct instances of your application classes and interact with them at runtime.
+
+You specify the metadata with **decorators** such as `@Component()` and `@Input()`. 
+You also specify metadata implicitly in the constructor declarations of these decorated classes.
+
+In the following example, the `@Component()` metadata object and the class constructor tell Angular how to create and display an instance of `TypicalComponent`.
+
+```typescript
+@Component({
+  selector: 'app-typical',
+  template: 'div>A typical component for {{data.name}}</div>
+)}
+export class TypicalComponent {
+  @Input() data: TypicalData;
+  constructor(private someService: SomeService) { ... }
+}
+```
+
+The Angular compiler extracts the metadata _once_ and generates a _factory_ for `TypicalComponent`. 
+When it needs to create a `TypicalComponent` instance, Angular calls the factory, which produces a new visual element, bound to a new instance of the component class with its injected dependency.
+
+## Compile ahead-of-time (AOT)
+
+You should use AOT to compile an application that must launch quickly.
+With AOT, there is no runtime compile step.
+The client doesn't need the compiler library at all and excluding it significantly reduces the total payload. 
+The browser downloads a smaller set of safely-compiled, application module(s) and libraries that it can parse quickly and run almost immediately.
+
+The AOT compiler produces a number of files, including the application JavaScript that ultimately runs in the browser. It then statically analyzes your source code and interprets the Angular metadata without actually running the application.
+
+To compile the app, run the `ngc` stand-alone tool as part of your build process.
+When using the CLI, run the `ng build` command. 
+
+For more information on AOT, see [Ahead-of-Time Compilation](guide/aot-compiler).
+
+## Metadata restrictions
+
+Angular metadata expressions must conform to the following general constraints:
+
+1. Limit [expression syntax](#expression-syntax) to the supported subset of JavaScript. 
+2. Only reference exported symbols after [code folding](#folding).
+3. Only call [functions supported](#supported-functions) by the compiler.
+4. Decorated and data-bound class members must be public.
+
+The next sections elaborate on these points.
+
+## How AOT works
+
+It helps to think of the AOT compiler as having two phases: a code analysis phase in which it simply records a representation of the source; and a code generation phase in which the compiler's `StaticReflector` handles the interpretation as well as places restrictions on what it interprets.
+
+## Phase 1: analysis
+
+The TypeScript compiler does some of the analytic work of the first phase. It emits the `.d.ts` _type definition files_ with type information that the AOT compiler needs to generate application code.
+
+At the same time, the AOT **_collector_** analyzes the metadata recorded in the Angular decorators and outputs metadata information in **`.metadata.json`** files, one per `.d.ts` file.
+
+You can think of `.metadata.json` as a diagram of the overall structure of a decorator's metadata, represented as an [abstract syntax tree (AST)](https://en.wikipedia.org/wiki/Abstract_syntax_tree). 
+
+<div class="l-sub-section">
+
+Angular's [schema.ts](https://github.com/angular/angular/blob/master/packages/tsc-wrapped/src/schema.ts)
+describes the JSON format as a collection of TypeScript interfaces. 
+
+</div>
+
+{@a expression-syntax}
+### Expression syntax
+
+The _collector_ only understands a subset of JavaScript. 
+Define metadata objects with the following limited syntax:
+
+Syntax                             | Example                           
+-----------------------------------|-----------------------------------
+Literal object                     | `{cherry: true, apple: true, mincemeat: false}`
+Literal array                      | `['cherries', 'flour', 'sugar']`
+Spread in literal array            | `['apples', 'flour', ...the_rest]`     
+Calls                              | `bake(ingredients)`           
+New                                | `new Oven()`                   
+Property access                    | `pie.slice`                      
+Array index                        | `ingredients[0]`                           
+Identifier reference               | `Component`                       
+A template string                  | <code>&#96;pie is ${multiplier} times better than cake&#96;</code>
+Literal string                     | `'pi'`                            
+Literal number                     | `3.14153265`                      
+Literal boolean                    | `true`                            
+Literal null                       | `null`                            
+Supported prefix operator          | `!cake`                           
+Supported Binary operator          | `a + b`                           
+Conditional operator               | `a ? b : c`                       
+Parentheses                        | `(a + b)`
+
+If an expression uses unsupported syntax, the _collector_ writes an error node to the `.metadata.json` file. The compiler later reports the error if it needs that
+piece of metadata to generate the application code.
+
+<div class="l-sub-section">
+
+ If you want `ngc` to report syntax errors immediately rather than produce a `.metadata.json` file with errors, set the `strictMetadataEmit` option in `tsconfig`.
+
+```
+  "angularCompilerOptions": {
+   ...
+   "strictMetadataEmit" : true
+ }
+ ```
+
+Angular libraries have this option to ensure that all Angular `.metadata.json` files are clean and it is a best practice to do the same when building your own libraries.
+
+</div>
+
+{@a function-expression}
+{@a arror-functions}
+### No arrow functions
+
+The AOT compiler does not support [function expressions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/function)
+and [arrow functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions), also called _lambda_ functions.
+
+Consider the following component decorator:
+
+```ts
+@Component({
+  ...
+  providers: [{provide: server, useFactory: () => new Server()}]
+})
+```
+
+The AOT _collector_ does not support the arrow function, `() => new Server()`, in a metadata expression. 
+It generates an error node in place of the function.
+
+When the compiler later interprets this node, it reports an error that invites you to turn the arrow function into an _exported function_.
+
+You can fix the error by converting to this:
+
+```ts
+export function serverFactory() {
+  return new Server();
+}
+
+@Component({
+  ...
+  providers: [{provide: server, useFactory: serverFactory}]
+})
+```
+
+### Limited function calls
+
+The _collector_ can represent a function call or object creation with `new` as long as the syntax is valid. The _collector_ only cares about proper syntax.
+
+But beware. The compiler may later refuse to generate a call to a _particular_ function or creation of a _particular_ object.
+The compiler only supports calls to a small set of functions and will use `new` for only a few designated classes. These functions and classes are in a table of [below](#supported-functions). 
+
+
+### Folding
+{@a exported-symbols}
+The compiler can only resolve references to **_exported_** symbols.
+Fortunately, the _collector_ enables limited use of non-exported symbols through _folding_.
+
+The _collector_ may be able to evaluate an expression during collection and record the result in the `.metadata.json` instead of the original expression. 
+
+For example, the _collector_ can evaluate the expression `1 + 2 + 3 + 4` and replace it with the result, `10`.
+
+This process is called _folding_. An expression that can be reduced in this manner is _foldable_.
+
+{@a var-declaration}
+The collector can evaluate references to 
+module-local `const` declarations and initialized `var` and `let` declarations, effectively removing them from the `.metadata.json` file.
+
+Consider the following component definition:
+
+```ts
+const template = '<div>{{hero.name}}</div>';
+
+@Component({
+  selector: 'app-hero',
+  template: template
+})
+class HeroComponent {
+  @Input() hero: Hero;
+}
+```
+
+The compiler could not refer to the `template` constant because it isn't exported.
+
+But the _collector_ can _fold_ the `template` constant into the metadata definition by inlining its contents. 
+The effect is the same as if you had written:
+
+```TypeScript
+@Component({
+  selector: 'app-hero',
+  template: '<div>{{hero.name}}</div>'
+})
+class HeroComponent {
+  @Input() hero: Hero;
+}
+```
+
+There is no longer a reference to `template` and, therefore, nothing to trouble the compiler when it later interprets the _collector's_ output in `.metadata.json`.
+
+You can take this example a step further by including the `template` constant in another expression:
+
+```TypeScript
+const template = '<div>{{hero.name}}</div>';
+
+@Component({
+  selector: 'app-hero',
+  template: template + '<div>{{hero.title}}</div>'
+})
+class HeroComponent {
+  @Input() hero: Hero;
+}
+```
+
+The _collector_ reduces this expression to its equivalent _folded_ string:
+
+`'<div>{{hero.name}}</div><div>{{hero.title}}</div>'`.
+
+#### Foldable syntax
+
+The following table describes which expressions the _collector_ can and cannot fold:
+
+Syntax                             | Foldable                           
+-----------------------------------|-----------------------------------
+Literal object                     | yes
+Literal array                      | yes
+Spread in literal array            | no    
+Calls                              | no           
+New                                | no                   
+Property access                    | yes, if target is foldable                      
+Array index                        | yes, if target and index are foldable    
+Identifier reference               | yes, if it is a reference to a local
+A template with no substitutions   | yes
+A template with substitutions      | yes, if the substitutions are foldable
+Literal string                     | yes                            
+Literal number                     | yes                      
+Literal boolean                    | yes                            
+Literal null                       | yes                            
+Supported prefix operator          | yes, if operand is foldable                           
+Supported binary operator          | yes, if both left and right are foldable                  
+Conditional operator               | yes, if condition is foldable
+Parentheses                        | yes, if the expression is foldable
+
+If an expression is not foldable, the collector writes it to `.metadata.json` as an [AST](https://en.wikipedia.org/wiki/Abstract_syntax_tree) for the compiler to resolve.
+
+
+## Phase 2: code generation
+
+The _collector_ makes no attempt to understand the metadata that it collects and outputs to `.metadata.json`. It represents the metadata as best it can and records errors when it detects a metadata syntax violation. 
+
+It's the compiler's job to interpret the `.metadata.json` in the code generation phase.
+
+The compiler understands all syntax forms that the _collector_ supports, but it may reject _syntactically_ correct metadata if the _semantics_ violate compiler rules.
+
+The compiler can only reference _exported symbols_. 
+
+Decorated component class members must be public. You cannot make an `@Input()` property private or internal.
+
+Data bound properties must also be public.
+
+```TypeScript
+// BAD CODE - title is private
+@Component({
+  selector: 'app-root',
+  template: '<h1>{{title}}</h1>'
+})
+class AppComponent {
+  private title = 'My App'; // Bad
+}
+```
+
+{@a supported-functions}
+Most importantly, the compiler only generates code to create instances of certain classes, support certain decorators, and call certain functions from the following lists.
+
+
+### New instances
+
+The compiler only allows metadata that create instances of these Angular classes.
+
+Class            | Module
+-----------------|--------------
+`OpaqueToken`    | `@angular/core`
+`InjectionToken` | `@angular/core`
+
+
+### Annotations/Decorators
+
+The compiler only supports metadata for these Angular decorators.
+
+Decorator         | Module
+------------------|--------------
+`Attribute`       | `@angular/core`
+`Component`       | `@angular/core`
+`ContentChild`    | `@angular/core`
+`ContentChildren` | `@angular/core`
+`Directive`       | `@angular/core`
+`Host`            | `@angular/core`
+`HostBinding`     | `@angular/core`
+`HostListener`    | `@angular/core`
+`Inject`          | `@angular/core`
+`Injectable`      | `@angular/core`
+`Input`           | `@angular/core`
+`NgModule`        | `@angular/core`
+`Optional`        | `@angular/core`
+`Output`          | `@angular/core`
+`Pipe`            | `@angular/core`
+`Self`            | `@angular/core`
+`SkipSelf`        | `@angular/core`
+`ViewChild`       | `@angular/core`
+
+
+### Macro-functions and macro-static methods
+
+The compiler also supports _macros_ in the form of functions or static 
+methods that return an expression.
+
+For example, consider the following function:
+
+```TypeScript
+export function wrapInArray<T>(value: T): T[] {
+  return [value];
+}
+```
+
+You can call the `wrapInArray` in a metadata definition because it returns the value of an expression that conforms to the compiler's restrictive JavaScript subset. 
+
+You might use  `wrapInArray()` like this:
+
+```TypeScript
+@NgModule({
+  declarations: wrapInArray(TypicalComponent)
+})
+class TypicalModule {}
+```
+
+The compiler treats this usage as if you had written:
+
+```TypeScript
+@NgModule({
+  declarations: [TypicalComponent]
+})
+class TypicalModule {}
+```
+
+The collector is simplistic in its determination of what qualifies as a macro
+function; it can only contain a single `return` statement.
+
+The Angular [`RouterModule`](api/router/RouterModule) exports two macro static methods, `forRoot` and `forChild`, to help declare root and child routes.
+Review the [source code](https://github.com/angular/angular/blob/master/packages/router/src/router_module.ts#L139 "RouterModule.forRoot source code") 
+for these methods to see how macros can simplify configuration of complex Angular modules.
+
+## Metadata Errors
+
+The following are metadata errors you may encounter, with explanations and suggested corrections.
+
+[Expression form not supported](#expression-form-not-supported)<br>
+[Reference to a local (non-exported) symbol](#reference-to-a-local-symbol)<br>
+[Only initialized variables and constants](#only-initialized-variables)<br>
+[Reference to a non-exported class](#reference-to-a-non-exported-class)<br>
+[Reference to a non-exported function](#reference-to-a-non-exported-function)<br>
+[Function calls are not supported](#function-calls-not-supported)<br>
+[Destructured variable or constant not supported](#destructured-variable-not-supported)<br>
+[Could not resolve type](#could-not-resolve-type)<br>
+[Name expected](#name-expected)<br>
+[Unsupported enum member name](#unsupported-enum-member-name)<br>
+[Tagged template expressions are not supported](#tagged-template-expressions-not-supported)<br>
+[Symbol reference expected](#symbol-reference-expected)<br>
+
+<hr>
+
+<h3 class="no-toc">Expression form not supported</h3>
+
+The compiler encountered an expression it didn't understand while evalutating Angular metadata.
+
+Language features outside of the compiler's [restricted expression syntax](#expression-syntax) 
+can produce this error, as seen in the following example:
+
+```
+// ERROR
+export class Fooish { ... }
+...
+const prop = typeof Fooish; // typeof is not valid in metadata
+  ...
+  // bracket notation is not valid in metadata
+  { provide: 'token', useValue: { [prop]: 'value' } }; 
+  ...
+```
+
+You can use `typeof` and bracket notation in normal application code.
+You just can't use those features within expressions that define Angular metadata.
+
+Avoid this error by sticking to the compiler's [restricted expression syntax](#expression-syntax)
+when writing Angular metadata
+and be wary of new or unusual TypeScript features.
+
+<hr>
+
+{@a reference-to-a-local-symbol}
+<h3 class="no-toc">Reference to a local (non-exported) symbol</h3>
+
+<div class="alert is-helpful">
+
+_Reference to a local (non-exported) symbol 'symbol name'. Consider exporting the symbol._
+
+</div>
+
+The compiler encountered a referenced to a locally defined symbol that either wasn't exported or wasn't initialized.
+
+Here's a `provider` example of the problem.
+
+```
+// ERROR
+let foo: number; // neither exported nor initialized
+
+@Component({
+  selector: 'my-component',
+  template: ... ,
+  providers: [
+    { provide: Foo, useValue: foo }
+  ]
+})
+export class MyComponent {}
+```
+The compiler generates the component factory, which includes the `useValue` provider code, in a separate module. _That_ factory module can't reach back to _this_ source module to access the local (non-exported) `foo` variable.
+
+You could fix the problem by initializing `foo`. 
+
+```
+let foo = 42; // initialized
+```
+
+The compiler will [fold](#folding) the expression into the provider as if you had written this.
+
+```
+  providers: [
+    { provide: Foo, useValue: 42 }
+  ]
+```
+
+Alternatively, you can fix it by exporting `foo` with the expectation that `foo` will be assigned at runtime when you actually know its value.
+
+```
+// CORRECTED
+export let foo: number; // exported
+
+@Component({
+  selector: 'my-component',
+  template: ... ,
+  providers: [
+    { provide: Foo, useValue: foo }
+  ]
+})
+export class MyComponent {}
+```
+
+Adding `export` often works for variables referenced in metadata such as `providers` and `animations` because the compiler can generate _references_ to the exported variables in these expressions. It doesn't need the _values_ of those variables.
+
+Adding `export` doesn't work when the compiler needs the _actual value_ 
+in order to generate code. 
+For example, it doesn't work for the `template` property.
+
+```
+// ERROR
+export let someTemplate: string; // exported but not initialized
+
+@Component({
+  selector: 'my-component',
+  template: someTemplate
+})
+export class MyComponent {}
+```
+
+The compiler needs the value of the `template` property _right now_ to generate the component factory.
+The variable reference alone is insufficient.
+Prefixing the declaration with `export` merely produces a new error, "[`Only initialized variables and constants can be referenced`](#only-initialized-variables)".
+
+<hr>
+
+{@a only-initialized-variables}
+<h3 class="no-toc">Only initialized variables and constants</h3>
+
+<div class="alert is-helpful">
+
+_Only initialized variables and constants can be referenced because the value of this variable is needed by the template compiler._
+
+</div>
+
+The compiler found a reference to an exported variable or static field that wasn't initialized.
+It needs the value of that variable to generate code.
+
+The following example tries to set the component's `template` property to the value of
+the exported `someTemplate` variable which is declared but _unassigned_.
+
+```
+// ERROR
+export let someTemplate: string;
+
+@Component({
+  selector: 'my-component',
+  template: someTemplate
+})
+export class MyComponent {}
+```
+
+You'd also get this error if you imported `someTemplate` from some other module and neglected to initialize it there.
+
+```
+// ERROR - not initialized there either
+import { someTemplate } from './config';
+
+@Component({
+  selector: 'my-component',
+  template: someTemplate
+})
+export class MyComponent {}
+```
+
+The compiler cannot wait until runtime to get the template information.
+It must statically derive the value of the `someTemplate` variable from the source code
+so that it can generate the component factory, which includes
+instructions for building the element based on the template.
+
+To correct this error, provide the initial value of the variable in an initializer clause _on the same line_.
+
+```
+// CORRECTED
+export let someTemplate = '<h1>Greetings from Angular</h1>';
+
+@Component({
+  selector: 'my-component',
+  template: someTemplate
+})
+export class MyComponent {}
+```
+
+<hr>
+
+<h3 class="no-toc">Reference to a non-exported class</h3>
+
+<div class="alert is-helpful">
+
+_Reference to a non-exported class <class name>. Consider exporting the class._
+
+</div>
+
+Metadata referenced a class that wasn't exported.
+
+For example, you may have defined a class and used it as an injection token in a providers array
+but neglected to export that class. 
+
+```
+// ERROR
+abstract class MyStrategy { }
+
+  ...
+  providers: [
+    { provide: MyStrategy, useValue: ... }
+  ]
+  ...
+```
+
+Angular generates a class factory in a separate module and that 
+factory [can only access exported classes](#exported-symbols).
+To correct this error, export the referenced class.
+
+```
+// CORRECTED
+export abstract class MyStrategy { }
+
+  ...
+  providers: [
+    { provide: MyStrategy, useValue: ... }
+  ]
+  ...
+```
+<hr>
+
+<h3 class="no-toc">Reference to a non-exported function</h3>
+
+Metadata referenced a function that wasn't exported.
+
+For example, you may have set a providers `useFactory` property to a locally defined function that you neglected to export.
+
+```
+// ERROR
+function myStrategy() { ... }
+
+  ...
+  providers: [
+    { provide: MyStrategy, useFactory: myStrategy }
+  ]
+  ...
+```
+
+Angular generates a class factory in a separate module and that
+factory [can only access exported functions](#exported-symbols).
+To correct this error, export the function.
+
+```
+// CORRECTED
+export function myStrategy() { ... }
+
+  ...
+  providers: [
+    { provide: MyStrategy, useFactory: myStrategy }
+  ]
+  ...
+```
+<hr>
+
+{@a function-calls-not-supported}
+<h3 class="no-toc">Function calls are not supported</h3>
+
+<div class="alert is-helpful">
+
+_Function calls are not supported. Consider replacing the function or lambda with a reference to an exported function._
+
+</div>
+
+The compiler does not currently support [function expressions or lambda functions](#function-expression).
+For example, you cannot set a provider's `useFactory` to an anonymous function or arrow function like this.
+
+```
+// ERROR
+  ...
+  providers: [
+    { provide: MyStrategy, useFactory: function() { ... } },
+    { provide: OtherStrategy, useFactory: () => { ... } }
+  ]
+  ...
+```
+You also get this error if you call a function or method in a provider's `useValue`.
+```
+// ERROR
+import { calculateValue } from './utilities';
+
+  ...
+  providers: [
+    { provide: SomeValue, useValue: calculateValue() }
+  ]
+  ...
+```
+
+To correct this error, export a function from the module and refer to the function in a `useFactory` provider instead.
+
+<code-example linenums="false">
+// CORRECTED
+import { calculateValue } from './utilities';
+
+export function myStrategy() { ... }
+export function otherStrategy() { ... }
+export function someValueFactory() { 
+  return calculateValue();
+}
+  ...
+  providers: [
+    { provide: MyStrategy, useFactory: myStrategy },
+    { provide: OtherStrategy, useFactory: otherStrategy },
+    { provide: SomeValue, useFactory: someValueFactory }
+  ]
+  ...
+</code-example>
+
+<hr>
+
+{@a destructured-variable-not-supported}
+<h3 class="no-toc">Destructured variable or constant not supported</h3>
+
+<div class="alert is-helpful">
+
+_Referencing an exported destructured variable or constant is not supported by the template compiler. Consider simplifying this to avoid destructuring._
+
+</div>
+
+The compiler does not support references to variables assigned by [destructuring](https://www.typescriptlang.org/docs/handbook/variable-declarations.html#destructuring).
+
+For example, you cannot write something like this:
+
+<code-example linenums="false">
+// ERROR
+import { configuration } from './configuration';
+
+// destructured assignment to foo and bar
+const {foo, bar} = configuration;
+  ...
+  providers: [
+    {provide: Foo, useValue: foo},
+    {provide: Bar, useValue: bar},
+  ]
+  ...
+</code-example>
+
+To correct this error, refer to non-destructured values.
+
+<code-example linenums="false">
+// CORRECTED
+import { configuration } from './configuration';
+  ...
+  providers: [
+    {provide: Foo, useValue: configuration.foo},
+    {provide: Bar, useValue: configuration.bar},
+  ]
+  ...
+</code-example>
+
+<hr>
+
+<h3 class="no-toc">Could not resolve type</h3>
+
+The compiler encountered a type and can't determine which module exports that type.
+
+This can happen if you refer to an ambient type.
+For example, the `Window` type is an ambiant type declared in the global `.d.ts` file.
+
+You'll get an error if you reference it in the component constructor,
+which the compiler must statically analyze.
+
+```
+// ERROR
+@Component({ })
+export class MyComponent {
+  constructor (private win: Window) { ... }
+}
+```
+TypeScript understands ambiant types so you don't import them. 
+The Angular compiler does not understand a type that you neglect to export or import.
+
+In this case, the compiler doesn't understand how to inject something with the `Window` token.
+
+Do not refer to ambient types in metadata expressions.
+
+If you must inject an instance of an ambiant type,
+you can finesse the problem in four steps:
+
+1. Create an injection token for an instance of the ambiant type.
+1. Create a factory function that returns that instance.
+1. Add a `useFactory` provider with that factory function.
+1. Use `@Inject` to inject the instance.
+
+Here's an illustrative example.
+
+<code-example linenums="false">
+// CORRECTED
+import { Inject } from '@angular/core';
+
+export const WINDOW = new InjectionToken('Window');
+export function _window() { return window; }
+
+@Component({
+  ...
+  providers: [
+    { provide: WINDOW, useFactory: _window }
+  ]
+})
+export class MyComponent {
+  constructor (@Inject(WINDOW) private win: Window) { ... }
+}
+</code-example>
+
+The `Window` type in the constructor is no longer a problem for the compiler because it
+uses the `@Inject(WINDOW)` to generate the injection code.
+
+Angular does something similar with the `DOCUMENT` token so you can inject the browser's `document` object (or an abstraction of it, depending upon the platform in which the application runs).
+
+<code-example linenums="false">
+import { Inject }   from '@angular/core';
+import { DOCUMENT } from '@angular/platform-browser';
+
+@Component({ ... })
+export class MyComponent {
+  constructor (@Inject(DOCUMENT) private doc: Document) { ... }
+}
+</code-example>
+<hr>
+
+<h3 class="no-toc">Name expected</h3>
+
+The compiler expected a name in an expression it was evaluating.
+This can happen if you use a number as a property name as in the following example. 
+
+```
+// ERROR
+provider: [{ provide: Foo, useValue: { 0: 'test' } }]
+```
+
+Change the name of the property to something non-numeric.
+
+```
+// CORRECTED
+provider: [{ provide: Foo, useValue: { '0': 'test' } }]
+```
+
+<hr>
+
+<h3 class="no-toc">Unsupported enum member name</h3>
+
+Angular couldn't determine the value of the [enum member](https://www.typescriptlang.org/docs/handbook/enums.html) 
+that you referenced in metadata.
+
+The compiler can understand simple enum values but not complex values such as those derived from computed properties.
+
+<code-example linenums="false">
+// ERROR
+enum Colors {
+  Red = 1,
+  White,
+  Blue = "Blue".length // computed
+}
+
+  ...
+  providers: [
+    { provide: BaseColor,   useValue: Colors.White } // ok
+    { provide: DangerColor, useValue: Colors.Red }   // ok
+    { provide: StrongColor, useValue: Colors.Blue }  // bad
+  ]
+  ...
+</code-example>
+
+Avoid referring to enums with complicated initializers or computed properties.
+
+<hr>
+
+{@a tagged-template-expressions-not-supported}
+<h3 class="no-toc">Tagged template expressions are not supported</h3>
+
+<div class="alert is-helpful">
+
+_Tagged template expressions are not supported in metadata._
+
+</div>
+
+The compiler encountered a JavaScript ES2015 [tagged template expression](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#Tagged_template_literals) such as,
+```
+// ERROR
+const expression = 'funky';
+const raw = String.raw`A tagged template ${expression} string`;
+ ...
+ template: '<div>' + raw + '</div>'
+ ...
+``` 
+[`String.raw()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/raw)
+is a _tag function_ native to JavaScript ES2015.
+
+The AOT compiler does not support tagged template expressions; avoid them in metadata expressions.
+
+<hr>
+
+<h3 class="no-toc">Symbol reference expected</h3>
+
+The compiler expected a reference to a symbol at the location specified in the error message.
+
+This error can occur if you use an expression in the `extends` clause of a class.
+
+<!--
+
+Chuck: After reviewing your PR comment I'm still at a loss. See [comment there](https://github.com/angular/angular/pull/17712#discussion_r132025495).
+
+-->
+
+## Conclusion
+
+This page covered:
+
+* What the AOT compiler does.
+* Why metadata must be written in a subset of JavaScript.
+* What that subset is.
+* Other restrictions on metadata definition.
+* Macro-functions and macro-static methods.
+* Compiler errors related to metadata.
diff --git a/aio/content/navigation.json b/aio/content/navigation.json
index fa127350b4..715d247467 100644
--- a/aio/content/navigation.json
+++ b/aio/content/navigation.json
@@ -338,6 +338,11 @@
               "title": "Ahead-of-Time Compilation",
               "tooltip": "Learn why and how to use the Ahead-of-Time (AOT) compiler."
             },
+            {
+              "url": "guide/metadata",
+              "title": "Metadata and AOT",
+              "tooltip": "How Angular handles metadata with AOT."
+            },
             {
               "url": "guide/deployment",
               "title": "Deployment",

From 233ef93e88e5cd6646684bfe30ca8a6177546f67 Mon Sep 17 00:00:00 2001
From: Fabian Wiles <fabianwiles@live.com>
Date: Sat, 5 Aug 2017 09:59:32 +1200
Subject: [PATCH 22/83] feat(forms): add status to `AbstractControlDirective`

---
 packages/forms/src/directives/abstract_control_directive.ts | 2 ++
 packages/forms/test/directives_spec.ts                      | 6 ++++++
 tools/public_api_guard/forms/forms.d.ts                     | 1 +
 3 files changed, 9 insertions(+)

diff --git a/packages/forms/src/directives/abstract_control_directive.ts b/packages/forms/src/directives/abstract_control_directive.ts
index 1bf7524dae..8f0c34dd66 100644
--- a/packages/forms/src/directives/abstract_control_directive.ts
+++ b/packages/forms/src/directives/abstract_control_directive.ts
@@ -36,6 +36,8 @@ export abstract class AbstractControlDirective {
 
   get touched(): boolean|null { return this.control ? this.control.touched : null; }
 
+  get status(): string|null { return this.control ? this.control.status : null; }
+
   get untouched(): boolean|null { return this.control ? this.control.untouched : null; }
 
   get disabled(): boolean|null { return this.control ? this.control.disabled : null; }
diff --git a/packages/forms/test/directives_spec.ts b/packages/forms/test/directives_spec.ts
index 00001a6fff..02c4363c5a 100644
--- a/packages/forms/test/directives_spec.ts
+++ b/packages/forms/test/directives_spec.ts
@@ -332,6 +332,7 @@ export function main() {
         expect(form.touched).toBe(formModel.touched);
         expect(form.untouched).toBe(formModel.untouched);
         expect(form.statusChanges).toBe(formModel.statusChanges);
+        expect(form.status).toBe(formModel.status);
         expect(form.valueChanges).toBe(formModel.valueChanges);
         expect(form.disabled).toBe(formModel.disabled);
         expect(form.enabled).toBe(formModel.enabled);
@@ -419,6 +420,7 @@ export function main() {
         expect(controlGroupDir.touched).toBe(formModel.touched);
         expect(controlGroupDir.untouched).toBe(formModel.untouched);
         expect(controlGroupDir.statusChanges).toBe(formModel.statusChanges);
+        expect(controlGroupDir.status).toBe(formModel.status);
         expect(controlGroupDir.valueChanges).toBe(formModel.valueChanges);
         expect(controlGroupDir.disabled).toBe(formModel.disabled);
         expect(controlGroupDir.enabled).toBe(formModel.enabled);
@@ -456,6 +458,7 @@ export function main() {
         expect(formArrayDir.pristine).toBe(formModel.pristine);
         expect(formArrayDir.dirty).toBe(formModel.dirty);
         expect(formArrayDir.touched).toBe(formModel.touched);
+        expect(formArrayDir.status).toBe(formModel.status);
         expect(formArrayDir.untouched).toBe(formModel.untouched);
         expect(formArrayDir.disabled).toBe(formModel.disabled);
         expect(formArrayDir.enabled).toBe(formModel.enabled);
@@ -486,6 +489,7 @@ export function main() {
         expect(controlDir.touched).toBe(control.touched);
         expect(controlDir.untouched).toBe(control.untouched);
         expect(controlDir.statusChanges).toBe(control.statusChanges);
+        expect(controlDir.status).toBe(control.status);
         expect(controlDir.valueChanges).toBe(control.valueChanges);
         expect(controlDir.disabled).toBe(control.disabled);
         expect(controlDir.enabled).toBe(control.enabled);
@@ -551,6 +555,7 @@ export function main() {
         expect(ngModel.touched).toBe(control.touched);
         expect(ngModel.untouched).toBe(control.untouched);
         expect(ngModel.statusChanges).toBe(control.statusChanges);
+        expect(ngModel.status).toBe(control.status);
         expect(ngModel.valueChanges).toBe(control.valueChanges);
         expect(ngModel.disabled).toBe(control.disabled);
         expect(ngModel.enabled).toBe(control.enabled);
@@ -660,6 +665,7 @@ export function main() {
         expect(controlNameDir.touched).toBe(formModel.touched);
         expect(controlNameDir.untouched).toBe(formModel.untouched);
         expect(controlNameDir.statusChanges).toBe(formModel.statusChanges);
+        expect(controlNameDir.status).toBe(formModel.status);
         expect(controlNameDir.valueChanges).toBe(formModel.valueChanges);
         expect(controlNameDir.disabled).toBe(formModel.disabled);
         expect(controlNameDir.enabled).toBe(formModel.enabled);
diff --git a/tools/public_api_guard/forms/forms.d.ts b/tools/public_api_guard/forms/forms.d.ts
index e5d27c631f..2ce54bfc29 100644
--- a/tools/public_api_guard/forms/forms.d.ts
+++ b/tools/public_api_guard/forms/forms.d.ts
@@ -74,6 +74,7 @@ export declare abstract class AbstractControlDirective {
     readonly path: string[] | null;
     readonly pending: boolean | null;
     readonly pristine: boolean | null;
+    readonly status: string | null;
     readonly statusChanges: Observable<any> | null;
     readonly touched: boolean | null;
     readonly untouched: boolean | null;

From 5e840e1e798f41a5e94cdf691c0a38690e9cfc92 Mon Sep 17 00:00:00 2001
From: Kara Erickson <karakara@google.com>
Date: Fri, 11 Aug 2017 19:07:31 -0700
Subject: [PATCH 23/83] docs(forms): add api docs for AbstractControlDirective

---
 .../directives/abstract_control_directive.ts  | 105 +++++++++++++++++-
 packages/forms/src/model.ts                   |   2 +-
 2 files changed, 102 insertions(+), 5 deletions(-)

diff --git a/packages/forms/src/directives/abstract_control_directive.ts b/packages/forms/src/directives/abstract_control_directive.ts
index 8f0c34dd66..54de8b0cc6 100644
--- a/packages/forms/src/directives/abstract_control_directive.ts
+++ b/packages/forms/src/directives/abstract_control_directive.ts
@@ -18,50 +18,147 @@ import {ValidationErrors} from './validators';
  * @stable
  */
 export abstract class AbstractControlDirective {
+  /**
+   * The {@link FormControl}, {@link FormGroup}, or {@link FormArray}
+   * that backs this directive. Most properties fall through to that
+   * instance.
+   */
   abstract get control(): AbstractControl|null;
 
+  /** The value of the control. */
   get value(): any { return this.control ? this.control.value : null; }
 
+  /**
+   * A control is `valid` when its `status === VALID`.
+   *
+   * In order to have this status, the control must have passed all its
+   * validation checks.
+   */
   get valid(): boolean|null { return this.control ? this.control.valid : null; }
 
+  /**
+   * A control is `invalid` when its `status === INVALID`.
+   *
+   * In order to have this status, the control must have failed
+   * at least one of its validation checks.
+   */
   get invalid(): boolean|null { return this.control ? this.control.invalid : null; }
 
+  /**
+   * A control is `pending` when its `status === PENDING`.
+   *
+   * In order to have this status, the control must be in the
+   * middle of conducting a validation check.
+   */
   get pending(): boolean|null { return this.control ? this.control.pending : null; }
 
+  /**
+   * A control is `disabled` when its `status === DISABLED`.
+   *
+   * Disabled controls are exempt from validation checks and
+   * are not included in the aggregate value of their ancestor
+   * controls.
+   */
+  get disabled(): boolean|null { return this.control ? this.control.disabled : null; }
+
+  /**
+   * A control is `enabled` as long as its `status !== DISABLED`.
+   *
+   * In other words, it has a status of `VALID`, `INVALID`, or
+   * `PENDING`.
+   */
+  get enabled(): boolean|null { return this.control ? this.control.enabled : null; }
+
+  /**
+   * Returns any errors generated by failing validation. If there
+   * are no errors, it will return null.
+   */
   get errors(): ValidationErrors|null { return this.control ? this.control.errors : null; }
 
+  /**
+   * A control is `pristine` if the user has not yet changed
+   * the value in the UI.
+   *
+   * Note that programmatic changes to a control's value will
+   * *not* mark it dirty.
+   */
   get pristine(): boolean|null { return this.control ? this.control.pristine : null; }
 
+  /**
+   * A control is `dirty` if the user has changed the value
+   * in the UI.
+   *
+   * Note that programmatic changes to a control's value will
+   * *not* mark it dirty.
+   */
   get dirty(): boolean|null { return this.control ? this.control.dirty : null; }
 
+  /**
+   * A control is marked `touched` once the user has triggered
+   * a `blur` event on it.
+   */
   get touched(): boolean|null { return this.control ? this.control.touched : null; }
 
   get status(): string|null { return this.control ? this.control.status : null; }
 
+  /**
+   * A control is `untouched` if the user has not yet triggered
+   * a `blur` event on it.
+   */
   get untouched(): boolean|null { return this.control ? this.control.untouched : null; }
 
-  get disabled(): boolean|null { return this.control ? this.control.disabled : null; }
-
-  get enabled(): boolean|null { return this.control ? this.control.enabled : null; }
-
+  /**
+   * Emits an event every time the validation status of the control
+   * is re-calculated.
+   */
   get statusChanges(): Observable<any>|null {
     return this.control ? this.control.statusChanges : null;
   }
 
+  /**
+   * Emits an event every time the value of the control changes, in
+   * the UI or programmatically.
+   */
   get valueChanges(): Observable<any>|null {
     return this.control ? this.control.valueChanges : null;
   }
 
+  /**
+   * Returns an array that represents the path from the top-level form
+   * to this control. Each index is the string name of the control on
+   * that level.
+   */
   get path(): string[]|null { return null; }
 
+  /**
+   * Resets the form control. This means by default:
+   *
+   * * it is marked as `pristine`
+   * * it is marked as `untouched`
+   * * value is set to null
+   *
+   * For more information, see {@link AbstractControl}.
+   */
   reset(value: any = undefined): void {
     if (this.control) this.control.reset(value);
   }
 
+  /**
+   * Returns true if the control with the given path has the error specified. Otherwise
+   * returns false.
+   *
+   * If no path is given, it checks for the error on the present control.
+   */
   hasError(errorCode: string, path?: string[]): boolean {
     return this.control ? this.control.hasError(errorCode, path) : false;
   }
 
+  /**
+   * Returns error data if the control with the given path has the error specified. Otherwise
+   * returns null or undefined.
+   *
+   * If no path is given, it checks for the error on the present control.
+   */
   getError(errorCode: string, path?: string[]): any {
     return this.control ? this.control.getError(errorCode, path) : null;
   }
diff --git a/packages/forms/src/model.ts b/packages/forms/src/model.ts
index acec83c417..7d240d0ce5 100644
--- a/packages/forms/src/model.ts
+++ b/packages/forms/src/model.ts
@@ -518,7 +518,7 @@ export abstract class AbstractControl {
   get(path: Array<string|number>|string): AbstractControl|null { return _find(this, path, '.'); }
 
   /**
-   * Returns true if the control with the given path has the error specified. Otherwise
+   * Returns error data if the control with the given path has the error specified. Otherwise
    * returns null or undefined.
    *
    * If no path is given, it checks for the error on the present control.

From 856278cfeac0a5c4ce45657d0a41044c3b697f9c Mon Sep 17 00:00:00 2001
From: Daniel Kucal <dkucal@gmail.com>
Date: Sun, 13 Aug 2017 16:52:44 +0200
Subject: [PATCH 24/83] docs(core): correct code examples for ChangeDetectorRef

---
 .../src/change_detection/change_detector_ref.ts     | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/packages/core/src/change_detection/change_detector_ref.ts b/packages/core/src/change_detection/change_detector_ref.ts
index ee01d95916..a5dcd55599 100644
--- a/packages/core/src/change_detection/change_detector_ref.ts
+++ b/packages/core/src/change_detection/change_detector_ref.ts
@@ -28,7 +28,7 @@ export abstract class ChangeDetectorRef {
    *
    *   constructor(private ref: ChangeDetectorRef) {
    *     setInterval(() => {
-   *       this.numberOfTicks ++
+   *       this.numberOfTicks++;
    *       // the following is required, otherwise the view will not be updated
    *       this.ref.markForCheck();
    *     }, 1000);
@@ -78,11 +78,11 @@ export abstract class ChangeDetectorRef {
    * @Component({
    *   selector: 'giant-list',
    *   template: `
-   *     <li *ngFor="let d of dataProvider.data">Data {{d}}</lig>
+   *     <li *ngFor="let d of dataProvider.data">Data {{d}}</li>
    *   `,
    * })
    * class GiantList {
-   *   constructor(private ref: ChangeDetectorRef, private dataProvider:DataProvider) {
+   *   constructor(private ref: ChangeDetectorRef, private dataProvider: DataProvider) {
    *     ref.detach();
    *     setInterval(() => {
    *       this.ref.detectChanges();
@@ -166,13 +166,14 @@ export abstract class ChangeDetectorRef {
    *   template: 'Data: {{dataProvider.data}}'
    * })
    * class LiveData {
-   *   constructor(private ref: ChangeDetectorRef, private dataProvider:DataProvider) {}
+   *   constructor(private ref: ChangeDetectorRef, private dataProvider: DataProvider) {}
    *
    *   set live(value) {
-   *     if (value)
+   *     if (value) {
    *       this.ref.reattach();
-   *     else
+   *     } else {
    *       this.ref.detach();
+   *     }
    *   }
    * }
    *

From 14d8186bf6ab8e0a98eee9be405de4d7c4ca124c Mon Sep 17 00:00:00 2001
From: Georgios Kalpakas <kalpakas.g@gmail.com>
Date: Fri, 11 Aug 2017 17:26:05 +0300
Subject: [PATCH 25/83] build(aio): upgrade `@angular/cli` to 1.3.0

```
$ ls -l dist/*.js

 14942  (+    4)  dist/0.b19e913fbdd6507d346b.chunk.js
  1535            dist/inline.e07e02e29b7fc93816c6.bundle.js
539996  (-56433)  dist/main.f466098a873c1169a6dc.bundle.js
 34314  (-   33)  dist/polyfills.9b05df3b6c9270ebf575.bundle.js
 54001            dist/worker-basic.min.js

644788  (-56462)  total
```
---
 aio/package.json |   4 +-
 aio/yarn.lock    | 624 ++++++++++++++++++++++++++++-------------------
 2 files changed, 377 insertions(+), 251 deletions(-)

diff --git a/aio/package.json b/aio/package.json
index 7309a5c78a..ea7fd51771 100644
--- a/aio/package.json
+++ b/aio/package.json
@@ -9,7 +9,7 @@
     "ng": "yarn check-env && ng",
     "start": "yarn check-env && ng serve",
     "prebuild": "yarn check-env && yarn setup",
-    "build": "ng build --target=production --environment=stable -sm -bo",
+    "build": "ng build --target=production --environment=stable -sm --build-optimizer",
     "postbuild": "yarn sw-manifest && yarn sw-copy",
     "lint": "yarn check-env && yarn docs-lint && ng lint && yarn example-lint",
     "test": "yarn check-env && ng test",
@@ -72,7 +72,7 @@
     "zone.js": "^0.8.12"
   },
   "devDependencies": {
-    "@angular/cli": "1.3.0-rc.3",
+    "@angular/cli": "^1.3.0",
     "@angular/compiler-cli": "^4.3.1",
     "@types/jasmine": "^2.5.52",
     "@types/node": "~6.0.60",
diff --git a/aio/yarn.lock b/aio/yarn.lock
index c47e8cc0ee..e3ea5f3d96 100644
--- a/aio/yarn.lock
+++ b/aio/yarn.lock
@@ -22,13 +22,13 @@
   dependencies:
     tslib "^1.7.1"
 
-"@angular/cli@1.3.0-rc.3":
-  version "1.3.0-rc.3"
-  resolved "https://registry.yarnpkg.com/@angular/cli/-/cli-1.3.0-rc.3.tgz#5a6999382f956b6109d3042569659972bca38a63"
+"@angular/cli@^1.3.0":
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/@angular/cli/-/cli-1.3.0.tgz#140fe698508a8c023b4b7da01c0cc063cf711018"
   dependencies:
     "@angular-devkit/build-optimizer" "0.0.13"
     "@ngtools/json-schema" "1.1.0"
-    "@ngtools/webpack" "1.6.0-rc.3"
+    "@ngtools/webpack" "1.6.0"
     autoprefixer "^6.5.3"
     chalk "^2.0.1"
     circular-dependency-plugin "^3.0.0"
@@ -56,7 +56,7 @@
     karma-source-map-support "^1.2.0"
     less "^2.7.2"
     less-loader "^4.0.5"
-    license-webpack-plugin "^0.4.2"
+    license-webpack-plugin "^0.5.1"
     lodash "^4.11.1"
     memory-fs "^0.4.1"
     minimatch "^3.0.3"
@@ -75,6 +75,7 @@
     semver "^5.1.0"
     silent-error "^1.0.0"
     source-map-loader "^0.2.0"
+    source-map-support "^0.4.1"
     style-loader "^0.13.1"
     stylus "^0.54.5"
     stylus-loader "^3.0.1"
@@ -177,9 +178,9 @@
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@ngtools/json-schema/-/json-schema-1.1.0.tgz#c3a0c544d62392acc2813a42c8a0dc6f58f86922"
 
-"@ngtools/webpack@1.6.0-rc.3":
-  version "1.6.0-rc.3"
-  resolved "https://registry.yarnpkg.com/@ngtools/webpack/-/webpack-1.6.0-rc.3.tgz#1cc0885c5075f66ac322e68eaf256bff172dd134"
+"@ngtools/webpack@1.6.0":
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/@ngtools/webpack/-/webpack-1.6.0.tgz#6262f110283fcbfefa2ad45bc79c2c855c3963bb"
   dependencies:
     loader-utils "^1.0.2"
     magic-string "^0.22.3"
@@ -298,10 +299,12 @@ ajv@^4.7.0, ajv@^4.9.1:
     json-stable-stringify "^1.0.1"
 
 ajv@^5.0.0, ajv@^5.1.5:
-  version "5.1.5"
-  resolved "https://registry.yarnpkg.com/ajv/-/ajv-5.1.5.tgz#8734931b601f00d4feef7c65738d77d1b65d1f68"
+  version "5.2.2"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-5.2.2.tgz#47c68d69e86f5d953103b0074a9430dc63da5e39"
   dependencies:
     co "^4.6.0"
+    fast-deep-equal "^1.0.0"
+    json-schema-traverse "^0.3.0"
     json-stable-stringify "^1.0.1"
 
 align-text@^0.1.1, align-text@^0.1.3:
@@ -343,6 +346,10 @@ ansi-escapes@^1.1.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-1.4.0.tgz#d3a8a83b319aa67793662b13e761c7911422306e"
 
+ansi-escapes@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-2.0.0.tgz#5bae52be424878dd9783e8910e3fc2922e83c81b"
+
 ansi-html@0.0.7:
   version "0.0.7"
   resolved "https://registry.yarnpkg.com/ansi-html/-/ansi-html-0.0.7.tgz#813584021962a9e9e6fd039f940d12f56ca7859e"
@@ -355,6 +362,10 @@ ansi-regex@^2.0.0:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-2.1.1.tgz#c3b33ab5ee360d86e0e628f0468ae7ef27d654df"
 
+ansi-regex@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-3.0.0.tgz#ed0317c322064f79466c02966bddb605ab37d998"
+
 ansi-styles@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-1.1.0.tgz#eaecbf66cd706882760b2f4691582b8f55d7a7de"
@@ -565,13 +576,13 @@ async@^1.3.0, async@^1.4.0, async@^1.5.2:
   version "1.5.2"
   resolved "https://registry.yarnpkg.com/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a"
 
-async@^2.0.0:
+async@^2.0.0, async@^2.1.4:
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/async/-/async-2.4.0.tgz#4990200f18ea5b837c2cc4f8c031a6985c385611"
   dependencies:
     lodash "^4.14.0"
 
-async@^2.1.2, async@^2.1.4, async@^2.1.5, async@^2.4.1:
+async@^2.1.2, async@^2.1.5, async@^2.4.1:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/async/-/async-2.5.0.tgz#843190fd6b7357a0b9e1c956edddd5ec8462b54d"
   dependencies:
@@ -725,9 +736,9 @@ basic-auth@~1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/basic-auth/-/basic-auth-1.1.0.tgz#45221ee429f7ee1e5035be3f51533f1cdfd29884"
 
-batch@0.5.3:
-  version "0.5.3"
-  resolved "https://registry.yarnpkg.com/batch/-/batch-0.5.3.tgz#3f3414f380321743bfc1042f9a83ff1d5824d464"
+batch@0.6.1:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/batch/-/batch-0.6.1.tgz#dc34314f4e679318093fc760272525f94bf25c16"
 
 bcrypt-pbkdf@^1.0.0:
   version "1.0.1"
@@ -776,8 +787,8 @@ bluebird@^3.3.0, bluebird@^3.4.7:
   resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.5.0.tgz#791420d7f551eea2897453a8a77653f96606d67c"
 
 bn.js@^4.0.0, bn.js@^4.1.0, bn.js@^4.1.1, bn.js@^4.4.0:
-  version "4.11.6"
-  resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-4.11.6.tgz#53344adb14617a13f6e8dd2ce28905d1c0ba3215"
+  version "4.11.8"
+  resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-4.11.8.tgz#2cde09eb5ee341f484746bb0309b3253b1b1442f"
 
 body-parser@^1.16.1:
   version "1.17.2"
@@ -1022,8 +1033,8 @@ caniuse-api@^1.5.2:
     lodash.uniq "^4.5.0"
 
 caniuse-db@^1.0.30000529, caniuse-db@^1.0.30000634, caniuse-db@^1.0.30000639:
-  version "1.0.30000667"
-  resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000667.tgz#fb6060dbf349c101df26f421442419802fc6dab1"
+  version "1.0.30000715"
+  resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000715.tgz#0b9b5c795950dfbaf301a8806bafe87f126da8ca"
 
 canonical-path@0.0.2, canonical-path@^0.0.2, canonical-path@~0.0.2:
   version "0.0.2"
@@ -1074,9 +1085,9 @@ chalk@^1.0.0, chalk@^1.1.0, chalk@^1.1.1, chalk@^1.1.3:
     strip-ansi "^3.0.0"
     supports-color "^2.0.0"
 
-chalk@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.0.1.tgz#dbec49436d2ae15f536114e76d14656cdbc0f44d"
+chalk@^2.0.0, chalk@^2.0.1:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.1.0.tgz#ac5becf14fa21b99c6c92ca7a7d7cfd5b17e743e"
   dependencies:
     ansi-styles "^3.1.0"
     escape-string-regexp "^1.0.5"
@@ -1153,10 +1164,11 @@ chrome-devtools-frontend@1.0.422034:
   resolved "https://registry.yarnpkg.com/chrome-devtools-frontend/-/chrome-devtools-frontend-1.0.422034.tgz#071c8ce14466b7653032fcd1ad1a4a68d5e3cbd9"
 
 cipher-base@^1.0.0, cipher-base@^1.0.1, cipher-base@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/cipher-base/-/cipher-base-1.0.3.tgz#eeabf194419ce900da3018c207d212f2a6df0a07"
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/cipher-base/-/cipher-base-1.0.4.tgz#8760e4ecc272f4c363532f926d874aae2c1397de"
   dependencies:
     inherits "^2.0.1"
+    safe-buffer "^5.0.1"
 
 circular-dependency-plugin@^3.0.0:
   version "3.0.0"
@@ -1173,8 +1185,8 @@ cjson@^0.3.1:
     json-parse-helpfulerror "^1.0.3"
 
 clap@^1.0.9:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/clap/-/clap-1.1.3.tgz#b3bd36e93dd4cbfb395a3c26896352445265c05b"
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/clap/-/clap-1.2.0.tgz#59c90fe3e137104746ff19469a27a634ff68c857"
   dependencies:
     chalk "^1.1.3"
 
@@ -1182,9 +1194,9 @@ classlist.js@^1.1.20150312:
   version "1.1.20150312"
   resolved "https://registry.yarnpkg.com/classlist.js/-/classlist.js-1.1.20150312.tgz#1d70842f7022f08d9ac086ce69e5b250f2c57789"
 
-clean-css@4.0.x:
-  version "4.0.13"
-  resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.0.13.tgz#feb2a176062d72a6c3e624d9213cac6a0c485e80"
+clean-css@4.1.x:
+  version "4.1.7"
+  resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.1.7.tgz#b9aea4f85679889cf3eae8b40349ec4ebdfdd032"
   dependencies:
     source-map "0.5.x"
 
@@ -1234,14 +1246,13 @@ cliui@^3.0.3, cliui@^3.2.0:
     strip-ansi "^3.0.1"
     wrap-ansi "^2.0.0"
 
-clone-deep@^0.2.4:
-  version "0.2.4"
-  resolved "https://registry.yarnpkg.com/clone-deep/-/clone-deep-0.2.4.tgz#4e73dd09e9fb971cc38670c5dced9c1896481cc6"
+clone-deep@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/clone-deep/-/clone-deep-0.3.0.tgz#348c61ae9cdbe0edfe053d91ff4cc521d790ede8"
   dependencies:
-    for-own "^0.1.3"
+    for-own "^1.0.0"
     is-plain-object "^2.0.1"
-    kind-of "^3.0.2"
-    lazy-cache "^1.0.3"
+    kind-of "^3.2.2"
     shallow-clone "^0.1.2"
 
 clone@^1.0.2:
@@ -1257,8 +1268,8 @@ co@^4.6.0:
   resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"
 
 coa@~1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/coa/-/coa-1.0.1.tgz#7f959346cfc8719e3f7233cd6852854a7c67d8a3"
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/coa/-/coa-1.0.4.tgz#a9ef153660d6a86a8bdec0289a5c684d217432fd"
   dependencies:
     q "^1.1.2"
 
@@ -1292,8 +1303,8 @@ color-convert@^1.3.0, color-convert@^1.9.0:
     color-name "^1.1.1"
 
 color-name@^1.0.0, color-name@^1.1.1:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.2.tgz#5c8ab72b64bd2215d617ae9559ebb148475cf98d"
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
 
 color-string@^0.3.0:
   version "0.3.0"
@@ -1347,11 +1358,15 @@ comma-separated-tokens@^1.0.0, comma-separated-tokens@^1.0.1:
   dependencies:
     trim "0.0.1"
 
+commander@2.11.x:
+  version "2.11.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.11.0.tgz#157152fd1e7a6c8d98a5b715cf376df928004563"
+
 commander@2.6.0:
   version "2.6.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.6.0.tgz#9df7e52fb2a0cb0fb89058ee80c3104225f37e1d"
 
-commander@2.9.x, commander@^2.8.1, commander@~2.9.0:
+commander@^2.8.1, commander@~2.9.0:
   version "2.9.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.9.0.tgz#9c99094176e12240cb22d6c5146098400fe0f7d4"
   dependencies:
@@ -1552,10 +1567,10 @@ core-js@^2.2.0, core-js@^2.4.0, core-js@^2.4.1:
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.4.1.tgz#4de911e667b0eae9124e34254b53aea6fc618d3e"
 
 core-object@^3.1.0:
-  version "3.1.3"
-  resolved "https://registry.yarnpkg.com/core-object/-/core-object-3.1.3.tgz#df399b3311bdb0c909e8aae8929fc3c1c4b25880"
+  version "3.1.4"
+  resolved "https://registry.yarnpkg.com/core-object/-/core-object-3.1.4.tgz#6df401e858124be9f7572f4c4a34c6150952d4b6"
   dependencies:
-    chalk "^1.1.3"
+    chalk "^2.0.0"
 
 core-util-is@~1.0.0:
   version "1.0.2"
@@ -1566,8 +1581,8 @@ corser@~2.0.0:
   resolved "https://registry.yarnpkg.com/corser/-/corser-2.0.1.tgz#8eda252ecaab5840dcd975ceb90d9370c819ff87"
 
 cosmiconfig@^2.1.0, cosmiconfig@^2.1.1:
-  version "2.1.3"
-  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-2.1.3.tgz#952771eb0dddc1cb3fa2f6fbe51a522e93b3ee0a"
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-2.2.2.tgz#6173cebd56fac042c1f4390edf7af6c07c7cb892"
   dependencies:
     is-directory "^0.3.1"
     js-yaml "^3.4.3"
@@ -1668,8 +1683,8 @@ cryptiles@2.x.x:
     boom "2.x.x"
 
 crypto-browserify@^3.11.0:
-  version "3.11.0"
-  resolved "https://registry.yarnpkg.com/crypto-browserify/-/crypto-browserify-3.11.0.tgz#3652a0906ab9b2a7e0c3ce66a408e957a2485522"
+  version "3.11.1"
+  resolved "https://registry.yarnpkg.com/crypto-browserify/-/crypto-browserify-3.11.1.tgz#948945efc6757a400d6e5e5af47194d10064279f"
   dependencies:
     browserify-cipher "^1.0.0"
     browserify-sign "^4.0.0"
@@ -1697,12 +1712,13 @@ css-color-names@0.0.4:
   resolved "https://registry.yarnpkg.com/css-color-names/-/css-color-names-0.0.4.tgz#808adc2e79cf84738069b646cb20ec27beb629e0"
 
 css-loader@^0.28.1:
-  version "0.28.1"
-  resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-0.28.1.tgz#220325599f8f00452d9ceb4c3ca6c8a66798642d"
+  version "0.28.4"
+  resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-0.28.4.tgz#6cf3579192ce355e8b38d5f42dd7a1f2ec898d0f"
   dependencies:
     babel-code-frame "^6.11.0"
     css-selector-tokenizer "^0.7.0"
     cssnano ">=2.6.1 <4"
+    icss-utils "^2.1.0"
     loader-utils "^1.0.2"
     lodash.camelcase "^4.3.0"
     object-assign "^4.0.1"
@@ -1727,14 +1743,6 @@ css-select@^1.1.0:
     domutils "1.5.1"
     nth-check "~1.0.1"
 
-css-selector-tokenizer@^0.6.0:
-  version "0.6.0"
-  resolved "https://registry.yarnpkg.com/css-selector-tokenizer/-/css-selector-tokenizer-0.6.0.tgz#6445f582c7930d241dcc5007a43d6fcb8f073152"
-  dependencies:
-    cssesc "^0.1.0"
-    fastparse "^1.1.1"
-    regexpu-core "^1.0.0"
-
 css-selector-tokenizer@^0.7.0:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/css-selector-tokenizer/-/css-selector-tokenizer-0.7.0.tgz#e6988474ae8c953477bf5e7efecfceccd9cf4c86"
@@ -1881,6 +1889,12 @@ debug@2.6.3:
   dependencies:
     ms "0.7.2"
 
+debug@2.6.8, debug@^2.6.8:
+  version "2.6.8"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.8.tgz#e731531ca2ede27d188222427da17821d68ff4fc"
+  dependencies:
+    ms "2.0.0"
+
 decamelize@^1.0.0, decamelize@^1.1.1, decamelize@^1.1.2:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
@@ -1946,6 +1960,10 @@ depd@1.1.0, depd@~1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.0.tgz#e1bd82c6aab6ced965b97b88b17ed3e528ca18c3"
 
+depd@1.1.1, depd@~1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.1.tgz#5783b4e1c459f06fa5ca27f991f3d06e7a310359"
+
 dependency-graph@~0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/dependency-graph/-/dependency-graph-0.4.1.tgz#302e58218d85c51a97638730dbf9b7d852a19693"
@@ -1973,6 +1991,10 @@ detect-indent@^4.0.0:
   dependencies:
     repeating "^2.0.0"
 
+detect-node@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/detect-node/-/detect-node-2.0.3.tgz#a2033c09cc8e158d37748fbde7507832bd6ce127"
+
 devtools-timeline-model@1.1.6:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/devtools-timeline-model/-/devtools-timeline-model-1.1.6.tgz#7be51a73b55d727b597bb30dd1ed2e8e210639a5"
@@ -2108,6 +2130,10 @@ dom-serializer@0:
     domelementtype "~1.1.1"
     entities "~1.1.1"
 
+dom-walk@^0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/dom-walk/-/dom-walk-0.1.1.tgz#672226dc74c8f799ad35307df936aba11acd6018"
+
 domain-browser@^1.1.1:
   version "1.1.7"
   resolved "https://registry.yarnpkg.com/domain-browser/-/domain-browser-1.1.7.tgz#867aa4b093faa05f1de08c06f4d7b21fdf8698bc"
@@ -2220,8 +2246,8 @@ ee-first@1.1.1:
   resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
 
 electron-to-chromium@^1.2.7:
-  version "1.3.10"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.10.tgz#63d62b785471f0d8dda85199d64579de8a449f08"
+  version "1.3.18"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.18.tgz#3dcc99da3e6b665f6abbc71c28ad51a2cd731a9c"
 
 elliptic@^6.0.0:
   version "6.4.0"
@@ -2614,8 +2640,8 @@ exports-loader@^0.6.3:
     source-map "0.5.x"
 
 express@^4.13.3:
-  version "4.15.2"
-  resolved "https://registry.yarnpkg.com/express/-/express-4.15.2.tgz#af107fc148504457f2dca9a6f2571d7129b97b35"
+  version "4.15.4"
+  resolved "https://registry.yarnpkg.com/express/-/express-4.15.4.tgz#032e2253489cf8fce02666beca3d11ed7a2daed1"
   dependencies:
     accepts "~1.3.3"
     array-flatten "1.1.1"
@@ -2623,28 +2649,28 @@ express@^4.13.3:
     content-type "~1.0.2"
     cookie "0.3.1"
     cookie-signature "1.0.6"
-    debug "2.6.1"
-    depd "~1.1.0"
+    debug "2.6.8"
+    depd "~1.1.1"
     encodeurl "~1.0.1"
     escape-html "~1.0.3"
     etag "~1.8.0"
-    finalhandler "~1.0.0"
+    finalhandler "~1.0.4"
     fresh "0.5.0"
     merge-descriptors "1.0.1"
     methods "~1.1.2"
     on-finished "~2.3.0"
     parseurl "~1.3.1"
     path-to-regexp "0.1.7"
-    proxy-addr "~1.1.3"
-    qs "6.4.0"
+    proxy-addr "~1.1.5"
+    qs "6.5.0"
     range-parser "~1.2.0"
-    send "0.15.1"
-    serve-static "1.12.1"
+    send "0.15.4"
+    serve-static "1.12.4"
     setprototypeof "1.0.3"
     statuses "~1.3.1"
-    type-is "~1.6.14"
+    type-is "~1.6.15"
     utils-merge "1.0.0"
-    vary "~1.1.0"
+    vary "~1.1.1"
 
 extend@3, extend@^3.0.0, extend@~3.0.0:
   version "3.0.1"
@@ -2657,10 +2683,12 @@ extendr@^3.2.0, extendr@^3.2.2:
     editions "^1.1.2"
     typechecker "^4.3.0"
 
-external-editor@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/external-editor/-/external-editor-2.0.1.tgz#4c597c6c88fa6410e41dbbaa7b1be2336aa31095"
+external-editor@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/external-editor/-/external-editor-2.0.4.tgz#1ed9199da9cbfe2ef2f7a31b2fde8b0d12368972"
   dependencies:
+    iconv-lite "^0.4.17"
+    jschardet "^1.4.2"
     tmp "^0.0.31"
 
 extglob@^0.3.1:
@@ -2686,6 +2714,10 @@ eyes@0.1.x:
   version "0.1.8"
   resolved "https://registry.yarnpkg.com/eyes/-/eyes-0.1.8.tgz#62cf120234c683785d902348a800ef3e0cc20bc0"
 
+fast-deep-equal@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-1.0.0.tgz#96256a3bc975595eb36d82e9929d060d893439ff"
+
 fast-levenshtein@~2.0.4:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
@@ -2767,7 +2799,7 @@ filled-array@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/filled-array/-/filled-array-1.1.0.tgz#c3c4f6c663b923459a9aa29912d2d031f1507f84"
 
-finalhandler@1.0.1, finalhandler@~1.0.0:
+finalhandler@1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-1.0.1.tgz#bcd15d1689c0e5ed729b6f7f541a6df984117db8"
   dependencies:
@@ -2779,6 +2811,18 @@ finalhandler@1.0.1, finalhandler@~1.0.0:
     statuses "~1.3.1"
     unpipe "~1.0.0"
 
+finalhandler@~1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-1.0.4.tgz#18574f2e7c4b98b8ae3b230c21f201f31bdb3fb7"
+  dependencies:
+    debug "2.6.8"
+    encodeurl "~1.0.1"
+    escape-html "~1.0.3"
+    on-finished "~2.3.0"
+    parseurl "~1.3.1"
+    statuses "~1.3.1"
+    unpipe "~1.0.0"
+
 find-up@^1.0.0:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/find-up/-/find-up-1.1.2.tgz#6b2e9822b1a2ce0a60ab64d610eccad53cb24d0f"
@@ -2878,12 +2922,18 @@ for-in@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"
 
-for-own@^0.1.3, for-own@^0.1.4:
+for-own@^0.1.4:
   version "0.1.5"
   resolved "https://registry.yarnpkg.com/for-own/-/for-own-0.1.5.tgz#5265c681a4f294dabbf17c9509b6763aa84510ce"
   dependencies:
     for-in "^1.0.1"
 
+for-own@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/for-own/-/for-own-1.0.0.tgz#c63332f415cedc4b04dbfe70cf836494c53cb44b"
+  dependencies:
+    for-in "^1.0.1"
+
 forever-agent@~0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/forever-agent/-/forever-agent-0.6.1.tgz#fbc71f0c41adeb37f96c577ad1ed42d8fdacca91"
@@ -2937,8 +2987,8 @@ fs-extra@^2.1.2:
     jsonfile "^2.1.0"
 
 fs-extra@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-4.0.0.tgz#414fb4ca2d2170ba0014159d3a8aec3303418d9e"
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-4.0.1.tgz#7fc0c6c8957f983f57f306a24e5b9ddd8d0dd880"
   dependencies:
     graceful-fs "^4.1.2"
     jsonfile "^3.0.0"
@@ -3090,6 +3140,13 @@ glob@~5.0.0:
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
+global@^4.3.2:
+  version "4.3.2"
+  resolved "https://registry.yarnpkg.com/global/-/global-4.3.2.tgz#e76989268a6c74c38908b1305b10fc0e394e9d0f"
+  dependencies:
+    min-document "^2.19.0"
+    process "~0.5.1"
+
 globals@^9.0.0, globals@^9.14.0:
   version "9.17.0"
   resolved "https://registry.yarnpkg.com/globals/-/globals-9.17.0.tgz#0c0ca696d9b9bb694d2e5470bd37777caad50286"
@@ -3116,11 +3173,11 @@ globby@^6.1.0:
     pinkie-promise "^2.0.0"
 
 globule@^1.0.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/globule/-/globule-1.1.0.tgz#c49352e4dc183d85893ee825385eb994bb6df45f"
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/globule/-/globule-1.2.0.tgz#1dc49c6822dd9e8a2fa00ba2a295006e8664bd09"
   dependencies:
     glob "~7.1.1"
-    lodash "~4.16.4"
+    lodash "~4.17.4"
     minimatch "~3.0.2"
 
 got@^3.2.0:
@@ -3182,7 +3239,7 @@ graceful-fs@*, graceful-fs@^4.1.0, graceful-fs@^4.1.11, graceful-fs@^4.1.2, grac
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/graceful-readlink/-/graceful-readlink-1.0.1.tgz#4cafad76bc62f02fa039b2f94e9a3dd3a391a725"
 
-handle-thing@^1.2.4:
+handle-thing@^1.2.5:
   version "1.2.5"
   resolved "https://registry.yarnpkg.com/handle-thing/-/handle-thing-1.2.5.tgz#fd7aad726bf1a5fd16dfc29b2f7a6601d27139c4"
 
@@ -3262,10 +3319,11 @@ hash-base@^2.0.0:
     inherits "^2.0.1"
 
 hash.js@^1.0.0, hash.js@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/hash.js/-/hash.js-1.0.3.tgz#1332ff00156c0a0ffdd8236013d07b77a0451573"
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/hash.js/-/hash.js-1.1.3.tgz#340dedbe6290187151c1ea1d777a3448935df846"
   dependencies:
-    inherits "^2.0.1"
+    inherits "^2.0.3"
+    minimalistic-assert "^1.0.0"
 
 hast-util-from-parse5@^1.0.0:
   version "1.1.0"
@@ -3412,25 +3470,25 @@ html-entities@^1.2.0:
   resolved "https://registry.yarnpkg.com/html-entities/-/html-entities-1.2.1.tgz#0df29351f0721163515dfb9e5543e5f6eed5162f"
 
 html-minifier@^3.2.3:
-  version "3.4.4"
-  resolved "https://registry.yarnpkg.com/html-minifier/-/html-minifier-3.4.4.tgz#616fe3e3ef16da02b393d9a6099eeff468a35df0"
+  version "3.5.3"
+  resolved "https://registry.yarnpkg.com/html-minifier/-/html-minifier-3.5.3.tgz#4a275e3b1a16639abb79b4c11191ff0d0fcf1ab9"
   dependencies:
     camel-case "3.0.x"
-    clean-css "4.0.x"
-    commander "2.9.x"
+    clean-css "4.1.x"
+    commander "2.11.x"
     he "1.1.x"
     ncname "1.0.x"
     param-case "2.1.x"
     relateurl "0.2.x"
-    uglify-js "~2.8.22"
+    uglify-js "3.0.x"
 
 html-void-elements@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/html-void-elements/-/html-void-elements-1.0.1.tgz#f929bea267a19e3535950502ca12c159f1b559af"
 
 html-webpack-plugin@^2.29.0:
-  version "2.29.0"
-  resolved "https://registry.yarnpkg.com/html-webpack-plugin/-/html-webpack-plugin-2.29.0.tgz#e987f421853d3b6938c8c4c8171842e5fd17af23"
+  version "2.30.1"
+  resolved "https://registry.yarnpkg.com/html-webpack-plugin/-/html-webpack-plugin-2.30.1.tgz#7f9c421b7ea91ec460f56527d78df484ee7537d5"
   dependencies:
     bluebird "^3.4.7"
     html-minifier "^3.2.3"
@@ -3465,18 +3523,10 @@ htmlparser2@~3.3.0:
     domutils "1.1"
     readable-stream "1.0"
 
-http-deceiver@^1.2.4:
+http-deceiver@^1.2.7:
   version "1.2.7"
   resolved "https://registry.yarnpkg.com/http-deceiver/-/http-deceiver-1.2.7.tgz#fa7168944ab9a519d337cb0bec7284dc3e723d87"
 
-http-errors@~1.5.0:
-  version "1.5.1"
-  resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.5.1.tgz#788c0d2c1de2c81b9e6e8c01843b6b97eb920750"
-  dependencies:
-    inherits "2.0.3"
-    setprototypeof "1.0.2"
-    statuses ">= 1.3.1 < 2"
-
 http-errors@~1.6.1:
   version "1.6.1"
   resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.6.1.tgz#5f8b8ed98aca545656bf572997387f904a722257"
@@ -3486,6 +3536,15 @@ http-errors@~1.6.1:
     setprototypeof "1.0.3"
     statuses ">= 1.3.1 < 2"
 
+http-errors@~1.6.2:
+  version "1.6.2"
+  resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.6.2.tgz#0a002cc85707192a7e7946ceedc11155f60ec736"
+  dependencies:
+    depd "1.1.1"
+    inherits "2.0.3"
+    setprototypeof "1.0.3"
+    statuses ">= 1.3.1 < 2"
+
 http-proxy-middleware@~0.17.4:
   version "0.17.4"
   resolved "https://registry.yarnpkg.com/http-proxy-middleware/-/http-proxy-middleware-0.17.4.tgz#642e8848851d66f09d4f124912846dbaeb41b833"
@@ -3543,9 +3602,19 @@ iconv-lite@0.4.15:
   version "0.4.15"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.15.tgz#fe265a218ac6a57cfe854927e9d04c19825eddeb"
 
-icss-replace-symbols@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/icss-replace-symbols/-/icss-replace-symbols-1.0.2.tgz#cb0b6054eb3af6edc9ab1d62d01933e2d4c8bfa5"
+iconv-lite@^0.4.17:
+  version "0.4.18"
+  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.18.tgz#23d8656b16aae6742ac29732ea8f0336a4789cf2"
+
+icss-replace-symbols@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/icss-replace-symbols/-/icss-replace-symbols-1.1.0.tgz#06ea6f83679a7749e386cfe1fe812ae5db223ded"
+
+icss-utils@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/icss-utils/-/icss-utils-2.1.0.tgz#83f0a0ec378bf3246178b6c2ad9136f135b1c962"
+  dependencies:
+    postcss "^6.0.1"
 
 ieee754@^1.1.4:
   version "1.1.8"
@@ -3648,21 +3717,22 @@ inquirer@^0.12.0:
     through "^2.3.6"
 
 inquirer@^3.0.0:
-  version "3.0.6"
-  resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-3.0.6.tgz#e04aaa9d05b7a3cb9b0f407d04375f0447190347"
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-3.2.1.tgz#06ceb0f540f45ca548c17d6840959878265fa175"
   dependencies:
-    ansi-escapes "^1.1.0"
-    chalk "^1.0.0"
+    ansi-escapes "^2.0.0"
+    chalk "^2.0.0"
     cli-cursor "^2.1.0"
     cli-width "^2.0.0"
-    external-editor "^2.0.1"
+    external-editor "^2.0.4"
     figures "^2.0.0"
     lodash "^4.3.0"
     mute-stream "0.0.7"
     run-async "^2.2.0"
-    rx "^4.1.0"
-    string-width "^2.0.0"
-    strip-ansi "^3.0.0"
+    rx-lite "^4.0.8"
+    rx-lite-aggregates "^4.0.8"
+    string-width "^2.1.0"
+    strip-ansi "^4.0.0"
     through "^2.3.6"
 
 internal-ip@^1.2.0:
@@ -3689,9 +3759,9 @@ ip@^1.1.0:
   version "1.1.5"
   resolved "https://registry.yarnpkg.com/ip/-/ip-1.1.5.tgz#bdded70114290828c0a039e72ef25f5aaec4354a"
 
-ipaddr.js@1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/ipaddr.js/-/ipaddr.js-1.3.0.tgz#1e03a52fdad83a8bbb2b25cbf4998b4cffcd3dec"
+ipaddr.js@1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/ipaddr.js/-/ipaddr.js-1.4.0.tgz#296aca878a821816e5b85d0a285a99bcff4582f0"
 
 is-absolute-url@^2.0.0:
   version "2.1.0"
@@ -3848,10 +3918,10 @@ is-plain-obj@^1.0.0, is-plain-obj@^1.1.0:
   resolved "https://registry.yarnpkg.com/is-plain-obj/-/is-plain-obj-1.1.0.tgz#71a50c8429dfca773c92a390a4a03b39fcd51d3e"
 
 is-plain-object@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/is-plain-object/-/is-plain-object-2.0.1.tgz#4d7ca539bc9db9b737b8acb612f2318ef92f294f"
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/is-plain-object/-/is-plain-object-2.0.4.tgz#2c163b3fafb1b606d9d17928f05c2a1c38e07677"
   dependencies:
-    isobject "^1.0.0"
+    isobject "^3.0.1"
 
 is-posix-bracket@^0.1.0:
   version "0.1.1"
@@ -3939,16 +4009,16 @@ isexe@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
 
-isobject@^1.0.0:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/isobject/-/isobject-1.0.2.tgz#f0f9b8ce92dd540fa0740882e3835a2e022ec78a"
-
 isobject@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/isobject/-/isobject-2.1.0.tgz#f065561096a3f1da2ef46272f815c840d87e0c89"
   dependencies:
     isarray "1.0.0"
 
+isobject@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df"
+
 isstream@0.1.x, isstream@~0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
@@ -4095,6 +4165,10 @@ jsbn@~0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-0.1.1.tgz#a5e654c2e5a2deb5f201d96cefbca80c0ef2f513"
 
+jschardet@^1.4.2:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/jschardet/-/jschardet-1.5.1.tgz#c519f629f86b3a5bedba58a88d311309eec097f9"
+
 jsdom@^9.12.0:
   version "9.12.0"
   resolved "https://registry.yarnpkg.com/jsdom/-/jsdom-9.12.0.tgz#e8c546fffcb06c00d4833ca84410fed7f8a097d4"
@@ -4132,8 +4206,8 @@ jshashes@^1.0.5:
   resolved "https://registry.yarnpkg.com/jshashes/-/jshashes-1.0.6.tgz#b04eb4ae8f9987b2d3ce00a6337c120543949bfd"
 
 json-loader@^0.5.4:
-  version "0.5.4"
-  resolved "https://registry.yarnpkg.com/json-loader/-/json-loader-0.5.4.tgz#8baa1365a632f58a3c46d20175fc6002c96e37de"
+  version "0.5.7"
+  resolved "https://registry.yarnpkg.com/json-loader/-/json-loader-0.5.7.tgz#dca14a70235ff82f0ac9a3abeb60d337a365185d"
 
 json-parse-helpfulerror@^1.0.3:
   version "1.0.3"
@@ -4141,6 +4215,10 @@ json-parse-helpfulerror@^1.0.3:
   dependencies:
     jju "^1.1.0"
 
+json-schema-traverse@^0.3.0:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-0.3.1.tgz#349a6d44c53a51de89b40805c5d5e59b417d3340"
+
 json-schema@0.2.3:
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/json-schema/-/json-schema-0.2.3.tgz#b480c892e59a2f05954ce727bd3f2a4e882f9e13"
@@ -4309,6 +4387,12 @@ kind-of@^3.0.2:
   dependencies:
     is-buffer "^1.1.5"
 
+kind-of@^3.2.2:
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-3.2.2.tgz#31ea21a734bab9bbb0f32466d893aea51e4a3c64"
+  dependencies:
+    is-buffer "^1.1.5"
+
 klaw@^1.0.0:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/klaw/-/klaw-1.3.1.tgz#4088433b46b3b1ba259d78785d8e96f73ba02439"
@@ -4395,9 +4479,9 @@ levn@^0.3.0, levn@~0.3.0:
     prelude-ls "~1.1.2"
     type-check "~0.3.2"
 
-license-webpack-plugin@^0.4.2:
-  version "0.4.3"
-  resolved "https://registry.yarnpkg.com/license-webpack-plugin/-/license-webpack-plugin-0.4.3.tgz#f9d88d4ebc04407a0061e8ccac26571f88e51a16"
+license-webpack-plugin@^0.5.1:
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/license-webpack-plugin/-/license-webpack-plugin-0.5.1.tgz#68d8af103486a9c4ebceddb7ed5d3bd61f383be4"
   dependencies:
     object-assign "^4.1.0"
 
@@ -4554,14 +4638,10 @@ lodash@^3.10.0, lodash@^3.10.1, lodash@^3.8.0, lodash@~3.10.0, lodash@~3.10.1:
   version "3.10.1"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-3.10.1.tgz#5bf45e8e49ba4189e17d482789dfd15bd140b7b6"
 
-lodash@^4.0.0, lodash@^4.11.1, lodash@^4.11.2, lodash@^4.13.1, lodash@^4.14.0, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.2.0, lodash@^4.3.0, lodash@^4.5.0, lodash@^4.5.1, lodash@^4.6.1, lodash@^4.8.0:
+lodash@^4.0.0, lodash@^4.11.1, lodash@^4.11.2, lodash@^4.13.1, lodash@^4.14.0, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.2.0, lodash@^4.3.0, lodash@^4.5.0, lodash@^4.5.1, lodash@^4.6.1, lodash@^4.8.0, lodash@~4.17.4:
   version "4.17.4"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae"
 
-lodash@~4.16.4:
-  version "4.16.6"
-  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.16.6.tgz#d22c9ac660288f3843e16ba7d2b5d06cca27d777"
-
 log4js@^0.6.31:
   version "0.6.38"
   resolved "https://registry.yarnpkg.com/log4js/-/log4js-0.6.38.tgz#2c494116695d6fb25480943d3fc872e662a522fd"
@@ -4623,12 +4703,6 @@ macaddress@^0.2.8:
   version "0.2.8"
   resolved "https://registry.yarnpkg.com/macaddress/-/macaddress-0.2.8.tgz#5904dc537c39ec6dbefeae902327135fa8511f12"
 
-magic-string@^0.19.1:
-  version "0.19.1"
-  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.19.1.tgz#14d768013caf2ec8fdea16a49af82fc377e75201"
-  dependencies:
-    vlq "^0.2.1"
-
 magic-string@^0.22.3:
   version "0.22.4"
   resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.22.4.tgz#31039b4e40366395618c1d6cf8193c53917475ff"
@@ -4793,6 +4867,12 @@ mimic-fn@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-1.1.0.tgz#e667783d92e89dbd342818b5230b9d62a672ad18"
 
+min-document@^2.19.0:
+  version "2.19.0"
+  resolved "https://registry.yarnpkg.com/min-document/-/min-document-2.19.0.tgz#7bd282e3f5842ed295bb748cdd9f1ffa2c824685"
+  dependencies:
+    dom-walk "^0.1.0"
+
 minimalistic-assert@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.0.tgz#702be2dda6b37f4836bcb3f5db56641b64a1d3d3"
@@ -4936,8 +5016,8 @@ node-forge@0.6.33:
   resolved "https://registry.yarnpkg.com/node-forge/-/node-forge-0.6.33.tgz#463811879f573d45155ad6a9f43dc296e8e85ebc"
 
 node-gyp@^3.3.1:
-  version "3.6.1"
-  resolved "https://registry.yarnpkg.com/node-gyp/-/node-gyp-3.6.1.tgz#19561067ff185464aded478212681f47fd578cbc"
+  version "3.6.2"
+  resolved "https://registry.yarnpkg.com/node-gyp/-/node-gyp-3.6.2.tgz#9bfbe54562286284838e750eac05295853fa1c60"
   dependencies:
     fstream "^1.0.0"
     glob "^7.0.3"
@@ -5008,8 +5088,8 @@ node-pre-gyp@^0.6.29:
     tar-pack "^3.4.0"
 
 node-sass@^4.3.0:
-  version "4.5.2"
-  resolved "https://registry.yarnpkg.com/node-sass/-/node-sass-4.5.2.tgz#4012fa2bd129b1d6365117e88d9da0500d99da64"
+  version "4.5.3"
+  resolved "https://registry.yarnpkg.com/node-sass/-/node-sass-4.5.3.tgz#d09c9d1179641239d1b97ffc6231fdcec53e1568"
   dependencies:
     async-foreach "^0.1.3"
     chalk "^1.1.1"
@@ -5167,7 +5247,7 @@ objectdiff@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/objectdiff/-/objectdiff-1.1.0.tgz#8d7a15be6cb8670df8a490cc6be12a4f05ea82f4"
 
-obuf@^1.0.0, obuf@^1.1.0:
+obuf@^1.0.0, obuf@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/obuf/-/obuf-1.1.1.tgz#104124b6c602c6796881a042541d36db43a5264e"
 
@@ -5498,8 +5578,8 @@ path-type@^2.0.0:
     pify "^2.0.0"
 
 pbkdf2@^3.0.3:
-  version "3.0.12"
-  resolved "https://registry.yarnpkg.com/pbkdf2/-/pbkdf2-3.0.12.tgz#be36785c5067ea48d806ff923288c5f750b6b8a2"
+  version "3.0.13"
+  resolved "https://registry.yarnpkg.com/pbkdf2/-/pbkdf2-3.0.13.tgz#c37d295531e786b1da3e3eadc840426accb0ae25"
   dependencies:
     create-hash "^1.1.2"
     create-hmac "^1.1.4"
@@ -5707,31 +5787,31 @@ postcss-minify-selectors@^2.0.4:
     postcss-selector-parser "^2.0.0"
 
 postcss-modules-extract-imports@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-1.0.1.tgz#8fb3fef9a6dd0420d3f6d4353cf1ff73f2b2a341"
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-1.2.0.tgz#66140ecece38ef06bf0d3e355d69bf59d141ea85"
   dependencies:
-    postcss "^5.0.4"
+    postcss "^6.0.1"
 
 postcss-modules-local-by-default@^1.0.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/postcss-modules-local-by-default/-/postcss-modules-local-by-default-1.1.1.tgz#29a10673fa37d19251265ca2ba3150d9040eb4ce"
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/postcss-modules-local-by-default/-/postcss-modules-local-by-default-1.2.0.tgz#f7d80c398c5a393fa7964466bd19500a7d61c069"
   dependencies:
-    css-selector-tokenizer "^0.6.0"
-    postcss "^5.0.4"
+    css-selector-tokenizer "^0.7.0"
+    postcss "^6.0.1"
 
 postcss-modules-scope@^1.0.0:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-modules-scope/-/postcss-modules-scope-1.0.2.tgz#ff977395e5e06202d7362290b88b1e8cd049de29"
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-modules-scope/-/postcss-modules-scope-1.1.0.tgz#d6ea64994c79f97b62a72b426fbe6056a194bb90"
   dependencies:
-    css-selector-tokenizer "^0.6.0"
-    postcss "^5.0.4"
+    css-selector-tokenizer "^0.7.0"
+    postcss "^6.0.1"
 
 postcss-modules-values@^1.1.0:
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/postcss-modules-values/-/postcss-modules-values-1.2.2.tgz#f0e7d476fe1ed88c5e4c7f97533a3e772ad94ca1"
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/postcss-modules-values/-/postcss-modules-values-1.3.0.tgz#ecffa9d7e192518389f42ad0e83f72aec456ea20"
   dependencies:
-    icss-replace-symbols "^1.0.2"
-    postcss "^5.0.14"
+    icss-replace-symbols "^1.1.0"
+    postcss "^6.0.1"
 
 postcss-normalize-charset@^1.1.0:
   version "1.1.1"
@@ -5834,6 +5914,14 @@ postcss@^5.0.0, postcss@^5.0.10, postcss@^5.0.11, postcss@^5.0.12, postcss@^5.0.
     source-map "^0.5.6"
     supports-color "^3.2.3"
 
+postcss@^6.0.1:
+  version "6.0.8"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.8.tgz#89067a9ce8b11f8a84cbc5117efc30419a0857b3"
+  dependencies:
+    chalk "^2.0.1"
+    source-map "^0.5.6"
+    supports-color "^4.2.0"
+
 prelude-ls@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
@@ -5847,8 +5935,8 @@ preserve@^0.2.0:
   resolved "https://registry.yarnpkg.com/preserve/-/preserve-0.2.0.tgz#815ed1f6ebc65926f865b310c0713bcb3315ce4b"
 
 pretty-error@^2.0.2:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/pretty-error/-/pretty-error-2.1.0.tgz#87f4e9d706a24c87d6cbee9fabec001fcf8c75d8"
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/pretty-error/-/pretty-error-2.1.1.tgz#5f4f87c8f91e5ae3f3ba87ab4cf5e03b1a17f1a3"
   dependencies:
     renderkid "^2.0.1"
     utila "~0.4"
@@ -5861,13 +5949,17 @@ process@^0.11.0:
   version "0.11.10"
   resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
 
+process@~0.5.1:
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/process/-/process-0.5.2.tgz#1638d8a8e34c2f440a91db95ab9aeb677fc185cf"
+
 progress@^1.1.8:
   version "1.1.8"
   resolved "https://registry.yarnpkg.com/progress/-/progress-1.1.8.tgz#e260c78f6161cdd9b0e56cc3e0a85de17c7a57be"
 
 promise@^7.1.1:
-  version "7.1.1"
-  resolved "https://registry.yarnpkg.com/promise/-/promise-7.1.1.tgz#489654c692616b8aa55b0724fa809bb7db49c5bf"
+  version "7.3.1"
+  resolved "https://registry.yarnpkg.com/promise/-/promise-7.3.1.tgz#064b72602b18f90f29192b8b1bc418ffd1ebd3bf"
   dependencies:
     asap "~2.0.3"
 
@@ -5895,12 +5987,12 @@ protractor@~5.1.0:
     webdriver-js-extender "^1.0.0"
     webdriver-manager "^12.0.1"
 
-proxy-addr@~1.1.3:
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-1.1.4.tgz#27e545f6960a44a627d9b44467e35c1b6b4ce2f3"
+proxy-addr@~1.1.5:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-1.1.5.tgz#71c0ee3b102de3f202f3b64f608d173fcba1a918"
   dependencies:
     forwarded "~0.1.0"
-    ipaddr.js "1.3.0"
+    ipaddr.js "1.4.0"
 
 prr@~0.0.0:
   version "0.0.0"
@@ -5940,6 +6032,10 @@ qs@6.4.0, qs@~6.4.0:
   version "6.4.0"
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.4.0.tgz#13e26d28ad6b0ffaa91312cd3bf708ed351e7233"
 
+qs@6.5.0:
+  version "6.5.0"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.0.tgz#8d04954d364def3efc55b5a0793e1e2c8b1e6e49"
+
 qs@~1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/qs/-/qs-1.1.0.tgz#2845cd9df462b2db28a90370e142d492c5a45dde"
@@ -5979,8 +6075,10 @@ randomatic@^1.1.3:
     kind-of "^3.0.2"
 
 randombytes@^2.0.0, randombytes@^2.0.1:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/randombytes/-/randombytes-2.0.3.tgz#674c99760901c3c4112771a31e521dc349cc09ec"
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/randombytes/-/randombytes-2.0.5.tgz#dc009a246b8d09a177b4b7a0ae77bc570f4b1b79"
+  dependencies:
+    safe-buffer "^5.1.0"
 
 range-parser@^1.0.3, range-parser@^1.2.0, range-parser@~1.2.0:
   version "1.2.0"
@@ -6053,7 +6151,7 @@ readable-stream@1.0, readable-stream@~1.0.2, readable-stream@~1.0.24, readable-s
     isarray "0.0.1"
     string_decoder "~0.10.x"
 
-readable-stream@^2.0.0, readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@^2.0.5, readable-stream@^2.0.6, readable-stream@^2.1.4, readable-stream@^2.2.2, readable-stream@^2.2.6:
+readable-stream@^2.0.0, readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@^2.0.5, readable-stream@^2.0.6, readable-stream@^2.1.4, readable-stream@^2.2.2, readable-stream@^2.2.6, readable-stream@^2.2.9:
   version "2.2.9"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.2.9.tgz#cf78ec6f4a6d1eb43d26488cac97f042e74b7fc8"
   dependencies:
@@ -6448,6 +6546,16 @@ run-async@^2.2.0:
   dependencies:
     is-promise "^2.1.0"
 
+rx-lite-aggregates@^4.0.8:
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/rx-lite-aggregates/-/rx-lite-aggregates-4.0.8.tgz#753b87a89a11c95467c4ac1626c4efc4e05c67be"
+  dependencies:
+    rx-lite "*"
+
+rx-lite@*, rx-lite@^4.0.8:
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/rx-lite/-/rx-lite-4.0.8.tgz#0b1e11af8bc44836f04a6407e92da42467b79444"
+
 rx-lite@^3.1.2:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/rx-lite/-/rx-lite-3.1.2.tgz#19ce502ca572665f3b647b10939f97fd1615f102"
@@ -6456,10 +6564,6 @@ rx@2.3.24:
   version "2.3.24"
   resolved "https://registry.yarnpkg.com/rx/-/rx-2.3.24.tgz#14f950a4217d7e35daa71bbcbe58eff68ea4b2b7"
 
-rx@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/rx/-/rx-4.1.0.tgz#a5f13ff79ef3b740fe30aa803fb09f98805d4782"
-
 rxjs@^5.2.0:
   version "5.4.0"
   resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-5.4.0.tgz#a7db14ab157f9d7aac6a56e655e7a3860d39bf26"
@@ -6467,8 +6571,8 @@ rxjs@^5.2.0:
     symbol-observable "^1.0.1"
 
 rxjs@^5.4.2:
-  version "5.4.2"
-  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-5.4.2.tgz#2a3236fcbf03df57bae06fd6972fd99e5c08fcf7"
+  version "5.4.3"
+  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-5.4.3.tgz#0758cddee6033d68e0fd53676f0f3596ce3d483f"
   dependencies:
     symbol-observable "^1.0.1"
 
@@ -6476,6 +6580,10 @@ safe-buffer@^5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.0.1.tgz#d263ca54696cd8a306b5ca6551e92de57918fbe7"
 
+safe-buffer@^5.1.0:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.1.tgz#893312af69b2123def71f57889001671eeb2c853"
+
 safefs@^3.1.2:
   version "3.2.2"
   resolved "https://registry.yarnpkg.com/safefs/-/safefs-3.2.2.tgz#8170c1444d7038e08caea05a374fae2fa349e15c"
@@ -6490,23 +6598,23 @@ safefs@^4.1.0:
     graceful-fs "^4.1.4"
 
 sass-graph@^2.1.1:
-  version "2.2.3"
-  resolved "https://registry.yarnpkg.com/sass-graph/-/sass-graph-2.2.3.tgz#2ba9f170f6cafed5b51665abe13cf319c9269c31"
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/sass-graph/-/sass-graph-2.2.4.tgz#13fbd63cd1caf0908b9fd93476ad43a51d1e0b49"
   dependencies:
     glob "^7.0.0"
     lodash "^4.0.0"
     scss-tokenizer "^0.2.3"
-    yargs "^6.6.0"
+    yargs "^7.0.0"
 
 sass-loader@^6.0.3:
-  version "6.0.5"
-  resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-6.0.5.tgz#a847910f36442aa56c5985879d54eb519e24a328"
+  version "6.0.6"
+  resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-6.0.6.tgz#e9d5e6c1f155faa32a4b26d7a9b7107c225e40f9"
   dependencies:
     async "^2.1.5"
-    clone-deep "^0.2.4"
+    clone-deep "^0.3.0"
     loader-utils "^1.0.1"
     lodash.tail "^4.1.1"
-    pify "^2.3.0"
+    pify "^3.0.0"
 
 saucelabs@~1.3.0:
   version "1.3.0"
@@ -6577,8 +6685,8 @@ selenium-webdriver@^2.53.2:
     xml2js "0.4.4"
 
 selfsigned@^1.9.1:
-  version "1.9.1"
-  resolved "https://registry.yarnpkg.com/selfsigned/-/selfsigned-1.9.1.tgz#cdda4492d70d486570f87c65546023558e1dfa5a"
+  version "1.10.1"
+  resolved "https://registry.yarnpkg.com/selfsigned/-/selfsigned-1.10.1.tgz#bf8cb7b83256c4551e31347c6311778db99eec52"
   dependencies:
     node-forge "0.6.33"
 
@@ -6606,20 +6714,20 @@ semver@~5.0.1:
   version "5.0.3"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.0.3.tgz#77466de589cd5d3c95f138aa78bc569a3cb5d27a"
 
-send@0.15.1:
-  version "0.15.1"
-  resolved "https://registry.yarnpkg.com/send/-/send-0.15.1.tgz#8a02354c26e6f5cca700065f5f0cdeba90ec7b5f"
+send@0.15.4:
+  version "0.15.4"
+  resolved "https://registry.yarnpkg.com/send/-/send-0.15.4.tgz#985faa3e284b0273c793364a35c6737bd93905b9"
   dependencies:
-    debug "2.6.1"
-    depd "~1.1.0"
+    debug "2.6.8"
+    depd "~1.1.1"
     destroy "~1.0.4"
     encodeurl "~1.0.1"
     escape-html "~1.0.3"
     etag "~1.8.0"
     fresh "0.5.0"
-    http-errors "~1.6.1"
+    http-errors "~1.6.2"
     mime "1.3.4"
-    ms "0.7.2"
+    ms "2.0.0"
     on-finished "~2.3.0"
     range-parser "~1.2.0"
     statuses "~1.3.1"
@@ -6632,25 +6740,25 @@ sentence-case@^2.1.0:
     upper-case-first "^1.1.2"
 
 serve-index@^1.7.2:
-  version "1.8.0"
-  resolved "https://registry.yarnpkg.com/serve-index/-/serve-index-1.8.0.tgz#7c5d96c13fb131101f93c1c5774f8516a1e78d3b"
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/serve-index/-/serve-index-1.9.0.tgz#d2b280fc560d616ee81b48bf0fa82abed2485ce7"
   dependencies:
     accepts "~1.3.3"
-    batch "0.5.3"
-    debug "~2.2.0"
+    batch "0.6.1"
+    debug "2.6.8"
     escape-html "~1.0.3"
-    http-errors "~1.5.0"
-    mime-types "~2.1.11"
+    http-errors "~1.6.1"
+    mime-types "~2.1.15"
     parseurl "~1.3.1"
 
-serve-static@1.12.1:
-  version "1.12.1"
-  resolved "https://registry.yarnpkg.com/serve-static/-/serve-static-1.12.1.tgz#7443a965e3ced647aceb5639fa06bf4d1bbe0039"
+serve-static@1.12.4:
+  version "1.12.4"
+  resolved "https://registry.yarnpkg.com/serve-static/-/serve-static-1.12.4.tgz#9b6aa98eeb7253c4eedc4c1f6fdbca609901a961"
   dependencies:
     encodeurl "~1.0.1"
     escape-html "~1.0.3"
     parseurl "~1.3.1"
-    send "0.15.1"
+    send "0.15.4"
 
 set-blocking@^2.0.0, set-blocking@~2.0.0:
   version "2.0.0"
@@ -6664,10 +6772,6 @@ setimmediate@^1.0.4:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/setimmediate/-/setimmediate-1.0.5.tgz#290cbb232e306942d7d7ea9b83732ab7856f8285"
 
-setprototypeof@1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.0.2.tgz#81a552141ec104b88e89ce383103ad5c66564d08"
-
 setprototypeof@1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.0.3.tgz#66567e37043eeb4f04d91bd658c0cbefb55b8e04"
@@ -6882,25 +6986,28 @@ spdx-license-list@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/spdx-license-list/-/spdx-license-list-2.1.0.tgz#3788ffb5c80b24afbe8283934e9e6684ea6a218d"
 
-spdy-transport@^2.0.15:
-  version "2.0.18"
-  resolved "https://registry.yarnpkg.com/spdy-transport/-/spdy-transport-2.0.18.tgz#43fc9c56be2cccc12bb3e2754aa971154e836ea6"
+spdy-transport@^2.0.18:
+  version "2.0.20"
+  resolved "https://registry.yarnpkg.com/spdy-transport/-/spdy-transport-2.0.20.tgz#735e72054c486b2354fe89e702256004a39ace4d"
   dependencies:
-    debug "^2.2.0"
+    debug "^2.6.8"
+    detect-node "^2.0.3"
     hpack.js "^2.1.6"
-    obuf "^1.1.0"
-    readable-stream "^2.0.1"
-    wbuf "^1.4.0"
+    obuf "^1.1.1"
+    readable-stream "^2.2.9"
+    safe-buffer "^5.0.1"
+    wbuf "^1.7.2"
 
 spdy@^3.4.1:
-  version "3.4.4"
-  resolved "https://registry.yarnpkg.com/spdy/-/spdy-3.4.4.tgz#e0406407ca90ff01b553eb013505442649f5a819"
+  version "3.4.7"
+  resolved "https://registry.yarnpkg.com/spdy/-/spdy-3.4.7.tgz#42ff41ece5cc0f99a3a6c28aabb73f5c3b03acbc"
   dependencies:
-    debug "^2.2.0"
-    handle-thing "^1.2.4"
-    http-deceiver "^1.2.4"
+    debug "^2.6.8"
+    handle-thing "^1.2.5"
+    http-deceiver "^1.2.7"
+    safe-buffer "^5.0.1"
     select-hose "^2.0.0"
-    spdy-transport "^2.0.15"
+    spdy-transport "^2.0.18"
 
 speedline@1.2.0:
   version "1.2.0"
@@ -6961,8 +7068,8 @@ stream-browserify@^2.0.1:
     readable-stream "^2.0.2"
 
 stream-http@^2.3.1:
-  version "2.7.1"
-  resolved "https://registry.yarnpkg.com/stream-http/-/stream-http-2.7.1.tgz#546a51741ad5a6b07e9e31b0b10441a917df528a"
+  version "2.7.2"
+  resolved "https://registry.yarnpkg.com/stream-http/-/stream-http-2.7.2.tgz#40a050ec8dc3b53b33d9909415c02c0bf1abfbad"
   dependencies:
     builtin-status-codes "^3.0.0"
     inherits "^2.0.1"
@@ -6999,6 +7106,13 @@ string-width@^2.0.0:
     is-fullwidth-code-point "^2.0.0"
     strip-ansi "^3.0.0"
 
+string-width@^2.1.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-2.1.1.tgz#ab93f27a8dc13d28cac815c462143a6d9012ae9e"
+  dependencies:
+    is-fullwidth-code-point "^2.0.0"
+    strip-ansi "^4.0.0"
+
 string_decoder@^0.10.25, string_decoder@~0.10.x:
   version "0.10.31"
   resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-0.10.31.tgz#62e203bc41766c6c28c9fc84301dab1c5310fa94"
@@ -7039,6 +7153,12 @@ strip-ansi@^3.0.0, strip-ansi@^3.0.1:
   dependencies:
     ansi-regex "^2.0.0"
 
+strip-ansi@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-4.0.0.tgz#a8479022eb1ac368a871389b635262c505ee368f"
+  dependencies:
+    ansi-regex "^3.0.0"
+
 strip-bom@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-2.0.0.tgz#6219a85616520491f35788bdbf1447a99c7e6b0e"
@@ -7137,7 +7257,7 @@ supports-color@^3.1.1, supports-color@^3.1.2, supports-color@^3.2.3:
   dependencies:
     has-flag "^1.0.0"
 
-supports-color@^4.0.0, supports-color@^4.2.1:
+supports-color@^4.0.0, supports-color@^4.2.0, supports-color@^4.2.1:
   version "4.2.1"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-4.2.1.tgz#65a4bb2631e90e02420dba5554c375a4754bb836"
   dependencies:
@@ -7182,8 +7302,8 @@ table@^3.7.8:
     string-width "^2.0.0"
 
 tapable@^0.2.7:
-  version "0.2.7"
-  resolved "https://registry.yarnpkg.com/tapable/-/tapable-0.2.7.tgz#e46c0daacbb2b8a98b9b0cea0f4052105817ed5c"
+  version "0.2.8"
+  resolved "https://registry.yarnpkg.com/tapable/-/tapable-0.2.8.tgz#99372a5c999bf2df160afc0d74bed4f47948cd22"
 
 tar-pack@^3.4.0:
   version "3.4.0"
@@ -7272,6 +7392,10 @@ thunky@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/thunky/-/thunky-0.1.0.tgz#bf30146824e2b6e67b0f2d7a4ac8beb26908684e"
 
+time-stamp@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/time-stamp/-/time-stamp-2.0.0.tgz#95c6a44530e15ba8d6f4a3ecb8c3a3fac46da357"
+
 timed-out@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/timed-out/-/timed-out-2.0.0.tgz#f38b0ae81d3747d628001f41dafc652ace671c0a"
@@ -7285,9 +7409,10 @@ timed-out@^4.0.0:
   resolved "https://registry.yarnpkg.com/timed-out/-/timed-out-4.0.1.tgz#f32eacac5a175bea25d7fab565ab3ed8741ef56f"
 
 timers-browserify@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/timers-browserify/-/timers-browserify-2.0.2.tgz#ab4883cf597dcd50af211349a00fbca56ac86b86"
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/timers-browserify/-/timers-browserify-2.0.3.tgz#41fd0bdc926a5feedc33a17a8e1f7d491925f7fc"
   dependencies:
+    global "^4.3.2"
     setimmediate "^1.0.4"
 
 title-case@^2.1.0:
@@ -7486,7 +7611,7 @@ type-check@~0.3.2:
   dependencies:
     prelude-ls "~1.1.2"
 
-type-is@~1.6.14, type-is@~1.6.15:
+type-is@~1.6.15:
   version "1.6.15"
   resolved "https://registry.yarnpkg.com/type-is/-/type-is-1.6.15.tgz#cab10fb4909e441c82842eafe1ad646c81804410"
   dependencies:
@@ -7503,15 +7628,22 @@ typedarray@^0.0.6:
   version "0.0.6"
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
 
-typescript@2.3.2, "typescript@>=2.0.0 <2.5.0":
+typescript@2.3.2:
   version "2.3.2"
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-2.3.2.tgz#f0f045e196f69a72f06b25fd3bd39d01c3ce9984"
 
-typescript@^2.3.3, typescript@^2.3.4:
+"typescript@>=2.0.0 <2.5.0", typescript@^2.3.3, typescript@^2.3.4:
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-2.4.1.tgz#c3ccb16ddaa0b2314de031e7e6fee89e5ba346bc"
 
-uglify-js@^2.6, uglify-js@~2.8.22:
+uglify-js@3.0.x, uglify-js@^3.0.15:
+  version "3.0.15"
+  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.0.15.tgz#aacb323a846b234602270dead8a32441a8806f42"
+  dependencies:
+    commander "~2.9.0"
+    source-map "~0.5.1"
+
+uglify-js@^2.6:
   version "2.8.28"
   resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-2.8.28.tgz#e335032df9bb20dcb918f164589d5af47f38834a"
   dependencies:
@@ -7529,13 +7661,6 @@ uglify-js@^2.8.29:
   optionalDependencies:
     uglify-to-browserify "~1.0.0"
 
-uglify-js@^3.0.15:
-  version "3.0.15"
-  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.0.15.tgz#aacb323a846b234602270dead8a32441a8806f42"
-  dependencies:
-    commander "~2.9.0"
-    source-map "~0.5.1"
-
 uglify-js@~2.3:
   version "2.3.6"
   resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-2.3.6.tgz#fa0984770b428b7a9b2a8058f46355d14fef211a"
@@ -7763,8 +7888,8 @@ url-join@^1.0.0:
   resolved "https://registry.yarnpkg.com/url-join/-/url-join-1.1.0.tgz#741c6c2f4596c4830d6718460920d0c92202dc78"
 
 url-loader@^0.5.7:
-  version "0.5.8"
-  resolved "https://registry.yarnpkg.com/url-loader/-/url-loader-0.5.8.tgz#b9183b1801e0f847718673673040bc9dc1c715c5"
+  version "0.5.9"
+  resolved "https://registry.yarnpkg.com/url-loader/-/url-loader-0.5.9.tgz#cc8fea82c7b906e7777019250869e569e995c295"
   dependencies:
     loader-utils "^1.0.2"
     mime "1.3.x"
@@ -7864,7 +7989,7 @@ validate.js@^0.9.0:
   version "0.9.0"
   resolved "https://registry.yarnpkg.com/validate.js/-/validate.js-0.9.0.tgz#8acf0144f1520a19835c6cc663f45e0836aa56c8"
 
-vary@~1.1.0:
+vary@~1.1.0, vary@~1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.1.tgz#67535ebb694c1d52257457984665323f587e8d37"
 
@@ -7913,8 +8038,8 @@ vrsource-tslint-rules@^4.0.1:
     tslint "^4.1.1"
 
 walk-sync@^0.3.1:
-  version "0.3.1"
-  resolved "https://registry.yarnpkg.com/walk-sync/-/walk-sync-0.3.1.tgz#558a16aeac8c0db59c028b73c66f397684ece465"
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/walk-sync/-/walk-sync-0.3.2.tgz#4827280afc42d0e035367c4a4e31eeac0d136f75"
   dependencies:
     ensure-posix-path "^1.0.0"
     matcher-collection "^1.0.0"
@@ -7943,7 +8068,7 @@ watchr@^3.0.1:
     scandirectory "^2.5.0"
     taskgroup "^5.0.1"
 
-wbuf@^1.1.0, wbuf@^1.4.0:
+wbuf@^1.1.0, wbuf@^1.7.2:
   version "1.7.2"
   resolved "https://registry.yarnpkg.com/wbuf/-/wbuf-1.7.2.tgz#d697b99f1f59512df2751be42769c1580b5801fe"
   dependencies:
@@ -7985,13 +8110,14 @@ webidl-conversions@^4.0.0:
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-4.0.1.tgz#8015a17ab83e7e1b311638486ace81da6ce206a0"
 
 webpack-dev-middleware@^1.11.0:
-  version "1.11.0"
-  resolved "https://registry.yarnpkg.com/webpack-dev-middleware/-/webpack-dev-middleware-1.11.0.tgz#09691d0973a30ad1f82ac73a12e2087f0a4754f9"
+  version "1.12.0"
+  resolved "https://registry.yarnpkg.com/webpack-dev-middleware/-/webpack-dev-middleware-1.12.0.tgz#d34efefb2edda7e1d3b5dbe07289513219651709"
   dependencies:
     memory-fs "~0.4.1"
     mime "^1.3.4"
     path-is-absolute "^1.0.0"
     range-parser "^1.0.3"
+    time-stamp "^2.0.0"
 
 webpack-dev-server@~2.5.1:
   version "2.5.1"
@@ -8317,7 +8443,7 @@ yargs@3.32.0, yargs@^3.32.0:
     window-size "^0.1.4"
     y18n "^3.2.0"
 
-yargs@^6.0.0, yargs@^6.6.0:
+yargs@^6.0.0:
   version "6.6.0"
   resolved "https://registry.yarnpkg.com/yargs/-/yargs-6.6.0.tgz#782ec21ef403345f830a808ca3d513af56065208"
   dependencies:
@@ -8335,7 +8461,7 @@ yargs@^6.0.0, yargs@^6.6.0:
     y18n "^3.2.1"
     yargs-parser "^4.2.0"
 
-yargs@^7.0.2:
+yargs@^7.0.0, yargs@^7.0.2:
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/yargs/-/yargs-7.1.0.tgz#6ba318eb16961727f5d284f8ea003e8d6154d0c8"
   dependencies:
@@ -8412,5 +8538,5 @@ zone.js@^0.8.12:
   resolved "https://registry.yarnpkg.com/zone.js/-/zone.js-0.8.12.tgz#86ff5053c98aec291a0bf4bbac501d694a05cfbb"
 
 zone.js@^0.8.14:
-  version "0.8.14"
-  resolved "https://registry.yarnpkg.com/zone.js/-/zone.js-0.8.14.tgz#0c4db24b178232274ccb43f78c99db7f3642b6cf"
+  version "0.8.16"
+  resolved "https://registry.yarnpkg.com/zone.js/-/zone.js-0.8.16.tgz#ac31b6c418f88c0f918ad6acd8a402aca9313abb"

From a93dece069d48fb6886d506ca65cdaebfa4ad3e4 Mon Sep 17 00:00:00 2001
From: Georgios Kalpakas <kalpakas.g@gmail.com>
Date: Fri, 11 Aug 2017 17:47:17 +0300
Subject: [PATCH 26/83] build(aio): upgrade `@angular/*` to 4.3.4

```
$ ls -l dist/*.js

 14942            dist/0.b19e913fbdd6507d346b.chunk.js
  1535            dist/inline.dd77b84267809087d225.bundle.js
542187  (+ 2191)  dist/main.f3ffdb5bb1a5bcec2163.bundle.js
 34314            dist/polyfills.9b05df3b6c9270ebf575.bundle.js
 54001            dist/worker-basic.min.js

646979  (+ 2191)  total
```
---
 aio/package.json |  22 ++++-----
 aio/yarn.lock    | 113 +++++++++++++++++++++--------------------------
 2 files changed, 61 insertions(+), 74 deletions(-)

diff --git a/aio/package.json b/aio/package.json
index ea7fd51771..e10c81e3ad 100644
--- a/aio/package.json
+++ b/aio/package.json
@@ -49,18 +49,18 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^4.3.1",
+    "@angular/animations": "^4.3.4",
     "@angular/cdk": "^2.0.0-beta.8",
-    "@angular/common": "^4.3.1",
-    "@angular/compiler": "^4.3.1",
-    "@angular/core": "^4.3.1",
-    "@angular/forms": "^4.3.1",
-    "@angular/http": "^4.3.1",
+    "@angular/common": "^4.3.4",
+    "@angular/compiler": "^4.3.4",
+    "@angular/core": "^4.3.4",
+    "@angular/forms": "^4.3.4",
+    "@angular/http": "^4.3.4",
     "@angular/material": "^2.0.0-beta.8",
-    "@angular/platform-browser": "^4.3.1",
-    "@angular/platform-browser-dynamic": "^4.3.1",
-    "@angular/platform-server": "^4.3.1",
-    "@angular/router": "^4.3.1",
+    "@angular/platform-browser": "^4.3.4",
+    "@angular/platform-browser-dynamic": "^4.3.4",
+    "@angular/platform-server": "^4.3.4",
+    "@angular/router": "^4.3.4",
     "@angular/service-worker": "^1.0.0-beta.16",
     "classlist.js": "^1.1.20150312",
     "core-js": "^2.4.1",
@@ -73,7 +73,7 @@
   },
   "devDependencies": {
     "@angular/cli": "^1.3.0",
-    "@angular/compiler-cli": "^4.3.1",
+    "@angular/compiler-cli": "^4.3.4",
     "@types/jasmine": "^2.5.52",
     "@types/node": "~6.0.60",
     "archiver": "^1.3.0",
diff --git a/aio/yarn.lock b/aio/yarn.lock
index e3ea5f3d96..99e7dba9e1 100644
--- a/aio/yarn.lock
+++ b/aio/yarn.lock
@@ -10,9 +10,9 @@
     source-map "^0.5.6"
     typescript "^2.3.3"
 
-"@angular/animations@^4.3.1":
-  version "4.3.1"
-  resolved "https://registry.yarnpkg.com/@angular/animations/-/animations-4.3.1.tgz#1f7e0bb803efc21c608246e6765a1c647f3d1a5f"
+"@angular/animations@^4.3.4":
+  version "4.3.4"
+  resolved "https://registry.yarnpkg.com/@angular/animations/-/animations-4.3.4.tgz#02c726b3b70ae3d2e155704c8c60e9baf01547ef"
   dependencies:
     tslib "^1.7.1"
 
@@ -91,41 +91,41 @@
   optionalDependencies:
     node-sass "^4.3.0"
 
-"@angular/common@^4.3.1":
-  version "4.3.1"
-  resolved "https://registry.yarnpkg.com/@angular/common/-/common-4.3.1.tgz#260f487a7cdca326c436bd3ea9515c797de2ff72"
+"@angular/common@^4.3.4":
+  version "4.3.4"
+  resolved "https://registry.yarnpkg.com/@angular/common/-/common-4.3.4.tgz#98fb7d6e8da633ba56844d5c00986ca407aea950"
   dependencies:
     tslib "^1.7.1"
 
-"@angular/compiler-cli@^4.3.1":
-  version "4.3.1"
-  resolved "https://registry.yarnpkg.com/@angular/compiler-cli/-/compiler-cli-4.3.1.tgz#00b41afb6faeb4aef561b8427804ac8880aff63c"
+"@angular/compiler-cli@^4.3.4":
+  version "4.3.4"
+  resolved "https://registry.yarnpkg.com/@angular/compiler-cli/-/compiler-cli-4.3.4.tgz#3d16ec869c39f4aca18cac71dcf118a80f6208e6"
   dependencies:
-    "@angular/tsc-wrapped" "4.3.1"
+    "@angular/tsc-wrapped" "4.3.4"
     minimist "^1.2.0"
     reflect-metadata "^0.1.2"
 
-"@angular/compiler@^4.3.1":
-  version "4.3.1"
-  resolved "https://registry.yarnpkg.com/@angular/compiler/-/compiler-4.3.1.tgz#3a24d49ecf01ac2b6e07f63e378b8ff8e257fe09"
+"@angular/compiler@^4.3.4":
+  version "4.3.4"
+  resolved "https://registry.yarnpkg.com/@angular/compiler/-/compiler-4.3.4.tgz#9b16ae785f22b918aa168db0555c05304baf9d77"
   dependencies:
     tslib "^1.7.1"
 
-"@angular/core@^4.3.1":
-  version "4.3.1"
-  resolved "https://registry.yarnpkg.com/@angular/core/-/core-4.3.1.tgz#a9d0a7d644b96260674269b689a04feea632a8d3"
+"@angular/core@^4.3.4":
+  version "4.3.4"
+  resolved "https://registry.yarnpkg.com/@angular/core/-/core-4.3.4.tgz#42dd8046600f5a080a4e1212116b12fe97bcfcb4"
   dependencies:
     tslib "^1.7.1"
 
-"@angular/forms@^4.3.1":
-  version "4.3.1"
-  resolved "https://registry.yarnpkg.com/@angular/forms/-/forms-4.3.1.tgz#33914da2cb146430ff901471e682c76654622dfe"
+"@angular/forms@^4.3.4":
+  version "4.3.4"
+  resolved "https://registry.yarnpkg.com/@angular/forms/-/forms-4.3.4.tgz#57fa07b7bf9103f1b948fbfe4cfed314092c9e96"
   dependencies:
     tslib "^1.7.1"
 
-"@angular/http@^4.3.1":
-  version "4.3.1"
-  resolved "https://registry.yarnpkg.com/@angular/http/-/http-4.3.1.tgz#e4f661f746711e88ecbea76a3c905babf97d315a"
+"@angular/http@^4.3.4":
+  version "4.3.4"
+  resolved "https://registry.yarnpkg.com/@angular/http/-/http-4.3.4.tgz#762cb7c032059f41dfd0553f574e9ce0d5ecc0a9"
   dependencies:
     tslib "^1.7.1"
 
@@ -135,29 +135,29 @@
   dependencies:
     tslib "^1.7.1"
 
-"@angular/platform-browser-dynamic@^4.3.1":
-  version "4.3.1"
-  resolved "https://registry.yarnpkg.com/@angular/platform-browser-dynamic/-/platform-browser-dynamic-4.3.1.tgz#84034da60a82ef36e7effda7b3ade6e645b330b3"
+"@angular/platform-browser-dynamic@^4.3.4":
+  version "4.3.4"
+  resolved "https://registry.yarnpkg.com/@angular/platform-browser-dynamic/-/platform-browser-dynamic-4.3.4.tgz#bf7b841f2fc8d20efe756fe1e50aa028c95eb57c"
   dependencies:
     tslib "^1.7.1"
 
-"@angular/platform-browser@^4.3.1":
-  version "4.3.1"
-  resolved "https://registry.yarnpkg.com/@angular/platform-browser/-/platform-browser-4.3.1.tgz#db727b06eed64bda5defec71815db26a4da2f690"
+"@angular/platform-browser@^4.3.4":
+  version "4.3.4"
+  resolved "https://registry.yarnpkg.com/@angular/platform-browser/-/platform-browser-4.3.4.tgz#dede8ff31441a2452f202ed798a0822ebc5a9153"
   dependencies:
     tslib "^1.7.1"
 
-"@angular/platform-server@^4.3.1":
-  version "4.3.1"
-  resolved "https://registry.yarnpkg.com/@angular/platform-server/-/platform-server-4.3.1.tgz#3b915fc4013c6a947a8c147b4db0279b025936eb"
+"@angular/platform-server@^4.3.4":
+  version "4.3.4"
+  resolved "https://registry.yarnpkg.com/@angular/platform-server/-/platform-server-4.3.4.tgz#cdffe40d3db11759bca22f32c27913f93bc090f3"
   dependencies:
     parse5 "^3.0.1"
     tslib "^1.7.1"
     xhr2 "^0.1.4"
 
-"@angular/router@^4.3.1":
-  version "4.3.1"
-  resolved "https://registry.yarnpkg.com/@angular/router/-/router-4.3.1.tgz#5219d44526156d816065841127610165a015b450"
+"@angular/router@^4.3.4":
+  version "4.3.4"
+  resolved "https://registry.yarnpkg.com/@angular/router/-/router-4.3.4.tgz#206588fec466f83a2768bd756c5664651091e477"
   dependencies:
     tslib "^1.7.1"
 
@@ -168,9 +168,9 @@
     base64-js "^1.1.2"
     jshashes "^1.0.5"
 
-"@angular/tsc-wrapped@4.3.1":
-  version "4.3.1"
-  resolved "https://registry.yarnpkg.com/@angular/tsc-wrapped/-/tsc-wrapped-4.3.1.tgz#f6616a4d2a3bbec1cded664fd1f526edce99ef41"
+"@angular/tsc-wrapped@4.3.4":
+  version "4.3.4"
+  resolved "https://registry.yarnpkg.com/@angular/tsc-wrapped/-/tsc-wrapped-4.3.4.tgz#86c14cec0ee7f25bb7a7f80270bffe19fe7acd63"
   dependencies:
     tsickle "^0.21.0"
 
@@ -576,13 +576,13 @@ async@^1.3.0, async@^1.4.0, async@^1.5.2:
   version "1.5.2"
   resolved "https://registry.yarnpkg.com/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a"
 
-async@^2.0.0, async@^2.1.4:
+async@^2.0.0:
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/async/-/async-2.4.0.tgz#4990200f18ea5b837c2cc4f8c031a6985c385611"
   dependencies:
     lodash "^4.14.0"
 
-async@^2.1.2, async@^2.1.5, async@^2.4.1:
+async@^2.1.2, async@^2.1.4, async@^2.1.5, async@^2.4.1:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/async/-/async-2.5.0.tgz#843190fd6b7357a0b9e1c956edddd5ec8462b54d"
   dependencies:
@@ -1859,12 +1859,18 @@ date-now@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/date-now/-/date-now-0.1.4.tgz#eaf439fd4d4848ad74e5cc7dbef200672b9e345b"
 
-debug@*, debug@2, debug@2.6.7, debug@^2.1.1, debug@^2.2.0, debug@^2.6.3:
+debug@*, debug@2.6.7, debug@^2.1.1, debug@^2.2.0:
   version "2.6.7"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.7.tgz#92bad1f6d05bbb6bba22cca88bcd0ec894c2861e"
   dependencies:
     ms "2.0.0"
 
+debug@2, debug@2.6.8, debug@^2.6.3, debug@^2.6.8:
+  version "2.6.8"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.8.tgz#e731531ca2ede27d188222427da17821d68ff4fc"
+  dependencies:
+    ms "2.0.0"
+
 debug@2.2.0, debug@~2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.2.0.tgz#f87057e995b1a1f6ae6a4960664137bc56f039da"
@@ -1889,12 +1895,6 @@ debug@2.6.3:
   dependencies:
     ms "0.7.2"
 
-debug@2.6.8, debug@^2.6.8:
-  version "2.6.8"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.8.tgz#e731531ca2ede27d188222427da17821d68ff4fc"
-  dependencies:
-    ms "2.0.0"
-
 decamelize@^1.0.0, decamelize@^1.1.1, decamelize@^1.1.2:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
@@ -4381,13 +4381,7 @@ kind-of@^2.0.1:
   dependencies:
     is-buffer "^1.0.2"
 
-kind-of@^3.0.2:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-3.2.0.tgz#b58abe4d5c044ad33726a8c1525b48cf891bff07"
-  dependencies:
-    is-buffer "^1.1.5"
-
-kind-of@^3.2.2:
+kind-of@^3.0.2, kind-of@^3.2.2:
   version "3.2.2"
   resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-3.2.2.tgz#31ea21a734bab9bbb0f32466d893aea51e4a3c64"
   dependencies:
@@ -7099,14 +7093,7 @@ string-width@^1.0.1, string-width@^1.0.2:
     is-fullwidth-code-point "^1.0.0"
     strip-ansi "^3.0.0"
 
-string-width@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-2.0.0.tgz#635c5436cc72a6e0c387ceca278d4e2eec52687e"
-  dependencies:
-    is-fullwidth-code-point "^2.0.0"
-    strip-ansi "^3.0.0"
-
-string-width@^2.1.0:
+string-width@^2.0.0, string-width@^2.1.0:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-2.1.1.tgz#ab93f27a8dc13d28cac815c462143a6d9012ae9e"
   dependencies:
@@ -7628,11 +7615,11 @@ typedarray@^0.0.6:
   version "0.0.6"
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
 
-typescript@2.3.2:
+typescript@2.3.2, "typescript@>=2.0.0 <2.5.0":
   version "2.3.2"
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-2.3.2.tgz#f0f045e196f69a72f06b25fd3bd39d01c3ce9984"
 
-"typescript@>=2.0.0 <2.5.0", typescript@^2.3.3, typescript@^2.3.4:
+typescript@^2.3.3, typescript@^2.3.4:
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-2.4.1.tgz#c3ccb16ddaa0b2314de031e7e6fee89e5ba346bc"
 

From 96b57bfcc185892b03d2e885716b1d08e1d0dc9f Mon Sep 17 00:00:00 2001
From: Georgios Kalpakas <kalpakas.g@gmail.com>
Date: Fri, 11 Aug 2017 18:11:55 +0300
Subject: [PATCH 27/83] build(aio): upgrade `@angular/*` to 5.0.0-beta.3

```
$ ls -l dist/*.js

 14942            dist/0.b19e913fbdd6507d346b.chunk.js
  1535            dist/inline.7813f9128903f164bc00.bundle.js
523703  (-18484)  dist/main.19fec4390ff7837ee6ef.bundle.js
 34314            dist/polyfills.9b05df3b6c9270ebf575.bundle.js
 54001            dist/worker-basic.min.js

628495  (-18484)  total
```
---
 aio/package.json               | 22 +++++-----
 aio/scripts/_payload-limits.sh |  6 +--
 aio/yarn.lock                  | 74 +++++++++++++++++-----------------
 3 files changed, 51 insertions(+), 51 deletions(-)

diff --git a/aio/package.json b/aio/package.json
index e10c81e3ad..080e4d64cc 100644
--- a/aio/package.json
+++ b/aio/package.json
@@ -49,18 +49,18 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^4.3.4",
+    "@angular/animations": "^5.0.0-beta.3",
     "@angular/cdk": "^2.0.0-beta.8",
-    "@angular/common": "^4.3.4",
-    "@angular/compiler": "^4.3.4",
-    "@angular/core": "^4.3.4",
-    "@angular/forms": "^4.3.4",
-    "@angular/http": "^4.3.4",
+    "@angular/common": "^5.0.0-beta.3",
+    "@angular/compiler": "^5.0.0-beta.3",
+    "@angular/core": "^5.0.0-beta.3",
+    "@angular/forms": "^5.0.0-beta.3",
+    "@angular/http": "^5.0.0-beta.3",
     "@angular/material": "^2.0.0-beta.8",
-    "@angular/platform-browser": "^4.3.4",
-    "@angular/platform-browser-dynamic": "^4.3.4",
-    "@angular/platform-server": "^4.3.4",
-    "@angular/router": "^4.3.4",
+    "@angular/platform-browser": "^5.0.0-beta.3",
+    "@angular/platform-browser-dynamic": "^5.0.0-beta.3",
+    "@angular/platform-server": "^5.0.0-beta.3",
+    "@angular/router": "^5.0.0-beta.3",
     "@angular/service-worker": "^1.0.0-beta.16",
     "classlist.js": "^1.1.20150312",
     "core-js": "^2.4.1",
@@ -73,7 +73,7 @@
   },
   "devDependencies": {
     "@angular/cli": "^1.3.0",
-    "@angular/compiler-cli": "^4.3.4",
+    "@angular/compiler-cli": "^5.0.0-beta.3",
     "@types/jasmine": "^2.5.52",
     "@types/node": "~6.0.60",
     "archiver": "^1.3.0",
diff --git a/aio/scripts/_payload-limits.sh b/aio/scripts/_payload-limits.sh
index 46f5338ba8..14af358b47 100755
--- a/aio/scripts/_payload-limits.sh
+++ b/aio/scripts/_payload-limits.sh
@@ -3,8 +3,8 @@
 set -u -e -o pipefail
 
 declare -A limitUncompressed
-limitUncompressed=(["inline"]=1600 ["main"]=550000 ["polyfills"]=35000)
+limitUncompressed=(["inline"]=1600 ["main"]=525000 ["polyfills"]=35000)
 declare -A limitGzip7
-limitGzip7=(["inline"]=1000 ["main"]=140000 ["polyfills"]=12500)
+limitGzip7=(["inline"]=1000 ["main"]=127000 ["polyfills"]=12500)
 declare -A limitGzip9
-limitGzip9=(["inline"]=1000 ["main"]=140000 ["polyfills"]=12500)
+limitGzip9=(["inline"]=1000 ["main"]=127000 ["polyfills"]=12500)
diff --git a/aio/yarn.lock b/aio/yarn.lock
index 99e7dba9e1..33e3f80e53 100644
--- a/aio/yarn.lock
+++ b/aio/yarn.lock
@@ -10,9 +10,9 @@
     source-map "^0.5.6"
     typescript "^2.3.3"
 
-"@angular/animations@^4.3.4":
-  version "4.3.4"
-  resolved "https://registry.yarnpkg.com/@angular/animations/-/animations-4.3.4.tgz#02c726b3b70ae3d2e155704c8c60e9baf01547ef"
+"@angular/animations@^5.0.0-beta.3":
+  version "5.0.0-beta.3"
+  resolved "https://registry.yarnpkg.com/@angular/animations/-/animations-5.0.0-beta.3.tgz#74709377b94d38a7af04a406a3b68c9ed261da9c"
   dependencies:
     tslib "^1.7.1"
 
@@ -91,41 +91,41 @@
   optionalDependencies:
     node-sass "^4.3.0"
 
-"@angular/common@^4.3.4":
-  version "4.3.4"
-  resolved "https://registry.yarnpkg.com/@angular/common/-/common-4.3.4.tgz#98fb7d6e8da633ba56844d5c00986ca407aea950"
+"@angular/common@^5.0.0-beta.3":
+  version "5.0.0-beta.3"
+  resolved "https://registry.yarnpkg.com/@angular/common/-/common-5.0.0-beta.3.tgz#750b6792b6f8fa7c0343754cada9b1c43eb38678"
   dependencies:
     tslib "^1.7.1"
 
-"@angular/compiler-cli@^4.3.4":
-  version "4.3.4"
-  resolved "https://registry.yarnpkg.com/@angular/compiler-cli/-/compiler-cli-4.3.4.tgz#3d16ec869c39f4aca18cac71dcf118a80f6208e6"
+"@angular/compiler-cli@^5.0.0-beta.3":
+  version "5.0.0-beta.3"
+  resolved "https://registry.yarnpkg.com/@angular/compiler-cli/-/compiler-cli-5.0.0-beta.3.tgz#ea754ad801a19b1f001daab02316672dfd1ee641"
   dependencies:
-    "@angular/tsc-wrapped" "4.3.4"
+    "@angular/tsc-wrapped" "5.0.0-beta.3"
     minimist "^1.2.0"
     reflect-metadata "^0.1.2"
 
-"@angular/compiler@^4.3.4":
-  version "4.3.4"
-  resolved "https://registry.yarnpkg.com/@angular/compiler/-/compiler-4.3.4.tgz#9b16ae785f22b918aa168db0555c05304baf9d77"
+"@angular/compiler@^5.0.0-beta.3":
+  version "5.0.0-beta.3"
+  resolved "https://registry.yarnpkg.com/@angular/compiler/-/compiler-5.0.0-beta.3.tgz#70c59a8b250eb9906334b81c462feab454255616"
   dependencies:
     tslib "^1.7.1"
 
-"@angular/core@^4.3.4":
-  version "4.3.4"
-  resolved "https://registry.yarnpkg.com/@angular/core/-/core-4.3.4.tgz#42dd8046600f5a080a4e1212116b12fe97bcfcb4"
+"@angular/core@^5.0.0-beta.3":
+  version "5.0.0-beta.3"
+  resolved "https://registry.yarnpkg.com/@angular/core/-/core-5.0.0-beta.3.tgz#476cdb178a8e69366f48f60ab19550ff4e923f7b"
   dependencies:
     tslib "^1.7.1"
 
-"@angular/forms@^4.3.4":
-  version "4.3.4"
-  resolved "https://registry.yarnpkg.com/@angular/forms/-/forms-4.3.4.tgz#57fa07b7bf9103f1b948fbfe4cfed314092c9e96"
+"@angular/forms@^5.0.0-beta.3":
+  version "5.0.0-beta.3"
+  resolved "https://registry.yarnpkg.com/@angular/forms/-/forms-5.0.0-beta.3.tgz#db4b896204883823e57bd81709d8a879baaabb78"
   dependencies:
     tslib "^1.7.1"
 
-"@angular/http@^4.3.4":
-  version "4.3.4"
-  resolved "https://registry.yarnpkg.com/@angular/http/-/http-4.3.4.tgz#762cb7c032059f41dfd0553f574e9ce0d5ecc0a9"
+"@angular/http@^5.0.0-beta.3":
+  version "5.0.0-beta.3"
+  resolved "https://registry.yarnpkg.com/@angular/http/-/http-5.0.0-beta.3.tgz#56e3d0ff23ab3f85fa5bc7656fdd3fc1ab0a7ca1"
   dependencies:
     tslib "^1.7.1"
 
@@ -135,29 +135,29 @@
   dependencies:
     tslib "^1.7.1"
 
-"@angular/platform-browser-dynamic@^4.3.4":
-  version "4.3.4"
-  resolved "https://registry.yarnpkg.com/@angular/platform-browser-dynamic/-/platform-browser-dynamic-4.3.4.tgz#bf7b841f2fc8d20efe756fe1e50aa028c95eb57c"
+"@angular/platform-browser-dynamic@^5.0.0-beta.3":
+  version "5.0.0-beta.3"
+  resolved "https://registry.yarnpkg.com/@angular/platform-browser-dynamic/-/platform-browser-dynamic-5.0.0-beta.3.tgz#849cc93875a8e670c186050987d2fbebffe8f9bd"
   dependencies:
     tslib "^1.7.1"
 
-"@angular/platform-browser@^4.3.4":
-  version "4.3.4"
-  resolved "https://registry.yarnpkg.com/@angular/platform-browser/-/platform-browser-4.3.4.tgz#dede8ff31441a2452f202ed798a0822ebc5a9153"
+"@angular/platform-browser@^5.0.0-beta.3":
+  version "5.0.0-beta.3"
+  resolved "https://registry.yarnpkg.com/@angular/platform-browser/-/platform-browser-5.0.0-beta.3.tgz#64c142000fa3a4bbc9975319febf56af2798a8fc"
   dependencies:
     tslib "^1.7.1"
 
-"@angular/platform-server@^4.3.4":
-  version "4.3.4"
-  resolved "https://registry.yarnpkg.com/@angular/platform-server/-/platform-server-4.3.4.tgz#cdffe40d3db11759bca22f32c27913f93bc090f3"
+"@angular/platform-server@^5.0.0-beta.3":
+  version "5.0.0-beta.3"
+  resolved "https://registry.yarnpkg.com/@angular/platform-server/-/platform-server-5.0.0-beta.3.tgz#9492207c78a8f1bf7f38fd48a34fceb10d355e10"
   dependencies:
     parse5 "^3.0.1"
     tslib "^1.7.1"
     xhr2 "^0.1.4"
 
-"@angular/router@^4.3.4":
-  version "4.3.4"
-  resolved "https://registry.yarnpkg.com/@angular/router/-/router-4.3.4.tgz#206588fec466f83a2768bd756c5664651091e477"
+"@angular/router@^5.0.0-beta.3":
+  version "5.0.0-beta.3"
+  resolved "https://registry.yarnpkg.com/@angular/router/-/router-5.0.0-beta.3.tgz#e8d251f99761759b4eb97f66f53e022b230760d9"
   dependencies:
     tslib "^1.7.1"
 
@@ -168,9 +168,9 @@
     base64-js "^1.1.2"
     jshashes "^1.0.5"
 
-"@angular/tsc-wrapped@4.3.4":
-  version "4.3.4"
-  resolved "https://registry.yarnpkg.com/@angular/tsc-wrapped/-/tsc-wrapped-4.3.4.tgz#86c14cec0ee7f25bb7a7f80270bffe19fe7acd63"
+"@angular/tsc-wrapped@^5.0.0-beta.3":
+  version "5.0.0-beta.3"
+  resolved "https://registry.yarnpkg.com/@angular/tsc-wrapped/-/tsc-wrapped-5.0.0-beta.3.tgz#d71c607b02eb6fe7091b908ef2ec97180ec52618"
   dependencies:
     tsickle "^0.21.0"
 

From 3efd4a15d67656f8f686c7c6d27fc36554e80330 Mon Sep 17 00:00:00 2001
From: Georgios Kalpakas <kalpakas.g@gmail.com>
Date: Fri, 11 Aug 2017 18:36:03 +0300
Subject: [PATCH 28/83] build(aio): upgrade `zone.js` to 0.8.16

```
$ ls -l dist/*.js

 14942            dist/0.b19e913fbdd6507d346b.chunk.js
  1535            dist/inline.a1b446562b36eebb766d.bundle.js
523703            dist/main.19fec4390ff7837ee6ef.bundle.js
 37402  (+ 3088)  dist/polyfills.9f7e0e53bce2a6c8326e.bundle.js
 54001            dist/worker-basic.min.js

631583  (+ 3088)  total
```
---
 aio/package.json               | 2 +-
 aio/scripts/_payload-limits.sh | 2 +-
 aio/yarn.lock                  | 6 +-----
 3 files changed, 3 insertions(+), 7 deletions(-)

diff --git a/aio/package.json b/aio/package.json
index 080e4d64cc..28c876991b 100644
--- a/aio/package.json
+++ b/aio/package.json
@@ -69,7 +69,7 @@
     "rxjs": "^5.2.0",
     "tslib": "^1.7.1",
     "web-animations-js": "^2.2.5",
-    "zone.js": "^0.8.12"
+    "zone.js": "^0.8.16"
   },
   "devDependencies": {
     "@angular/cli": "^1.3.0",
diff --git a/aio/scripts/_payload-limits.sh b/aio/scripts/_payload-limits.sh
index 14af358b47..91548db0b7 100755
--- a/aio/scripts/_payload-limits.sh
+++ b/aio/scripts/_payload-limits.sh
@@ -3,7 +3,7 @@
 set -u -e -o pipefail
 
 declare -A limitUncompressed
-limitUncompressed=(["inline"]=1600 ["main"]=525000 ["polyfills"]=35000)
+limitUncompressed=(["inline"]=1600 ["main"]=525000 ["polyfills"]=38000)
 declare -A limitGzip7
 limitGzip7=(["inline"]=1000 ["main"]=127000 ["polyfills"]=12500)
 declare -A limitGzip9
diff --git a/aio/yarn.lock b/aio/yarn.lock
index 33e3f80e53..9f6de42c1f 100644
--- a/aio/yarn.lock
+++ b/aio/yarn.lock
@@ -8520,10 +8520,6 @@ zip-stream@~0.6.0:
     lodash "~3.10.1"
     readable-stream "~1.0.26"
 
-zone.js@^0.8.12:
-  version "0.8.12"
-  resolved "https://registry.yarnpkg.com/zone.js/-/zone.js-0.8.12.tgz#86ff5053c98aec291a0bf4bbac501d694a05cfbb"
-
-zone.js@^0.8.14:
+zone.js@^0.8.14, zone.js@^0.8.16:
   version "0.8.16"
   resolved "https://registry.yarnpkg.com/zone.js/-/zone.js-0.8.16.tgz#ac31b6c418f88c0f918ad6acd8a402aca9313abb"

From 38addacda0466d6ac6464c2f4e2ca939ad0c8a1d Mon Sep 17 00:00:00 2001
From: Georgios Kalpakas <kalpakas.g@gmail.com>
Date: Fri, 11 Aug 2017 20:16:55 +0300
Subject: [PATCH 29/83] build(aio): switch from `@angular/http` to
 `@angular/common/http`

```
$ ls -l dist/*.js

 14942            dist/0.b19e913fbdd6507d346b.chunk.js
  1535            dist/inline.a1b446562b36eebb766d.bundle.js
524385  (+  682)  dist/main.19fec4390ff7837ee6ef.bundle.js
 37402            dist/polyfills.9f7e0e53bce2a6c8326e.bundle.js
 54001            dist/worker-basic.min.js

632265  (+  682)  total
```
---
 aio/src/app/app.component.spec.ts             |  14 +-
 aio/src/app/app.module.ts                     |   4 +-
 .../app/documents/document.service.spec.ts    | 164 +++++++++---------
 aio/src/app/documents/document.service.ts     |  22 ++-
 .../embedded/api/api-list.component.spec.ts   |   4 -
 aio/src/app/embedded/api/api.service.spec.ts  |  60 +++----
 aio/src/app/embedded/api/api.service.ts       |   9 +-
 .../contributor/contributor.service.spec.ts   | 123 +++++++------
 .../contributor/contributor.service.ts        |   8 +-
 .../resource/resource.service.spec.ts         |  38 ++--
 .../app/embedded/resource/resource.service.ts |   7 +-
 .../app/navigation/navigation.service.spec.ts |  64 ++++---
 aio/src/app/navigation/navigation.service.ts  |   7 +-
 .../shared/custom-md-icon-registry.spec.ts    |  10 +-
 aio/src/app/shared/custom-md-icon-registry.ts |  23 ++-
 aio/src/app/shared/scroll-spy.service.spec.ts |   4 -
 aio/src/app/shared/toc.service.spec.ts        |   4 -
 aio/src/test.ts                               |   8 +-
 aio/src/testing/nav-map-json-response.ts      | 102 -----------
 aio/yarn.lock                                 |   2 +-
 20 files changed, 279 insertions(+), 398 deletions(-)
 delete mode 100644 aio/src/testing/nav-map-json-response.ts

diff --git a/aio/src/app/app.component.spec.ts b/aio/src/app/app.component.spec.ts
index 6353be5f80..1765cd85e1 100644
--- a/aio/src/app/app.component.spec.ts
+++ b/aio/src/app/app.component.spec.ts
@@ -2,7 +2,7 @@ import { NO_ERRORS_SCHEMA, DebugElement } from '@angular/core';
 import { async, inject, ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing';
 import { Title } from '@angular/platform-browser';
 import { APP_BASE_HREF } from '@angular/common';
-import { Http } from '@angular/http';
+import { HttpClient } from '@angular/common/http';
 import { MdProgressBar, MdSidenav } from '@angular/material';
 import { By } from '@angular/platform-browser';
 
@@ -650,7 +650,7 @@ describe('AppComponent', () => {
     describe('footer', () => {
       it('should have version number', () => {
         const versionEl: HTMLElement = fixture.debugElement.query(By.css('aio-footer')).nativeElement;
-        expect(versionEl.textContent).toContain(TestHttp.versionInfo.full);
+        expect(versionEl.textContent).toContain(TestHttpClient.versionInfo.full);
       });
     });
 
@@ -1027,7 +1027,7 @@ function createTestingModule(initialUrl: string, mode: string = 'stable') {
     providers: [
       { provide: APP_BASE_HREF, useValue: '/' },
       { provide: GaService, useClass: TestGaService },
-      { provide: Http, useClass: TestHttp },
+      { provide: HttpClient, useClass: TestHttpClient },
       { provide: LocationService, useFactory: () => mockLocationService },
       { provide: Logger, useClass: MockLogger },
       { provide: SearchService, useClass: MockSearchService },
@@ -1049,7 +1049,7 @@ class TestSearchService {
   loadIndex  = jasmine.createSpy('loadIndex');
 }
 
-class TestHttp {
+class TestHttpClient {
 
   static versionInfo = {
     raw: '4.0.0-rc.6',
@@ -1105,9 +1105,9 @@ class TestHttp {
         "tooltip": "Details of the Angular classes and values."
       }
     ],
-    "docVersions": TestHttp.docVersions,
+    "docVersions": TestHttpClient.docVersions,
 
-    "__versionInfo": TestHttp.versionInfo,
+    "__versionInfo": TestHttpClient.versionInfo,
   };
 
   get(url: string) {
@@ -1123,6 +1123,6 @@ class TestHttp {
       const contents = `${h1}<h2 id="#somewhere">Some heading</h2>`;
       data = { id, contents };
     }
-    return of({ json: () => data });
+    return of(data);
   }
 }
diff --git a/aio/src/app/app.module.ts b/aio/src/app/app.module.ts
index ca9545ab5b..2cc2c33aa6 100644
--- a/aio/src/app/app.module.ts
+++ b/aio/src/app/app.module.ts
@@ -1,6 +1,6 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
-import { HttpModule } from '@angular/http';
+import { HttpClientModule } from '@angular/common/http';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 import { Location, LocationStrategy, PathLocationStrategy } from '@angular/common';
@@ -75,7 +75,7 @@ export const svgIconProviders = [
   imports: [
     BrowserModule,
     EmbeddedModule,
-    HttpModule,
+    HttpClientModule,
     BrowserAnimationsModule,
     MdButtonModule,
     MdIconModule,
diff --git a/aio/src/app/documents/document.service.spec.ts b/aio/src/app/documents/document.service.spec.ts
index 7b9a660515..8f7116bcc7 100644
--- a/aio/src/app/documents/document.service.spec.ts
+++ b/aio/src/app/documents/document.service.spec.ts
@@ -1,11 +1,11 @@
-import { ReflectiveInjector } from '@angular/core';
-import { Http, ConnectionBackend, RequestOptions, BaseRequestOptions, Response, ResponseOptions } from '@angular/http';
+import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
+import { Injector } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
 
 import { Observable } from 'rxjs/Observable';
 import { Subscription } from 'rxjs/Subscription';
 import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 
-import { MockBackend } from '@angular/http/testing';
 import { LocationService } from 'app/shared/location.service';
 import { MockLocationService } from 'testing/location.service';
 import { Logger } from 'app/shared/logger.service';
@@ -16,113 +16,123 @@ import { DocumentService, DocumentContents,
 
 const CONTENT_URL_PREFIX = 'generated/docs/';
 
-function createResponse(body: any) {
-  return new Response(new ResponseOptions({ body: JSON.stringify(body) }));
-}
-
-function createInjector(initialUrl: string) {
-  return ReflectiveInjector.resolveAndCreate([
-      DocumentService,
-      { provide: LocationService, useFactory: () => new MockLocationService(initialUrl) },
-      { provide: ConnectionBackend, useClass: MockBackend },
-      { provide: RequestOptions, useClass: BaseRequestOptions },
-      { provide: Logger, useClass: MockLogger },
-      Http,
-  ]);
-}
-
-function getServices(initialUrl: string = '') {
-  const injector = createInjector(initialUrl);
-  return {
-    backend: injector.get(ConnectionBackend) as MockBackend,
-    locationService: injector.get(LocationService) as MockLocationService,
-    docService: injector.get(DocumentService) as DocumentService,
-    logger: injector.get(Logger) as MockLogger
-  };
-}
-
 describe('DocumentService', () => {
 
-  it('should be creatable', () => {
-    const { docService } = getServices();
-    expect(docService).toBeTruthy();
-  });
+  let httpMock: HttpTestingController;
+
+  function createInjector(initialUrl: string) {
+    return TestBed.configureTestingModule({
+      imports: [HttpClientTestingModule],
+      providers: [
+        DocumentService,
+        { provide: LocationService, useFactory: () => new MockLocationService(initialUrl) },
+        { provide: Logger, useClass: MockLogger },
+      ]
+    });
+  }
+
+  function getServices(initialUrl: string = '') {
+    const injector = createInjector(initialUrl);
+    httpMock = injector.get(HttpTestingController) as HttpTestingController;
+    return {
+      locationService: injector.get(LocationService) as MockLocationService,
+      docService: injector.get(DocumentService) as DocumentService,
+      logger: injector.get(Logger) as MockLogger
+    };
+  }
+
+  afterEach(() => httpMock.verify());
 
   describe('currentDocument', () => {
 
     it('should fetch a document for the initial location', () => {
-      const { docService, backend } = getServices('initial/doc');
-      const connections = backend.connectionsArray;
+      const { docService } = getServices('initial/doc');
       docService.currentDocument.subscribe();
 
-      expect(connections.length).toEqual(1);
-      expect(connections[0].request.url).toEqual(CONTENT_URL_PREFIX + 'initial/doc.json');
-      expect(backend.connectionsArray[0].request.url).toEqual(CONTENT_URL_PREFIX + 'initial/doc.json');
+      httpMock.expectOne(CONTENT_URL_PREFIX + 'initial/doc.json');
     });
 
     it('should emit a document each time the location changes', () => {
       let latestDocument: DocumentContents;
       const doc0 = { contents: 'doc 0', id: 'initial/doc' };
-      const doc1 = { contents: 'doc 1', id: 'new/doc'  };
-      const { docService, backend, locationService } = getServices('initial/doc');
-      const connections = backend.connectionsArray;
+      const doc1 = { contents: 'doc 1', id: 'new/doc' };
+      const { docService, locationService } = getServices('initial/doc');
 
       docService.currentDocument.subscribe(doc => latestDocument = doc);
       expect(latestDocument).toBeUndefined();
 
-      connections[0].mockRespond(createResponse(doc0));
+      httpMock.expectOne({}).flush(doc0);
       expect(latestDocument).toEqual(doc0);
 
       locationService.go('new/doc');
-      connections[1].mockRespond(createResponse(doc1));
+      httpMock.expectOne({}).flush(doc1);
       expect(latestDocument).toEqual(doc1);
     });
 
     it('should emit the not-found document if the document is not found on the server', () => {
-      const { docService, backend } = getServices('missing/doc');
-      const connections = backend.connectionsArray;
       let currentDocument: DocumentContents;
+      const notFoundDoc = { id: FILE_NOT_FOUND_ID, contents: '<h1>Page Not Found</h1>' };
+      const { docService } = getServices('missing/doc');
       docService.currentDocument.subscribe(doc => currentDocument = doc);
 
-      connections[0].mockError(new Response(new ResponseOptions({ status: 404, statusText: 'NOT FOUND'})) as any);
-      expect(connections.length).toEqual(2);
-      expect(connections[1].request.url).toEqual(CONTENT_URL_PREFIX + 'file-not-found.json');
-      const fileNotFoundDoc = { id: FILE_NOT_FOUND_ID, contents: '<h1>Page Not Found</h1>' };
-      connections[1].mockRespond(createResponse(fileNotFoundDoc));
-      expect(currentDocument).toEqual(fileNotFoundDoc);
+      // Initial request return 404.
+      httpMock.expectOne({}).flush(null, {status: 404, statusText: 'NOT FOUND'});
+
+      // Subsequent request for not-found document.
+      httpMock.expectOne(CONTENT_URL_PREFIX + 'file-not-found.json').flush(notFoundDoc);
+
+      expect(currentDocument).toEqual(notFoundDoc);
     });
 
     it('should emit a hard-coded not-found document if the not-found document is not found on the server', () => {
       let currentDocument: DocumentContents;
-      const notFoundDoc: DocumentContents = { contents: 'Document not found', id: FILE_NOT_FOUND_ID };
+      const hardCodedNotFoundDoc = { contents: 'Document not found', id: FILE_NOT_FOUND_ID };
       const nextDoc = { contents: 'Next Doc', id: 'new/doc' };
-      const { docService, backend, locationService } = getServices(FILE_NOT_FOUND_ID);
-      const connections = backend.connectionsArray;
+      const { docService, locationService } = getServices(FILE_NOT_FOUND_ID);
+
       docService.currentDocument.subscribe(doc => currentDocument = doc);
 
-      connections[0].mockError(new Response(new ResponseOptions({ status: 404, statusText: 'NOT FOUND'})) as any);
-      expect(connections.length).toEqual(1);
-      expect(currentDocument).toEqual(notFoundDoc);
+      httpMock.expectOne({}).flush(null, { status: 404, statusText: 'NOT FOUND'});
+      expect(currentDocument).toEqual(hardCodedNotFoundDoc);
 
       // now check that we haven't killed the currentDocument observable sequence
       locationService.go('new/doc');
-      connections[1].mockRespond(createResponse(nextDoc));
+      httpMock.expectOne({}).flush(nextDoc);
       expect(currentDocument).toEqual(nextDoc);
     });
 
+    it('should use a hard-coded error doc if the request fails (but not cache it)', () => {
+      let latestDocument: DocumentContents;
+      const doc1 = { contents: 'doc 1' };
+      const doc2 = { contents: 'doc 2' };
+      const { docService, locationService } = getServices('initial/doc');
+
+      docService.currentDocument.subscribe(doc => latestDocument = doc);
+
+      httpMock.expectOne({}).flush(null, {status: 500, statusText: 'Server Error'});
+      expect(latestDocument.id).toEqual(FETCHING_ERROR_ID);
+
+      locationService.go('new/doc');
+      httpMock.expectOne({}).flush(doc1);
+      expect(latestDocument).toEqual(jasmine.objectContaining(doc1));
+
+      locationService.go('initial/doc');
+      httpMock.expectOne({}).flush(doc2);
+      expect(latestDocument).toEqual(jasmine.objectContaining(doc2));
+    });
+
     it('should not crash the app if the response is invalid JSON', () => {
       let latestDocument: DocumentContents;
-      const { docService, backend, locationService} = getServices('initial/doc');
-      const connections = backend.connectionsArray;
+      const doc1 = { contents: 'doc 1' };
+      const { docService, locationService } = getServices('initial/doc');
 
       docService.currentDocument.subscribe(doc => latestDocument = doc);
 
-      connections[0].mockRespond(new Response(new ResponseOptions({ body: 'this is invalid JSON' })));
+      httpMock.expectOne({}).flush('this is invalid JSON');
       expect(latestDocument.id).toEqual(FETCHING_ERROR_ID);
 
-      const doc1 = { contents: 'doc 1' };
       locationService.go('new/doc');
-      connections[1].mockRespond(createResponse(doc1));
+      httpMock.expectOne({}).flush(doc1);
       expect(latestDocument).toEqual(jasmine.objectContaining(doc1));
     });
 
@@ -132,37 +142,30 @@ describe('DocumentService', () => {
 
       const doc0 = { contents: 'doc 0' };
       const doc1 = { contents: 'doc 1' };
-      const { docService, backend, locationService} = getServices('url/0');
-      const connections = backend.connectionsArray;
+      const { docService, locationService } = getServices('url/0');
 
       subscription = docService.currentDocument.subscribe(doc => latestDocument = doc);
-      expect(connections.length).toEqual(1);
-      connections[0].mockRespond(createResponse(doc0));
+      httpMock.expectOne({}).flush(doc0);
       expect(latestDocument).toEqual(jasmine.objectContaining(doc0));
       subscription.unsubscribe();
 
-      // modify the response so we can check that future subscriptions do not trigger another request
-      connections[0].response.next(createResponse({ contents: 'error 0' }));
-
       subscription = docService.currentDocument.subscribe(doc => latestDocument = doc);
       locationService.go('url/1');
-      expect(connections.length).toEqual(2);
-      connections[1].mockRespond(createResponse(doc1));
+      httpMock.expectOne({}).flush(doc1);
       expect(latestDocument).toEqual(jasmine.objectContaining(doc1));
       subscription.unsubscribe();
 
-      // modify the response so we can check that future subscriptions do not trigger another request
-      connections[1].response.next(createResponse({ contents: 'error 1' }));
-
+      // This should not trigger a new request.
       subscription = docService.currentDocument.subscribe(doc => latestDocument = doc);
       locationService.go('url/0');
-      expect(connections.length).toEqual(2);
+      httpMock.expectNone({});
       expect(latestDocument).toEqual(jasmine.objectContaining(doc0));
       subscription.unsubscribe();
 
+      // This should not trigger a new request.
       subscription = docService.currentDocument.subscribe(doc => latestDocument = doc);
       locationService.go('url/1');
-      expect(connections.length).toEqual(2);
+      httpMock.expectNone({});
       expect(latestDocument).toEqual(jasmine.objectContaining(doc1));
       subscription.unsubscribe();
     });
@@ -171,17 +174,18 @@ describe('DocumentService', () => {
   describe('computeMap', () => {
     it('should map the "empty" location to the correct document request', () => {
       let latestDocument: DocumentContents;
-      const { docService, backend } = getServices();
+      const { docService } = getServices();
+
       docService.currentDocument.subscribe(doc => latestDocument = doc);
 
-      expect(backend.connectionsArray[0].request.url).toEqual(CONTENT_URL_PREFIX + 'index.json');
+      httpMock.expectOne(CONTENT_URL_PREFIX + 'index.json');
     });
 
     it('should map the "folder" locations to the correct document request', () => {
-      const { docService, backend, locationService} = getServices('guide');
+      const { docService } = getServices('guide');
       docService.currentDocument.subscribe();
 
-      expect(backend.connectionsArray[0].request.url).toEqual(CONTENT_URL_PREFIX + 'guide.json');
+      httpMock.expectOne(CONTENT_URL_PREFIX + 'guide.json');
     });
   });
 });
diff --git a/aio/src/app/documents/document.service.ts b/aio/src/app/documents/document.service.ts
index c7617465f2..6ef931127f 100644
--- a/aio/src/app/documents/document.service.ts
+++ b/aio/src/app/documents/document.service.ts
@@ -1,11 +1,10 @@
 import { Injectable } from '@angular/core';
-import { Http, Response } from '@angular/http';
+import { HttpClient, HttpErrorResponse } from '@angular/common/http';
 
 import { Observable } from 'rxjs/Observable';
 import { AsyncSubject } from 'rxjs/AsyncSubject';
 import { of } from 'rxjs/observable/of';
 import 'rxjs/add/operator/catch';
-import 'rxjs/add/operator/map';
 import 'rxjs/add/operator/switchMap';
 
 import { DocumentContents } from './document-contents';
@@ -41,7 +40,7 @@ export class DocumentService {
 
   constructor(
     private logger: Logger,
-    private http: Http,
+    private http: HttpClient,
     location: LocationService) {
     // Whenever the URL changes we try to get the appropriate doc
     this.currentDocument = location.currentPath.switchMap(path => this.getDocument(path));
@@ -58,15 +57,22 @@ export class DocumentService {
 
   private fetchDocument(id: string): Observable<DocumentContents> {
     const requestPath = `${DOC_CONTENT_URL_PREFIX}${id}.json`;
+    const subject = new AsyncSubject<DocumentContents>();
+
     this.logger.log('fetching document from', requestPath);
-    const subject = new AsyncSubject();
     this.http
-      .get(requestPath)
-      .map(response => response.json())
-      .catch((error: Response) => {
+      .get<DocumentContents>(requestPath, {responseType: 'json'})
+      .do(data => {
+        if (!data || typeof data !== 'object') {
+          this.logger.log('received invalid data:', data);
+          throw Error('Invalid data');
+        }
+      })
+      .catch((error: HttpErrorResponse) => {
         return error.status === 404 ? this.getFileNotFoundDoc(id) : this.getErrorDoc(id, error);
       })
       .subscribe(subject);
+
     return subject.asObservable();
   }
 
@@ -83,7 +89,7 @@ export class DocumentService {
     }
   }
 
-  private getErrorDoc(id: string, error: Response): Observable<DocumentContents> {
+  private getErrorDoc(id: string, error: HttpErrorResponse): Observable<DocumentContents> {
     this.logger.error('Error fetching document', error);
     this.cache.delete(id);
     return Observable.of({
diff --git a/aio/src/app/embedded/api/api-list.component.spec.ts b/aio/src/app/embedded/api/api-list.component.spec.ts
index 118906a231..c62618c85c 100644
--- a/aio/src/app/embedded/api/api-list.component.spec.ts
+++ b/aio/src/app/embedded/api/api-list.component.spec.ts
@@ -26,10 +26,6 @@ describe('ApiListComponent', () => {
     sections = getApiSections();
   });
 
-  it('should be creatable', () => {
-    expect(component).toBeDefined();
-  });
-
   /**
    * Expectation Utility: Assert that filteredSections has the expected result for this test
    * @param itemTest - return true if the item passes the match test
diff --git a/aio/src/app/embedded/api/api.service.spec.ts b/aio/src/app/embedded/api/api.service.spec.ts
index c7bf9b060c..a8452c5469 100644
--- a/aio/src/app/embedded/api/api.service.spec.ts
+++ b/aio/src/app/embedded/api/api.service.spec.ts
@@ -1,6 +1,6 @@
-import { ReflectiveInjector } from '@angular/core';
-import { Http, ConnectionBackend, RequestOptions, BaseRequestOptions, Response, ResponseOptions } from '@angular/http';
-import { MockBackend, MockConnection } from '@angular/http/testing';
+import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
+import { Injector } from '@angular/core';
+import { TestBed, inject } from '@angular/core/testing';
 
 import { Logger } from 'app/shared/logger.service';
 
@@ -8,35 +8,27 @@ import { ApiService } from './api.service';
 
 describe('ApiService', () => {
 
-  let injector: ReflectiveInjector;
+  let injector: Injector;
   let service: ApiService;
-  let backend: MockBackend;
-
-  function createResponse(body: any) {
-    return new Response(new ResponseOptions({ body: JSON.stringify(body) }));
-  }
+  let httpMock: HttpTestingController;
 
   beforeEach(() => {
-    injector = ReflectiveInjector.resolveAndCreate([
-      ApiService,
-      { provide: ConnectionBackend, useClass: MockBackend },
-      { provide: RequestOptions, useClass: BaseRequestOptions },
-      Http,
-      { provide: Logger, useClass: TestLogger }
-    ]);
-  });
+    injector = TestBed.configureTestingModule({
+      imports: [HttpClientTestingModule],
+      providers: [
+        ApiService,
+        { provide: Logger, useClass: TestLogger }
+      ]
+    });
 
-  beforeEach(() => {
-    backend = injector.get(ConnectionBackend);
     service = injector.get(ApiService);
+    httpMock = injector.get(HttpTestingController);
   });
 
-  it('should be creatable', () => {
-    expect(service).toBeTruthy();
-  });
+  afterEach(() => httpMock.verify());
 
   it('should not immediately connect to the server', () => {
-    expect(backend.connectionsArray.length).toEqual(0);
+    httpMock.expectNone({});
   });
 
   it('subscribers should be completed/unsubscribed when service destroyed', () => {
@@ -50,9 +42,13 @@ describe('ApiService', () => {
 
       service.ngOnDestroy();
       expect(completed).toBe(true);
+
+      // Stop `httpMock.verify()` from complaining.
+      httpMock.expectOne({});
   });
 
   describe('#sections', () => {
+
     it('first subscriber should fetch sections', () => {
       const data = [{name: 'a', title: 'A', items: []}, {name: 'b', title: 'B', items: []}];
 
@@ -60,7 +56,7 @@ describe('ApiService', () => {
         expect(sections).toEqual(data);
       });
 
-      backend.connectionsArray[0].mockRespond(createResponse(data));
+      httpMock.expectOne({}).flush(data);
     });
 
     it('second subscriber should get previous sections and NOT trigger refetch', () => {
@@ -77,27 +73,20 @@ describe('ApiService', () => {
         expect(sections).toEqual(data);
       });
 
-      backend.connectionsArray[0].mockRespond(createResponse(data));
-
-      expect(backend.connectionsArray.length).toBe(1, 'server connections');
-      expect(subscriptions).toBe(2, 'subscriptions');
+      httpMock.expectOne({}).flush(data);
     });
-
   });
 
   describe('#fetchSections', () => {
 
     it('should connect to the server w/ expected URL', () => {
       service.fetchSections();
-      expect(backend.connectionsArray.length).toEqual(1);
-      expect(backend.connectionsArray[0].request.url).toEqual('generated/docs/api/api-list.json');
+      httpMock.expectOne('generated/docs/api/api-list.json');
     });
 
     it('should refresh the #sections observable w/ new content on second call', () => {
 
       let call = 0;
-      let connection: MockConnection;
-      backend.connections.subscribe(c => connection = c);
 
       let data = [{name: 'a', title: 'A', items: []}, {name: 'b', title: 'B', items: []}];
 
@@ -107,12 +96,13 @@ describe('ApiService', () => {
         // (2) after refresh
         expect(sections).toEqual(data, 'call ' + call++);
       });
-      connection.mockRespond(createResponse(data));
+
+      httpMock.expectOne({}).flush(data);
 
       // refresh/refetch
       data = [{name: 'c', title: 'C', items: []}];
       service.fetchSections();
-      connection.mockRespond(createResponse(data));
+      httpMock.expectOne({}).flush(data);
 
       expect(call).toBe(2, 'should be called twice');
     });
diff --git a/aio/src/app/embedded/api/api.service.ts b/aio/src/app/embedded/api/api.service.ts
index 7c708d3265..32ee99baba 100644
--- a/aio/src/app/embedded/api/api.service.ts
+++ b/aio/src/app/embedded/api/api.service.ts
@@ -1,5 +1,5 @@
 import { Injectable, OnDestroy } from '@angular/core';
-import { Http } from '@angular/http';
+import { HttpClient, HttpErrorResponse } from '@angular/common/http';
 
 import { ReplaySubject } from 'rxjs/ReplaySubject';
 import { Subject } from 'rxjs/Subject';
@@ -54,7 +54,7 @@ export class ApiService implements OnDestroy {
     return this._sections;
   };
 
-  constructor(private http: Http, private logger: Logger) { }
+  constructor(private http: HttpClient, private logger: Logger) { }
 
   ngOnDestroy() {
     this.onDestroy.next();
@@ -70,13 +70,12 @@ export class ApiService implements OnDestroy {
   fetchSections(src?: string) {
     // TODO: get URL by configuration?
     const url = this.apiBase + (src || this.apiListJsonDefault);
-    this.http.get(url)
+    this.http.get<ApiSection[]>(url)
       .takeUntil(this.onDestroy)
-      .map(response => response.json())
       .do(() => this.logger.log(`Got API sections from ${url}`))
       .subscribe(
         sections => this.sectionsSubject.next(sections),
-        err => {
+        (err: HttpErrorResponse) => {
           // Todo: handle error
           this.logger.error(err);
           throw err; // rethrow for now.
diff --git a/aio/src/app/embedded/contributor/contributor.service.spec.ts b/aio/src/app/embedded/contributor/contributor.service.spec.ts
index 8911f5d991..02b575a812 100644
--- a/aio/src/app/embedded/contributor/contributor.service.spec.ts
+++ b/aio/src/app/embedded/contributor/contributor.service.spec.ts
@@ -1,39 +1,33 @@
-import { ReflectiveInjector } from '@angular/core';
-import { Http, ConnectionBackend, RequestOptions, BaseRequestOptions, Response, ResponseOptions } from '@angular/http';
-import { MockBackend } from '@angular/http/testing';
+import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
+import { Injector } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
 
 import { ContributorService } from './contributor.service';
 import { Contributor, ContributorGroup } from './contributors.model';
 
 describe('ContributorService', () => {
 
-  let injector: ReflectiveInjector;
-  let backend: MockBackend;
+  let injector: Injector;
   let contribService: ContributorService;
-
-  function createResponse(body: any) {
-    return new Response(new ResponseOptions({ body: JSON.stringify(body) }));
-  }
+  let httpMock: HttpTestingController;
 
   beforeEach(() => {
-    injector = ReflectiveInjector.resolveAndCreate([
-        ContributorService,
-        { provide: ConnectionBackend, useClass: MockBackend },
-        { provide: RequestOptions, useClass: BaseRequestOptions },
-        Http
-    ]);
+    injector = TestBed.configureTestingModule({
+      imports: [HttpClientTestingModule],
+      providers: [
+        ContributorService
+      ]
+    });
 
-    backend = injector.get(ConnectionBackend);
     contribService = injector.get(ContributorService);
+    httpMock = injector.get(HttpTestingController);
   });
 
-  it('should be creatable', () => {
-    expect(contribService).toBeTruthy();
-  });
+  afterEach(() => httpMock.verify());
 
   it('should make a single connection to the server', () => {
-    expect(backend.connectionsArray.length).toEqual(1);
-    expect(backend.connectionsArray[0].request.url).toEqual('generated/contributors.json');
+    const req = httpMock.expectOne({});
+    expect(req.request.url).toBe('generated/contributors.json');
   });
 
   describe('#contributors', () => {
@@ -43,7 +37,7 @@ describe('ContributorService', () => {
 
     beforeEach(() => {
       testData = getTestContribs();
-      backend.connectionsArray[0].mockRespond(createResponse(testData));
+      httpMock.expectOne({}).flush(testData);
       contribService.contributors.subscribe(results => contribs = results);
     });
 
@@ -70,55 +64,54 @@ describe('ContributorService', () => {
 });
 
 function getTestContribs() {
-  // tslint:disable:quotemark
   return {
-    "kapunahelewong": {
-      "name": "Kapunahele Wong",
-      "picture": "kapunahelewong.jpg",
-      "website": " https://github.com/kapunahelewong",
-      "twitter": "kapunahele",
-      "bio": "Kapunahele is a front-end developer and contributor to angular.io",
-      "group": "GDE"
+    kapunahelewong: {
+      name: 'Kapunahele Wong',
+      picture: 'kapunahelewong.jpg',
+      website: 'https://github.com/kapunahelewong',
+      twitter: 'kapunahele',
+      bio: 'Kapunahele is a front-end developer and contributor to angular.io',
+      group: 'GDE'
     },
-    "misko": {
-      "name": "Miško Hevery",
-      "picture": "misko.jpg",
-      "twitter": "mhevery",
-      "website": "http://misko.hevery.com",
-      "bio": "Miško Hevery is the creator of AngularJS framework.",
-      "group": "Angular"
+    misko: {
+      name: 'Miško Hevery',
+      picture: 'misko.jpg',
+      twitter: 'mhevery',
+      website: 'http://misko.hevery.com',
+      bio: 'Miško Hevery is the creator of AngularJS framework.',
+      group: 'Angular'
     },
-    "igor": {
-      "name": "Igor Minar",
-      "picture": "igor-minar.jpg",
-      "twitter": "IgorMinar",
-      "website": "https://google.com/+IgorMinar",
-      "bio": "Igor is a software engineer at Angular.",
-      "group": "Angular"
+    igor: {
+      name: 'Igor Minar',
+      picture: 'igor-minar.jpg',
+      twitter: 'IgorMinar',
+      website: 'https://google.com/+IgorMinar',
+      bio: 'Igor is a software engineer at Angular.',
+      group: 'Angular'
     },
-    "kara": {
-      "name": "Kara Erickson",
-      "picture": "kara-erickson.jpg",
-      "twitter": "karaforthewin",
-      "website": "https://github.com/kara",
-      "bio": "Kara is a software engineer on the Angular team at Angular and a co-organizer of the Angular-SF Meetup. ",
-      "group": "Angular"
+    kara: {
+      name: 'Kara Erickson',
+      picture: 'kara-erickson.jpg',
+      twitter: 'karaforthewin',
+      website: 'https://github.com/kara',
+      bio: 'Kara is a software engineer on the Angular team at Angular and a co-organizer of the Angular-SF Meetup. ',
+      group: 'Angular'
     },
-    "jeffcross": {
-      "name": "Jeff Cross",
-      "picture": "jeff-cross.jpg",
-      "twitter": "jeffbcross",
-      "website": "https://twitter.com/jeffbcross",
-      "bio": "Jeff was one of the earliest core team members on AngularJS.",
-      "group": "GDE"
+    jeffcross: {
+      name: 'Jeff Cross',
+      picture: 'jeff-cross.jpg',
+      twitter: 'jeffbcross',
+      website: 'https://twitter.com/jeffbcross',
+      bio: 'Jeff was one of the earliest core team members on AngularJS.',
+      group: 'GDE'
     },
-    "naomi": {
-      "name": "Naomi Black",
-      "picture": "naomi.jpg",
-      "twitter": "naomitraveller",
-      "website": "http://google.com/+NaomiBlack",
-      "bio": "Naomi is Angular's TPM generalist and jack-of-all-trades.",
-      "group": "Angular"
+    naomi: {
+      name: 'Naomi Black',
+      picture: 'naomi.jpg',
+      twitter: 'naomitraveller',
+      website: 'http://google.com/+NaomiBlack',
+      bio: 'Naomi is Angular\'s TPM generalist and jack-of-all-trades.',
+      group: 'Angular'
     }
  };
 }
diff --git a/aio/src/app/embedded/contributor/contributor.service.ts b/aio/src/app/embedded/contributor/contributor.service.ts
index 08cbb010ab..3ae09b353b 100644
--- a/aio/src/app/embedded/contributor/contributor.service.ts
+++ b/aio/src/app/embedded/contributor/contributor.service.ts
@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { Http } from '@angular/http';
+import { HttpClient } from '@angular/common/http';
 
 import { Observable } from 'rxjs/Observable';
 import 'rxjs/add/operator/map';
@@ -15,14 +15,12 @@ const knownGroups = ['Angular', 'GDE'];
 export class ContributorService {
   contributors: Observable<ContributorGroup[]>;
 
-  constructor(private http: Http) {
+  constructor(private http: HttpClient) {
     this.contributors = this.getContributors();
   }
 
   private getContributors() {
-    const contributors = this.http.get(contributorsPath)
-      .map(res => res.json())
-
+    const contributors = this.http.get<{[key: string]: Contributor}>(contributorsPath)
       // Create group map
       .map(contribs => {
         const contribMap = new Map<string, Contributor[]>();
diff --git a/aio/src/app/embedded/resource/resource.service.spec.ts b/aio/src/app/embedded/resource/resource.service.spec.ts
index 273a8847da..e08e2ace26 100644
--- a/aio/src/app/embedded/resource/resource.service.spec.ts
+++ b/aio/src/app/embedded/resource/resource.service.spec.ts
@@ -1,39 +1,33 @@
-import { ReflectiveInjector } from '@angular/core';
-import { Http, ConnectionBackend, RequestOptions, BaseRequestOptions, Response, ResponseOptions } from '@angular/http';
-import { MockBackend } from '@angular/http/testing';
+import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
+import { Injector } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
 
 import { ResourceService } from './resource.service';
 import { Category, SubCategory, Resource } from './resource.model';
 
 describe('ResourceService', () => {
 
-  let injector: ReflectiveInjector;
-  let backend: MockBackend;
+  let injector: Injector;
   let resourceService: ResourceService;
-
-  function createResponse(body: any) {
-    return new Response(new ResponseOptions({ body: JSON.stringify(body) }));
-  }
+  let httpMock: HttpTestingController;
 
   beforeEach(() => {
-    injector = ReflectiveInjector.resolveAndCreate([
-      ResourceService,
-      { provide: ConnectionBackend, useClass: MockBackend },
-      { provide: RequestOptions, useClass: BaseRequestOptions },
-      Http
-    ]);
+    injector = TestBed.configureTestingModule({
+      imports: [HttpClientTestingModule],
+      providers: [
+        ResourceService
+      ]
+    });
 
-    backend = injector.get(ConnectionBackend);
     resourceService = injector.get(ResourceService);
+    httpMock = injector.get(HttpTestingController);
   });
 
-  it('should be creatable', () => {
-    expect(resourceService).toBeTruthy();
-  });
+  afterEach(() => httpMock.verify());
 
   it('should make a single connection to the server', () => {
-    expect(backend.connectionsArray.length).toEqual(1);
-    expect(backend.connectionsArray[0].request.url).toEqual('generated/resources.json');
+    const req = httpMock.expectOne({});
+    expect(req.request.url).toBe('generated/resources.json');
   });
 
   describe('#categories', () => {
@@ -43,7 +37,7 @@ describe('ResourceService', () => {
 
     beforeEach(() => {
       testData = getTestResources();
-      backend.connectionsArray[0].mockRespond(createResponse(testData));
+      httpMock.expectOne({}).flush(testData);
       resourceService.categories.subscribe(results => categories = results);
     });
 
diff --git a/aio/src/app/embedded/resource/resource.service.ts b/aio/src/app/embedded/resource/resource.service.ts
index 3ce85a1b55..ff64c51e6f 100644
--- a/aio/src/app/embedded/resource/resource.service.ts
+++ b/aio/src/app/embedded/resource/resource.service.ts
@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { Http } from '@angular/http';
+import { HttpClient } from '@angular/common/http';
 
 import { Observable } from 'rxjs/Observable';
 import 'rxjs/add/operator/map';
@@ -14,14 +14,13 @@ const resourcesPath = CONTENT_URL_PREFIX + 'resources.json';
 export class ResourceService {
   categories: Observable<Category[]>;
 
-  constructor(private http: Http) {
+  constructor(private http: HttpClient) {
     this.categories = this.getCategories();
   }
 
   private getCategories(): Observable<Category[]> {
 
-    const categories = this.http.get(resourcesPath)
-      .map(res => res.json())
+    const categories = this.http.get<any>(resourcesPath)
       .map(data => mkCategories(data))
       .publishLast();
 
diff --git a/aio/src/app/navigation/navigation.service.spec.ts b/aio/src/app/navigation/navigation.service.spec.ts
index 09e1d2dcde..9a4e3dc7cd 100644
--- a/aio/src/app/navigation/navigation.service.spec.ts
+++ b/aio/src/app/navigation/navigation.service.spec.ts
@@ -1,44 +1,37 @@
-import { ReflectiveInjector } from '@angular/core';
-import { Http, ConnectionBackend, RequestOptions, BaseRequestOptions, Response, ResponseOptions } from '@angular/http';
-import { MockBackend } from '@angular/http/testing';
+import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
+import { Injector } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+
 import { CurrentNodes, NavigationService, NavigationViews, NavigationNode, VersionInfo } from 'app/navigation/navigation.service';
 import { LocationService } from 'app/shared/location.service';
 import { MockLocationService } from 'testing/location.service';
 
 describe('NavigationService', () => {
 
-  let injector: ReflectiveInjector;
-  let backend: MockBackend;
+  let injector: Injector;
   let navService: NavigationService;
-
-  function createResponse(body: any) {
-    return new Response(new ResponseOptions({ body: JSON.stringify(body) }));
-  }
+  let httpMock: HttpTestingController;
 
   beforeEach(() => {
-    injector = ReflectiveInjector.resolveAndCreate([
+    injector = TestBed.configureTestingModule({
+      imports: [HttpClientTestingModule],
+      providers: [
         NavigationService,
-        { provide: LocationService, useFactory: () => new MockLocationService('a') },
-        { provide: ConnectionBackend, useClass: MockBackend },
-        { provide: RequestOptions, useClass: BaseRequestOptions },
-        Http
-    ]);
-  });
+        { provide: LocationService, useFactory: () => new MockLocationService('a') }
+      ]
+    });
 
-  beforeEach(() => {
-    backend = injector.get(ConnectionBackend);
     navService = injector.get(NavigationService);
+    httpMock = injector.get(HttpTestingController);
   });
 
-  it('should be creatable', () => {
-    expect(navService).toBeTruthy();
-  });
+  afterEach(() => httpMock.verify());
 
   describe('navigationViews', () => {
 
     it('should make a single connection to the server', () => {
-      expect(backend.connectionsArray.length).toEqual(1);
-      expect(backend.connectionsArray[0].request.url).toEqual('generated/navigation.json');
+      const req = httpMock.expectOne({});
+      expect(req.request.url).toBe('generated/navigation.json');
     });
 
     it('should expose the server response', () => {
@@ -46,7 +39,7 @@ describe('NavigationService', () => {
       navService.navigationViews.subscribe(views => viewsEvents.push(views));
 
       expect(viewsEvents).toEqual([]);
-      backend.connectionsArray[0].mockRespond(createResponse({ TopBar: [ { url: 'a' }] }));
+      httpMock.expectOne({}).flush({ TopBar: [ { url: 'a' }] });
       expect(viewsEvents).toEqual([{ TopBar: [ { url: 'a' }] }]);
     });
 
@@ -54,6 +47,9 @@ describe('NavigationService', () => {
       let completed = false;
       navService.navigationViews.subscribe(null, null, () => completed = true);
       expect(true).toBe(true, 'observable completed');
+
+      // Stop `$httpMock.verify()` from complaining.
+      httpMock.expectOne({});
     });
 
     it('should return the same object to all subscribers', () => {
@@ -63,16 +59,16 @@ describe('NavigationService', () => {
       let views2: NavigationViews;
       navService.navigationViews.subscribe(views => views2 = views);
 
-      backend.connectionsArray[0].mockRespond(createResponse({ TopBar: [{ url: 'a' }] }));
-
-      // modify the response so we can check that future subscriptions do not trigger another request
-      backend.connectionsArray[0].response.next(createResponse({ TopBar: [{ url: 'error 1' }] }));
+      httpMock.expectOne({}).flush({ TopBar: [{ url: 'a' }] });
 
       let views3: NavigationViews;
       navService.navigationViews.subscribe(views => views3 = views);
 
       expect(views2).toBe(views1);
       expect(views3).toBe(views1);
+
+      // Verfy that subsequent subscriptions did not trigger another request.
+      httpMock.expectNone({});
     });
 
     it('should do WHAT(?) if the request fails');
@@ -90,7 +86,7 @@ describe('NavigationService', () => {
 
     beforeEach(() => {
       navService.navigationViews.subscribe(views => view = views['sideNav']);
-      backend.connectionsArray[0].mockRespond(createResponse({sideNav}));
+      httpMock.expectOne({}).flush({sideNav});
     });
 
     it('should have the supplied tooltip', () => {
@@ -135,9 +131,9 @@ describe('NavigationService', () => {
     };
 
     beforeEach(() => {
-      locationService = injector.get(LocationService);
+      locationService = injector.get(LocationService) as any as MockLocationService;
       navService.currentNodes.subscribe(selected => currentNodes = selected);
-      backend.connectionsArray[0].mockRespond(createResponse(navJson));
+      httpMock.expectOne({}).flush(navJson);
     });
 
     it('should list the side navigation node that matches the current location, and all its ancestors', () => {
@@ -231,9 +227,9 @@ describe('NavigationService', () => {
 
     beforeEach(() => {
       navService.versionInfo.subscribe(info => versionInfo = info);
-      backend.connectionsArray[0].mockRespond(createResponse({
+      httpMock.expectOne({}).flush({
         __versionInfo: expectedVersionInfo
-      }));
+      });
     });
 
     it('should extract the version info', () => {
@@ -261,7 +257,7 @@ describe('NavigationService', () => {
     });
 
     it('should extract the docVersions', () => {
-      backend.connectionsArray[0].mockRespond(createResponse({ docVersions }));
+      httpMock.expectOne({}).flush({ docVersions });
       expect(actualDocVersions).toEqual(expectedDocVersions);
     });
   });
diff --git a/aio/src/app/navigation/navigation.service.ts b/aio/src/app/navigation/navigation.service.ts
index 3c665f4ef2..eddcbca91c 100644
--- a/aio/src/app/navigation/navigation.service.ts
+++ b/aio/src/app/navigation/navigation.service.ts
@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { Http } from '@angular/http';
+import { HttpClient } from '@angular/common/http';
 
 import { Observable } from 'rxjs/Observable';
 import { AsyncSubject } from 'rxjs/AsyncSubject';
@@ -36,7 +36,7 @@ export class NavigationService {
    */
   currentNodes: Observable<CurrentNodes>;
 
-  constructor(private http: Http, private location: LocationService) {
+  constructor(private http: HttpClient, private location: LocationService) {
     const navigationInfo = this.fetchNavigationInfo();
     this.navigationViews = this.getNavigationViews(navigationInfo);
 
@@ -57,8 +57,7 @@ export class NavigationService {
    * We are not storing the subscription from connecting as we do not expect this service to be destroyed.
    */
   private fetchNavigationInfo(): Observable<NavigationResponse> {
-    const navigationInfo = this.http.get(navigationPath)
-      .map(res => res.json() as NavigationResponse)
+    const navigationInfo = this.http.get<NavigationResponse>(navigationPath)
       .publishLast();
     navigationInfo.connect();
     return navigationInfo;
diff --git a/aio/src/app/shared/custom-md-icon-registry.spec.ts b/aio/src/app/shared/custom-md-icon-registry.spec.ts
index d7a1db03b0..30480555bd 100644
--- a/aio/src/app/shared/custom-md-icon-registry.spec.ts
+++ b/aio/src/app/shared/custom-md-icon-registry.spec.ts
@@ -12,7 +12,7 @@ describe('CustomMdIconRegistry', () => {
     ];
     const registry = new CustomMdIconRegistry(mockHttp, mockSanitizer, svgIcons);
     let svgElement: SVGElement;
-    registry.getNamedSvgIcon('test_icon', null).subscribe(el => svgElement = el as SVGElement);
+    registry.getNamedSvgIcon('test_icon').subscribe(el => svgElement = el);
     expect(svgElement).toEqual(createSvg(svgSrc));
   });
 
@@ -27,8 +27,12 @@ describe('CustomMdIconRegistry', () => {
     spyOn(MdIconRegistry.prototype, 'getNamedSvgIcon');
 
     const registry = new CustomMdIconRegistry(mockHttp, mockSanitizer, svgIcons);
-    registry.getNamedSvgIcon('other_icon', null);
-    expect(MdIconRegistry.prototype.getNamedSvgIcon).toHaveBeenCalledWith('other_icon', null);
+
+    registry.getNamedSvgIcon('other_icon');
+    expect(MdIconRegistry.prototype.getNamedSvgIcon).toHaveBeenCalledWith('other_icon', undefined);
+
+    registry.getNamedSvgIcon('other_icon', 'foo');
+    expect(MdIconRegistry.prototype.getNamedSvgIcon).toHaveBeenCalledWith('other_icon', 'foo');
   });
 });
 
diff --git a/aio/src/app/shared/custom-md-icon-registry.ts b/aio/src/app/shared/custom-md-icon-registry.ts
index 77b05d9169..e2a901d464 100644
--- a/aio/src/app/shared/custom-md-icon-registry.ts
+++ b/aio/src/app/shared/custom-md-icon-registry.ts
@@ -1,7 +1,7 @@
 import { InjectionToken, Inject, Injectable } from '@angular/core';
 import { of } from 'rxjs/observable/of';
 import { MdIconRegistry } from '@angular/material';
-import { Http } from '@angular/http';
+import { HttpClient } from '@angular/common/http';
 import { DomSanitizer } from '@angular/platform-browser';
 
 /**
@@ -27,6 +27,19 @@ interface SvgIconMap {
   [iconName: string]: SVGElement;
 }
 
+// <hack-alert>
+// @angular/material's `MdIconRegitry` currently (v2.0.0-beta.8) requires an instance of `Http`
+// (from @angular/http). It is only used to [get some text content][1], so we can create a wrapper
+// around `HttpClient` and pretend it is `Http`.
+// [1]: https://github.com/angular/material2/blob/2.0.0-beta.8/src/lib/icon/icon-registry.ts#L465-L466
+// </hack-alert>
+function createFakeHttp(http: HttpClient): any {
+  return {
+    get: (url: string) => http.get(url, {responseType: 'text'})
+      .map(data => ({text: () => data}))
+  };
+}
+
 /**
  * A custom replacement for Angular Material's `MdIconRegistry`, which allows
  * us to provide preloaded icon SVG sources.
@@ -35,14 +48,14 @@ interface SvgIconMap {
 export class CustomMdIconRegistry extends MdIconRegistry {
   private preloadedSvgElements: SvgIconMap = {};
 
-  constructor(http: Http, sanitizer: DomSanitizer, @Inject(SVG_ICONS) svgIcons: SvgIconInfo[]) {
-    super(http, sanitizer);
+  constructor(http: HttpClient, sanitizer: DomSanitizer, @Inject(SVG_ICONS) svgIcons: SvgIconInfo[]) {
+    super(createFakeHttp(http), sanitizer);
     this.loadSvgElements(svgIcons);
   }
 
-  getNamedSvgIcon(iconName, namespace) {
+  getNamedSvgIcon(iconName: string, namespace?: string) {
     if (this.preloadedSvgElements[iconName]) {
-      return of(this.preloadedSvgElements[iconName].cloneNode(true));
+      return of(this.preloadedSvgElements[iconName].cloneNode(true) as SVGElement);
     }
     return super.getNamedSvgIcon(iconName, namespace);
   }
diff --git a/aio/src/app/shared/scroll-spy.service.spec.ts b/aio/src/app/shared/scroll-spy.service.spec.ts
index 7c7702fa3f..c08f0d0e52 100644
--- a/aio/src/app/shared/scroll-spy.service.spec.ts
+++ b/aio/src/app/shared/scroll-spy.service.spec.ts
@@ -160,10 +160,6 @@ describe('ScrollSpyService', () => {
   });
 
 
-  it('should be creatable', () => {
-    expect(scrollSpyService).toBeTruthy();
-  });
-
   describe('#spyOn()', () => {
     let getSpiedElemGroups: () => ScrollSpiedElementGroup[];
 
diff --git a/aio/src/app/shared/toc.service.spec.ts b/aio/src/app/shared/toc.service.spec.ts
index a40385f4e1..85ca45480b 100644
--- a/aio/src/app/shared/toc.service.spec.ts
+++ b/aio/src/app/shared/toc.service.spec.ts
@@ -31,10 +31,6 @@ describe('TocService', () => {
     tocService.tocList.subscribe(tocList => lastTocList = tocList);
   });
 
-  it('should be creatable', () => {
-    expect(tocService).toBeTruthy();
-  });
-
   describe('tocList', () => {
     it('should emit the latest value to new subscribers', () => {
       const expectedValue1 = tocItem('Heading A');
diff --git a/aio/src/test.ts b/aio/src/test.ts
index 722acc0395..949eddf8d7 100644
--- a/aio/src/test.ts
+++ b/aio/src/test.ts
@@ -14,19 +14,19 @@ import {
 } from '@angular/platform-browser-dynamic/testing';
 
 // List vendors here to increase test rebuild performance.
+import '@angular/animations';
 import '@angular/common';
 import '@angular/common/testing';
+import '@angular/common/http';
+import '@angular/common/http/testing';
 import '@angular/core/';
 import '@angular/core/testing';
+import '@angular/material';
 import '@angular/platform-browser';
 import '@angular/platform-browser/testing';
 import '@angular/platform-browser/animations';
 import '@angular/platform-browser-dynamic';
 import '@angular/platform-browser-dynamic/testing';
-import '@angular/http';
-import '@angular/http/testing';
-import '@angular/animations';
-import '@angular/material';
 import '@angular/service-worker';
 import 'rxjs'; // tslint:disable-line
 
diff --git a/aio/src/testing/nav-map-json-response.ts b/aio/src/testing/nav-map-json-response.ts
deleted file mode 100644
index a55acb6b50..0000000000
--- a/aio/src/testing/nav-map-json-response.ts
+++ /dev/null
@@ -1,102 +0,0 @@
-import { Response } from '@angular/http';
-
-// tslint:disable:quotemark
-export function getTestNavMapResponse(): Response {
-
-  const navMapJson = { "nodes": [
-    {
-      "docId": "guide/quickstart",
-      "navTitle": "Quickstart",
-      "tooltip": "A quick look at an Angular app."
-    },
-
-    {
-      "docId": "guide/cli-quickstart",
-      "navTitle": "CLI Quickstart",
-      "tooltip": "A quick look at an Angular app built with the Angular CLI.",
-      "hide": true  // <----- SHOULD BE FILTERED OUT
-    },
-
-    {
-      "navTitle": "Tutorial",
-      "children": [
-        {
-          "docId": " tutorial/",
-          "navTitle": "Introduction",
-          "tooltip": "Introduction to the Tour of Heroes tutorial"
-        },
-        {
-          "docId": "tutorial/toh-pt1",
-          "navTitle": "The Hero Editor",
-          "tooltip": "Build a simple hero editor."
-        }
-      ]
-    },
-
-    {
-      "navTitle": "Getting started",
-      "tooltip": "A gentle introduction to Angular",
-      "children": [
-        {
-          "docId": "guide/docs-overview",
-          "navTitle": "Overview",
-          "tooltip": "How to read and use this documentation."
-        },
-        {
-          "docId": "guide/setup",
-          "navTitle": "Setup",
-          "tooltip": "Install the Angular QuickStart seed for faster, more efficient development on your machine."
-        }
-      ]
-    },
-
-    {
-      "navTitle": "Core",
-      "tooltip": "Learn the core capabilities of Angular",
-      "children": [
-        {
-          "docId": "guide/NgModule",
-          "navTitle": "Angular Modules (NgModule)",
-          "tooltip": "Define application modules with @NgModule."
-        },
-        {
-          "docId": "guide/directives",
-          "navTitle": "Directives",
-          "tooltip": "Learn how directives modify the layout and behavior of elements.",
-          "children": [
-            {
-              "docId": "guide/attribute-directives",
-              "navTitle": "Attribute directives",
-              "tooltip": "Attribute directives attach behavior to elements."
-            },
-            {
-              "docId": "guide/structural-directives",
-              "navTitle": "Structural directives",
-              "tooltip": "Structural directives manipulate the layout of the page."
-            }
-          ]
-        }
-      ]
-    },
-    {
-      "navTitle": "Empty Heading",
-      "children": [ ]
-    },
-    {
-      "navTitle": "External",
-      "children": [
-        {
-          "url": "https://gitter.im/angular/angular",
-          "navTitle": "Gitter",
-          "tooltip": "Chat about Angular with other birds of a feather"
-        }
-      ]
-    }
-  ]};
-
-  // tslint:enable:quotemark
-  return {
-    status: 200,
-    json: () => navMapJson
-  } as Response;
-}
diff --git a/aio/yarn.lock b/aio/yarn.lock
index 9f6de42c1f..6efafbcf82 100644
--- a/aio/yarn.lock
+++ b/aio/yarn.lock
@@ -168,7 +168,7 @@
     base64-js "^1.1.2"
     jshashes "^1.0.5"
 
-"@angular/tsc-wrapped@^5.0.0-beta.3":
+"@angular/tsc-wrapped@5.0.0-beta.3":
   version "5.0.0-beta.3"
   resolved "https://registry.yarnpkg.com/@angular/tsc-wrapped/-/tsc-wrapped-5.0.0-beta.3.tgz#d71c607b02eb6fe7091b908ef2ec97180ec52618"
   dependencies:

From cce2ab26259e4a31bdcf45e7f3c318f0c8013239 Mon Sep 17 00:00:00 2001
From: Victor Berchet <victor@suumit.com>
Date: Thu, 10 Aug 2017 09:39:40 -0700
Subject: [PATCH 30/83] docs: add changelog for 4.3.4

---
 CHANGELOG.md | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c633364927..9087d05eba 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,15 @@
+<a name="4.3.4"></a>
+## [4.3.4](https://github.com/angular/angular/compare/4.3.3...4.3.4) (2017-08-10)
+
+### Bug Fixes
+
+* **animations:** revert container/queried animations accordingly during cancel ([#18516](https://github.com/angular/angular/issues/18516)) ([5a165eb](https://github.com/angular/angular/commit/5a165eb))
+* **animations:** support persisting dynamic styles within animation states ([#18468](https://github.com/angular/angular/issues/18468)) ([e0660b1](https://github.com/angular/angular/commit/e0660b1)), closes [#18423](https://github.com/angular/angular/issues/18423) [#17505](https://github.com/angular/angular/issues/17505)
+* **benchpress:** compile cleanly with TS 2.4 ([#18455](https://github.com/angular/angular/issues/18455)) ([5afc7ab](https://github.com/angular/angular/commit/5afc7ab))
+* **compiler:** cleanly compile with TypeScript 2.4 ([#18456](https://github.com/angular/angular/issues/18456)) ([5e4054b](https://github.com/angular/angular/commit/5e4054b))
+* **compiler:** ignore [@import](https://github.com/import) in multi-line css ([#18452](https://github.com/angular/angular/issues/18452)) ([e7e7622](https://github.com/angular/angular/commit/e7e7622)), closes [#18038](https://github.com/angular/angular/issues/18038)
+
+
 <a name="5.0.0-beta.3"></a>
 # [5.0.0-beta.3](https://github.com/angular/angular/compare/5.0.0-beta.2...5.0.0-beta.3) (2017-08-09)
 
@@ -81,17 +93,14 @@ DEPRECATION:
 * **router:** add events tracking activation of individual routes ([49cd851](https://github.com/angular/angular/commit/49cd851))
 
 
-
 <a name="4.3.3"></a>
 ## [4.3.3](https://github.com/angular/angular/compare/4.3.2...4.3.3) (2017-08-02)
 
-
 ### Bug Fixes
 
 * **compiler:** fix for element needing implicit parent placed in top-level ng-container ([f5cbc2e](https://github.com/angular/angular/commit/f5cbc2e)), closes [#18314](https://github.com/angular/angular/issues/18314)
 
 
-
 <a name="5.0.0-beta.1"></a>
 # [5.0.0-beta.1](https://github.com/angular/angular/compare/5.0.0-beta.0...5.0.0-beta.1) (2017-07-27)
 

From 1cfa79ca4e21788e0323baf544704ee7ef7d63ea Mon Sep 17 00:00:00 2001
From: Kara Erickson <karakara@google.com>
Date: Mon, 7 Aug 2017 21:11:46 -0700
Subject: [PATCH 31/83] feat(forms): add updateOn support to ngModelOptions

This commit introduces a new option to template-driven forms that
improves performance by delaying form control updates until the
"blur" or "submit" event.  To use it, set the `updateOn` property
in `ngModelOptions`.

```html
<input ngModel [ngModelOptions]="{updateOn: blur}">
```

Like in AngularJS, setting `updateOn` to `blur` or `submit` will
delay the update of the value as well as the validation status.
Updating value and validity together keeps the system easy to reason
about, as the two will always be in sync.  It's also worth noting
that the value/validation pipeline does still run when the form is
initialized (in order to support initial values).

Upcoming PRs will address:

* Support for setting group-level `updateOn` in template-driven forms
* Option for skipping initial validation run or more global error
display configuration
* Better support of reactive validation strategies

See more context in #18408, #18514, and the [design doc](https://docs.google.com/document/d/1dlJjRXYeuHRygryK0XoFrZNqW86jH4wobftCFyYa1PA/edit#heading=h.r6gn0i8f19wz).
---
 packages/forms/src/directives/ng_form.ts      |   6 +-
 packages/forms/src/directives/ng_model.ts     |  49 +-
 .../form_group_directive.ts                   |  22 +-
 packages/forms/src/directives/shared.ts       |  15 +
 .../forms/test/reactive_integration_spec.ts   |  16 +
 .../forms/test/template_integration_spec.ts   | 493 +++++++++++++++++-
 tools/public_api_guard/forms/forms.d.ts       |   1 +
 7 files changed, 578 insertions(+), 24 deletions(-)

diff --git a/packages/forms/src/directives/ng_form.ts b/packages/forms/src/directives/ng_form.ts
index 6f69007d69..6841cc389d 100644
--- a/packages/forms/src/directives/ng_form.ts
+++ b/packages/forms/src/directives/ng_form.ts
@@ -16,7 +16,7 @@ import {Form} from './form_interface';
 import {NgControl} from './ng_control';
 import {NgModel} from './ng_model';
 import {NgModelGroup} from './ng_model_group';
-import {composeAsyncValidators, composeValidators, setUpControl, setUpFormContainer} from './shared';
+import {composeAsyncValidators, composeValidators, removeDir, setUpControl, setUpFormContainer, syncPendingControls} from './shared';
 
 export const formDirectiveProvider: any = {
   provide: ControlContainer,
@@ -65,6 +65,7 @@ const resolvedPromise = Promise.resolve(null);
 })
 export class NgForm extends ControlContainer implements Form {
   private _submitted: boolean = false;
+  private _directives: NgModel[] = [];
 
   form: FormGroup;
   ngSubmit = new EventEmitter();
@@ -93,6 +94,7 @@ export class NgForm extends ControlContainer implements Form {
       dir._control = <FormControl>container.registerControl(dir.name, dir.control);
       setUpControl(dir.control, dir);
       dir.control.updateValueAndValidity({emitEvent: false});
+      this._directives.push(dir);
     });
   }
 
@@ -104,6 +106,7 @@ export class NgForm extends ControlContainer implements Form {
       if (container) {
         container.removeControl(dir.name);
       }
+      removeDir<NgModel>(this._directives, dir);
     });
   }
 
@@ -139,6 +142,7 @@ export class NgForm extends ControlContainer implements Form {
 
   onSubmit($event: Event): boolean {
     this._submitted = true;
+    syncPendingControls(this.form, this._directives);
     this.ngSubmit.emit($event);
     return false;
   }
diff --git a/packages/forms/src/directives/ng_model.ts b/packages/forms/src/directives/ng_model.ts
index 83552d916f..82764121b8 100644
--- a/packages/forms/src/directives/ng_model.ts
+++ b/packages/forms/src/directives/ng_model.ts
@@ -8,7 +8,7 @@
 
 import {Directive, EventEmitter, Host, Inject, Input, OnChanges, OnDestroy, Optional, Output, Self, SimpleChanges, forwardRef} from '@angular/core';
 
-import {FormControl} from '../model';
+import {FormControl, FormHooks} from '../model';
 import {NG_ASYNC_VALIDATORS, NG_VALIDATORS} from '../validators';
 
 import {AbstractFormGroupDirective} from './abstract_form_group_directive';
@@ -119,7 +119,45 @@ export class NgModel extends NgControl implements OnChanges,
   @Input() name: string;
   @Input('disabled') isDisabled: boolean;
   @Input('ngModel') model: any;
-  @Input('ngModelOptions') options: {name?: string, standalone?: boolean};
+
+  /**
+   * Options object for this `ngModel` instance. You can configure the following properties:
+   *
+   * **name**: An alternative to setting the name attribute on the form control element.
+   * Sometimes, especially with custom form components, the name attribute might be used
+   * as an `@Input` property for a different purpose. In cases like these, you can configure
+   * the `ngModel` name through this option.
+   *
+   * ```html
+   * <form>
+   *   <my-person-control name="Nancy" ngModel [ngModelOptions]="{name: 'user'}">
+   *   </my-person-control>
+   * </form>
+   * <!-- form value: {user: ''} -->
+   * ```
+   *
+   * **standalone**: Defaults to false. If this is set to true, the `ngModel` will not
+   * register itself with its parent form, and will act as if it's not in the form. This
+   * can be handy if you have form meta-controls, a.k.a. form elements nested in
+   * the `<form>` tag that control the display of the form, but don't contain form data.
+   *
+   * ```html
+   * <form>
+   *   <input name="login" ngModel placeholder="Login">
+   *   <input type="checkbox" ngModel [ngModelOptions]="{standalone: true}"> Show more options?
+   * </form>
+   * <!-- form value: {login: ''} -->
+   * ```
+   *
+   * **updateOn**: Defaults to `'change'`. Defines the event upon which the form control
+   * value and validity will update. Also accepts `'blur'` and `'submit'`.
+   *
+   * ```html
+   * <input [(ngModel)]="firstName" [ngModelOptions]="{updateOn: 'blur'}">
+   * ```
+   *
+   */
+  @Input('ngModelOptions') options: {name?: string, standalone?: boolean, updateOn?: FormHooks};
 
   @Output('ngModelChange') update = new EventEmitter();
 
@@ -170,11 +208,18 @@ export class NgModel extends NgControl implements OnChanges,
               }
 
               private _setUpControl(): void {
+                this._setUpdateStrategy();
                 this._isStandalone() ? this._setUpStandalone() :
                                        this.formDirective.addControl(this);
                 this._registered = true;
               }
 
+              private _setUpdateStrategy(): void {
+                if (this.options && this.options.updateOn != null) {
+                  this._control._updateOn = this.options.updateOn;
+                }
+              }
+
               private _isStandalone(): boolean {
                 return !this._parent || !!(this.options && this.options.standalone);
               }
diff --git a/packages/forms/src/directives/reactive_directives/form_group_directive.ts b/packages/forms/src/directives/reactive_directives/form_group_directive.ts
index 8598d083ae..4162cbef8d 100644
--- a/packages/forms/src/directives/reactive_directives/form_group_directive.ts
+++ b/packages/forms/src/directives/reactive_directives/form_group_directive.ts
@@ -12,7 +12,7 @@ import {NG_ASYNC_VALIDATORS, NG_VALIDATORS, Validators} from '../../validators';
 import {ControlContainer} from '../control_container';
 import {Form} from '../form_interface';
 import {ReactiveErrors} from '../reactive_errors';
-import {cleanUpControl, composeAsyncValidators, composeValidators, setUpControl, setUpFormContainer} from '../shared';
+import {cleanUpControl, composeAsyncValidators, composeValidators, removeDir, setUpControl, setUpFormContainer, syncPendingControls} from '../shared';
 
 import {FormControlName} from './form_control_name';
 import {FormArrayName, FormGroupName} from './form_group_name';
@@ -105,7 +105,7 @@ export class FormGroupDirective extends ControlContainer implements Form,
 
   getControl(dir: FormControlName): FormControl { return <FormControl>this.form.get(dir.path); }
 
-  removeControl(dir: FormControlName): void { remove(this.directives, dir); }
+  removeControl(dir: FormControlName): void { removeDir<FormControlName>(this.directives, dir); }
 
   addFormGroup(dir: FormGroupName): void {
     const ctrl: any = this.form.get(dir.path);
@@ -134,7 +134,7 @@ export class FormGroupDirective extends ControlContainer implements Form,
 
   onSubmit($event: Event): boolean {
     this._submitted = true;
-    this._syncPendingControls();
+    syncPendingControls(this.form, this.directives);
     this.ngSubmit.emit($event);
     return false;
   }
@@ -146,15 +146,6 @@ export class FormGroupDirective extends ControlContainer implements Form,
     this._submitted = false;
   }
 
-  /** @internal */
-  _syncPendingControls() {
-    this.form._syncPendingControls();
-    this.directives.forEach(dir => {
-      if (dir.control.updateOn === 'submit') {
-        dir.viewToModelUpdate(dir.control._pendingValue);
-      }
-    });
-  }
 
   /** @internal */
   _updateDomValue() {
@@ -190,10 +181,3 @@ export class FormGroupDirective extends ControlContainer implements Form,
     }
   }
 }
-
-function remove<T>(list: T[], el: T): void {
-  const index = list.indexOf(el);
-  if (index > -1) {
-    list.splice(index, 1);
-  }
-}
diff --git a/packages/forms/src/directives/shared.ts b/packages/forms/src/directives/shared.ts
index 50651fe55e..1f66036a99 100644
--- a/packages/forms/src/directives/shared.ts
+++ b/packages/forms/src/directives/shared.ts
@@ -167,6 +167,16 @@ export function isBuiltInAccessor(valueAccessor: ControlValueAccessor): boolean
   return BUILTIN_ACCESSORS.some(a => valueAccessor.constructor === a);
 }
 
+export function syncPendingControls(form: FormGroup, directives: NgControl[]): void {
+  form._syncPendingControls();
+  directives.forEach(dir => {
+    const control = dir.control as FormControl;
+    if (control.updateOn === 'submit') {
+      dir.viewToModelUpdate(control._pendingValue);
+    }
+  });
+}
+
 // TODO: vsavkin remove it once https://github.com/angular/angular/issues/3011 is implemented
 export function selectValueAccessor(
     dir: NgControl, valueAccessors: ControlValueAccessor[]): ControlValueAccessor|null {
@@ -198,3 +208,8 @@ export function selectValueAccessor(
   _throwError(dir, 'No valid value accessor for form control with');
   return null;
 }
+
+export function removeDir<T>(list: T[], el: T): void {
+  const index = list.indexOf(el);
+  if (index > -1) list.splice(index, 1);
+}
\ No newline at end of file
diff --git a/packages/forms/test/reactive_integration_spec.ts b/packages/forms/test/reactive_integration_spec.ts
index a37ea8f458..22ba1848f4 100644
--- a/packages/forms/test/reactive_integration_spec.ts
+++ b/packages/forms/test/reactive_integration_spec.ts
@@ -819,6 +819,22 @@ export function main() {
           expect(control.dirty).toBe(true, 'Expected control to update dirty state when blurred.');
         });
 
+        it('should update touched when control is blurred', () => {
+          const fixture = initTest(FormControlComp);
+          const control = new FormControl('', {updateOn: 'blur'});
+          fixture.componentInstance.control = control;
+          fixture.detectChanges();
+
+          expect(control.touched).toBe(false, 'Expected control to start out untouched.');
+
+          const input = fixture.debugElement.query(By.css('input')).nativeElement;
+          dispatchEvent(input, 'blur');
+          fixture.detectChanges();
+
+          expect(control.touched)
+              .toBe(true, 'Expected control to update touched state when blurred.');
+        });
+
         it('should continue waiting for blur to update if previously blurred', () => {
           const fixture = initTest(FormControlComp);
           const control =
diff --git a/packages/forms/test/template_integration_spec.ts b/packages/forms/test/template_integration_spec.ts
index 6436350d85..916b146fcb 100644
--- a/packages/forms/test/template_integration_spec.ts
+++ b/packages/forms/test/template_integration_spec.ts
@@ -8,10 +8,12 @@
 
 import {Component, Directive, Type, forwardRef} from '@angular/core';
 import {ComponentFixture, TestBed, async, fakeAsync, tick} from '@angular/core/testing';
-import {AbstractControl, AsyncValidator, COMPOSITION_BUFFER_MODE, FormsModule, NG_ASYNC_VALIDATORS, NgForm} from '@angular/forms';
+import {AbstractControl, AsyncValidator, COMPOSITION_BUFFER_MODE, FormControl, FormsModule, NG_ASYNC_VALIDATORS, NgForm} from '@angular/forms';
 import {By} from '@angular/platform-browser/src/dom/debug/by';
 import {getDOM} from '@angular/platform-browser/src/dom/dom_adapter';
 import {dispatchEvent} from '@angular/platform-browser/testing/src/browser_util';
+import {merge} from 'rxjs/observable/merge';
+
 import {NgModelCustomComp, NgModelCustomWrapper} from './value_accessor_integration_spec';
 
 export function main() {
@@ -280,6 +282,492 @@ export function main() {
          }));
     });
 
+    describe('updateOn', () => {
+
+      describe('blur', () => {
+
+        it('should default updateOn to change', fakeAsync(() => {
+             const fixture = initTest(NgModelForm);
+             fixture.componentInstance.name = '';
+             fixture.componentInstance.options = {};
+             fixture.detectChanges();
+             tick();
+
+             const form = fixture.debugElement.children[0].injector.get(NgForm);
+             const name = form.control.get('name') as FormControl;
+             expect(name._updateOn).toBeUndefined();
+             expect(name.updateOn).toEqual('change');
+           }));
+
+
+        it('should set control updateOn to blur properly', fakeAsync(() => {
+             const fixture = initTest(NgModelForm);
+             fixture.componentInstance.name = '';
+             fixture.componentInstance.options = {updateOn: 'blur'};
+             fixture.detectChanges();
+             tick();
+
+             const form = fixture.debugElement.children[0].injector.get(NgForm);
+             const name = form.control.get('name') as FormControl;
+             expect(name._updateOn).toEqual('blur');
+             expect(name.updateOn).toEqual('blur');
+           }));
+
+        it('should always set value and validity on init', fakeAsync(() => {
+             const fixture = initTest(NgModelForm);
+             fixture.componentInstance.name = 'Nancy Drew';
+             fixture.componentInstance.options = {updateOn: 'blur'};
+             fixture.detectChanges();
+             tick();
+
+             const input = fixture.debugElement.query(By.css('input')).nativeElement;
+             const form = fixture.debugElement.children[0].injector.get(NgForm);
+             expect(input.value).toEqual('Nancy Drew', 'Expected initial view value to be set.');
+             expect(form.value)
+                 .toEqual({name: 'Nancy Drew'}, 'Expected initial control value be set.');
+             expect(form.valid).toBe(true, 'Expected validation to run on initial value.');
+           }));
+
+        it('should always set value programmatically right away', fakeAsync(() => {
+             const fixture = initTest(NgModelForm);
+             fixture.componentInstance.name = 'Nancy Drew';
+             fixture.componentInstance.options = {updateOn: 'blur'};
+             fixture.detectChanges();
+             tick();
+
+             fixture.componentInstance.name = 'Carson';
+             fixture.detectChanges();
+             tick();
+
+             const input = fixture.debugElement.query(By.css('input')).nativeElement;
+             const form = fixture.debugElement.children[0].injector.get(NgForm);
+             expect(input.value)
+                 .toEqual('Carson', 'Expected view value to update on programmatic change.');
+             expect(form.value)
+                 .toEqual(
+                     {name: 'Carson'}, 'Expected form value to update on programmatic change.');
+             expect(form.valid)
+                 .toBe(false, 'Expected validation to run immediately on programmatic change.');
+           }));
+
+        it('should update value/validity on blur', fakeAsync(() => {
+             const fixture = initTest(NgModelForm);
+             fixture.componentInstance.name = 'Carson';
+             fixture.componentInstance.options = {updateOn: 'blur'};
+             fixture.detectChanges();
+             tick();
+
+             const input = fixture.debugElement.query(By.css('input')).nativeElement;
+             input.value = 'Nancy Drew';
+             dispatchEvent(input, 'input');
+             fixture.detectChanges();
+             tick();
+
+             const form = fixture.debugElement.children[0].injector.get(NgForm);
+             expect(fixture.componentInstance.name)
+                 .toEqual('Carson', 'Expected value not to update on input.');
+             expect(form.valid).toBe(false, 'Expected validation not to run on input.');
+
+             dispatchEvent(input, 'blur');
+             fixture.detectChanges();
+
+             expect(fixture.componentInstance.name)
+                 .toEqual('Nancy Drew', 'Expected value to update on blur.');
+             expect(form.valid).toBe(true, 'Expected validation to run on blur.');
+           }));
+
+        it('should wait for second blur to update value/validity again', fakeAsync(() => {
+             const fixture = initTest(NgModelForm);
+             fixture.componentInstance.name = 'Carson';
+             fixture.componentInstance.options = {updateOn: 'blur'};
+             fixture.detectChanges();
+             tick();
+
+             const input = fixture.debugElement.query(By.css('input')).nativeElement;
+             input.value = 'Nancy Drew';
+             dispatchEvent(input, 'input');
+             fixture.detectChanges();
+
+             dispatchEvent(input, 'blur');
+             fixture.detectChanges();
+
+             input.value = 'Carson';
+             dispatchEvent(input, 'input');
+             fixture.detectChanges();
+             tick();
+
+             const form = fixture.debugElement.children[0].injector.get(NgForm);
+             expect(fixture.componentInstance.name)
+                 .toEqual('Nancy Drew', 'Expected value not to update until another blur.');
+             expect(form.valid).toBe(true, 'Expected validation not to run until another blur.');
+
+             dispatchEvent(input, 'blur');
+             fixture.detectChanges();
+
+             expect(fixture.componentInstance.name)
+                 .toEqual('Carson', 'Expected value to update on second blur.');
+             expect(form.valid).toBe(false, 'Expected validation to run on second blur.');
+           }));
+
+        it('should not update dirtiness until blur', fakeAsync(() => {
+             const fixture = initTest(NgModelForm);
+             fixture.componentInstance.name = '';
+             fixture.componentInstance.options = {updateOn: 'blur'};
+             fixture.detectChanges();
+             tick();
+
+             const input = fixture.debugElement.query(By.css('input')).nativeElement;
+             input.value = 'Nancy Drew';
+             dispatchEvent(input, 'input');
+             fixture.detectChanges();
+             tick();
+
+             const form = fixture.debugElement.children[0].injector.get(NgForm);
+             expect(form.dirty).toBe(false, 'Expected dirtiness not to update on input.');
+
+             dispatchEvent(input, 'blur');
+             fixture.detectChanges();
+
+             expect(form.dirty).toBe(true, 'Expected dirtiness to update on blur.');
+           }));
+
+        it('should not update touched until blur', fakeAsync(() => {
+             const fixture = initTest(NgModelForm);
+             fixture.componentInstance.name = '';
+             fixture.componentInstance.options = {updateOn: 'blur'};
+             fixture.detectChanges();
+             tick();
+
+             const input = fixture.debugElement.query(By.css('input')).nativeElement;
+             input.value = 'Nancy Drew';
+             dispatchEvent(input, 'input');
+             fixture.detectChanges();
+             tick();
+
+             const form = fixture.debugElement.children[0].injector.get(NgForm);
+             expect(form.touched).toBe(false, 'Expected touched not to update on input.');
+
+             dispatchEvent(input, 'blur');
+             fixture.detectChanges();
+
+             expect(form.touched).toBe(true, 'Expected touched to update on blur.');
+           }));
+
+        it('should not emit valueChanges or statusChanges until blur', fakeAsync(() => {
+             const fixture = initTest(NgModelForm);
+             fixture.componentInstance.name = '';
+             fixture.componentInstance.options = {updateOn: 'blur'};
+             fixture.detectChanges();
+             tick();
+
+             const values: string[] = [];
+             const form = fixture.debugElement.children[0].injector.get(NgForm);
+
+             const sub = merge(form.valueChanges !, form.statusChanges !)
+                             .subscribe(val => values.push(val));
+
+             const input = fixture.debugElement.query(By.css('input')).nativeElement;
+             input.value = 'Nancy Drew';
+             dispatchEvent(input, 'input');
+             fixture.detectChanges();
+             tick();
+
+             expect(values).toEqual([], 'Expected no valueChanges or statusChanges on input.');
+
+             dispatchEvent(input, 'blur');
+             fixture.detectChanges();
+
+             expect(values).toEqual(
+                 [{name: 'Nancy Drew'}, 'VALID'],
+                 'Expected valueChanges and statusChanges on blur.');
+
+             sub.unsubscribe();
+           }));
+
+      });
+
+      describe('submit', () => {
+
+        it('should set control updateOn to submit properly', fakeAsync(() => {
+             const fixture = initTest(NgModelForm);
+             fixture.componentInstance.name = '';
+             fixture.componentInstance.options = {updateOn: 'submit'};
+             fixture.detectChanges();
+             tick();
+
+             const form = fixture.debugElement.children[0].injector.get(NgForm);
+             const name = form.control.get('name') as FormControl;
+             expect(name._updateOn).toEqual('submit');
+             expect(name.updateOn).toEqual('submit');
+           }));
+
+        it('should always set value and validity on init', fakeAsync(() => {
+             const fixture = initTest(NgModelForm);
+             fixture.componentInstance.name = 'Nancy Drew';
+             fixture.componentInstance.options = {updateOn: 'submit'};
+             fixture.detectChanges();
+             tick();
+
+             const input = fixture.debugElement.query(By.css('input')).nativeElement;
+             const form = fixture.debugElement.children[0].injector.get(NgForm);
+             expect(input.value).toEqual('Nancy Drew', 'Expected initial view value to be set.');
+             expect(form.value)
+                 .toEqual({name: 'Nancy Drew'}, 'Expected initial control value be set.');
+             expect(form.valid).toBe(true, 'Expected validation to run on initial value.');
+           }));
+
+        it('should always set value programmatically right away', fakeAsync(() => {
+             const fixture = initTest(NgModelForm);
+             fixture.componentInstance.name = 'Nancy Drew';
+             fixture.componentInstance.options = {updateOn: 'submit'};
+             fixture.detectChanges();
+             tick();
+
+             fixture.componentInstance.name = 'Carson';
+             fixture.detectChanges();
+             tick();
+
+             const input = fixture.debugElement.query(By.css('input')).nativeElement;
+             const form = fixture.debugElement.children[0].injector.get(NgForm);
+             expect(input.value)
+                 .toEqual('Carson', 'Expected view value to update on programmatic change.');
+             expect(form.value)
+                 .toEqual(
+                     {name: 'Carson'}, 'Expected form value to update on programmatic change.');
+             expect(form.valid)
+                 .toBe(false, 'Expected validation to run immediately on programmatic change.');
+           }));
+
+
+        it('should update on submit', fakeAsync(() => {
+             const fixture = initTest(NgModelForm);
+             fixture.componentInstance.name = 'Carson';
+             fixture.componentInstance.options = {updateOn: 'submit'};
+             fixture.detectChanges();
+             tick();
+
+             const input = fixture.debugElement.query(By.css('input')).nativeElement;
+             input.value = 'Nancy Drew';
+             dispatchEvent(input, 'input');
+             fixture.detectChanges();
+             tick();
+
+             const form = fixture.debugElement.children[0].injector.get(NgForm);
+             expect(fixture.componentInstance.name)
+                 .toEqual('Carson', 'Expected value not to update on input.');
+             expect(form.valid).toBe(false, 'Expected validation not to run on input.');
+
+             dispatchEvent(input, 'blur');
+             fixture.detectChanges();
+             tick();
+
+             expect(fixture.componentInstance.name)
+                 .toEqual('Carson', 'Expected value not to update on blur.');
+             expect(form.valid).toBe(false, 'Expected validation not to run on blur.');
+
+             const formEl = fixture.debugElement.query(By.css('form')).nativeElement;
+             dispatchEvent(formEl, 'submit');
+             fixture.detectChanges();
+
+             expect(fixture.componentInstance.name)
+                 .toEqual('Nancy Drew', 'Expected value to update on submit.');
+             expect(form.valid).toBe(true, 'Expected validation to run on submit.');
+           }));
+
+        it('should wait until second submit to update again', fakeAsync(() => {
+             const fixture = initTest(NgModelForm);
+             fixture.componentInstance.name = 'Carson';
+             fixture.componentInstance.options = {updateOn: 'submit'};
+             fixture.detectChanges();
+             tick();
+
+             const input = fixture.debugElement.query(By.css('input')).nativeElement;
+             input.value = 'Nancy Drew';
+             dispatchEvent(input, 'input');
+             fixture.detectChanges();
+             tick();
+
+             const formEl = fixture.debugElement.query(By.css('form')).nativeElement;
+             dispatchEvent(formEl, 'submit');
+             fixture.detectChanges();
+             tick();
+
+             input.value = 'Carson';
+             dispatchEvent(input, 'input');
+             fixture.detectChanges();
+             tick();
+
+             const form = fixture.debugElement.children[0].injector.get(NgForm);
+             expect(fixture.componentInstance.name)
+                 .toEqual('Nancy Drew', 'Expected value not to update until second submit.');
+             expect(form.valid).toBe(true, 'Expected validation not to run until second submit.');
+
+             dispatchEvent(formEl, 'submit');
+             fixture.detectChanges();
+             tick();
+
+             expect(fixture.componentInstance.name)
+                 .toEqual('Carson', 'Expected value to update on second submit.');
+             expect(form.valid).toBe(false, 'Expected validation to run on second submit.');
+           }));
+
+        it('should not run validation for onChange controls on submit', fakeAsync(() => {
+             const validatorSpy = jasmine.createSpy('validator');
+             const groupValidatorSpy = jasmine.createSpy('groupValidatorSpy');
+
+             const fixture = initTest(NgModelGroupForm);
+             fixture.componentInstance.options = {updateOn: 'submit'};
+             fixture.detectChanges();
+             tick();
+
+             const form = fixture.debugElement.children[0].injector.get(NgForm);
+             form.control.get('name') !.setValidators(groupValidatorSpy);
+             form.control.get('name.last') !.setValidators(validatorSpy);
+
+             const formEl = fixture.debugElement.query(By.css('form')).nativeElement;
+             dispatchEvent(formEl, 'submit');
+             fixture.detectChanges();
+
+             expect(validatorSpy).not.toHaveBeenCalled();
+             expect(groupValidatorSpy).not.toHaveBeenCalled();
+           }));
+
+        it('should not update dirtiness until submit', fakeAsync(() => {
+             const fixture = initTest(NgModelForm);
+             fixture.componentInstance.name = '';
+             fixture.componentInstance.options = {updateOn: 'submit'};
+             fixture.detectChanges();
+             tick();
+
+             const input = fixture.debugElement.query(By.css('input')).nativeElement;
+             input.value = 'Nancy Drew';
+             dispatchEvent(input, 'input');
+             fixture.detectChanges();
+             tick();
+
+             const form = fixture.debugElement.children[0].injector.get(NgForm);
+             expect(form.dirty).toBe(false, 'Expected dirtiness not to update on input.');
+
+             dispatchEvent(input, 'blur');
+             fixture.detectChanges();
+             tick();
+
+             expect(form.dirty).toBe(false, 'Expected dirtiness not to update on blur.');
+
+             const formEl = fixture.debugElement.query(By.css('form')).nativeElement;
+             dispatchEvent(formEl, 'submit');
+             fixture.detectChanges();
+
+             expect(form.dirty).toBe(true, 'Expected dirtiness to update on submit.');
+           }));
+
+        it('should not update touched until submit', fakeAsync(() => {
+             const fixture = initTest(NgModelForm);
+             fixture.componentInstance.name = '';
+             fixture.componentInstance.options = {updateOn: 'submit'};
+             fixture.detectChanges();
+             tick();
+
+             const input = fixture.debugElement.query(By.css('input')).nativeElement;
+             input.value = 'Nancy Drew';
+             dispatchEvent(input, 'input');
+             fixture.detectChanges();
+             tick();
+
+             dispatchEvent(input, 'blur');
+             fixture.detectChanges();
+             tick();
+
+             const form = fixture.debugElement.children[0].injector.get(NgForm);
+             expect(form.touched).toBe(false, 'Expected touched not to update on blur.');
+
+             const formEl = fixture.debugElement.query(By.css('form')).nativeElement;
+             dispatchEvent(formEl, 'submit');
+             fixture.detectChanges();
+
+             expect(form.touched).toBe(true, 'Expected touched to update on submit.');
+           }));
+
+        it('should reset properly', fakeAsync(() => {
+             const fixture = initTest(NgModelForm);
+             fixture.componentInstance.name = 'Nancy';
+             fixture.componentInstance.options = {updateOn: 'submit'};
+             fixture.detectChanges();
+             tick();
+
+             const input = fixture.debugElement.query(By.css('input')).nativeElement;
+             input.value = 'Nancy Drew';
+             dispatchEvent(input, 'input');
+             fixture.detectChanges();
+
+             dispatchEvent(input, 'blur');
+             fixture.detectChanges();
+
+             const form = fixture.debugElement.children[0].injector.get(NgForm);
+             form.resetForm();
+             fixture.detectChanges();
+             tick();
+
+             expect(input.value).toEqual('', 'Expected view value to reset.');
+             expect(form.value).toEqual({name: null}, 'Expected form value to reset.');
+             expect(fixture.componentInstance.name)
+                 .toEqual(null, 'Expected ngModel value to reset.');
+             expect(form.dirty).toBe(false, 'Expected dirty to stay false on reset.');
+             expect(form.touched).toBe(false, 'Expected touched to stay false on reset.');
+
+             const formEl = fixture.debugElement.query(By.css('form')).nativeElement;
+             dispatchEvent(formEl, 'submit');
+             fixture.detectChanges();
+
+             expect(form.value)
+                 .toEqual({name: null}, 'Expected form value to stay empty on submit');
+             expect(fixture.componentInstance.name)
+                 .toEqual(null, 'Expected ngModel value to stay empty on submit.');
+             expect(form.dirty).toBe(false, 'Expected dirty to stay false on submit.');
+             expect(form.touched).toBe(false, 'Expected touched to stay false on submit.');
+           }));
+
+        it('should not emit valueChanges or statusChanges until submit', fakeAsync(() => {
+             const fixture = initTest(NgModelForm);
+             fixture.componentInstance.name = '';
+             fixture.componentInstance.options = {updateOn: 'submit'};
+             fixture.detectChanges();
+             tick();
+
+             const values: string[] = [];
+             const form = fixture.debugElement.children[0].injector.get(NgForm);
+
+             const sub = merge(form.valueChanges !, form.statusChanges !)
+                             .subscribe(val => values.push(val));
+
+             const input = fixture.debugElement.query(By.css('input')).nativeElement;
+             input.value = 'Nancy Drew';
+             dispatchEvent(input, 'input');
+             fixture.detectChanges();
+             tick();
+
+             expect(values).toEqual([], 'Expected no valueChanges or statusChanges on input.');
+
+             dispatchEvent(input, 'blur');
+             fixture.detectChanges();
+             tick();
+
+             expect(values).toEqual([], 'Expected no valueChanges or statusChanges on blur.');
+
+             const formEl = fixture.debugElement.query(By.css('form')).nativeElement;
+             dispatchEvent(formEl, 'submit');
+             fixture.detectChanges();
+
+             expect(values).toEqual(
+                 [{name: 'Nancy Drew'}, 'VALID'],
+                 'Expected valueChanges and statusChanges on submit.');
+             sub.unsubscribe();
+           }));
+
+      });
+
+    });
+
     describe('submit and reset events', () => {
       it('should emit ngSubmit event with the original submit event on submit', fakeAsync(() => {
            const fixture = initTest(NgModelForm);
@@ -914,7 +1402,7 @@ class NgModelNativeValidateForm {
         <input name="first" [(ngModel)]="first" required [disabled]="isDisabled">
         <input name="last" [(ngModel)]="last">
       </div>
-      <input name="email" [(ngModel)]="email">
+      <input name="email" [(ngModel)]="email" [ngModelOptions]="options">
     </form>
   `
 })
@@ -923,6 +1411,7 @@ class NgModelGroupForm {
   last: string;
   email: string;
   isDisabled: boolean;
+  options = {updateOn: 'change'};
 }
 
 @Component({
diff --git a/tools/public_api_guard/forms/forms.d.ts b/tools/public_api_guard/forms/forms.d.ts
index 2ce54bfc29..43d9f00700 100644
--- a/tools/public_api_guard/forms/forms.d.ts
+++ b/tools/public_api_guard/forms/forms.d.ts
@@ -425,6 +425,7 @@ export declare class NgModel extends NgControl implements OnChanges, OnDestroy {
     options: {
         name?: string;
         standalone?: boolean;
+        updateOn?: FormHooks;
     };
     readonly path: string[];
     update: EventEmitter<{}>;

From 77747e10c045094ff6897d8b7a420e6eba3c77fb Mon Sep 17 00:00:00 2001
From: Pawel Kozlowski <pkozlowski.opensource@gmail.com>
Date: Thu, 22 Jun 2017 14:36:49 +0200
Subject: [PATCH 32/83] refactor(core): remove toString() method from
 DefaultIterableDiffer

toString() from DefaultIterableDiffer is only used in tests and should not
be part of the production code. toString() methods from differs add
~ 0.3KB (min+gzip) to the production bundle size.
---
 .../differs/default_iterable_differ.ts        | 36 ----------
 .../differs/default_iterable_differ_spec.ts   | 66 +++++++++----------
 packages/core/test/change_detection/util.ts   | 35 ++++++++++
 tools/public_api_guard/core/core.d.ts         |  1 -
 4 files changed, 68 insertions(+), 70 deletions(-)

diff --git a/packages/core/src/change_detection/differs/default_iterable_differ.ts b/packages/core/src/change_detection/differs/default_iterable_differ.ts
index a73a597904..1c083a823a 100644
--- a/packages/core/src/change_detection/differs/default_iterable_differ.ts
+++ b/packages/core/src/change_detection/differs/default_iterable_differ.ts
@@ -567,34 +567,6 @@ export class DefaultIterableDiffer<V> implements IterableDiffer<V>, IterableChan
     }
     return record;
   }
-
-
-  toString(): string {
-    const list: IterableChangeRecord_<V>[] = [];
-    this.forEachItem((record: IterableChangeRecord_<V>) => list.push(record));
-
-    const previous: IterableChangeRecord_<V>[] = [];
-    this.forEachPreviousItem((record: IterableChangeRecord_<V>) => previous.push(record));
-
-    const additions: IterableChangeRecord_<V>[] = [];
-    this.forEachAddedItem((record: IterableChangeRecord_<V>) => additions.push(record));
-
-    const moves: IterableChangeRecord_<V>[] = [];
-    this.forEachMovedItem((record: IterableChangeRecord_<V>) => moves.push(record));
-
-    const removals: IterableChangeRecord_<V>[] = [];
-    this.forEachRemovedItem((record: IterableChangeRecord_<V>) => removals.push(record));
-
-    const identityChanges: IterableChangeRecord_<V>[] = [];
-    this.forEachIdentityChange((record: IterableChangeRecord_<V>) => identityChanges.push(record));
-
-    return 'collection: ' + list.join(', ') + '\n' +
-        'previous: ' + previous.join(', ') + '\n' +
-        'additions: ' + additions.join(', ') + '\n' +
-        'moves: ' + moves.join(', ') + '\n' +
-        'removals: ' + removals.join(', ') + '\n' +
-        'identityChanges: ' + identityChanges.join(', ') + '\n';
-  }
 }
 
 /**
@@ -627,12 +599,6 @@ export class IterableChangeRecord_<V> implements IterableChangeRecord<V> {
 
 
   constructor(public item: V, public trackById: any) {}
-
-  toString(): string {
-    return this.previousIndex === this.currentIndex ? stringify(this.item) :
-                                                      stringify(this.item) + '[' +
-            stringify(this.previousIndex) + '->' + stringify(this.currentIndex) + ']';
-  }
 }
 
 // A linked list of CollectionChangeRecords with the same IterableChangeRecord_.item
@@ -752,8 +718,6 @@ class _DuplicateMap<V> {
   get isEmpty(): boolean { return this.map.size === 0; }
 
   clear() { this.map.clear(); }
-
-  toString(): string { return '_DuplicateMap(' + stringify(this.map) + ')'; }
 }
 
 function getPreviousIndex(
diff --git a/packages/core/test/change_detection/differs/default_iterable_differ_spec.ts b/packages/core/test/change_detection/differs/default_iterable_differ_spec.ts
index a05137a07c..39a686c667 100644
--- a/packages/core/test/change_detection/differs/default_iterable_differ_spec.ts
+++ b/packages/core/test/change_detection/differs/default_iterable_differ_spec.ts
@@ -9,7 +9,7 @@
 import {DefaultIterableDiffer, DefaultIterableDifferFactory} from '@angular/core/src/change_detection/differs/default_iterable_differ';
 
 import {TestIterable} from '../../change_detection/iterable';
-import {iterableChangesAsString} from '../../change_detection/util';
+import {iterableChangesAsString, iterableDifferToString} from '../../change_detection/util';
 
 class ItemWithId {
   constructor(private id: string) {}
@@ -43,18 +43,18 @@ export function main() {
         const l: any = new TestIterable();
 
         differ.check(l);
-        expect(differ.toString()).toEqual(iterableChangesAsString({collection: []}));
+        expect(iterableDifferToString(differ)).toEqual(iterableChangesAsString({collection: []}));
 
         l.list = [1];
         differ.check(l);
-        expect(differ.toString()).toEqual(iterableChangesAsString({
+        expect(iterableDifferToString(differ)).toEqual(iterableChangesAsString({
           collection: ['1[null->0]'],
           additions: ['1[null->0]']
         }));
 
         l.list = [2, 1];
         differ.check(l);
-        expect(differ.toString()).toEqual(iterableChangesAsString({
+        expect(iterableDifferToString(differ)).toEqual(iterableChangesAsString({
           collection: ['2[null->0]', '1[0->1]'],
           previous: ['1[0->1]'],
           additions: ['2[null->0]'],
@@ -65,18 +65,18 @@ export function main() {
       it('should detect additions', () => {
         const l: any[] = [];
         differ.check(l);
-        expect(differ.toString()).toEqual(iterableChangesAsString({collection: []}));
+        expect(iterableDifferToString(differ)).toEqual(iterableChangesAsString({collection: []}));
 
         l.push('a');
         differ.check(l);
-        expect(differ.toString()).toEqual(iterableChangesAsString({
+        expect(iterableDifferToString(differ)).toEqual(iterableChangesAsString({
           collection: ['a[null->0]'],
           additions: ['a[null->0]']
         }));
 
         l.push('b');
         differ.check(l);
-        expect(differ.toString())
+        expect(iterableDifferToString(differ))
             .toEqual(iterableChangesAsString(
                 {collection: ['a', 'b[null->1]'], previous: ['a'], additions: ['b[null->1]']}));
       });
@@ -87,7 +87,7 @@ export function main() {
 
         l = [1, 0];
         differ.check(l);
-        expect(differ.toString()).toEqual(iterableChangesAsString({
+        expect(iterableDifferToString(differ)).toEqual(iterableChangesAsString({
           collection: ['1[null->0]', '0[0->1]'],
           previous: ['0[0->1]'],
           additions: ['1[null->0]'],
@@ -96,7 +96,7 @@ export function main() {
 
         l = [2, 1, 0];
         differ.check(l);
-        expect(differ.toString()).toEqual(iterableChangesAsString({
+        expect(iterableDifferToString(differ)).toEqual(iterableChangesAsString({
           collection: ['2[null->0]', '1[0->1]', '0[1->2]'],
           previous: ['1[0->1]', '0[1->2]'],
           additions: ['2[null->0]'],
@@ -112,7 +112,7 @@ export function main() {
         l.push(2);
         l.push(1);
         differ.check(l);
-        expect(differ.toString()).toEqual(iterableChangesAsString({
+        expect(iterableDifferToString(differ)).toEqual(iterableChangesAsString({
           collection: ['2[1->0]', '1[0->1]'],
           previous: ['1[0->1]', '2[1->0]'],
           moves: ['2[1->0]', '1[0->1]']
@@ -126,7 +126,7 @@ export function main() {
         l.splice(1, 1);
         l.splice(0, 0, 'b');
         differ.check(l);
-        expect(differ.toString()).toEqual(iterableChangesAsString({
+        expect(iterableDifferToString(differ)).toEqual(iterableChangesAsString({
           collection: ['b[1->0]', 'a[0->1]', 'c'],
           previous: ['a[0->1]', 'b[1->0]', 'c'],
           moves: ['b[1->0]', 'a[0->1]']
@@ -135,7 +135,7 @@ export function main() {
         l.splice(1, 1);
         l.push('a');
         differ.check(l);
-        expect(differ.toString()).toEqual(iterableChangesAsString({
+        expect(iterableDifferToString(differ)).toEqual(iterableChangesAsString({
           collection: ['b', 'c[2->1]', 'a[1->2]'],
           previous: ['b', 'a[1->2]', 'c[2->1]'],
           moves: ['c[2->1]', 'a[1->2]']
@@ -148,21 +148,21 @@ export function main() {
 
         l.push('a');
         differ.check(l);
-        expect(differ.toString()).toEqual(iterableChangesAsString({
+        expect(iterableDifferToString(differ)).toEqual(iterableChangesAsString({
           collection: ['a[null->0]'],
           additions: ['a[null->0]']
         }));
 
         l.push('b');
         differ.check(l);
-        expect(differ.toString())
+        expect(iterableDifferToString(differ))
             .toEqual(iterableChangesAsString(
                 {collection: ['a', 'b[null->1]'], previous: ['a'], additions: ['b[null->1]']}));
 
         l.push('c');
         l.push('d');
         differ.check(l);
-        expect(differ.toString()).toEqual(iterableChangesAsString({
+        expect(iterableDifferToString(differ)).toEqual(iterableChangesAsString({
           collection: ['a', 'b', 'c[null->2]', 'd[null->3]'],
           previous: ['a', 'b'],
           additions: ['c[null->2]', 'd[null->3]']
@@ -170,7 +170,7 @@ export function main() {
 
         l.splice(2, 1);
         differ.check(l);
-        expect(differ.toString()).toEqual(iterableChangesAsString({
+        expect(iterableDifferToString(differ)).toEqual(iterableChangesAsString({
           collection: ['a', 'b', 'd[3->2]'],
           previous: ['a', 'b', 'c[2->null]', 'd[3->2]'],
           moves: ['d[3->2]'],
@@ -183,7 +183,7 @@ export function main() {
         l.push('b');
         l.push('a');
         differ.check(l);
-        expect(differ.toString()).toEqual(iterableChangesAsString({
+        expect(iterableDifferToString(differ)).toEqual(iterableChangesAsString({
           collection: ['d[2->0]', 'c[null->1]', 'b[1->2]', 'a[0->3]'],
           previous: ['a[0->3]', 'b[1->2]', 'd[2->0]'],
           additions: ['c[null->1]'],
@@ -195,7 +195,7 @@ export function main() {
         const l = [NaN];
         differ.check(l);
         differ.check(l);
-        expect(differ.toString())
+        expect(iterableDifferToString(differ))
             .toEqual(iterableChangesAsString({collection: [NaN], previous: [NaN]}));
       });
 
@@ -205,7 +205,7 @@ export function main() {
 
         l.unshift('foo');
         differ.check(l);
-        expect(differ.toString()).toEqual(iterableChangesAsString({
+        expect(iterableDifferToString(differ)).toEqual(iterableChangesAsString({
           collection: ['foo[null->0]', 'NaN[0->1]', 'NaN[1->2]'],
           previous: ['NaN[0->1]', 'NaN[1->2]'],
           additions: ['foo[null->0]'],
@@ -219,7 +219,7 @@ export function main() {
 
         l.splice(1, 1);
         differ.check(l);
-        expect(differ.toString()).toEqual(iterableChangesAsString({
+        expect(iterableDifferToString(differ)).toEqual(iterableChangesAsString({
           collection: ['a', 'c[2->1]'],
           previous: ['a', 'b[1->null]', 'c[2->1]'],
           moves: ['c[2->1]'],
@@ -228,7 +228,7 @@ export function main() {
 
         l.splice(1, 0, 'b');
         differ.check(l);
-        expect(differ.toString()).toEqual(iterableChangesAsString({
+        expect(iterableDifferToString(differ)).toEqual(iterableChangesAsString({
           collection: ['a', 'b[null->1]', 'c[1->2]'],
           previous: ['a', 'c[1->2]'],
           additions: ['b[null->1]'],
@@ -243,7 +243,7 @@ export function main() {
 
         l.splice(0, 1);
         differ.check(l);
-        expect(differ.toString()).toEqual(iterableChangesAsString({
+        expect(iterableDifferToString(differ)).toEqual(iterableChangesAsString({
           collection: ['a', 'a', 'b[3->2]', 'b[4->3]'],
           previous: ['a', 'a', 'a[2->null]', 'b[3->2]', 'b[4->3]'],
           moves: ['b[3->2]', 'b[4->3]'],
@@ -257,7 +257,7 @@ export function main() {
 
         l.splice(0, 0, 'b');
         differ.check(l);
-        expect(differ.toString()).toEqual(iterableChangesAsString({
+        expect(iterableDifferToString(differ)).toEqual(iterableChangesAsString({
           collection: ['b[2->0]', 'a[0->1]', 'a[1->2]', 'b', 'b[null->4]'],
           previous: ['a[0->1]', 'a[1->2]', 'b[2->0]', 'b'],
           additions: ['b[null->4]'],
@@ -274,7 +274,7 @@ export function main() {
         l.push('a');
         l.push('c');
         differ.check(l);
-        expect(differ.toString()).toEqual(iterableChangesAsString({
+        expect(iterableDifferToString(differ)).toEqual(iterableChangesAsString({
           collection: ['b[1->0]', 'a[0->1]', 'c'],
           previous: ['a[0->1]', 'b[1->0]', 'c'],
           moves: ['b[1->0]', 'a[0->1]']
@@ -288,7 +288,7 @@ export function main() {
         l[1] = 'b';
         l[5] = 'c';
         differ.check(l);
-        expect(differ.toString()).toEqual(iterableChangesAsString({
+        expect(iterableDifferToString(differ)).toEqual(iterableChangesAsString({
           collection: ['a', 'b[null->1]', '*[1->2]', 'd', '-', 'c[null->5]', '-[5->6]', 'e'],
           previous: ['a', '*[1->2]', '*[2->null]', 'd', '-', '-[5->6]', '-[6->null]', 'e'],
           additions: ['b[null->1]', 'c[null->5]'],
@@ -468,7 +468,7 @@ export function main() {
 
         it('should treat null as an empty list', () => {
           differ.diff(['a', 'b']);
-          expect(differ.diff(null !) !.toString()).toEqual(iterableChangesAsString({
+          expect(iterableDifferToString(differ.diff(null !) !)).toEqual(iterableChangesAsString({
             previous: ['a[0->null]', 'b[1->null]'],
             removals: ['a[0->null]', 'b[1->null]']
           }));
@@ -497,14 +497,14 @@ export function main() {
       it('should treat seen records as identity changes, not additions', () => {
         let l = buildItemList(['a', 'b', 'c']);
         differ.check(l);
-        expect(differ.toString()).toEqual(iterableChangesAsString({
+        expect(iterableDifferToString(differ)).toEqual(iterableChangesAsString({
           collection: [`{id: a}[null->0]`, `{id: b}[null->1]`, `{id: c}[null->2]`],
           additions: [`{id: a}[null->0]`, `{id: b}[null->1]`, `{id: c}[null->2]`]
         }));
 
         l = buildItemList(['a', 'b', 'c']);
         differ.check(l);
-        expect(differ.toString()).toEqual(iterableChangesAsString({
+        expect(iterableDifferToString(differ)).toEqual(iterableChangesAsString({
           collection: [`{id: a}`, `{id: b}`, `{id: c}`],
           identityChanges: [`{id: a}`, `{id: b}`, `{id: c}`],
           previous: [`{id: a}`, `{id: b}`, `{id: c}`]
@@ -517,7 +517,7 @@ export function main() {
 
         l = [new ComplexItem('a', 'orange'), new ComplexItem('b', 'red')];
         differ.check(l);
-        expect(differ.toString()).toEqual(iterableChangesAsString({
+        expect(iterableDifferToString(differ)).toEqual(iterableChangesAsString({
           collection: [`{id: a, color: orange}`, `{id: b, color: red}`],
           identityChanges: [`{id: a, color: orange}`, `{id: b, color: red}`],
           previous: [`{id: a, color: orange}`, `{id: b, color: red}`]
@@ -530,7 +530,7 @@ export function main() {
 
         l = buildItemList(['b', 'a', 'c']);
         differ.check(l);
-        expect(differ.toString()).toEqual(iterableChangesAsString({
+        expect(iterableDifferToString(differ)).toEqual(iterableChangesAsString({
           collection: ['{id: b}[1->0]', '{id: a}[0->1]', '{id: c}'],
           identityChanges: ['{id: b}[1->0]', '{id: a}[0->1]', '{id: c}'],
           previous: ['{id: a}[0->1]', '{id: b}[1->0]', '{id: c}'],
@@ -545,7 +545,7 @@ export function main() {
 
         l = buildItemList(['b', 'a', 'a']);
         differ.check(l);
-        expect(differ.toString()).toEqual(iterableChangesAsString({
+        expect(iterableDifferToString(differ)).toEqual(iterableChangesAsString({
           collection: ['{id: b}[null->0]', '{id: a}[0->1]', '{id: a}[1->2]'],
           identityChanges: ['{id: a}[0->1]', '{id: a}[1->2]'],
           previous: ['{id: a}[0->1]', '{id: a}[1->2]'],
@@ -561,7 +561,7 @@ export function main() {
 
         l.splice(2, 1);
         differ.check(l);
-        expect(differ.toString()).toEqual(iterableChangesAsString({
+        expect(iterableDifferToString(differ)).toEqual(iterableChangesAsString({
           collection: ['{id: a}', '{id: b}'],
           previous: ['{id: a}', '{id: b}', '{id: c}[2->null]'],
           removals: ['{id: c}[2->null]']
@@ -581,7 +581,7 @@ export function main() {
         differ.check(['e', 'f', 'g', 'h']);
         differ.check(['e', 'f', 'h']);
 
-        expect(differ.toString()).toEqual(iterableChangesAsString({
+        expect(iterableDifferToString(differ)).toEqual(iterableChangesAsString({
           collection: ['e', 'f', 'h'],
           previous: ['e', 'f', 'h', 'h[3->null]'],
           removals: ['h[3->null]'],
diff --git a/packages/core/test/change_detection/util.ts b/packages/core/test/change_detection/util.ts
index 31b403511b..2a6b28f8d5 100644
--- a/packages/core/test/change_detection/util.ts
+++ b/packages/core/test/change_detection/util.ts
@@ -6,10 +6,45 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import {IterableChangeRecord, IterableChanges} from '@angular/core/src/change_detection/differs/iterable_differs';
 import {KeyValueChangeRecord, KeyValueChanges} from '@angular/core/src/change_detection/differs/keyvalue_differs';
 
 import {looseIdentical, stringify} from '../../src/util';
 
+export function iterableDifferToString<V>(iterableChanges: IterableChanges<V>) {
+  const collection: string[] = [];
+  iterableChanges.forEachItem(
+      (record: IterableChangeRecord<V>) => collection.push(icrAsString(record)));
+
+  const previous: string[] = [];
+  iterableChanges.forEachPreviousItem(
+      (record: IterableChangeRecord<V>) => previous.push(icrAsString(record)));
+
+  const additions: string[] = [];
+  iterableChanges.forEachAddedItem(
+      (record: IterableChangeRecord<V>) => additions.push(icrAsString(record)));
+
+  const moves: string[] = [];
+  iterableChanges.forEachMovedItem(
+      (record: IterableChangeRecord<V>) => moves.push(icrAsString(record)));
+
+  const removals: string[] = [];
+  iterableChanges.forEachRemovedItem(
+      (record: IterableChangeRecord<V>) => removals.push(icrAsString(record)));
+
+  const identityChanges: string[] = [];
+  iterableChanges.forEachIdentityChange(
+      (record: IterableChangeRecord<V>) => identityChanges.push(icrAsString(record)));
+
+  return iterableChangesAsString(
+      {collection, previous, additions, moves, removals, identityChanges});
+}
+
+function icrAsString<V>(icr: IterableChangeRecord<V>): string {
+  return icr.previousIndex === icr.currentIndex ? stringify(icr.item) :
+                                                  stringify(icr.item) + '[' +
+          stringify(icr.previousIndex) + '->' + stringify(icr.currentIndex) + ']';
+}
 
 export function iterableChangesAsString(
     {collection = [] as any, previous = [] as any, additions = [] as any, moves = [] as any,
diff --git a/tools/public_api_guard/core/core.d.ts b/tools/public_api_guard/core/core.d.ts
index cb514a7881..a4547474ce 100644
--- a/tools/public_api_guard/core/core.d.ts
+++ b/tools/public_api_guard/core/core.d.ts
@@ -345,7 +345,6 @@ export declare class DefaultIterableDiffer<V> implements IterableDiffer<V>, Iter
     forEachPreviousItem(fn: (record: IterableChangeRecord_<V>) => void): void;
     forEachRemovedItem(fn: (record: IterableChangeRecord_<V>) => void): void;
     onDestroy(): void;
-    toString(): string;
 }
 
 /** @experimental */

From 64b4be9670c8e97477d0e05761271212d13f5742 Mon Sep 17 00:00:00 2001
From: Zhicheng Wang <zcwang@thoughtworks.com>
Date: Sat, 12 Aug 2017 10:14:25 +0800
Subject: [PATCH 33/83] fix(compiler): Don't strip CSS source maps

Fix CSS source mapping for component by keeping `/*# sourceMappingURL= ... */` and  `/*# sourceURL= ... */` comments.

Relates to <https://github.com/angular/angular-cli/issues/4199>.
---
 packages/compiler/src/style_url_resolver.ts   | 23 ++++++++++---------
 .../compiler/test/style_url_resolver_spec.ts  |  8 +++++++
 2 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/packages/compiler/src/style_url_resolver.ts b/packages/compiler/src/style_url_resolver.ts
index 1a45ff0ddc..844871ee0a 100644
--- a/packages/compiler/src/style_url_resolver.ts
+++ b/packages/compiler/src/style_url_resolver.ts
@@ -29,19 +29,20 @@ export function extractStyleUrls(
     resolver: UrlResolver, baseUrl: string, cssText: string): StyleWithImports {
   const foundUrls: string[] = [];
 
-  const modifiedCssText =
-      cssText.replace(CSS_COMMENT_REGEXP, '').replace(CSS_IMPORT_REGEXP, (...m: string[]) => {
-        const url = m[1] || m[2];
-        if (!isStyleUrlResolvable(url)) {
-          // Do not attempt to resolve non-package absolute URLs with URI scheme
-          return m[0];
-        }
-        foundUrls.push(resolver.resolve(baseUrl, url));
-        return '';
-      });
+  const modifiedCssText = cssText.replace(CSS_STRIPPABLE_COMMENT_REGEXP, '')
+                              .replace(CSS_IMPORT_REGEXP, (...m: string[]) => {
+                                const url = m[1] || m[2];
+                                if (!isStyleUrlResolvable(url)) {
+                                  // Do not attempt to resolve non-package absolute URLs with URI
+                                  // scheme
+                                  return m[0];
+                                }
+                                foundUrls.push(resolver.resolve(baseUrl, url));
+                                return '';
+                              });
   return new StyleWithImports(modifiedCssText, foundUrls);
 }
 
 const CSS_IMPORT_REGEXP = /@import\s+(?:url\()?\s*(?:(?:['"]([^'"]*))|([^;\)\s]*))[^;]*;?/g;
-const CSS_COMMENT_REGEXP = /\/\*[\s\S]+?\*\//g;
+const CSS_STRIPPABLE_COMMENT_REGEXP = /\/\*(?!#\s*(?:sourceURL|sourceMappingURL)=)[\s\S]+?\*\//g;
 const URL_WITH_SCHEMA_REGEXP = /^([^:/?#]+):/;
diff --git a/packages/compiler/test/style_url_resolver_spec.ts b/packages/compiler/test/style_url_resolver_spec.ts
index 3b135e9925..251380768a 100644
--- a/packages/compiler/test/style_url_resolver_spec.ts
+++ b/packages/compiler/test/style_url_resolver_spec.ts
@@ -51,6 +51,14 @@ export function main() {
       expect(styleWithImports.styleUrls).not.toContain('http://ng.io/3.css');
     });
 
+    it('should keep /*# sourceURL... */ and /*# sourceMappingURL... */ comments', () => {
+      const css =
+          `/*regular comment*/\n/*# sourceURL=.... */\n/*# sourceMappingURL=... *//*#sourceMappingURL=... */`;
+      const styleWithSourceMaps = extractStyleUrls(urlResolver, 'http://ng.io', css);
+      expect(styleWithSourceMaps.style.trim())
+          .toEqual('/*# sourceURL=.... */\n/*# sourceMappingURL=... *//*#sourceMappingURL=... */');
+    });
+
     it('should extract "@import url()" urls', () => {
       const css = `
       @import url('3.css');

From 0a73e8d062c3f20854e38d516a16e564ac5ff556 Mon Sep 17 00:00:00 2001
From: Pawel Kozlowski <pkozlowski.opensource@gmail.com>
Date: Wed, 9 Aug 2017 14:29:17 +0200
Subject: [PATCH 34/83] feat(common): mark NgTemplateOutlet API as stable

---
 packages/common/src/directives/ng_template_outlet.ts | 4 ++--
 tools/public_api_guard/common/common.d.ts            | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/common/src/directives/ng_template_outlet.ts b/packages/common/src/directives/ng_template_outlet.ts
index 800eed23ec..5912f9caa7 100644
--- a/packages/common/src/directives/ng_template_outlet.ts
+++ b/packages/common/src/directives/ng_template_outlet.ts
@@ -30,7 +30,7 @@ import {Directive, EmbeddedViewRef, Input, OnChanges, SimpleChange, SimpleChange
  *
  * {@example common/ngTemplateOutlet/ts/module.ts region='NgTemplateOutlet'}
  *
- * @experimental
+ * @stable
  */
 @Directive({selector: '[ngTemplateOutlet]'})
 export class NgTemplateOutlet implements OnChanges {
@@ -72,7 +72,7 @@ export class NgTemplateOutlet implements OnChanges {
    * - templateRef has changed
    * - context has changes
    *
-   * To mark context object as changed when the corresponding object
+   * We mark context object as changed when the corresponding object
    * shape changes (new properties are added or existing properties are removed).
    * In other words we consider context with the same properties as "the same" even
    * if object reference changes (see https://github.com/angular/angular/issues/13407).
diff --git a/tools/public_api_guard/common/common.d.ts b/tools/public_api_guard/common/common.d.ts
index 3160d61883..6ea2ce823c 100644
--- a/tools/public_api_guard/common/common.d.ts
+++ b/tools/public_api_guard/common/common.d.ts
@@ -240,7 +240,7 @@ export declare class NgSwitchDefault {
     constructor(viewContainer: ViewContainerRef, templateRef: TemplateRef<Object>, ngSwitch: NgSwitch);
 }
 
-/** @experimental */
+/** @stable */
 export declare class NgTemplateOutlet implements OnChanges {
     /** @deprecated */ ngOutletContext: Object;
     ngTemplateOutlet: TemplateRef<any>;

From 697c6ed0fe9f852f8fe7455633dd993922a93392 Mon Sep 17 00:00:00 2001
From: Ward Bell <wardbell@hotmail.com>
Date: Mon, 14 Aug 2017 20:58:56 -0700
Subject: [PATCH 35/83] docs: remove TypeScript to JavaScript guide & sample

---
 aio/content/examples/.gitignore               |   4 -
 aio/content/examples/ts-to-js/e2e-spec.ts     |  77 ---
 .../js-es6-decorators/example-config.json     |   3 -
 .../ts-to-js/js-es6-decorators/plnkr.json     |   9 -
 .../ts-to-js/js-es6-decorators/src/.babelrc   |   6 -
 .../src/app/app.component.es6                 |  14 -
 .../src/app/app.component.html                |  31 -
 .../js-es6-decorators/src/app/app.module.es6  |  55 --
 .../src/app/confirm.component.es6             |  21 -
 .../src/app/confirm.component.html            |   6 -
 .../src/app/data.service.es6                  |  10 -
 .../hero-di-inject-additional.component.es6   |   7 -
 .../src/app/hero-di-inject.component.es6      |  13 -
 .../src/app/hero-di.component.es6             |  15 -
 .../src/app/hero-host-meta.component.es6      |  44 --
 .../src/app/hero-host.component.es6           |  39 --
 .../src/app/hero-io.component.es6             |  26 -
 .../src/app/hero-lifecycle.component.es6      |  14 -
 .../src/app/hero-queries.component.es6        |  81 ---
 .../src/app/hero-title.component.es6          |  25 -
 .../src/app/hero-title.component.html         |   4 -
 .../src/app/hero.component.es6                |  15 -
 .../ts-to-js/js-es6-decorators/src/index.html |  26 -
 .../ts-to-js/js-es6-decorators/src/main.es6   |   4 -
 .../ts-to-js/js-es6/example-config.json       |   3 -
 .../examples/ts-to-js/js-es6/plnkr.json       |   9 -
 .../examples/ts-to-js/js-es6/src/.babelrc     |   5 -
 .../ts-to-js/js-es6/src/app/app.component.es6 |  19 -
 .../js-es6/src/app/app.component.html         |  30 -
 .../ts-to-js/js-es6/src/app/app.module.es6    |  56 --
 .../js-es6/src/app/confirm.component.es6      |  31 -
 .../js-es6/src/app/confirm.component.html     |   6 -
 .../ts-to-js/js-es6/src/app/data.service.es6  |  13 -
 .../hero-di-inject-additional.component.es6   |  10 -
 .../src/app/hero-di-inject.component.es6      |  20 -
 .../js-es6/src/app/hero-di.component.es6      |  21 -
 .../js-es6/src/app/hero-host.component.es6    |  50 --
 .../js-es6/src/app/hero-io.component.es6      |  31 -
 .../src/app/hero-lifecycle.component.es6      |  15 -
 .../js-es6/src/app/hero-queries.component.es6 |  97 ---
 .../js-es6/src/app/hero-title.component.es6   |  28 -
 .../js-es6/src/app/hero-title.component.html  |   4 -
 .../js-es6/src/app/hero.component.es6         |  21 -
 .../examples/ts-to-js/js-es6/src/index.html   |  26 -
 .../examples/ts-to-js/js-es6/src/main.es6     |   4 -
 .../examples/ts-to-js/js/example-config.json  |   3 -
 aio/content/examples/ts-to-js/js/plnkr.json   |   8 -
 .../ts-to-js/js/src/app/app.component.html    |  47 --
 .../ts-to-js/js/src/app/app.component.js      |  20 -
 .../ts-to-js/js/src/app/app.module.js         |  46 --
 .../js/src/app/confirm.component.html         |   6 -
 .../ts-to-js/js/src/app/confirm.component.js  |  75 ---
 .../ts-to-js/js/src/app/data.service.js       |  10 -
 .../hero-di-inject-additional.component.js    |  36 -
 .../js/src/app/hero-di-inject.component.js    |  51 --
 .../ts-to-js/js/src/app/hero-di.component.js  |  51 --
 .../js/src/app/hero-host.component.js         | 107 ---
 .../js/src/app/hero-io-dsl.component.html     |   7 -
 .../js/src/app/hero-io.component.html         |   7 -
 .../ts-to-js/js/src/app/hero-io.component.js  |  52 --
 .../js/src/app/hero-lifecycle.component.js    |  52 --
 .../js/src/app/hero-queries.component.js      |  92 ---
 .../js/src/app/hero-title.component.html      |   4 -
 .../js/src/app/hero-title.component.js        |  64 --
 .../ts-to-js/js/src/app/hero.component.js     |  53 --
 .../examples/ts-to-js/js/src/index.html       |  43 --
 aio/content/examples/ts-to-js/js/src/main.js  |   9 -
 .../examples/ts-to-js/ts/example-config.json  |   0
 aio/content/examples/ts-to-js/ts/plnkr.json   |   9 -
 .../ts-to-js/ts/src/app/app.component.html    |  31 -
 .../ts-to-js/ts/src/app/app.component.ts      |  14 -
 .../ts-to-js/ts/src/app/app.module.ts         |  56 --
 .../ts/src/app/confirm.component.html         |   6 -
 .../ts-to-js/ts/src/app/confirm.component.ts  |  21 -
 .../ts-to-js/ts/src/app/data.service.ts       |  10 -
 .../hero-di-inject-additional.component.ts    |   7 -
 .../ts/src/app/hero-di-inject.component.ts    |  11 -
 .../ts-to-js/ts/src/app/hero-di.component.ts  |  15 -
 .../ts/src/app/hero-host-meta.component.ts    |  44 --
 .../ts/src/app/hero-host.component.ts         |  39 --
 .../ts-to-js/ts/src/app/hero-io.component.ts  |  26 -
 .../ts/src/app/hero-lifecycle.component.ts    |  14 -
 .../ts/src/app/hero-queries.component.ts      |  83 ---
 .../ts/src/app/hero-title.component.html      |   4 -
 .../ts/src/app/hero-title.component.ts        |  21 -
 .../ts-to-js/ts/src/app/hero.component.ts     |  15 -
 .../examples/ts-to-js/ts/src/index.html       |  26 -
 aio/content/examples/ts-to-js/ts/src/main.ts  |   4 -
 aio/content/guide/change-log.md               |   4 +-
 aio/content/guide/ts-to-js.md                 | 621 ------------------
 aio/content/navigation.json                   |   5 -
 aio/src/app/embedded/code/code.component.ts   |   4 +-
 92 files changed, 4 insertions(+), 2977 deletions(-)
 delete mode 100644 aio/content/examples/ts-to-js/e2e-spec.ts
 delete mode 100644 aio/content/examples/ts-to-js/js-es6-decorators/example-config.json
 delete mode 100644 aio/content/examples/ts-to-js/js-es6-decorators/plnkr.json
 delete mode 100644 aio/content/examples/ts-to-js/js-es6-decorators/src/.babelrc
 delete mode 100644 aio/content/examples/ts-to-js/js-es6-decorators/src/app/app.component.es6
 delete mode 100644 aio/content/examples/ts-to-js/js-es6-decorators/src/app/app.component.html
 delete mode 100644 aio/content/examples/ts-to-js/js-es6-decorators/src/app/app.module.es6
 delete mode 100644 aio/content/examples/ts-to-js/js-es6-decorators/src/app/confirm.component.es6
 delete mode 100644 aio/content/examples/ts-to-js/js-es6-decorators/src/app/confirm.component.html
 delete mode 100644 aio/content/examples/ts-to-js/js-es6-decorators/src/app/data.service.es6
 delete mode 100644 aio/content/examples/ts-to-js/js-es6-decorators/src/app/hero-di-inject-additional.component.es6
 delete mode 100644 aio/content/examples/ts-to-js/js-es6-decorators/src/app/hero-di-inject.component.es6
 delete mode 100644 aio/content/examples/ts-to-js/js-es6-decorators/src/app/hero-di.component.es6
 delete mode 100644 aio/content/examples/ts-to-js/js-es6-decorators/src/app/hero-host-meta.component.es6
 delete mode 100644 aio/content/examples/ts-to-js/js-es6-decorators/src/app/hero-host.component.es6
 delete mode 100644 aio/content/examples/ts-to-js/js-es6-decorators/src/app/hero-io.component.es6
 delete mode 100644 aio/content/examples/ts-to-js/js-es6-decorators/src/app/hero-lifecycle.component.es6
 delete mode 100644 aio/content/examples/ts-to-js/js-es6-decorators/src/app/hero-queries.component.es6
 delete mode 100644 aio/content/examples/ts-to-js/js-es6-decorators/src/app/hero-title.component.es6
 delete mode 100644 aio/content/examples/ts-to-js/js-es6-decorators/src/app/hero-title.component.html
 delete mode 100644 aio/content/examples/ts-to-js/js-es6-decorators/src/app/hero.component.es6
 delete mode 100644 aio/content/examples/ts-to-js/js-es6-decorators/src/index.html
 delete mode 100644 aio/content/examples/ts-to-js/js-es6-decorators/src/main.es6
 delete mode 100644 aio/content/examples/ts-to-js/js-es6/example-config.json
 delete mode 100644 aio/content/examples/ts-to-js/js-es6/plnkr.json
 delete mode 100644 aio/content/examples/ts-to-js/js-es6/src/.babelrc
 delete mode 100644 aio/content/examples/ts-to-js/js-es6/src/app/app.component.es6
 delete mode 100644 aio/content/examples/ts-to-js/js-es6/src/app/app.component.html
 delete mode 100644 aio/content/examples/ts-to-js/js-es6/src/app/app.module.es6
 delete mode 100644 aio/content/examples/ts-to-js/js-es6/src/app/confirm.component.es6
 delete mode 100644 aio/content/examples/ts-to-js/js-es6/src/app/confirm.component.html
 delete mode 100644 aio/content/examples/ts-to-js/js-es6/src/app/data.service.es6
 delete mode 100644 aio/content/examples/ts-to-js/js-es6/src/app/hero-di-inject-additional.component.es6
 delete mode 100644 aio/content/examples/ts-to-js/js-es6/src/app/hero-di-inject.component.es6
 delete mode 100644 aio/content/examples/ts-to-js/js-es6/src/app/hero-di.component.es6
 delete mode 100644 aio/content/examples/ts-to-js/js-es6/src/app/hero-host.component.es6
 delete mode 100644 aio/content/examples/ts-to-js/js-es6/src/app/hero-io.component.es6
 delete mode 100644 aio/content/examples/ts-to-js/js-es6/src/app/hero-lifecycle.component.es6
 delete mode 100644 aio/content/examples/ts-to-js/js-es6/src/app/hero-queries.component.es6
 delete mode 100644 aio/content/examples/ts-to-js/js-es6/src/app/hero-title.component.es6
 delete mode 100644 aio/content/examples/ts-to-js/js-es6/src/app/hero-title.component.html
 delete mode 100644 aio/content/examples/ts-to-js/js-es6/src/app/hero.component.es6
 delete mode 100644 aio/content/examples/ts-to-js/js-es6/src/index.html
 delete mode 100644 aio/content/examples/ts-to-js/js-es6/src/main.es6
 delete mode 100644 aio/content/examples/ts-to-js/js/example-config.json
 delete mode 100644 aio/content/examples/ts-to-js/js/plnkr.json
 delete mode 100644 aio/content/examples/ts-to-js/js/src/app/app.component.html
 delete mode 100644 aio/content/examples/ts-to-js/js/src/app/app.component.js
 delete mode 100644 aio/content/examples/ts-to-js/js/src/app/app.module.js
 delete mode 100644 aio/content/examples/ts-to-js/js/src/app/confirm.component.html
 delete mode 100644 aio/content/examples/ts-to-js/js/src/app/confirm.component.js
 delete mode 100644 aio/content/examples/ts-to-js/js/src/app/data.service.js
 delete mode 100644 aio/content/examples/ts-to-js/js/src/app/hero-di-inject-additional.component.js
 delete mode 100644 aio/content/examples/ts-to-js/js/src/app/hero-di-inject.component.js
 delete mode 100644 aio/content/examples/ts-to-js/js/src/app/hero-di.component.js
 delete mode 100644 aio/content/examples/ts-to-js/js/src/app/hero-host.component.js
 delete mode 100644 aio/content/examples/ts-to-js/js/src/app/hero-io-dsl.component.html
 delete mode 100644 aio/content/examples/ts-to-js/js/src/app/hero-io.component.html
 delete mode 100644 aio/content/examples/ts-to-js/js/src/app/hero-io.component.js
 delete mode 100644 aio/content/examples/ts-to-js/js/src/app/hero-lifecycle.component.js
 delete mode 100644 aio/content/examples/ts-to-js/js/src/app/hero-queries.component.js
 delete mode 100644 aio/content/examples/ts-to-js/js/src/app/hero-title.component.html
 delete mode 100644 aio/content/examples/ts-to-js/js/src/app/hero-title.component.js
 delete mode 100644 aio/content/examples/ts-to-js/js/src/app/hero.component.js
 delete mode 100644 aio/content/examples/ts-to-js/js/src/index.html
 delete mode 100644 aio/content/examples/ts-to-js/js/src/main.js
 delete mode 100644 aio/content/examples/ts-to-js/ts/example-config.json
 delete mode 100644 aio/content/examples/ts-to-js/ts/plnkr.json
 delete mode 100644 aio/content/examples/ts-to-js/ts/src/app/app.component.html
 delete mode 100644 aio/content/examples/ts-to-js/ts/src/app/app.component.ts
 delete mode 100644 aio/content/examples/ts-to-js/ts/src/app/app.module.ts
 delete mode 100644 aio/content/examples/ts-to-js/ts/src/app/confirm.component.html
 delete mode 100644 aio/content/examples/ts-to-js/ts/src/app/confirm.component.ts
 delete mode 100644 aio/content/examples/ts-to-js/ts/src/app/data.service.ts
 delete mode 100644 aio/content/examples/ts-to-js/ts/src/app/hero-di-inject-additional.component.ts
 delete mode 100644 aio/content/examples/ts-to-js/ts/src/app/hero-di-inject.component.ts
 delete mode 100644 aio/content/examples/ts-to-js/ts/src/app/hero-di.component.ts
 delete mode 100644 aio/content/examples/ts-to-js/ts/src/app/hero-host-meta.component.ts
 delete mode 100644 aio/content/examples/ts-to-js/ts/src/app/hero-host.component.ts
 delete mode 100644 aio/content/examples/ts-to-js/ts/src/app/hero-io.component.ts
 delete mode 100644 aio/content/examples/ts-to-js/ts/src/app/hero-lifecycle.component.ts
 delete mode 100644 aio/content/examples/ts-to-js/ts/src/app/hero-queries.component.ts
 delete mode 100644 aio/content/examples/ts-to-js/ts/src/app/hero-title.component.html
 delete mode 100644 aio/content/examples/ts-to-js/ts/src/app/hero-title.component.ts
 delete mode 100644 aio/content/examples/ts-to-js/ts/src/app/hero.component.ts
 delete mode 100644 aio/content/examples/ts-to-js/ts/src/index.html
 delete mode 100644 aio/content/examples/ts-to-js/ts/src/main.ts
 delete mode 100644 aio/content/guide/ts-to-js.md

diff --git a/aio/content/examples/.gitignore b/aio/content/examples/.gitignore
index 3a57bb712c..7833b847ed 100644
--- a/aio/content/examples/.gitignore
+++ b/aio/content/examples/.gitignore
@@ -55,10 +55,6 @@ dist/
 !testing/src/browser-test-shim.js
 !testing/karma*.js
 
-# TS to JS
-!ts-to-js/js*/**/*.js
-ts-to-js/js*/**/system*.js
-
 # webpack
 !webpack/**/config/*.js
 !webpack/**/*webpack*.js
diff --git a/aio/content/examples/ts-to-js/e2e-spec.ts b/aio/content/examples/ts-to-js/e2e-spec.ts
deleted file mode 100644
index bc67bac8f0..0000000000
--- a/aio/content/examples/ts-to-js/e2e-spec.ts
+++ /dev/null
@@ -1,77 +0,0 @@
-'use strict'; // necessary for es6 output in node
-
-import { browser, element, by } from 'protractor';
-
-describe('TypeScript to Javascript tests', function () {
-
-  beforeAll(function () {
-    browser.get('');
-  });
-
-  it('should display the basic component example', function () {
-    testTag('hero-view', 'Hero Detail: Windstorm');
-  });
-
-  it('should display the component example with lifecycle methods', function () {
-    testTag('hero-lifecycle', 'Hero: Windstorm');
-  });
-
-  it('should display component with DI example', function () {
-    testTag('hero-di', 'Hero: Windstorm');
-  });
-
-  it('should display component with DI using @Inject example', function () {
-    testTag('hero-di-inject', 'Hero: Windstorm');
-  });
-
-  it('should support optional, attribute, and query injections', function () {
-    let app = element(by.css('hero-di-inject-additional'));
-    let h1 = app.element(by.css('h1'));
-    let okMsg = app.element(by.css('p'));
-
-    expect(h1.getText()).toBe('Tour of Heroes');
-    app.element(by.buttonText('OK')).click();
-    expect(okMsg.getText()).toBe('OK!');
-  });
-
-  it('should support component with inputs and outputs', function () {
-    let app = element(by.css('hero-io'));
-    let confirmComponent = app.element(by.css('app-confirm'));
-
-    confirmComponent.element(by.buttonText('OK')).click();
-    expect(app.element(by.cssContainingText('span', 'OK clicked')).isPresent()).toBe(true);
-
-    confirmComponent.element(by.buttonText('Cancel')).click();
-    expect(app.element(by.cssContainingText('span', 'Cancel clicked')).isPresent()).toBe(true);
-  });
-
-  it('should support host bindings and host listeners', function() {
-    let app = element(by.css('hero-host'));
-    let h1 = app.element(by.css('h1'));
-
-    expect(app.getAttribute('class')).toBe('heading');
-    expect(app.getAttribute('title')).toContain('Tooltip');
-
-    h1.click();
-    expect(h1.getAttribute('class')).toBe('active');
-
-    h1.click();
-    browser.actions().doubleClick(h1.getWebElement()).perform();
-    expect(h1.getAttribute('class')).toBe('active');
-  });
-
-  it('should support content and view queries', function() {
-    let app = element(by.css('hero-queries'));
-    let windstorm = app.element(by.css('view-child:first-child'));
-
-    app.element(by.css('button')).click();
-    expect(windstorm.element(by.css('h2')).getAttribute('class')).toBe('active');
-    expect(windstorm.element(by.css('content-child')).getText()).toBe('Active');
-  });
-
-  function testTag(selector: string, expectedText: string) {
-    let component = element(by.css(selector));
-    expect(component.getText()).toBe(expectedText);
-  }
-
-});
diff --git a/aio/content/examples/ts-to-js/js-es6-decorators/example-config.json b/aio/content/examples/ts-to-js/js-es6-decorators/example-config.json
deleted file mode 100644
index 81f31aaf0d..0000000000
--- a/aio/content/examples/ts-to-js/js-es6-decorators/example-config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "build": "build:babel"
-}
diff --git a/aio/content/examples/ts-to-js/js-es6-decorators/plnkr.json b/aio/content/examples/ts-to-js/js-es6-decorators/plnkr.json
deleted file mode 100644
index 447fc5f605..0000000000
--- a/aio/content/examples/ts-to-js/js-es6-decorators/plnkr.json
+++ /dev/null
@@ -1,9 +0,0 @@
-{
-  "description": "TypeScript to JavaScript",
-  "basePath": "src/",
-  "files":[
-    "!**/*.d.ts",
-    "!**/*.js"
-  ],
-  "tags":["cookbook"]
-}
diff --git a/aio/content/examples/ts-to-js/js-es6-decorators/src/.babelrc b/aio/content/examples/ts-to-js/js-es6-decorators/src/.babelrc
deleted file mode 100644
index 3aaf507508..0000000000
--- a/aio/content/examples/ts-to-js/js-es6-decorators/src/.babelrc
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-  "presets": [
-    "es2015",
-    "angular2"
-  ]
-}
diff --git a/aio/content/examples/ts-to-js/js-es6-decorators/src/app/app.component.es6 b/aio/content/examples/ts-to-js/js-es6-decorators/src/app/app.component.es6
deleted file mode 100644
index d425788f46..0000000000
--- a/aio/content/examples/ts-to-js/js-es6-decorators/src/app/app.component.es6
+++ /dev/null
@@ -1,14 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'my-app',
-  templateUrl: './app.component.html',
-  styles: [
-    // See hero-di-inject-additional.component
-    'hero-host, hero-host-meta { border: 1px dashed black; display: block; padding: 4px;}',
-    '.heading {font-style: italic}'
-  ]
-})
-export class AppComponent {
-  title = 'ES6 JavaScript with Decorators';
-}
diff --git a/aio/content/examples/ts-to-js/js-es6-decorators/src/app/app.component.html b/aio/content/examples/ts-to-js/js-es6-decorators/src/app/app.component.html
deleted file mode 100644
index 995645073a..0000000000
--- a/aio/content/examples/ts-to-js/js-es6-decorators/src/app/app.component.html
+++ /dev/null
@@ -1,31 +0,0 @@
-<a id="toc"></a>
-<h1>{{title}}</h1>
-<a href="#class-metadata">Classes and Class Metadata</a><br>
-<a href="#io-metadata">Input and Output Decorators</a><br>
-<a href="#dependency-injection">Dependency Injection</a><br>
-<a href="#host-metadata">Host Metadata</a><br>
-<a href="#view-child-metadata">View and Child Metadata</a><br>
-
-<hr>
-<h4 id="class-metadata">Classes and Class Metadata</h4>
-<hero-view></hero-view>
-<hero-lifecycle></hero-lifecycle>
-
-<hr>
-<h4 id="io-metadata">Input and Output Metadata</h4>
-<hero-io></hero-io>
-
-<hr>
-<h4 id="dependency-injection">Dependency Injection</h4>
-<hero-di></hero-di>
-<hero-di-inject></hero-di-inject>
-<hero-di-inject-additional></hero-di-inject-additional>
-
-<hr>
-<h4 id="host-metadata">Host Metadata</h4>
-<hero-host></hero-host>
-<hero-host-meta></hero-host-meta>
-
-<hr>
-<h4 id="view-child-metadata">View and Child Metadata</h4>
-<hero-queries></hero-queries>
diff --git a/aio/content/examples/ts-to-js/js-es6-decorators/src/app/app.module.es6 b/aio/content/examples/ts-to-js/js-es6-decorators/src/app/app.module.es6
deleted file mode 100644
index 9c248a7ad3..0000000000
--- a/aio/content/examples/ts-to-js/js-es6-decorators/src/app/app.module.es6
+++ /dev/null
@@ -1,55 +0,0 @@
-import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-
-import { AppComponent } from './app.component';
-import { ConfirmComponent } from './confirm.component';
-// #docregion appimport
-import { HeroComponent } from './hero.component';
-// #enddocregion appimport
-import { HeroComponent as HeroDIComponent } from './hero-di.component';
-import { HeroComponent as HeroDIInjectComponent } from './hero-di-inject.component';
-import { HeroComponent as HeroDIInjectAdditionalComponent } from './hero-di-inject-additional.component';
-import { HeroHostComponent } from './hero-host.component';
-import { HeroHostMetaComponent } from './hero-host-meta.component';
-import { HeroIOComponent } from './hero-io.component';
-import { HeroComponent as HeroLifecycleComponent } from './hero-lifecycle.component';
-import { HeroQueriesComponent, ViewChildComponent, ContentChildComponent } from './hero-queries.component';
-import { HeroTitleComponent } from './hero-title.component';
-
-import { DataService } from './data.service';
-
-@NgModule({
-  imports: [
-    BrowserModule
-  ],
-  declarations: [
-    AppComponent,
-    ConfirmComponent,
-    HeroComponent,
-    HeroDIComponent,
-    HeroDIInjectComponent,
-    HeroDIInjectAdditionalComponent,
-    HeroHostComponent, HeroHostMetaComponent,
-    HeroIOComponent,
-    HeroLifecycleComponent,
-    HeroQueriesComponent, ViewChildComponent, ContentChildComponent,
-    HeroTitleComponent
-  ],
-  providers: [
-    DataService,
-    { provide: 'heroName', useValue: 'Windstorm' }
-  ],
-  bootstrap: [ AppComponent ],
-
-  // schemas: [ NO_ERRORS_SCHEMA ] // helpful for debugging
-})
-export class AppModule { }
-
-/* tslint:disable no-unused-variable */
-// #docregion ng2import
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import {
-  LocationStrategy,
-  HashLocationStrategy
-} from '@angular/common';
-// #enddocregion ng2import
diff --git a/aio/content/examples/ts-to-js/js-es6-decorators/src/app/confirm.component.es6 b/aio/content/examples/ts-to-js/js-es6-decorators/src/app/confirm.component.es6
deleted file mode 100644
index f01fa4de40..0000000000
--- a/aio/content/examples/ts-to-js/js-es6-decorators/src/app/confirm.component.es6
+++ /dev/null
@@ -1,21 +0,0 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
-
-// #docregion
-@Component({
-  selector: 'app-confirm',
-  templateUrl: './confirm.component.html'
-})
-export class ConfirmComponent {
-  @Input() okMsg = '';
-  @Input('cancelMsg') notOkMsg = '';
-  @Output() ok = new EventEmitter();
-  @Output('cancel') notOk = new EventEmitter();
-
-  onOkClick() {
-    this.ok.emit(true);
-  }
-  onNotOkClick() {
-    this.notOk.emit(true);
-  }
-}
-// #enddocregion
diff --git a/aio/content/examples/ts-to-js/js-es6-decorators/src/app/confirm.component.html b/aio/content/examples/ts-to-js/js-es6-decorators/src/app/confirm.component.html
deleted file mode 100644
index 45275d218a..0000000000
--- a/aio/content/examples/ts-to-js/js-es6-decorators/src/app/confirm.component.html
+++ /dev/null
@@ -1,6 +0,0 @@
-<button (click)="onOkClick()">
-  {{okMsg}}
-</button>
-<button (click)="onNotOkClick()">
-  {{notOkMsg}}
-</button>
diff --git a/aio/content/examples/ts-to-js/js-es6-decorators/src/app/data.service.es6 b/aio/content/examples/ts-to-js/js-es6-decorators/src/app/data.service.es6
deleted file mode 100644
index cd7f9e1aae..0000000000
--- a/aio/content/examples/ts-to-js/js-es6-decorators/src/app/data.service.es6
+++ /dev/null
@@ -1,10 +0,0 @@
-import { Injectable } from '@angular/core';
-
-@Injectable()
-export class DataService {
-  constructor() { }
-
-  getHeroName() {
-    return 'Windstorm';
-  }
-}
diff --git a/aio/content/examples/ts-to-js/js-es6-decorators/src/app/hero-di-inject-additional.component.es6 b/aio/content/examples/ts-to-js/js-es6-decorators/src/app/hero-di-inject-additional.component.es6
deleted file mode 100644
index ec460a9dbc..0000000000
--- a/aio/content/examples/ts-to-js/js-es6-decorators/src/app/hero-di-inject-additional.component.es6
+++ /dev/null
@@ -1,7 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'hero-di-inject-additional',
-  template: `<hero-title title="Tour of Heroes"></hero-title>`
-})
-export class HeroComponent { }
diff --git a/aio/content/examples/ts-to-js/js-es6-decorators/src/app/hero-di-inject.component.es6 b/aio/content/examples/ts-to-js/js-es6-decorators/src/app/hero-di-inject.component.es6
deleted file mode 100644
index 94b42f956a..0000000000
--- a/aio/content/examples/ts-to-js/js-es6-decorators/src/app/hero-di-inject.component.es6
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Component, Inject } from '@angular/core';
-
-// #docregion
-@Component({
-  selector: 'hero-di-inject',
-  template: `<h1>Hero: {{name}}</h1>`
-})
-export class HeroComponent {
-  constructor(@Inject('heroName') name) {
-    this.name = name;
-  }
-}
-// #enddocregion
diff --git a/aio/content/examples/ts-to-js/js-es6-decorators/src/app/hero-di.component.es6 b/aio/content/examples/ts-to-js/js-es6-decorators/src/app/hero-di.component.es6
deleted file mode 100644
index 3a17abd281..0000000000
--- a/aio/content/examples/ts-to-js/js-es6-decorators/src/app/hero-di.component.es6
+++ /dev/null
@@ -1,15 +0,0 @@
-// #docregion
-import { Component }   from '@angular/core';
-import { DataService } from './data.service';
-
-@Component({
-  selector: 'hero-di',
-  template: `<h1>Hero: {{name}}</h1>`
-})
-export class HeroComponent {
-  name = '';
-  constructor(dataService: DataService) {
-    this.name = dataService.getHeroName();
-  }
-}
-// #enddocregion
diff --git a/aio/content/examples/ts-to-js/js-es6-decorators/src/app/hero-host-meta.component.es6 b/aio/content/examples/ts-to-js/js-es6-decorators/src/app/hero-host-meta.component.es6
deleted file mode 100644
index fefe4a5470..0000000000
--- a/aio/content/examples/ts-to-js/js-es6-decorators/src/app/hero-host-meta.component.es6
+++ /dev/null
@@ -1,44 +0,0 @@
-import { Component } from '@angular/core';
-
-// #docregion
-@Component({
-  selector: 'hero-host-meta',
-  template: `
-    <h1 [class.active]="active">Hero Host in Metadata</h1>
-    <div>Heading clicks: {{clicks}}</div>
-  `,
-  host: {
-    // HostBindings to the <hero-host-meta> element
-    '[title]': 'title',
-    '[class.heading]': 'headingClass',
-
-    // HostListeners on the entire <hero-host-meta> element
-    '(click)': 'clicked()',
-    '(mouseenter)': 'enter($event)',
-    '(mouseleave)': 'leave($event)'
-  },
-  // Styles within (but excluding) the <hero-host-meta> element
-  styles: ['.active {background-color: coral;}']
-})
-export class HeroHostMetaComponent {
-  title = 'Hero Host in Metadata Tooltip';
-  headingClass = true;
-
-  active = false;
-  clicks = 0;
-
-  clicked() {
-    this.clicks += 1;
-  }
-
-  enter(event: Event) {
-    this.active = true;
-    this.headingClass = false;
-  }
-
-  leave(event: Event) {
-    this.active = false;
-    this.headingClass = true;
-  }
-}
-// #enddocregion
diff --git a/aio/content/examples/ts-to-js/js-es6-decorators/src/app/hero-host.component.es6 b/aio/content/examples/ts-to-js/js-es6-decorators/src/app/hero-host.component.es6
deleted file mode 100644
index e8d72233c8..0000000000
--- a/aio/content/examples/ts-to-js/js-es6-decorators/src/app/hero-host.component.es6
+++ /dev/null
@@ -1,39 +0,0 @@
-import { Component, HostBinding, HostListener } from '@angular/core';
-
-// #docregion
-@Component({
-  selector: 'hero-host',
-  template: `
-    <h1 [class.active]="active">Hero Host in Decorators</h1>
-    <div>Heading clicks: {{clicks}}</div>
-  `,
-  // Styles within (but excluding) the <hero-host> element
-  styles: ['.active {background-color: yellow;}']
-})
-export class HeroHostComponent {
-  // HostBindings to the <hero-host> element
-  @HostBinding() title = 'Hero Host in Decorators Tooltip';
-  @HostBinding('class.heading') headingClass = true;
-
-  active = false;
-  clicks = 0;
-
-  // HostListeners on the entire <hero-host> element
-  @HostListener('click')
-  clicked() {
-    this.clicks += 1;
-  }
-
-  @HostListener('mouseenter', ['$event'])
-  enter(event: Event) {
-    this.active = true;
-    this.headingClass = false;
-  }
-
-  @HostListener('mouseleave', ['$event'])
-  leave(event: Event) {
-    this.active = false;
-    this.headingClass = true;
-  }
-}
-// #enddocregion
diff --git a/aio/content/examples/ts-to-js/js-es6-decorators/src/app/hero-io.component.es6 b/aio/content/examples/ts-to-js/js-es6-decorators/src/app/hero-io.component.es6
deleted file mode 100644
index 4b36411e78..0000000000
--- a/aio/content/examples/ts-to-js/js-es6-decorators/src/app/hero-io.component.es6
+++ /dev/null
@@ -1,26 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'hero-io',
-  template: `
-    <app-confirm [okMsg]="'OK'"
-                 [cancelMsg]="'Cancel'"
-                 (ok)="onOk()"
-                 (cancel)="onCancel()">
-    </app-confirm>
-    <span *ngIf="okClicked">OK clicked</span>
-    <span *ngIf="cancelClicked">Cancel clicked</span>
-  `
-})
-export class HeroIOComponent {
-  okClicked     = false;
-  cancelClicked = false;
-
-  onOk() {
-    this.okClicked = true;
-  }
-
-  onCancel() {
-    this.cancelClicked = true;
-  }
-}
diff --git a/aio/content/examples/ts-to-js/js-es6-decorators/src/app/hero-lifecycle.component.es6 b/aio/content/examples/ts-to-js/js-es6-decorators/src/app/hero-lifecycle.component.es6
deleted file mode 100644
index 2539266597..0000000000
--- a/aio/content/examples/ts-to-js/js-es6-decorators/src/app/hero-lifecycle.component.es6
+++ /dev/null
@@ -1,14 +0,0 @@
-// #docregion
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'hero-lifecycle',
-  template: `<h1>Hero: {{name}}</h1>`
-})
-export class HeroComponent {
-  name = '';
-  ngOnInit() {
-    // todo: fetch from server async
-    setTimeout(() => this.name = 'Windstorm', 0);
-  }
-}
diff --git a/aio/content/examples/ts-to-js/js-es6-decorators/src/app/hero-queries.component.es6 b/aio/content/examples/ts-to-js/js-es6-decorators/src/app/hero-queries.component.es6
deleted file mode 100644
index fced43d4d7..0000000000
--- a/aio/content/examples/ts-to-js/js-es6-decorators/src/app/hero-queries.component.es6
+++ /dev/null
@@ -1,81 +0,0 @@
-import {
-  Component,
-  ContentChild,
-  Input,
-  QueryList,
-  ViewChildren
-} from '@angular/core';
-
-@Component({
-  selector: 'content-child',
-  template: `
-  <span class="content-child" *ngIf="active">
-    Active
-  </span>`
-})
-export class ContentChildComponent {
-  active = false;
-
-  activate() {
-    this.active = true;
-  }
-}
-
-////////////////////
-
-// #docregion content
-@Component({
-  selector: 'view-child',
-  template: `
-  <h2 [class.active]=active>
-    {{hero.name}}
-    <ng-content></ng-content>
-  </h2>`,
-  styles: ['.active {font-weight: bold; background-color: skyblue;}']
-})
-export class ViewChildComponent {
-  @Input() hero;
-  active = false;
-
-  @ContentChild(ContentChildComponent) content;
-
-  activate() {
-    this.active = !this.active;
-    this.content.activate();
-  }
-}
-// #enddocregion content
-
-////////////////////
-
-// #docregion view
-@Component({
-  selector: 'hero-queries',
-  template: `
-    <view-child *ngFor="let hero of heroData" [hero]="hero">
-      <content-child></content-child>
-    </view-child>
-    <button (click)="activate()">{{buttonLabel}} All</button>
-  `
-})
-export class HeroQueriesComponent {
-  active = false;
-  heroData = [
-    {id: 1, name: 'Windstorm'},
-    {id: 2, name: 'LaughingGas'}
-  ];
-
-  @ViewChildren(ViewChildComponent) views;
-
-  activate() {
-    this.active = !this.active;
-    this.views.forEach(
-      view => view.activate()
-    );
-  }
-
-  get buttonLabel() {
-    return this.active ? 'Deactivate' : 'Activate';
-  }
-}
-// #enddocregion view
diff --git a/aio/content/examples/ts-to-js/js-es6-decorators/src/app/hero-title.component.es6 b/aio/content/examples/ts-to-js/js-es6-decorators/src/app/hero-title.component.es6
deleted file mode 100644
index 04c14a9631..0000000000
--- a/aio/content/examples/ts-to-js/js-es6-decorators/src/app/hero-title.component.es6
+++ /dev/null
@@ -1,25 +0,0 @@
-import { Attribute, Component, Inject, Optional } from '@angular/core';
-
-// #docregion
-// #docregion templateUrl
-@Component({
-  selector: 'hero-title',
-  templateUrl: './hero-title.component.html'
-})
-// #enddocregion templateUrl
-export class HeroTitleComponent {
-  msg = '';
-  constructor(
-    @Inject('titlePrefix') @Optional() titlePrefix,
-    @Attribute('title') title
-  ) {
-    this.titlePrefix = titlePrefix;
-    this.title = title;
-  }
-
-  ok() {
-    this.msg = 'OK!';
-  }
-}
-// #enddocregion
-
diff --git a/aio/content/examples/ts-to-js/js-es6-decorators/src/app/hero-title.component.html b/aio/content/examples/ts-to-js/js-es6-decorators/src/app/hero-title.component.html
deleted file mode 100644
index 164683cb7c..0000000000
--- a/aio/content/examples/ts-to-js/js-es6-decorators/src/app/hero-title.component.html
+++ /dev/null
@@ -1,4 +0,0 @@
-<!-- #docregion -->
-<h1>{{titlePrefix}} {{title}}</h1>
-<button (click)="ok()">OK</button>
-<p>{{ msg }}</p>
diff --git a/aio/content/examples/ts-to-js/js-es6-decorators/src/app/hero.component.es6 b/aio/content/examples/ts-to-js/js-es6-decorators/src/app/hero.component.es6
deleted file mode 100644
index 2976ec605e..0000000000
--- a/aio/content/examples/ts-to-js/js-es6-decorators/src/app/hero.component.es6
+++ /dev/null
@@ -1,15 +0,0 @@
-// #docregion
-// #docregion metadata
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'hero-view',
-  template: '<h1>{{title}}: {{getName()}}</h1>'
-})
-// #docregion appexport, class
-export class HeroComponent {
-  title = 'Hero Detail';
-  getName() {return 'Windstorm'; }
-}
-// #enddocregion appexport, class
-// #enddocregion metadata
diff --git a/aio/content/examples/ts-to-js/js-es6-decorators/src/index.html b/aio/content/examples/ts-to-js/js-es6-decorators/src/index.html
deleted file mode 100644
index 2a94db38cc..0000000000
--- a/aio/content/examples/ts-to-js/js-es6-decorators/src/index.html
+++ /dev/null
@@ -1,26 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <base href="/">
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="styles.css">
-    <title>TypeScript to JavaScript</title>
-
-    <!-- Polyfill(s) for older browsers -->
-    <script src="node_modules/core-js/client/shim.min.js"></script>
-
-    <script src="node_modules/zone.js/dist/zone.js"></script>
-    <script src="node_modules/systemjs/dist/system.src.js"></script>
-
-    <script src="systemjs.config.js"></script>
-    <script>
-      System.import('main.js').catch(function(err){ console.error(err); });
-    </script>
-  </head>
-
-  <body>
-    <my-app>Loading...</my-app>
-  </body>
-
-</html>
diff --git a/aio/content/examples/ts-to-js/js-es6-decorators/src/main.es6 b/aio/content/examples/ts-to-js/js-es6-decorators/src/main.es6
deleted file mode 100644
index f22933ba8e..0000000000
--- a/aio/content/examples/ts-to-js/js-es6-decorators/src/main.es6
+++ /dev/null
@@ -1,4 +0,0 @@
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { AppModule } from './app/app.module';
-
-platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/aio/content/examples/ts-to-js/js-es6/example-config.json b/aio/content/examples/ts-to-js/js-es6/example-config.json
deleted file mode 100644
index 81f31aaf0d..0000000000
--- a/aio/content/examples/ts-to-js/js-es6/example-config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "build": "build:babel"
-}
diff --git a/aio/content/examples/ts-to-js/js-es6/plnkr.json b/aio/content/examples/ts-to-js/js-es6/plnkr.json
deleted file mode 100644
index 447fc5f605..0000000000
--- a/aio/content/examples/ts-to-js/js-es6/plnkr.json
+++ /dev/null
@@ -1,9 +0,0 @@
-{
-  "description": "TypeScript to JavaScript",
-  "basePath": "src/",
-  "files":[
-    "!**/*.d.ts",
-    "!**/*.js"
-  ],
-  "tags":["cookbook"]
-}
diff --git a/aio/content/examples/ts-to-js/js-es6/src/.babelrc b/aio/content/examples/ts-to-js/js-es6/src/.babelrc
deleted file mode 100644
index 3c078e9f99..0000000000
--- a/aio/content/examples/ts-to-js/js-es6/src/.babelrc
+++ /dev/null
@@ -1,5 +0,0 @@
-{
-  "presets": [
-    "es2015"
-  ]
-}
diff --git a/aio/content/examples/ts-to-js/js-es6/src/app/app.component.es6 b/aio/content/examples/ts-to-js/js-es6/src/app/app.component.es6
deleted file mode 100644
index 6079f7f246..0000000000
--- a/aio/content/examples/ts-to-js/js-es6/src/app/app.component.es6
+++ /dev/null
@@ -1,19 +0,0 @@
-import { Component } from '@angular/core';
-
-export class AppComponent {
-  constructor() {
-    this.title = 'Plain ES6 JavaScript';
-  }
-}
-
-AppComponent.annotations = [
-  new Component({
-    selector: 'my-app',
-    templateUrl: './app.component.html',
-    styles: [
-      // See hero-di-inject-additional.component
-      'hero-host { border: 1px dashed black; display: block; padding: 4px;}',
-      '.heading {font-style: italic}'
-    ]
-  })
-];
diff --git a/aio/content/examples/ts-to-js/js-es6/src/app/app.component.html b/aio/content/examples/ts-to-js/js-es6/src/app/app.component.html
deleted file mode 100644
index 52b9b4580e..0000000000
--- a/aio/content/examples/ts-to-js/js-es6/src/app/app.component.html
+++ /dev/null
@@ -1,30 +0,0 @@
-<a id="toc"></a>
-<h1>{{title}}</h1>
-<a href="#class-metadata">Classes and Class Metadata</a><br>
-<a href="#io-metadata">Input and Output Metadata</a><br>
-<a href="#dependency-injection">Dependency Injection</a><br>
-<a href="#host-metadata">Host Metadata</a><br>
-<a href="#view-child-metadata">View and Child Metadata</a><br>
-
-<hr>
-<h4 id="class-metadata">Classes and Class Metadata</h4>
-<hero-view></hero-view>
-<hero-lifecycle></hero-lifecycle>
-
-<hr>
-<h4 id="io-metadata">Input and Output Metadata</h4>
-<hero-io></hero-io>
-
-<hr>
-<h4 id="dependency-injection">Dependency Injection</h4>
-<hero-di></hero-di>
-<hero-di-inject></hero-di-inject>
-<hero-di-inject-additional></hero-di-inject-additional>
-
-<hr>
-<h4 id="host-metadata">Host Metadata</h4>
-<hero-host></hero-host>
-
-<hr>
-<h4 id="view-child-metadata">View and Child Metadata</h4>
-<hero-queries></hero-queries>
diff --git a/aio/content/examples/ts-to-js/js-es6/src/app/app.module.es6 b/aio/content/examples/ts-to-js/js-es6/src/app/app.module.es6
deleted file mode 100644
index f31141e78f..0000000000
--- a/aio/content/examples/ts-to-js/js-es6/src/app/app.module.es6
+++ /dev/null
@@ -1,56 +0,0 @@
-import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-
-import { AppComponent } from './app.component';
-import { ConfirmComponent } from './confirm.component';
-// #docregion appimport
-import { HeroComponent } from './hero.component';
-
-// #enddocregion appimport
-import { HeroComponent as HeroDIComponent } from './hero-di.component';
-import { HeroComponent as HeroDIInjectComponent } from './hero-di-inject.component';
-import { HeroComponent as HeroDIInjectAdditionalComponent } from './hero-di-inject-additional.component';
-import { HeroHostComponent } from './hero-host.component';
-import { HeroIOComponent } from './hero-io.component';
-import { HeroComponent as HeroLifecycleComponent } from './hero-lifecycle.component';
-import { HeroQueriesComponent, ViewChildComponent, ContentChildComponent } from './hero-queries.component';
-import { HeroTitleComponent } from './hero-title.component';
-
-import { DataService } from './data.service';
-
-export class AppModule { }
-
-AppModule.annotations = [
-  new NgModule({
-    imports: [ BrowserModule],
-    declarations: [
-      AppComponent,
-      ConfirmComponent,
-      HeroComponent,
-      HeroDIComponent,
-      HeroDIInjectComponent,
-      HeroDIInjectAdditionalComponent,
-      HeroHostComponent,
-      HeroIOComponent,
-      HeroLifecycleComponent,
-      HeroQueriesComponent, ViewChildComponent, ContentChildComponent,
-      HeroTitleComponent
-    ],
-    providers: [
-      DataService,
-      { provide: 'heroName', useValue: 'Windstorm' }
-    ],
-    bootstrap: [ AppComponent ],
-
-    // schemas: [ NO_ERRORS_SCHEMA ] // helpful for debugging
-  })
-]
-
-/* tslint:disable no-unused-variable */
-// #docregion ng2import
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import {
-  LocationStrategy,
-  HashLocationStrategy
-} from '@angular/common';
-// #enddocregion ng2import
diff --git a/aio/content/examples/ts-to-js/js-es6/src/app/confirm.component.es6 b/aio/content/examples/ts-to-js/js-es6/src/app/confirm.component.es6
deleted file mode 100644
index 296268dda4..0000000000
--- a/aio/content/examples/ts-to-js/js-es6/src/app/confirm.component.es6
+++ /dev/null
@@ -1,31 +0,0 @@
-import { Component, EventEmitter } from '@angular/core';
-
-// #docregion
-export class ConfirmComponent {
-  constructor(){
-    this.ok    = new EventEmitter();
-    this.notOk = new EventEmitter();
-  }
-  onOkClick() {
-    this.ok.emit(true);
-  }
-  onNotOkClick() {
-    this.notOk.emit(true);
-  }
-}
-
-ConfirmComponent.annotations = [
-  new Component({
-    selector: 'app-confirm',
-    templateUrl: './confirm.component.html',
-    inputs: [
-      'okMsg',
-      'notOkMsg: cancelMsg'
-    ],
-    outputs: [
-      'ok',
-      'notOk: cancel'
-    ]
-  })
-];
-// #enddocregion
diff --git a/aio/content/examples/ts-to-js/js-es6/src/app/confirm.component.html b/aio/content/examples/ts-to-js/js-es6/src/app/confirm.component.html
deleted file mode 100644
index 45275d218a..0000000000
--- a/aio/content/examples/ts-to-js/js-es6/src/app/confirm.component.html
+++ /dev/null
@@ -1,6 +0,0 @@
-<button (click)="onOkClick()">
-  {{okMsg}}
-</button>
-<button (click)="onNotOkClick()">
-  {{notOkMsg}}
-</button>
diff --git a/aio/content/examples/ts-to-js/js-es6/src/app/data.service.es6 b/aio/content/examples/ts-to-js/js-es6/src/app/data.service.es6
deleted file mode 100644
index de023ce5a0..0000000000
--- a/aio/content/examples/ts-to-js/js-es6/src/app/data.service.es6
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Injectable } from '@angular/core';
-
-export class DataService {
-  constructor() {
-  }
-  getHeroName() {
-    return 'Windstorm';
-  }
-}
-
-DataService.annotations = [
-  new Injectable()
-];
diff --git a/aio/content/examples/ts-to-js/js-es6/src/app/hero-di-inject-additional.component.es6 b/aio/content/examples/ts-to-js/js-es6/src/app/hero-di-inject-additional.component.es6
deleted file mode 100644
index 5eb9bab815..0000000000
--- a/aio/content/examples/ts-to-js/js-es6/src/app/hero-di-inject-additional.component.es6
+++ /dev/null
@@ -1,10 +0,0 @@
-import { Component } from '@angular/core';
-
-export class HeroComponent { }
-
-HeroComponent.annotations = [
-  new Component({
-    selector: 'hero-di-inject-additional',
-    template: `<hero-title title="Tour of Heroes"></hero-title>`
-  })
-];
diff --git a/aio/content/examples/ts-to-js/js-es6/src/app/hero-di-inject.component.es6 b/aio/content/examples/ts-to-js/js-es6/src/app/hero-di-inject.component.es6
deleted file mode 100644
index 2f95a0b981..0000000000
--- a/aio/content/examples/ts-to-js/js-es6/src/app/hero-di-inject.component.es6
+++ /dev/null
@@ -1,20 +0,0 @@
-import { Component, Inject } from '@angular/core';
-
-// #docregion
-export class HeroComponent {
-  constructor(name) {
-    this.name = name;
-  }
-}
-
-HeroComponent.annotations = [
-  new Component({
-    selector: 'hero-di-inject',
-    template: `<h1>Hero: {{name}}</h1>`
-  })
-];
-
-HeroComponent.parameters = [
-  [new Inject('heroName')]
-];
-// #enddocregion
diff --git a/aio/content/examples/ts-to-js/js-es6/src/app/hero-di.component.es6 b/aio/content/examples/ts-to-js/js-es6/src/app/hero-di.component.es6
deleted file mode 100644
index a18b1ba777..0000000000
--- a/aio/content/examples/ts-to-js/js-es6/src/app/hero-di.component.es6
+++ /dev/null
@@ -1,21 +0,0 @@
-// #docregion
-import { Component }   from '@angular/core';
-import { DataService } from './data.service';
-
-export class HeroComponent {
-  constructor(dataService) {
-    this.name = dataService.getHeroName();
-  }
-}
-
-HeroComponent.annotations = [
-  new Component({
-    selector: 'hero-di',
-    template: `<h1>Hero: {{name}}</h1>`
-  })
-];
-
-HeroComponent.parameters = [
-  [DataService]
-];
-// #enddocregion
diff --git a/aio/content/examples/ts-to-js/js-es6/src/app/hero-host.component.es6 b/aio/content/examples/ts-to-js/js-es6/src/app/hero-host.component.es6
deleted file mode 100644
index b06701ee8d..0000000000
--- a/aio/content/examples/ts-to-js/js-es6/src/app/hero-host.component.es6
+++ /dev/null
@@ -1,50 +0,0 @@
-import { Component } from '@angular/core';
-
-// #docregion
-export class HeroHostComponent {
-  constructor() {
-    this.active = false;
-    this.clicks = 0;
-    this.headingClass = true;
-    this.title = 'Hero Host Tooltip';
-  }
-
-  clicked() {
-    this.clicks += 1;
-  }
-
-  enter(event) {
-    this.active = true;
-    this.headingClass = false;
-  }
-
-  leave(event) {
-    this.active = false;
-    this.headingClass = true;
-  }
-}
-
-// #docregion metadata
-HeroHostComponent.annotations = [
-  new Component({
-    selector: 'hero-host',
-    template: `
-      <h1 [class.active]="active">Hero Host</h1>
-      <div>Heading clicks: {{clicks}}</div>
-    `,
-    host: {
-      // HostBindings to the <hero-host> element
-      '[title]': 'title',
-      '[class.heading]': 'headingClass',
-      '(click)': 'clicked()',
-
-      // HostListeners on the entire <hero-host> element
-      '(mouseenter)': 'enter($event)',
-      '(mouseleave)': 'leave($event)'
-    },
-    // Styles within (but excluding) the <hero-host> element
-    styles: ['.active {background-color: yellow;}']
-  })
-];
-// #enddocregion metadata
-// #enddocregion
diff --git a/aio/content/examples/ts-to-js/js-es6/src/app/hero-io.component.es6 b/aio/content/examples/ts-to-js/js-es6/src/app/hero-io.component.es6
deleted file mode 100644
index 0dc8c08f2d..0000000000
--- a/aio/content/examples/ts-to-js/js-es6/src/app/hero-io.component.es6
+++ /dev/null
@@ -1,31 +0,0 @@
-import { Component } from '@angular/core';
-
-export class HeroIOComponent {
-  constructor() {
-    this.okClicked     = false;
-    this.cancelClicked = false;
-  }
-
-  onOk() {
-    this.okClicked = true;
-  }
-
-  onCancel() {
-    this.cancelClicked = true;
-  }
-}
-
-HeroIOComponent.annotations = [
-  new Component({
-    selector: 'hero-io',
-    template: `
-      <app-confirm [okMsg]="'OK'"
-                   [cancelMsg]="'Cancel'"
-                   (ok)="onOk()"
-                   (cancel)="onCancel()">
-      </app-confirm>
-      <span *ngIf="okClicked">OK clicked</span>
-      <span *ngIf="cancelClicked">Cancel clicked</span>
-    `
-  })
-];
diff --git a/aio/content/examples/ts-to-js/js-es6/src/app/hero-lifecycle.component.es6 b/aio/content/examples/ts-to-js/js-es6/src/app/hero-lifecycle.component.es6
deleted file mode 100644
index b394ff59aa..0000000000
--- a/aio/content/examples/ts-to-js/js-es6/src/app/hero-lifecycle.component.es6
+++ /dev/null
@@ -1,15 +0,0 @@
-// #docregion
-import { Component } from '@angular/core';
-export class HeroComponent {
-  ngOnInit() {
-    // todo: fetch from server async
-    setTimeout(() => this.name = 'Windstorm', 0);
-  }
-}
-
-HeroComponent.annotations = [
-  new Component({
-    selector: 'hero-lifecycle',
-    template: `<h1>Hero: {{name}}</h1>`
-  })
-];
diff --git a/aio/content/examples/ts-to-js/js-es6/src/app/hero-queries.component.es6 b/aio/content/examples/ts-to-js/js-es6/src/app/hero-queries.component.es6
deleted file mode 100644
index bf3b914406..0000000000
--- a/aio/content/examples/ts-to-js/js-es6/src/app/hero-queries.component.es6
+++ /dev/null
@@ -1,97 +0,0 @@
-import {
-  Component,
-  ContentChild,
-  Input,
-  QueryList,
-  ViewChildren
-} from '@angular/core';
-
-export class ContentChildComponent {
-  constructor() {
-    this.active = false;
-  }
-
-  activate() {
-    this.active = !this.active;
-  }
-}
-
-ContentChildComponent.annotations = [
-  new Component({
-    selector: 'content-child',
-    template: `
-    <span class="content-child" *ngIf="active">
-      Active
-    </span>`
-  })
-];
-
-////////////////////
-
-// #docregion content
-export class ViewChildComponent {
-  constructor() {
-    this.active = false;
-  }
-
-  activate() {
-    this.active = !this.active;
-    this.content.activate();
-  }
-}
-
-ViewChildComponent.annotations = [
-  new Component({
-    selector: 'view-child',
-    template: `<h2 [class.active]=active>
-      {{hero.name}}
-      <ng-content></ng-content>
-    </h2>`,
-    styles: ['.active {font-weight: bold; background-color: skyblue;}'],
-    inputs: ['hero'],
-    queries: {
-      content: new ContentChild(ContentChildComponent)
-    }
-  })
-];
-// #enddocregion content
-
-////////////////////
-
-// #docregion view
-export class HeroQueriesComponent {
-  constructor(){
-    this.active = false;
-    this.heroData = [
-      {id: 1, name: 'Windstorm'},
-      {id: 2, name: 'LaughingGas'}
-    ];
-  }
-
-  activate() {
-    this.active = !this.active;
-    this.views.forEach(
-      view => view.activate()
-    );
-  }
-
-  get buttonLabel() {
-    return this.active ? 'Deactivate' : 'Activate';
-  }
-}
-
-HeroQueriesComponent.annotations = [
-  new Component({
-    selector: 'hero-queries',
-    template: `
-      <view-child *ngFor="let hero of heroData" [hero]="hero">
-        <content-child></content-child>
-      </view-child>
-      <button (click)="activate()">{{buttonLabel}} All</button>
-    `,
-    queries: {
-      views: new ViewChildren(ViewChildComponent)
-    }
-  })
-];
-// #enddocregion view
diff --git a/aio/content/examples/ts-to-js/js-es6/src/app/hero-title.component.es6 b/aio/content/examples/ts-to-js/js-es6/src/app/hero-title.component.es6
deleted file mode 100644
index 4b89dfba83..0000000000
--- a/aio/content/examples/ts-to-js/js-es6/src/app/hero-title.component.es6
+++ /dev/null
@@ -1,28 +0,0 @@
-import { Attribute, Component, Inject, Optional } from '@angular/core';
-
-// #docregion
-export class HeroTitleComponent {
-  constructor(titlePrefix, title) {
-    this.titlePrefix = titlePrefix;
-    this.title  = title;
-    this.msg = '';
-  }
-
-  ok() {
-    this.msg = 'OK!';
-  }
-}
-
-// #docregion templateUrl
-HeroTitleComponent.annotations = [
-  new Component({
-    selector: 'hero-title',
-    templateUrl: './hero-title.component.html'
-  })
-];
-// #enddocregion templateUrl
-
-HeroTitleComponent.parameters = [
-  [new Optional(), new Inject('titlePrefix')],
-  [new Attribute('title')]
-];
diff --git a/aio/content/examples/ts-to-js/js-es6/src/app/hero-title.component.html b/aio/content/examples/ts-to-js/js-es6/src/app/hero-title.component.html
deleted file mode 100644
index 164683cb7c..0000000000
--- a/aio/content/examples/ts-to-js/js-es6/src/app/hero-title.component.html
+++ /dev/null
@@ -1,4 +0,0 @@
-<!-- #docregion -->
-<h1>{{titlePrefix}} {{title}}</h1>
-<button (click)="ok()">OK</button>
-<p>{{ msg }}</p>
diff --git a/aio/content/examples/ts-to-js/js-es6/src/app/hero.component.es6 b/aio/content/examples/ts-to-js/js-es6/src/app/hero.component.es6
deleted file mode 100644
index 350f946460..0000000000
--- a/aio/content/examples/ts-to-js/js-es6/src/app/hero.component.es6
+++ /dev/null
@@ -1,21 +0,0 @@
-// #docplaster
-// #docregion
-// #docregion metadata
-import { Component } from '@angular/core';
-
-// #docregion appexport, class
-export class HeroComponent {
-  constructor() {
-    this.title = 'Hero Detail';
-  }
-  getName() {return 'Windstorm'; }
-}
-// #enddocregion appexport, class
-
-HeroComponent.annotations = [
-  new Component({
-    selector: 'hero-view',
-    template: '<h1>{{title}}: {{getName()}}</h1>'
-  })
-];
-// #enddocregion metadata
diff --git a/aio/content/examples/ts-to-js/js-es6/src/index.html b/aio/content/examples/ts-to-js/js-es6/src/index.html
deleted file mode 100644
index 2a94db38cc..0000000000
--- a/aio/content/examples/ts-to-js/js-es6/src/index.html
+++ /dev/null
@@ -1,26 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <base href="/">
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="styles.css">
-    <title>TypeScript to JavaScript</title>
-
-    <!-- Polyfill(s) for older browsers -->
-    <script src="node_modules/core-js/client/shim.min.js"></script>
-
-    <script src="node_modules/zone.js/dist/zone.js"></script>
-    <script src="node_modules/systemjs/dist/system.src.js"></script>
-
-    <script src="systemjs.config.js"></script>
-    <script>
-      System.import('main.js').catch(function(err){ console.error(err); });
-    </script>
-  </head>
-
-  <body>
-    <my-app>Loading...</my-app>
-  </body>
-
-</html>
diff --git a/aio/content/examples/ts-to-js/js-es6/src/main.es6 b/aio/content/examples/ts-to-js/js-es6/src/main.es6
deleted file mode 100644
index f22933ba8e..0000000000
--- a/aio/content/examples/ts-to-js/js-es6/src/main.es6
+++ /dev/null
@@ -1,4 +0,0 @@
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { AppModule } from './app/app.module';
-
-platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/aio/content/examples/ts-to-js/js/example-config.json b/aio/content/examples/ts-to-js/js/example-config.json
deleted file mode 100644
index 81f31aaf0d..0000000000
--- a/aio/content/examples/ts-to-js/js/example-config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "build": "build:babel"
-}
diff --git a/aio/content/examples/ts-to-js/js/plnkr.json b/aio/content/examples/ts-to-js/js/plnkr.json
deleted file mode 100644
index 5e1eb188be..0000000000
--- a/aio/content/examples/ts-to-js/js/plnkr.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "description": "TypeScript to JavaScript",
-  "basePath": "src/",
-  "files":[
-    "!**/karma*.*"
-  ],
-  "tags":["cookbook"]
-}
diff --git a/aio/content/examples/ts-to-js/js/src/app/app.component.html b/aio/content/examples/ts-to-js/js/src/app/app.component.html
deleted file mode 100644
index 4ca26f2657..0000000000
--- a/aio/content/examples/ts-to-js/js/src/app/app.component.html
+++ /dev/null
@@ -1,47 +0,0 @@
-<a id="toc"></a>
-<h1>{{title}}</h1>
-<a href="#class-metadata">Classes and Class Metadata</a><br>
-<a href="#interfaces">Interfaces</a><br>
-<a href="#io-metadata">Input and Output Metadata</a><br>
-<a href="#dependency-injection">Dependency Injection</a><br>
-<a href="#host-metadata">Host Metadata</a><br>
-<a href="#view-child-metadata">View and Child Metadata</a><br>
-
-<hr>
-<h4 id="class-metadata">Classes and Class Metadata</h4>
-<hero-view></hero-view>
-<h4 id="class-metadata-dsl">Classes and Class Metadata (DSL)</h4>
-<hero-view-dsl></hero-view-dsl>
-
-<hr>
-<h4 id="interfaces">Interfaces</h4>
-<hero-lifecycle></hero-lifecycle>
-<h4 id="interfaces-dsl">Interfaces (DSL)</h4>
-<hero-lifecycle-dsl></hero-lifecycle-dsl>
-
-<hr>
-<h4 id="io-metadata">Input and Output Metadata</h4>
-<hero-io></hero-io>
-<h4 id="io-metadata-dsl">Input and Output Metadata (DSL)</h4>
-<hero-io-dsl></hero-io-dsl>
-
-<hr>
-<h4 id="dependency-injection">Dependency Injection</h4>
-<hero-di></hero-di>
-<hero-di-inject></hero-di-inject>
-<hero-di-inject-additional></hero-di-inject-additional>
-
-<h4 id="dependency-injection-dsl">Dependency Injection (DSL)</h4>
-<hero-di-dsl></hero-di-dsl>
-<hero-di-inject-dsl></hero-di-inject-dsl>
-<hero-di-inject-additional-dsl></hero-di-inject-additional-dsl>
-
-<hr>
-<h4 id="host-metadata">Host Metadata</h4>
-<hero-host></hero-host>
-<h4 id="host-metadata-dsl">Host Metadata (DSL)</h4>
-<hero-host-dsl></hero-host-dsl>
-
-<hr>
-<h4 id="view-child-metadata">View and Child Metadata (DSL)</h4>
-<hero-queries></hero-queries>
diff --git a/aio/content/examples/ts-to-js/js/src/app/app.component.js b/aio/content/examples/ts-to-js/js/src/app/app.component.js
deleted file mode 100644
index b6d1ec29b0..0000000000
--- a/aio/content/examples/ts-to-js/js/src/app/app.component.js
+++ /dev/null
@@ -1,20 +0,0 @@
-(function(app) {
-
-app.AppComponent = AppComponent;
-function AppComponent() {
-  this.title = 'ES5 JavaScript';
-}
-
-AppComponent.annotations = [
-  new ng.core.Component({
-    selector: 'my-app',
-    templateUrl: 'app/app.component.html',
-    styles: [
-      // See hero-di-inject-additional.component
-      'hero-host, hero-host-dsl { border: 1px dashed black; display: block; padding: 4px;}',
-      '.heading {font-style: italic}'
-    ]
-  })
-];
-
-})(window.app = window.app || {});
diff --git a/aio/content/examples/ts-to-js/js/src/app/app.module.js b/aio/content/examples/ts-to-js/js/src/app/app.module.js
deleted file mode 100644
index fc2300a89b..0000000000
--- a/aio/content/examples/ts-to-js/js/src/app/app.module.js
+++ /dev/null
@@ -1,46 +0,0 @@
-(function(app) {
-
-app.AppModule = AppModule;
-function AppModule() { }
-
-AppModule.annotations = [
-  new ng.core.NgModule({
-    imports: [ ng.platformBrowser.BrowserModule ],
-    declarations: [
-      app.AppComponent,
-      app.ConfirmComponent, app.ConfirmDslComponent,
-      app.HeroComponent, app.HeroDslComponent,
-      app.HeroDIComponent, app.HeroDIDslComponent,
-      app.HeroDIInjectComponent, app.HeroDIInjectDslComponent,
-      app.HeroDIInjectAdditionalComponent, app.HeroDIInjectAdditionalDslComponent,
-      app.HeroHostComponent, app.HeroHostDslComponent,
-      app.HeroIOComponent, app.HeroIODslComponent,
-      app.HeroLifecycleComponent, app.HeroLifecycleDslComponent,
-      app.heroQueries.HeroQueriesComponent, app.heroQueries.ViewChildComponent, app.heroQueries.ContentChildComponent,
-      app.HeroTitleComponent, app.HeroTitleDslComponent
-    ],
-    providers: [
-      app.DataService,
-      { provide: 'heroName', useValue: 'Windstorm' }
-    ],
-    bootstrap: [ app.AppComponent ],
-
-    // schemas: [ ng.core.NO_ERRORS_SCHEMA ] // helpful for debugging!
-  })
-]
-
-})(window.app = window.app || {});
-
-
-///// For documentation only /////
-(function () {
-  // #docregion appimport
-  var HeroComponent = app.HeroComponent;
-  // #enddocregion appimport
-
-  // #docregion ng2import
-  var platformBrowserDynamic = ng.platformBrowserDynamic.platformBrowserDynamic;
-  var LocationStrategy = ng.common.LocationStrategy;
-  var HashLocationStrategy = ng.common.HashLocationStrategy;
-  // #enddocregion ng2import
-})
diff --git a/aio/content/examples/ts-to-js/js/src/app/confirm.component.html b/aio/content/examples/ts-to-js/js/src/app/confirm.component.html
deleted file mode 100644
index 45275d218a..0000000000
--- a/aio/content/examples/ts-to-js/js/src/app/confirm.component.html
+++ /dev/null
@@ -1,6 +0,0 @@
-<button (click)="onOkClick()">
-  {{okMsg}}
-</button>
-<button (click)="onNotOkClick()">
-  {{notOkMsg}}
-</button>
diff --git a/aio/content/examples/ts-to-js/js/src/app/confirm.component.js b/aio/content/examples/ts-to-js/js/src/app/confirm.component.js
deleted file mode 100644
index b76d3f54aa..0000000000
--- a/aio/content/examples/ts-to-js/js/src/app/confirm.component.js
+++ /dev/null
@@ -1,75 +0,0 @@
-(function(app) {
-
-  // #docregion
-  app.ConfirmComponent = ConfirmComponent;
-
-  ConfirmComponent.annotations = [
-    new ng.core.Component({
-      selector: 'app-confirm',
-      templateUrl: 'app/confirm.component.html',
-      inputs: [
-        'okMsg',
-        'notOkMsg: cancelMsg'
-      ],
-      outputs: [
-        'ok',
-        'notOk: cancel'
-      ]
-    })
-  ];
-
-  function ConfirmComponent() {
-    this.ok    = new ng.core.EventEmitter();
-    this.notOk = new ng.core.EventEmitter();
-  }
-
-  ConfirmComponent.prototype.onOkClick = function() {
-    this.ok.emit(true);
-  }
-
-  ConfirmComponent.prototype.onNotOkClick = function() {
-    this.notOk.emit(true);
-  }
-  // #enddocregion
-
-})(window.app = window.app || {});
-
-/////// DSL version ////////
-
-(function(app) {
-
-  var old = app.ConfirmComponent;
-
-  // #docregion dsl
-  app.ConfirmComponent = ng.core.Component({
-    selector: 'app-confirm-dsl',
-    templateUrl: 'app/confirm.component.html',
-    inputs: [
-      'okMsg',
-      'notOkMsg: cancelMsg'
-    ],
-    outputs: [
-      'ok',
-      'notOk: cancel'
-    ]
-  })
-  .Class({
-    constructor: function ConfirmComponent() {
-      this.ok    = new ng.core.EventEmitter();
-      this.notOk = new ng.core.EventEmitter();
-    },
-
-    onOkClick: function() {
-      this.ok.emit(true);
-    },
-
-    onNotOkClick: function() {
-      this.notOk.emit(true);
-    }
-  });
-  // #enddocregion dsl
-
-  app.ConfirmDslComponent = app.ConfirmComponent;
-  app.ConfirmComponent = old;
-
-})(window.app = window.app || {});
diff --git a/aio/content/examples/ts-to-js/js/src/app/data.service.js b/aio/content/examples/ts-to-js/js/src/app/data.service.js
deleted file mode 100644
index 643bb57dca..0000000000
--- a/aio/content/examples/ts-to-js/js/src/app/data.service.js
+++ /dev/null
@@ -1,10 +0,0 @@
-(function(app) {
-
-  app.DataService = DataService;
-  function DataService() { }
-
-  DataService.prototype.getHeroName = function() {
-    return 'Windstorm';
-  };
-
-})(window.app = window.app || {});
diff --git a/aio/content/examples/ts-to-js/js/src/app/hero-di-inject-additional.component.js b/aio/content/examples/ts-to-js/js/src/app/hero-di-inject-additional.component.js
deleted file mode 100644
index 450cc53847..0000000000
--- a/aio/content/examples/ts-to-js/js/src/app/hero-di-inject-additional.component.js
+++ /dev/null
@@ -1,36 +0,0 @@
-(function(app) {
-
-  var old = app.HeroComponent;
-
-  app.HeroComponent = HeroComponent;
-
-  HeroComponent.annotations = [
-    new ng.core.Component({
-      selector: 'hero-di-inject-additional',
-      template: '<hero-title title="Tour of Heroes"></hero-title>'
-    })
-  ];
-
-  function HeroComponent() {}
-
-  app.HeroDIInjectAdditionalComponent = app.HeroComponent;
-  app.HeroComponent = old;
-
-})(window.app = window.app || {});
-
-////// DSL Version /////////
-(function(app) {
-
-  var old = app.HeroComponent;
-
-  app.HeroComponent = ng.core.Component({
-    selector: 'hero-di-inject-additional-dsl',
-    template: '<hero-title-dsl title="Tour of Heroes"></hero-title-dsl>'
-  }).Class({
-    constructor: function HeroComponent() { }
-  });
-
-  app.HeroDIInjectAdditionalDslComponent = app.HeroComponent;
-  app.HeroComponent = old;
-
-})(window.app = window.app || {});
diff --git a/aio/content/examples/ts-to-js/js/src/app/hero-di-inject.component.js b/aio/content/examples/ts-to-js/js/src/app/hero-di-inject.component.js
deleted file mode 100644
index 879365208c..0000000000
--- a/aio/content/examples/ts-to-js/js/src/app/hero-di-inject.component.js
+++ /dev/null
@@ -1,51 +0,0 @@
-(function(app) {
-
-  var old = app.HeroComponent;
-
-  // #docregion
-  app.HeroComponent = HeroComponent;
-
-  HeroComponent.annotations = [
-    new ng.core.Component({
-      selector: 'hero-di-inject',
-      template: '<h1>Hero: {{name}}</h1>'
-    })
-  ];
-
-  HeroComponent.parameters = [ 'heroName' ];
-
-  function HeroComponent(name) {
-    this.name = name;
-  }
-  // #enddocregion
-
-  app.HeroDIInjectComponent = app.HeroComponent;
-  app.HeroComponent = old;
-
-})(window.app = window.app || {});
-
-/////// DSL version ////////
-
-(function(app) {
-
-  var old = app.HeroComponent;
-
-  // #docregion dsl
-  app.HeroComponent = ng.core.Component({
-    selector: 'hero-di-inject-dsl',
-    template: '<h1>Hero: {{name}}</h1>'
-  })
-  .Class({
-    constructor: [
-      new ng.core.Inject('heroName'),
-      function HeroComponent(name) {
-        this.name = name;
-      }
-    ]
-  });
-  // #enddocregion dsl
-
-  app.HeroDIInjectDslComponent = app.HeroComponent;
-  app.HeroComponent = old;
-
-})(window.app = window.app || {});
diff --git a/aio/content/examples/ts-to-js/js/src/app/hero-di.component.js b/aio/content/examples/ts-to-js/js/src/app/hero-di.component.js
deleted file mode 100644
index 2f49a85079..0000000000
--- a/aio/content/examples/ts-to-js/js/src/app/hero-di.component.js
+++ /dev/null
@@ -1,51 +0,0 @@
-(function(app) {
-
-  var old = app.HeroComponent;
-
-  // #docregion
-  app.HeroComponent = HeroComponent;
-
-  HeroComponent.annotations = [
-    new ng.core.Component({
-      selector: 'hero-di',
-      template: '<h1>Hero: {{name}}</h1>'
-    })
-  ];
-
-  HeroComponent.parameters = [ app.DataService ];
-
-  function HeroComponent(dataService) {
-    this.name = dataService.getHeroName();
-  }
-  // #enddocregion
-
-  app.HeroDIComponent = app.HeroComponent;
-  app.HeroComponent = old;
-
-})(window.app = window.app || {});
-
-////// DSL Version /////
-
-(function(app) {
-
-  var old = app.HeroComponent;
-
-  // #docregion dsl
-  app.HeroComponent = ng.core.Component({
-    selector: 'hero-di-dsl',
-    template: '<h1>Hero: {{name}}</h1>'
-  })
-  .Class({
-    constructor: [
-      app.DataService,
-      function HeroComponent(service) {
-        this.name = service.getHeroName();
-      }
-    ]
-  });
-  // #enddocregion dsl
-
-  app.HeroDIDslComponent = app.HeroComponent;
-  app.HeroComponent = old;
-
-})(window.app = window.app || {});
diff --git a/aio/content/examples/ts-to-js/js/src/app/hero-host.component.js b/aio/content/examples/ts-to-js/js/src/app/hero-host.component.js
deleted file mode 100644
index b73e50aae0..0000000000
--- a/aio/content/examples/ts-to-js/js/src/app/hero-host.component.js
+++ /dev/null
@@ -1,107 +0,0 @@
-(function(app) {
-
-  var old = app.HeroComponent
-
-  // #docregion
-  app.HeroComponent = HeroComponent;
-
-  HeroComponent.annotations = [
-    new ng.core.Component({
-      selector: 'hero-host',
-      template:
-        '<h1 [class.active]="active">Hero Host</h1>' +
-        '<div>Heading clicks: {{clicks}}</div>',
-      host: {
-        // HostBindings to the <hero-host> element
-        '[title]': 'title',
-        '[class.heading]': 'headingClass',
-        '(click)': 'clicked()',
-
-        // HostListeners on the entire <hero-host> element
-        '(mouseenter)': 'enter($event)',
-        '(mouseleave)': 'leave($event)'
-      },
-      // Styles within (but excluding) the <hero-host> element
-      styles: ['.active {background-color: yellow;}']
-    })
-  ];
-
-  function HeroComponent() {
-    this.clicks = 0;
-    this.headingClass = true;
-    this.title = 'Hero Host Tooltip content';
-  }
-
-  HeroComponent.prototype.clicked = function() {
-    this.clicks += 1;
-  }
-
-  HeroComponent.prototype.enter = function(event) {
-    this.active = true;
-    this.headingClass = false;
-  }
-
-  HeroComponent.prototype.leave = function(event) {
-    this.active = false;
-    this.headingClass = true;
-  }
-  // #enddocregion
-
-  app.HeroHostComponent = app.HeroComponent;
-  app.HeroComponent = old;
-
-})(window.app = window.app || {});
-
-//// DSL Version ////
-
-(function(app) {
-
-  var old = app.HeroComponent;
-
-  // #docregion dsl
-  app.HeroComponent = ng.core.Component({
-    selector: 'hero-host-dsl',
-    template: `
-      <h1 [class.active]="active">Hero Host (DSL)</h1>
-      <div>Heading clicks: {{clicks}}</div>
-    `,
-    host: {
-      // HostBindings to the <hero-host-dsl> element
-      '[title]': 'title',
-      '[class.heading]': 'headingClass',
-      '(click)': 'clicked()',
-
-      // HostListeners on the entire <hero-host-dsl> element
-      '(mouseenter)': 'enter($event)',
-      '(mouseleave)': 'leave($event)'
-    },
-    // Styles within (but excluding) the <hero-host-dsl> element
-    styles: ['.active {background-color: coral;}']
-  })
-  .Class({
-    constructor: function HeroComponent() {
-      this.clicks = 0;
-      this.headingClass = true;
-      this.title = 'Hero Host Tooltip DSL content';
-    },
-
-    clicked() {
-      this.clicks += 1;
-    },
-
-    enter(event) {
-      this.active = true;
-      this.headingClass = false;
-    },
-
-    leave(event) {
-      this.active = false;
-      this.headingClass = true;
-    }
-  });
-  // #enddocregion dsl
-
-  app.HeroHostDslComponent = app.HeroComponent;
-  app.HeroComponent = old;
-
-})(window.app = window.app || {});
diff --git a/aio/content/examples/ts-to-js/js/src/app/hero-io-dsl.component.html b/aio/content/examples/ts-to-js/js/src/app/hero-io-dsl.component.html
deleted file mode 100644
index c8023ccb45..0000000000
--- a/aio/content/examples/ts-to-js/js/src/app/hero-io-dsl.component.html
+++ /dev/null
@@ -1,7 +0,0 @@
-<app-confirm-dsl [okMsg]="'OK'"
-                 [cancelMsg]="'Cancel'"
-                 (ok)="onOk()"
-                 (cancel)="onCancel()">
-</app-confirm-dsl>
-<span *ngIf="okClicked">OK clicked</span>
-<span *ngIf="cancelClicked">Cancel clicked</span>
diff --git a/aio/content/examples/ts-to-js/js/src/app/hero-io.component.html b/aio/content/examples/ts-to-js/js/src/app/hero-io.component.html
deleted file mode 100644
index 215ddccf92..0000000000
--- a/aio/content/examples/ts-to-js/js/src/app/hero-io.component.html
+++ /dev/null
@@ -1,7 +0,0 @@
-<app-confirm [okMsg]="'OK'"
-             [cancelMsg]="'Cancel'"
-             (ok)="onOk()"
-             (cancel)="onCancel()">
-</app-confirm>
-<span *ngIf="okClicked">OK clicked</span>
-<span *ngIf="cancelClicked">Cancel clicked</span>
diff --git a/aio/content/examples/ts-to-js/js/src/app/hero-io.component.js b/aio/content/examples/ts-to-js/js/src/app/hero-io.component.js
deleted file mode 100644
index b09208ce68..0000000000
--- a/aio/content/examples/ts-to-js/js/src/app/hero-io.component.js
+++ /dev/null
@@ -1,52 +0,0 @@
-(function(app) {
-
-  var old = app.HeroComponent
-
-  app.HeroComponent = HeroComponent;
-
-  HeroComponent.annotations = [
-    new ng.core.Component({
-      selector: 'hero-io',
-      templateUrl: 'app/hero-io.component.html'
-    })
-  ];
-
-  function HeroComponent() { }
-
-  HeroComponent.prototype.onOk = function() {
-    this.okClicked = true;
-  }
-
-  HeroComponent.prototype.onCancel = function() {
-    this.cancelClicked = true;
-  }
-
-  app.HeroIOComponent = app.HeroComponent;
-  app.HeroComponent = old;
-
-})(window.app = window.app || {});
-
-///// DSL Version ////
-
-(function(app) {
-
-  var old = app.HeroComponent
-
-  app.HeroComponent = ng.core.Component({
-    selector: 'hero-io-dsl',
-    templateUrl: 'app/hero-io-dsl.component.html'
-  })
-  .Class({
-    constructor: function HeroComponent() { },
-    onOk: function() {
-      this.okClicked = true;
-    },
-    onCancel: function() {
-      this.cancelClicked = true;
-    }
-  });
-
-  app.HeroIODslComponent = app.HeroComponent;
-  app.HeroComponent = old;
-
-})(window.app = window.app || {});
diff --git a/aio/content/examples/ts-to-js/js/src/app/hero-lifecycle.component.js b/aio/content/examples/ts-to-js/js/src/app/hero-lifecycle.component.js
deleted file mode 100644
index 2a68288f92..0000000000
--- a/aio/content/examples/ts-to-js/js/src/app/hero-lifecycle.component.js
+++ /dev/null
@@ -1,52 +0,0 @@
-// #docplaster
-(function(app) {
-
-  var old = app.HeroComponent;
-
-  // #docregion
-  app.HeroComponent = HeroComponent;
-
-  HeroComponent.annotations = [
-    new ng.core.Component({
-      selector: 'hero-lifecycle',
-      template: '<h1>Hero: {{name}}</h1>'
-    })
-  ];
-
-  function HeroComponent() { }
-
-  HeroComponent.prototype.ngOnInit = function() {
-    // todo: fetch from server async
-    setTimeout(() => this.name = 'Windstorm', 0);
-  };
-  // #enddocregion
-
-  app.HeroLifecycleComponent = app.HeroComponent;
-  app.HeroComponent = old;
-
-})(window.app = window.app || {});
-
-/////// DSL version ////
-
-(function(app) {
-
-  var old = app.HeroComponent;
-
-  // #docregion dsl
-  app.HeroComponent = ng.core.Component({
-    selector: 'hero-lifecycle-dsl',
-    template: '<h1>Hero: {{name}}</h1>'
-  })
-  .Class({
-    constructor: function HeroComponent() { },
-    ngOnInit: function() {
-      // todo: fetch from server async
-      setTimeout(() => this.name = 'Windstorm', 0);
-    }
-  });
-  // #enddocregion dsl
-
-  app.HeroLifecycleDslComponent = app.HeroComponent;
-  app.HeroComponent = old;
-
-})(window.app = window.app || {});
diff --git a/aio/content/examples/ts-to-js/js/src/app/hero-queries.component.js b/aio/content/examples/ts-to-js/js/src/app/hero-queries.component.js
deleted file mode 100644
index 5e8de58d41..0000000000
--- a/aio/content/examples/ts-to-js/js/src/app/hero-queries.component.js
+++ /dev/null
@@ -1,92 +0,0 @@
-(function(app) {
-
-  app.heroQueries = app.heroQueries || {};
-
-  app.heroQueries.ContentChildComponent = ng.core.Component({
-    selector: 'content-child',
-    template:
-      '<span class="content-child" *ngIf="active">' +
-        'Active' +
-      '</span>'
-  }).Class({
-    constructor: function ContentChildComponent() {
-      this.active = false;
-    },
-
-    activate: function() {
-      this.active = !this.active;
-    }
-  });
-
-  ////////////////////
-
-  // #docregion content
-  app.heroQueries.ViewChildComponent = ng.core.Component({
-    selector: 'view-child',
-    template:
-      '<h2 [class.active]=active>' +
-        '{{hero.name}} ' +
-        '<ng-content></ng-content>' +
-      '</h2>',
-    styles: ['.active {font-weight: bold; background-color: skyblue;}'],
-    inputs: ['hero'],
-    queries: {
-      content: new ng.core.ContentChild(app.heroQueries.ContentChildComponent)
-    }
-  })
-  .Class({
-    constructor: function HeroQueriesHeroComponent() {
-      this.active = false;
-    },
-
-    activate: function() {
-      this.active = !this.active;
-      this.content.activate();
-    }
-  });
-  // #enddocregion content
-
-  ////////////////////
-
-  // #docregion view
-  app.heroQueries.HeroQueriesComponent = ng.core.Component({
-    selector: 'hero-queries',
-    template:
-      '<view-child *ngFor="let hero of heroData" [hero]="hero">' +
-        '<content-child></content-child>' +
-      '</view-child>' +
-      '<button (click)="activate()">{{buttonLabel}} All</button>',
-    queries: {
-      views: new ng.core.ViewChildren(app.heroQueries.ViewChildComponent)
-    }
-  })
-  .Class({
-    constructor: function HeroQueriesComponent() {
-      this.active = false;
-      this.heroData = [
-        {id: 1, name: 'Windstorm'},
-        {id: 2, name: 'LaughingGas'}
-      ];
-    },
-
-    activate: function() {
-      this.active = !this.active;
-      this.views.forEach(function(view) {
-        view.activate();
-      });
-    },
-  });
-
-  // #docregion defined-property
-  // add prototype property w/ getter outside the DSL
-  var proto = app.heroQueries.HeroQueriesComponent.prototype;
-  Object.defineProperty(proto, "buttonLabel", {
-      get: function () {
-          return this.active ? 'Deactivate' : 'Activate';
-      },
-      enumerable: true
-  });
-  // #enddocregion defined-property
-  // #enddocregion view
-
-})(window.app = window.app || {});
diff --git a/aio/content/examples/ts-to-js/js/src/app/hero-title.component.html b/aio/content/examples/ts-to-js/js/src/app/hero-title.component.html
deleted file mode 100644
index 164683cb7c..0000000000
--- a/aio/content/examples/ts-to-js/js/src/app/hero-title.component.html
+++ /dev/null
@@ -1,4 +0,0 @@
-<!-- #docregion -->
-<h1>{{titlePrefix}} {{title}}</h1>
-<button (click)="ok()">OK</button>
-<p>{{ msg }}</p>
diff --git a/aio/content/examples/ts-to-js/js/src/app/hero-title.component.js b/aio/content/examples/ts-to-js/js/src/app/hero-title.component.js
deleted file mode 100644
index f0770e1228..0000000000
--- a/aio/content/examples/ts-to-js/js/src/app/hero-title.component.js
+++ /dev/null
@@ -1,64 +0,0 @@
-(function(app) {
-
-  // #docregion
-  app.HeroTitleComponent = HeroTitleComponent;
-
-  // #docregion templateUrl
-  HeroTitleComponent.annotations = [
-    new ng.core.Component({
-      selector: 'hero-title',
-      templateUrl: 'app/hero-title.component.html'
-    })
-  ];
-  // #enddocregion templateUrl
-
-  function HeroTitleComponent(titlePrefix, title) {
-      this.titlePrefix = titlePrefix;
-      this.title  = title;
-      this.msg = '';
-  }
-
-  HeroTitleComponent.prototype.ok = function() {
-    this.msg = 'OK!';
-  }
-
-  HeroTitleComponent.parameters = [
-    [new ng.core.Optional(), new ng.core.Inject('titlePrefix')],
-    [new ng.core.Attribute('title')]
-  ];
-  // #enddocregion
-
-})(window.app = window.app || {});
-
-////////// DSL version ////////////
-
-(function(app) {
-
-  var old = app.HeroTitleComponent;
-
-  // #docregion dsl
-  app.HeroTitleComponent = ng.core.Component({
-    selector: 'hero-title-dsl',
-    templateUrl: 'app/hero-title.component.html'
-  })
-  .Class({
-    constructor: [
-      [ new ng.core.Optional(), new ng.core.Inject('titlePrefix') ],
-      new ng.core.Attribute('title'),
-      function HeroTitleComponent(titlePrefix, title) {
-        this.titlePrefix = titlePrefix;
-        this.title  = title;
-        this.msg = '';
-      }
-    ],
-
-    ok: function() {
-      this.msg = 'OK!';
-    }
-  });
-  // #enddocregion dsl
-
-  app.HeroTitleDslComponent = app.HeroTitleComponent;
-  app.HeroTitleComponent = old;
-
-})(window.app = window.app || {});
diff --git a/aio/content/examples/ts-to-js/js/src/app/hero.component.js b/aio/content/examples/ts-to-js/js/src/app/hero.component.js
deleted file mode 100644
index e1407b2635..0000000000
--- a/aio/content/examples/ts-to-js/js/src/app/hero.component.js
+++ /dev/null
@@ -1,53 +0,0 @@
-// #docplaster
-(function(app) {
-
-// #docregion
-// #docregion appexport
-// #docregion metadata
-app.HeroComponent = HeroComponent; // "export"
-
-HeroComponent.annotations = [
-  new ng.core.Component({
-    selector: 'hero-view',
-    template: '<h1>{{title}}: {{getName()}}</h1>'
-  })
-];
-
-// #docregion constructorproto
-function HeroComponent() {
-  this.title = "Hero Detail";
-}
-
-HeroComponent.prototype.getName = function() { return 'Windstorm'; };
-// #enddocregion constructorproto
-
-// #enddocregion metadata
-// #enddocregion appexport
-// #enddocregion
-
-})(window.app = window.app || {});
-
-//////////// DSL version ///////////
-
-(function(app) {
-
-  var old = app.HeroComponent;
-
-  // #docregion dsl
-  app.HeroComponent = ng.core.Component({
-    selector: 'hero-view-dsl',
-    template: '<h1>{{title}}: {{getName()}}</h1>',
-  })
-  .Class({
-    constructor: function HeroComponent() {
-      this.title = "Hero Detail";
-    },
-
-    getName: function() { return 'Windstorm'; }
-  });
-  // #enddocregion dsl
-
-  app.HeroDslComponent = app.HeroComponent;
-  app.HeroComponent = old;
-
-})(window.app = window.app || {});
diff --git a/aio/content/examples/ts-to-js/js/src/index.html b/aio/content/examples/ts-to-js/js/src/index.html
deleted file mode 100644
index 00338aa55a..0000000000
--- a/aio/content/examples/ts-to-js/js/src/index.html
+++ /dev/null
@@ -1,43 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <base href="/">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="styles.css">
-    <title>TypeScript to JavaScript</title>
-
-    <script src="node_modules/core-js/client/shim.min.js"></script>
-
-    <script src="node_modules/zone.js/dist/zone.js"></script>
-
-    <!-- Angular and RxJS umd scripts -->
-    <script src="node_modules/rxjs/bundles/Rx.js"></script>
-    <script src="node_modules/@angular/core/bundles/core.umd.js"></script>
-    <script src="node_modules/@angular/common/bundles/common.umd.js"></script>
-    <script src="node_modules/@angular/compiler/bundles/compiler.umd.js"></script>
-    <script src="node_modules/@angular/platform-browser/bundles/platform-browser.umd.js"></script>
-    <script src="node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js"></script>
-
-    <!-- Application scripts -->
-    <script src="app/app.component.js"></script>
-    <script src="app/confirm.component.js"></script>
-    <script src="app/data.service.js"></script>
-    <script src="app/hero.component.js"></script>
-    <script src="app/hero-io.component.js"></script>
-    <script src="app/hero-di.component.js"></script>
-    <script src="app/hero-di-inject.component.js"></script>
-    <script src="app/hero-di-inject-additional.component.js"></script>
-    <script src="app/hero-host.component.js"></script>
-    <script src="app/hero-lifecycle.component.js"></script>
-    <script src="app/hero-queries.component.js"></script>
-    <script src="app/hero-title.component.js"></script>
-
-    <script src="app/app.module.js"></script>
-    <script src="main.js"></script>
-  </head>
-
-  <body>
-    <my-app>Loading...</my-app>
-  </body>
-
-</html>
diff --git a/aio/content/examples/ts-to-js/js/src/main.js b/aio/content/examples/ts-to-js/js/src/main.js
deleted file mode 100644
index fd3e737c9e..0000000000
--- a/aio/content/examples/ts-to-js/js/src/main.js
+++ /dev/null
@@ -1,9 +0,0 @@
-(function(app) {
-
-var platformBrowserDynamic = ng.platformBrowserDynamic.platformBrowserDynamic;
-
-document.addEventListener('DOMContentLoaded', function() {
-  platformBrowserDynamic().bootstrapModule(app.AppModule);
-});
-
-})(window.app = window.app || {});
diff --git a/aio/content/examples/ts-to-js/ts/example-config.json b/aio/content/examples/ts-to-js/ts/example-config.json
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/aio/content/examples/ts-to-js/ts/plnkr.json b/aio/content/examples/ts-to-js/ts/plnkr.json
deleted file mode 100644
index 447fc5f605..0000000000
--- a/aio/content/examples/ts-to-js/ts/plnkr.json
+++ /dev/null
@@ -1,9 +0,0 @@
-{
-  "description": "TypeScript to JavaScript",
-  "basePath": "src/",
-  "files":[
-    "!**/*.d.ts",
-    "!**/*.js"
-  ],
-  "tags":["cookbook"]
-}
diff --git a/aio/content/examples/ts-to-js/ts/src/app/app.component.html b/aio/content/examples/ts-to-js/ts/src/app/app.component.html
deleted file mode 100644
index 995645073a..0000000000
--- a/aio/content/examples/ts-to-js/ts/src/app/app.component.html
+++ /dev/null
@@ -1,31 +0,0 @@
-<a id="toc"></a>
-<h1>{{title}}</h1>
-<a href="#class-metadata">Classes and Class Metadata</a><br>
-<a href="#io-metadata">Input and Output Decorators</a><br>
-<a href="#dependency-injection">Dependency Injection</a><br>
-<a href="#host-metadata">Host Metadata</a><br>
-<a href="#view-child-metadata">View and Child Metadata</a><br>
-
-<hr>
-<h4 id="class-metadata">Classes and Class Metadata</h4>
-<hero-view></hero-view>
-<hero-lifecycle></hero-lifecycle>
-
-<hr>
-<h4 id="io-metadata">Input and Output Metadata</h4>
-<hero-io></hero-io>
-
-<hr>
-<h4 id="dependency-injection">Dependency Injection</h4>
-<hero-di></hero-di>
-<hero-di-inject></hero-di-inject>
-<hero-di-inject-additional></hero-di-inject-additional>
-
-<hr>
-<h4 id="host-metadata">Host Metadata</h4>
-<hero-host></hero-host>
-<hero-host-meta></hero-host-meta>
-
-<hr>
-<h4 id="view-child-metadata">View and Child Metadata</h4>
-<hero-queries></hero-queries>
diff --git a/aio/content/examples/ts-to-js/ts/src/app/app.component.ts b/aio/content/examples/ts-to-js/ts/src/app/app.component.ts
deleted file mode 100644
index 912c9e1a80..0000000000
--- a/aio/content/examples/ts-to-js/ts/src/app/app.component.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'my-app',
-  templateUrl: './app.component.html',
-  styles: [
-    // See hero-di-inject-additional.component
-    'hero-host, hero-host-meta { border: 1px dashed black; display: block; padding: 4px;}',
-    '.heading {font-style: italic}'
-  ]
-})
-export class AppComponent {
-  title = 'TypeScript';
-}
diff --git a/aio/content/examples/ts-to-js/ts/src/app/app.module.ts b/aio/content/examples/ts-to-js/ts/src/app/app.module.ts
deleted file mode 100644
index 992c3c3514..0000000000
--- a/aio/content/examples/ts-to-js/ts/src/app/app.module.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-/* tslint:disable-next-line:no-unused-variable */
-import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-
-import { AppComponent } from './app.component';
-import { ConfirmComponent } from './confirm.component';
-// #docregion appimport
-import { HeroComponent } from './hero.component';
-// #enddocregion appimport
-import { HeroComponent as HeroDIComponent } from './hero-di.component';
-import { HeroComponent as HeroDIInjectComponent } from './hero-di-inject.component';
-import { HeroComponent as HeroDIInjectAdditionalComponent } from './hero-di-inject-additional.component';
-import { HeroHostComponent } from './hero-host.component';
-import { HeroHostMetaComponent } from './hero-host-meta.component';
-import { HeroIOComponent } from './hero-io.component';
-import { HeroComponent as HeroLifecycleComponent } from './hero-lifecycle.component';
-import { HeroQueriesComponent, ViewChildComponent, ContentChildComponent } from './hero-queries.component';
-import { HeroTitleComponent } from './hero-title.component';
-
-import { DataService } from './data.service';
-
-@NgModule({
-  imports: [
-    BrowserModule
-  ],
-  declarations: [
-    AppComponent,
-    ConfirmComponent,
-    HeroComponent,
-    HeroDIComponent,
-    HeroDIInjectComponent,
-    HeroDIInjectAdditionalComponent,
-    HeroHostComponent, HeroHostMetaComponent,
-    HeroIOComponent,
-    HeroLifecycleComponent,
-    HeroQueriesComponent, ViewChildComponent, ContentChildComponent,
-    HeroTitleComponent
-  ],
-  providers: [
-    DataService,
-    { provide: 'heroName', useValue: 'Windstorm' }
-  ],
-  bootstrap: [ AppComponent ],
-
-  // schemas: [ NO_ERRORS_SCHEMA ] // helpful for debugging!
-})
-export class AppModule { }
-
-/* tslint:disable no-unused-variable */
-// #docregion ng2import
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import {
-  LocationStrategy,
-  HashLocationStrategy
-} from '@angular/common';
-// #enddocregion ng2import
diff --git a/aio/content/examples/ts-to-js/ts/src/app/confirm.component.html b/aio/content/examples/ts-to-js/ts/src/app/confirm.component.html
deleted file mode 100644
index 45275d218a..0000000000
--- a/aio/content/examples/ts-to-js/ts/src/app/confirm.component.html
+++ /dev/null
@@ -1,6 +0,0 @@
-<button (click)="onOkClick()">
-  {{okMsg}}
-</button>
-<button (click)="onNotOkClick()">
-  {{notOkMsg}}
-</button>
diff --git a/aio/content/examples/ts-to-js/ts/src/app/confirm.component.ts b/aio/content/examples/ts-to-js/ts/src/app/confirm.component.ts
deleted file mode 100644
index f01fa4de40..0000000000
--- a/aio/content/examples/ts-to-js/ts/src/app/confirm.component.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
-
-// #docregion
-@Component({
-  selector: 'app-confirm',
-  templateUrl: './confirm.component.html'
-})
-export class ConfirmComponent {
-  @Input() okMsg = '';
-  @Input('cancelMsg') notOkMsg = '';
-  @Output() ok = new EventEmitter();
-  @Output('cancel') notOk = new EventEmitter();
-
-  onOkClick() {
-    this.ok.emit(true);
-  }
-  onNotOkClick() {
-    this.notOk.emit(true);
-  }
-}
-// #enddocregion
diff --git a/aio/content/examples/ts-to-js/ts/src/app/data.service.ts b/aio/content/examples/ts-to-js/ts/src/app/data.service.ts
deleted file mode 100644
index cd7f9e1aae..0000000000
--- a/aio/content/examples/ts-to-js/ts/src/app/data.service.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { Injectable } from '@angular/core';
-
-@Injectable()
-export class DataService {
-  constructor() { }
-
-  getHeroName() {
-    return 'Windstorm';
-  }
-}
diff --git a/aio/content/examples/ts-to-js/ts/src/app/hero-di-inject-additional.component.ts b/aio/content/examples/ts-to-js/ts/src/app/hero-di-inject-additional.component.ts
deleted file mode 100644
index ec460a9dbc..0000000000
--- a/aio/content/examples/ts-to-js/ts/src/app/hero-di-inject-additional.component.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'hero-di-inject-additional',
-  template: `<hero-title title="Tour of Heroes"></hero-title>`
-})
-export class HeroComponent { }
diff --git a/aio/content/examples/ts-to-js/ts/src/app/hero-di-inject.component.ts b/aio/content/examples/ts-to-js/ts/src/app/hero-di-inject.component.ts
deleted file mode 100644
index c583a1b0f6..0000000000
--- a/aio/content/examples/ts-to-js/ts/src/app/hero-di-inject.component.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Component, Inject } from '@angular/core';
-
-// #docregion
-@Component({
-  selector: 'hero-di-inject',
-  template: `<h1>Hero: {{name}}</h1>`
-})
-export class HeroComponent {
-  constructor(@Inject('heroName') private name: string) { }
-}
-// #enddocregion
diff --git a/aio/content/examples/ts-to-js/ts/src/app/hero-di.component.ts b/aio/content/examples/ts-to-js/ts/src/app/hero-di.component.ts
deleted file mode 100644
index 3a17abd281..0000000000
--- a/aio/content/examples/ts-to-js/ts/src/app/hero-di.component.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-// #docregion
-import { Component }   from '@angular/core';
-import { DataService } from './data.service';
-
-@Component({
-  selector: 'hero-di',
-  template: `<h1>Hero: {{name}}</h1>`
-})
-export class HeroComponent {
-  name = '';
-  constructor(dataService: DataService) {
-    this.name = dataService.getHeroName();
-  }
-}
-// #enddocregion
diff --git a/aio/content/examples/ts-to-js/ts/src/app/hero-host-meta.component.ts b/aio/content/examples/ts-to-js/ts/src/app/hero-host-meta.component.ts
deleted file mode 100644
index fefe4a5470..0000000000
--- a/aio/content/examples/ts-to-js/ts/src/app/hero-host-meta.component.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-import { Component } from '@angular/core';
-
-// #docregion
-@Component({
-  selector: 'hero-host-meta',
-  template: `
-    <h1 [class.active]="active">Hero Host in Metadata</h1>
-    <div>Heading clicks: {{clicks}}</div>
-  `,
-  host: {
-    // HostBindings to the <hero-host-meta> element
-    '[title]': 'title',
-    '[class.heading]': 'headingClass',
-
-    // HostListeners on the entire <hero-host-meta> element
-    '(click)': 'clicked()',
-    '(mouseenter)': 'enter($event)',
-    '(mouseleave)': 'leave($event)'
-  },
-  // Styles within (but excluding) the <hero-host-meta> element
-  styles: ['.active {background-color: coral;}']
-})
-export class HeroHostMetaComponent {
-  title = 'Hero Host in Metadata Tooltip';
-  headingClass = true;
-
-  active = false;
-  clicks = 0;
-
-  clicked() {
-    this.clicks += 1;
-  }
-
-  enter(event: Event) {
-    this.active = true;
-    this.headingClass = false;
-  }
-
-  leave(event: Event) {
-    this.active = false;
-    this.headingClass = true;
-  }
-}
-// #enddocregion
diff --git a/aio/content/examples/ts-to-js/ts/src/app/hero-host.component.ts b/aio/content/examples/ts-to-js/ts/src/app/hero-host.component.ts
deleted file mode 100644
index e8d72233c8..0000000000
--- a/aio/content/examples/ts-to-js/ts/src/app/hero-host.component.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import { Component, HostBinding, HostListener } from '@angular/core';
-
-// #docregion
-@Component({
-  selector: 'hero-host',
-  template: `
-    <h1 [class.active]="active">Hero Host in Decorators</h1>
-    <div>Heading clicks: {{clicks}}</div>
-  `,
-  // Styles within (but excluding) the <hero-host> element
-  styles: ['.active {background-color: yellow;}']
-})
-export class HeroHostComponent {
-  // HostBindings to the <hero-host> element
-  @HostBinding() title = 'Hero Host in Decorators Tooltip';
-  @HostBinding('class.heading') headingClass = true;
-
-  active = false;
-  clicks = 0;
-
-  // HostListeners on the entire <hero-host> element
-  @HostListener('click')
-  clicked() {
-    this.clicks += 1;
-  }
-
-  @HostListener('mouseenter', ['$event'])
-  enter(event: Event) {
-    this.active = true;
-    this.headingClass = false;
-  }
-
-  @HostListener('mouseleave', ['$event'])
-  leave(event: Event) {
-    this.active = false;
-    this.headingClass = true;
-  }
-}
-// #enddocregion
diff --git a/aio/content/examples/ts-to-js/ts/src/app/hero-io.component.ts b/aio/content/examples/ts-to-js/ts/src/app/hero-io.component.ts
deleted file mode 100644
index 4b36411e78..0000000000
--- a/aio/content/examples/ts-to-js/ts/src/app/hero-io.component.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'hero-io',
-  template: `
-    <app-confirm [okMsg]="'OK'"
-                 [cancelMsg]="'Cancel'"
-                 (ok)="onOk()"
-                 (cancel)="onCancel()">
-    </app-confirm>
-    <span *ngIf="okClicked">OK clicked</span>
-    <span *ngIf="cancelClicked">Cancel clicked</span>
-  `
-})
-export class HeroIOComponent {
-  okClicked     = false;
-  cancelClicked = false;
-
-  onOk() {
-    this.okClicked = true;
-  }
-
-  onCancel() {
-    this.cancelClicked = true;
-  }
-}
diff --git a/aio/content/examples/ts-to-js/ts/src/app/hero-lifecycle.component.ts b/aio/content/examples/ts-to-js/ts/src/app/hero-lifecycle.component.ts
deleted file mode 100644
index 2629c85a1a..0000000000
--- a/aio/content/examples/ts-to-js/ts/src/app/hero-lifecycle.component.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-// #docregion
-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'hero-lifecycle',
-  template: `<h1>Hero: {{name}}</h1>`
-})
-export class HeroComponent implements OnInit {
-  name: string;
-  ngOnInit() {
-    // todo: fetch from server async
-    setTimeout(() => this.name = 'Windstorm', 0);
-  }
-}
diff --git a/aio/content/examples/ts-to-js/ts/src/app/hero-queries.component.ts b/aio/content/examples/ts-to-js/ts/src/app/hero-queries.component.ts
deleted file mode 100644
index 8b2d91ea85..0000000000
--- a/aio/content/examples/ts-to-js/ts/src/app/hero-queries.component.ts
+++ /dev/null
@@ -1,83 +0,0 @@
-import {
-  Component,
-  ContentChild,
-  Input,
-  QueryList,
-  ViewChildren
-} from '@angular/core';
-
-@Component({
-  selector: 'content-child',
-  template: `
-  <span class="content-child" *ngIf="active">
-    Active
-  </span>`
-})
-export class ContentChildComponent {
-  active = false;
-
-  activate() {
-    this.active = !this.active;
-  }
-}
-
-////////////////////
-
-// #docregion content
-@Component({
-  selector: 'view-child',
-  template: `
-  <h2 [class.active]=active>
-    {{hero.name}}
-    <ng-content></ng-content>
-  </h2>`,
-  styles: ['.active {font-weight: bold; background-color: skyblue;}']
-})
-export class ViewChildComponent {
-  @Input() hero: any;
-  active = false;
-
-  @ContentChild(ContentChildComponent) content: ContentChildComponent;
-
-  activate() {
-    this.active = !this.active;
-    this.content.activate();
-  }
-}
-// #enddocregion content
-
-////////////////////
-
-// #docregion view
-@Component({
-  selector: 'hero-queries',
-  template: `
-    <view-child *ngFor="let hero of heroData" [hero]="hero">
-      <content-child></content-child>
-    </view-child>
-    <button (click)="activate()">{{buttonLabel}} All</button>
-  `
-})
-export class HeroQueriesComponent {
-  active = false;
-  heroData = [
-    {id: 1, name: 'Windstorm'},
-    {id: 2, name: 'LaughingGas'}
-  ];
-
-  @ViewChildren(ViewChildComponent) views: QueryList<ViewChildComponent>;
-
-  activate() {
-    this.active = !this.active;
-    this.views.forEach(
-      view => view.activate()
-    );
-  }
-
-  // #docregion defined-property
-  get buttonLabel() {
-    return this.active ? 'Deactivate' : 'Activate';
-  }
-  // #enddocregion defined-property
-}
-// #enddocregion view
diff --git a/aio/content/examples/ts-to-js/ts/src/app/hero-title.component.html b/aio/content/examples/ts-to-js/ts/src/app/hero-title.component.html
deleted file mode 100644
index 164683cb7c..0000000000
--- a/aio/content/examples/ts-to-js/ts/src/app/hero-title.component.html
+++ /dev/null
@@ -1,4 +0,0 @@
-<!-- #docregion -->
-<h1>{{titlePrefix}} {{title}}</h1>
-<button (click)="ok()">OK</button>
-<p>{{ msg }}</p>
diff --git a/aio/content/examples/ts-to-js/ts/src/app/hero-title.component.ts b/aio/content/examples/ts-to-js/ts/src/app/hero-title.component.ts
deleted file mode 100644
index 078421ecc7..0000000000
--- a/aio/content/examples/ts-to-js/ts/src/app/hero-title.component.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { Attribute, Component, Inject, Optional } from '@angular/core';
-
-// #docregion
-// #docregion templateUrl
-@Component({
-  selector: 'hero-title',
-  templateUrl: './hero-title.component.html'
-})
-// #enddocregion templateUrl
-export class HeroTitleComponent {
-  msg = '';
-  constructor(
-    @Inject('titlePrefix') @Optional() private titlePrefix: string,
-    @Attribute('title') private title: string
-  ) { }
-
-  ok() {
-    this.msg = 'OK!';
-  }
-}
-// #enddocregion
diff --git a/aio/content/examples/ts-to-js/ts/src/app/hero.component.ts b/aio/content/examples/ts-to-js/ts/src/app/hero.component.ts
deleted file mode 100644
index 2976ec605e..0000000000
--- a/aio/content/examples/ts-to-js/ts/src/app/hero.component.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-// #docregion
-// #docregion metadata
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'hero-view',
-  template: '<h1>{{title}}: {{getName()}}</h1>'
-})
-// #docregion appexport, class
-export class HeroComponent {
-  title = 'Hero Detail';
-  getName() {return 'Windstorm'; }
-}
-// #enddocregion appexport, class
-// #enddocregion metadata
diff --git a/aio/content/examples/ts-to-js/ts/src/index.html b/aio/content/examples/ts-to-js/ts/src/index.html
deleted file mode 100644
index d9ad1f7aef..0000000000
--- a/aio/content/examples/ts-to-js/ts/src/index.html
+++ /dev/null
@@ -1,26 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <base href="/">
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="styles.css">
-    <title>TypeScript to JavaScript</title>
-
-    <!-- Polyfills -->
-    <script src="node_modules/core-js/client/shim.min.js"></script>
-
-    <script src="node_modules/zone.js/dist/zone.js"></script>
-    <script src="node_modules/systemjs/dist/system.src.js"></script>
-
-    <script src="systemjs.config.js"></script>
-    <script>
-      System.import('main.js').catch(function(err){ console.error(err); });
-    </script>
-  </head>
-
-  <body>
-    <my-app>Loading...</my-app>
-  </body>
-
-</html>
diff --git a/aio/content/examples/ts-to-js/ts/src/main.ts b/aio/content/examples/ts-to-js/ts/src/main.ts
deleted file mode 100644
index f22933ba8e..0000000000
--- a/aio/content/examples/ts-to-js/ts/src/main.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { AppModule } from './app/app.module';
-
-platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/aio/content/guide/change-log.md b/aio/content/guide/change-log.md
index 4b68f71b22..3da78c2096 100644
--- a/aio/content/guide/change-log.md
+++ b/aio/content/guide/change-log.md
@@ -120,8 +120,8 @@ The documentation for the version prior to v.2.2.0 has been removed.
 
 ## ES6  described in "TypeScript to JavaScript" (2016-11-14)
 
-The updated [TypeScript to JavaScript](guide/ts-to-js) guide
-now explains how to write apps in ES6/7
+The updated TypeScript to JavaScript guide (removed August 2017, PR #18694)
+explains how to write apps in ES6/7
 by translating the common idioms in the TypeScript documentation examples
 (and elsewhere on the web) to ES6/7 and ES5.
 
diff --git a/aio/content/guide/ts-to-js.md b/aio/content/guide/ts-to-js.md
deleted file mode 100644
index 6de85d78dd..0000000000
--- a/aio/content/guide/ts-to-js.md
+++ /dev/null
@@ -1,621 +0,0 @@
-# TypeScript to JavaScript
-
-## Introduction
-
-Anything you can do with Angular in _TypeScript_, you can also do
-in JavaScript. Translating from one language to the other is mostly a
-matter of changing the way you organize your code and access Angular APIs.
-
-_TypeScript_ is a popular language option for Angular development.
-Most code examples on the Internet as well as on this site are written in _TypeScript_.
-This cookbook contains recipes for translating _TypeScript_
-code examples to _ES6_ and to _ES5_ so that JavaScript developers
-can read and write Angular apps in their preferred dialect.
-
-Run and compare the live <live-example name="ts-to-js/ts">TypeScript</live-example> and <live-example name="ts-to-js/js">JavaScript</live-example>
-code shown in this cookbook.
-
-
-## _TypeScript_ to _ES6_ to _ES5_
-
-_TypeScript_
-<a href="https://www.typescriptlang.org" title='"TypeScript is a typed, superset of JavaScript"'>is a typed superset of _ES6 JavaScript_</a>.
-_ES6 JavaScript_ is a superset of _ES5 JavaScript_. _ES5_ is the kind of JavaScript that runs natively in all modern browsers.
-The transformation of _TypeScript_ code all the way down to _ES5_ code can be seen as "shedding" features.
-
-The downgrade progression is as follows:
-
-* _TypeScript_ to _ES6-with-decorators_.
-* _ES6-with-decorators_ to _ES6-without-decorators_ ("_plain ES6_").
-* _ES6-without-decorators_ to _ES5_.
-
-When translating from _TypeScript_ to _ES6-with-decorators_, remove
-[class property access modifiers](http://www.typescriptlang.org/docs/handbook/classes.html#public-private-and-protected-modifiers)
-such as `public` and `private`.
-Remove most of the
-[type declarations](https://www.typescriptlang.org/docs/handbook/basic-types.html),
-such as `:string` and `:boolean`
-but **keep the constructor parameter types, which are used for dependency injection**.
-
-From _ES6-with-decorators_ to _plain ES6_, remove all
-[decorators](https://www.typescriptlang.org/docs/handbook/decorators.html)
-and the remaining types.
-You must declare properties in the class constructor (`this.title = '...'`) rather than in the body of the class.
-
-Finally, from _plain ES6_ to _ES5_, the main missing features are `import`
-statements and `class` declarations.
-
-For _plain ES6_ transpilation you can _start_ with a setup similar to the
-[_TypeScript_ quickstart](https://github.com/angular/quickstart) and adjust the application code accordingly.
-Transpile with [Babel](https://babeljs.io/) using the `es2015` preset.
-To use decorators and annotations with Babel, install the
-[`angular2`](https://github.com/shuhei/babel-plugin-angular2-annotations) preset as well.
-
-{@a modularity}
-
-## Importing and Exporting
-
-### Importing Angular Code
-
-In both _TypeScript_ and _ES6_, you import Angular classes, functions, and other members with _ES6_ `import` statements.
-
-In _ES5_, you access the Angular entities of the [the Angular packages](guide/glossary#scoped-package)
-through the global `ng` object.
-Anything you can import from `@angular` is a nested member of this `ng` object:
-
-<code-tabs>
-  <code-pane title="TypeScript" path="ts-to-js/ts/src/app/app.module.ts" region="ng2import">
-  </code-pane>
-  <code-pane title="ES6 + Decorators" path="ts-to-js/js-es6-decorators/src/app/app.module.es6" region="ng2import">
-  </code-pane>
-  <code-pane title="ES6 JavaScript" path="ts-to-js/js-es6/src/app/app.module.es6" region="ng2import">
-  </code-pane>
-  <code-pane title="ES5 JavaScript" path="ts-to-js/js/src/app/app.module.js" region="ng2import">
-  </code-pane>
-</code-tabs>
-
-### Exporting application code
-
-Each file in a _TypeScript_ or _ES6_ Angular application constitutes an _ES6_ module.
-When you want to make something available to other modules, you `export` it.
-
-_ES5_ lacks native support for modules.
-In an Angular _ES5_ application, you load each file manually by adding a `<script>` tag to `index.html`.
-
-<div class="alert is-important">
-
-  The order of `<script>` tags is often significant.
-  You must load a file that defines a public JavaScript entity before a file that references that entity.
-
-</div>
-
-The best practice in _ES5_ is to create a form of modularity that avoids polluting the global scope.
-Add one application namespace object such as `app` to the global `document`.
-Then each code file "exports" public entities by attaching them to that namespace object, for example, `app.HeroComponent`.
-You could factor a large application into several sub-namespaces
-which leads to "exports" along the lines of `app.heroQueries.HeroComponent`.
-
-Every _ES5_ file should wrap code in an
-[Immediately Invoked Function Expression (IIFE)](https://en.wikipedia.org/wiki/Immediately-invoked_function_expression)
-to limit unintentional leaking of private symbols into the global scope.
-
-Here is a `HeroComponent` as it might be defined and "exported" in each of the four language variants.
-
-<code-tabs>
-  <code-pane title="TypeScript" path="ts-to-js/ts/src/app/hero.component.ts" region="appexport">
-  </code-pane>
-  <code-pane title="ES6 + Decorators" path="ts-to-js/js-es6-decorators/src/app/hero.component.es6" region="appexport">
-  </code-pane>
-  <code-pane title="ES6 JavaScript" path="ts-to-js/js-es6/src/app/hero.component.es6" region="appexport">
-  </code-pane>
-  <code-pane title="ES5 JavaScript" path="ts-to-js/js/src/app/hero.component.js" region="appexport">
-  </code-pane>
-</code-tabs>
-
-### Importing application Code
-
-In _TypeScript_ and _ES6_ apps, you `import` things that have been exported from other modules.
-
-In _ES5_ you use the shared namespace object to access "exported" entities from other files.
-
-<code-tabs>
-  <code-pane title="TypeScript" path="ts-to-js/ts/src/app/app.module.ts" region="appimport">
-  </code-pane>
-  <code-pane title="ES6 + Decorators" path="ts-to-js/js-es6-decorators/src/app/app.module.es6" region="appimport">
-  </code-pane>
-  <code-pane title="ES6 JavaScript" path="ts-to-js/js-es6/src/app/app.module.es6" region="appimport">
-  </code-pane>
-  <code-pane title="ES5 JavaScript" path="ts-to-js/js/src/app/app.module.js" region="appimport">
-  </code-pane>
-</code-tabs>
-
-<div class="alert is-helpful">
-
-  Alternatively, you can use a module loader such as Webpack or
-  Browserify in an Angular JavaScript project. In such a project, you   would
-  use _CommonJS_ modules and the `require` function to load Angular   framework code.
-  Then use `module.exports` and `require` to export and import  application  code.
-
-</div>
-
-{@a class-metadata}
-
-## Classes and Class Metadata
-
-### Classes
-
-Most Angular _TypeScript_ and _ES6_ code is written as classes.
-
-Properties and method parameters of _TypeScript_ classes may be marked with the access modifiers
-`private`, `internal`, and `public`.
-Remove these modifiers when translating to JavaScript.
-
-Most type declarations, for example, `:string` and `:boolean`, should be removed when translating to JavaScript.
-When translating to _ES6-with-decorators_, ***do not remove types from constructor parameters!***
-
-Look for types in _TypeScript_ property declarations.
-In general it is better to initialize such properties with default values because
-many browser JavaScript engines can generate more performant code.
-When _TypeScript_ code follows this same advice, it can infer the property types
-and there is nothing to remove during translation.
-
-In _ES6-without-decorators_, properties of classes must be assigned inside the constructor.
-
-_ES5_ JavaScript has no classes.
-Use the constructor function pattern instead, adding methods to the prototype.
-
-<code-tabs>
-  <code-pane title="TypeScript" path="ts-to-js/ts/src/app/hero.component.ts" region="class">
-  </code-pane>
-  <code-pane title="ES6 + Decorators" path="ts-to-js/js-es6-decorators/src/app/hero.component.es6" region="class">
-  </code-pane>
-  <code-pane title="ES6 JavaScript" path="ts-to-js/js-es6/src/app/hero.component.es6" region="class">
-  </code-pane>
-  <code-pane title="ES5 JavaScript" path="ts-to-js/js/src/app/hero.component.js" region="constructorproto">
-  </code-pane>
-</code-tabs>
-
-### Metadata
-
-When writing in _TypeScript_ or _ES6-with-decorators_,
-provide configuration and metadata by adorning a class with one or more *decorators*.
-For example, you supply metadata to a component class by preceding its definition with a
-[`@Component`](api/core/Component) decorator function whose
-argument is an object literal with metadata properties.
-
-In _plain ES6_, you provide metadata by attaching an `annotations` array to the _class_.
-Each item in the array is a new instance of a metadata decorator created with a similar metadata object literal.
-
-In _ES5_, you also provide an `annotations` array but you attach it to the _constructor function_ rather than to a class.
-
-See these variations side-by-side:
-
-<code-tabs>
-  <code-pane title="TypeScript" path="ts-to-js/ts/src/app/hero.component.ts" region="metadata">
-  </code-pane>
-  <code-pane title="ES6 + Decorators" path="ts-to-js/js-es6-decorators/src/app/hero.component.es6" region="metadata">
-  </code-pane>
-  <code-pane title="ES6 JavaScript" path="ts-to-js/js-es6/src/app/hero.component.es6" region="metadata">
-  </code-pane>
-  <code-pane title="ES5 JavaScript" path="ts-to-js/js/src/app/hero.component.js" region="metadata">
-  </code-pane>
-</code-tabs>
-
-## External template file
-
-A large component template is often kept in a separate template file.
-
-<code-example path="ts-to-js/ts/src/app/hero-title.component.html" title="src/app/hero-title.component.html" linenums="false">
-</code-example>
-
-The component, `HeroTitleComponent` in this case, then references the template file in its metadata `templateUrl` property:
-
-<code-tabs>
-  <code-pane title="TypeScript" path="ts-to-js/ts/src/app/hero-title.component.ts" region="templateUrl">
-  </code-pane>
-  <code-pane title="ES6 + Decorators" path="ts-to-js/js-es6-decorators/src/app/hero-title.component.es6" region="templateUrl">
-  </code-pane>
-  <code-pane title="ES6 JavaScript" path="ts-to-js/js-es6/src/app/hero-title.component.es6" region="templateUrl">
-  </code-pane>
-  <code-pane title="ES5 JavaScript" path="ts-to-js/js/src/app/hero-title.component.js" region="templateUrl">
-  </code-pane>
-</code-tabs>
-
-Note that both the _TypeScript_ and _ES6_ `templateUrl` properties identify the location of the template file _relative to the component module_.
-
-{@a dsl}
-
-## _ES5_ DSL
-
-This _ES5_ pattern of creating a constructor and annotating it with metadata is so common that Angular
-provides a convenience API to make it a little more compact and locates the metadata above the constructor,
-as you would if you wrote in _TypeScript_ or _ES6-with-decorators_.
-
-This _API_ (_Application Programming Interface_) is commonly known as the _ES5 DSL_ (_Domain Specific Language_).
-
-Set an application namespace property, for example, `app.HeroDslComponent`, to the result of an `ng.core.Component` function call.
-Pass the same metadata object to `ng.core.Component` as you did before.
-Then chain a call to the `Class()` method which takes an object defining the class constructor and instance methods.
-
-Here is an example of the `HeroComponent`, re-written with the DSL,
-next to the original _ES5_ version for comparison:
-
-<code-tabs>
-  <code-pane title="ES5 JavaScript with DSL" path="ts-to-js/js/src/app/hero.component.js" region="dsl">
-  </code-pane>
-  <code-pane title="ES5 JavaScript" path="ts-to-js/js/src/app/hero.component.js">
-  </code-pane>
-</code-tabs>
-
-{@a name-constructor}
-
-<div class="callout is-helpful">
-
-  A **named** constructor displays clearly in the console log
-  if the component throws a runtime error.
-  An **unnamed** constructor displays as an anonymous function, for   example, `class0`,
-  which is impossible to find in the source code.
-
-</div>
-
-{@a getters-setters}
-
-### Properties with getters and setters
-
-_TypeScript_ and _ES6_ support with getters and setters.
-Here's an example of a read-only _TypeScript_ property with a getter
-that prepares a toggle-button label for the next clicked state:
-
-<code-example path="ts-to-js/ts/src/app/hero-queries.component.ts" region="defined-property" title="ts/src/app/hero-queries.component.ts" linenums="false">
-</code-example>
-
-This _TypeScript_ "getter" property is transpiled to an _ES5_
-<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty"
-   title="Defined Properties">defined property</a>.
-The _ES5 DSL_ does not support _defined properties_ directly
-but you can still create them by extracting the "class" prototype and
-adding the _defined property_ in raw JavaScript like this:
-
-<code-example path="ts-to-js/js/src/app/hero-queries.component.js" region="defined-property" title="js/src/app/hero-queries.component.ts" linenums="false">
-</code-example>
-
-{@a dsl-other}
-
-### DSL for other classes
-There are similar DSLs for other decorated classes.
-You can define a directive with `ng.core.Directive`:
-
-
-<code-example>
-  app.MyDirective = ng.core.Directive({
-    selector: '[myDirective]'
-  }).Class({
-    ...
-  });
-</code-example>
-
-and a pipe with `ng.core.Pipe`:
-
-<code-example>
-  app.MyPipe = ng.core.Pipe({
-    name: 'myPipe'
-  }).Class({
-    ...
-  });
-</code-example>
-
-{@a interfaces}
-
-## Interfaces
-
-A _TypeScript_ interface helps ensure that a class implements the interface's members correctly.
-Always try to use Angular interfaces where appropriate.
-For example, the component class that implements the `ngOnInit` lifecycle hook method
-should implement the `OnInit` interface.
-
-_TypeScript_ interfaces exist for developer convenience and are not used by Angular at runtime.
-They have no physical manifestation in the generated JavaScript code.
-Just implement the methods and ignore interfaces when translating code samples from _TypeScript_ to JavaScript.
-
-<code-tabs>
-  <code-pane title="TypeScript" path="ts-to-js/ts/src/app/hero-lifecycle.component.ts">
-  </code-pane>
-  <code-pane title="ES6 + Decorators" path="ts-to-js/js-es6-decorators/src/app/hero-lifecycle.component.es6">
-  </code-pane>
-  <code-pane title="ES6 JavaScript" path="ts-to-js/js-es6/src/app/hero-lifecycle.component.es6">
-  </code-pane>
-  <code-pane title="ES5 JavaScript" path="ts-to-js/js/src/app/hero-lifecycle.component.js">
-  </code-pane>
-  <code-pane title="ES5 JavaScript with DSL" path="ts-to-js/js/src/app/hero-lifecycle.component.js" region="dsl">
-  </code-pane>
-</code-tabs>
-
-{@a io-decorators}
-
-## Input and Output Metadata
-
-### Input and Output Decorators
-
-In _TypeScript_ and _ES6-with-decorators_, you often add metadata to class _properties_ with _property decorators_.
-For example, you apply [`@Input` and `@Output` property decorators](guide/template-syntax#inputs-outputs)
-to public class properties that will be the target of data binding expressions in parent components.
-
-There is no equivalent of a property decorator in _ES5_ or _plain ES6_.
-Fortunately, every property decorator has an equivalent representation in a class decorator metadata property.
-A _TypeScript_ `@Input` property decorator can be represented by an item in the `Component` metadata's `inputs` array.
-
-You already know how to add `Component` or `Directive` class metadata in _any_ JavaScript dialect so
-there's nothing fundamentally new about adding another property.
-But note that what would have been _separate_ `@Input` and `@Output` property decorators for each class property are
-combined in the metadata `inputs` and `outputs` _arrays_.
-
-<code-tabs>
-  <code-pane title="TypeScript" path="ts-to-js/ts/src/app/confirm.component.ts">
-  </code-pane>
-  <code-pane title="ES6 + Decorators" path="ts-to-js/js-es6-decorators/src/app/confirm.component.es6">
-  </code-pane>
-  <code-pane title="ES6 JavaScript" path="ts-to-js/js-es6/src/app/confirm.component.es6">
-  </code-pane>
-  <code-pane title="ES5 JavaScript" path="ts-to-js/js/src/app/confirm.component.js">
-  </code-pane>
-  <code-pane title="ES5 JavaScript with DSL" path="ts-to-js/js/src/app/confirm.component.js" region="dsl">
-  </code-pane>
-</code-tabs>
-
-In the previous example, one of the public-facing binding names, `cancelMsg`,
-differs from the corresponding class property name, `notOkMsg`.
-That's OK but you must tell Angular about it so that it can map an external binding of `cancelMsg`
-to the component's `notOkMsg` property.
-
-In _TypeScript_ and _ES6-with-decorators_,
-you specify the special binding name in the argument to the property decorator.
-
-In _ES5_ and _plain ES6_ code, convey this pairing with the `propertyName: bindingName` syntax in the class metadata.
-
-{@a dependency-injection}
-
-## Dependency injection
-Angular relies heavily on [Dependency Injection](guide/dependency-injection) to provide services to the objects it creates.
-When Angular creates a new component, directive, pipe or another service,
-it sets the class constructor parameters to instances of services provided by an _Injector_.
-
-The developer must tell Angular what to inject into each parameter.
-
-{@a injection-class-type}
-
-### Injection by class type
-
-The easiest and most popular technique in _TypeScript_ and _ES6-with-decorators_ is to set the constructor parameter type
-to the class associated with the service to inject.
-
-The _TypeScript_ transpiler writes parameter type information into the generated JavaScript.
-Angular reads that information at runtime and locates the corresponding service in the appropriate _Injector_.
-The _ES6-with-decorators_ transpiler does essentially the same thing using the same parameter-typing syntax.
-
-_ES5_ and _plain ES6_ lack types so you must identify "injectables" by attaching a **`parameters`** array to the constructor function.
-Each item in the array specifies the service's injection token.
-
-As with _TypeScript_, the most popular token is a class,
-or rather a _constructor function_ that represents a class in _ES5_ and _plain ES6_.
-The format of the `parameters` array varies:
-
-* _Plain ES6_&mdash;nest each constructor function in a sub-array.
-* _ES5_&mdash;simply list the constructor functions.
-
-When writing with _ES5 DSL_, set the `Class.constructor` property to
-an array whose first parameters are the injectable constructor functions and whose
-last parameter is the class constructor itself.
-This format should be familiar to AngularJS developers.
-
-<code-tabs>
-  <code-pane title="TypeScript" path="ts-to-js/ts/src/app/hero-di.component.ts">
-  </code-pane>
-  <code-pane title="ES6 + Decorators" path="ts-to-js/js-es6-decorators/src/app/hero-di.component.es6">
-  </code-pane>
-  <code-pane title="ES6 JavaScript" path="ts-to-js/js-es6/src/app/hero-di.component.es6">
-  </code-pane>
-  <code-pane title="ES5 JavaScript" path="ts-to-js/js/src/app/hero-di.component.js">
-  </code-pane>
-  <code-pane title="ES5 JavaScript with DSL" path="ts-to-js/js/src/app/hero-di.component.js" region="dsl">
-  </code-pane>
-</code-tabs>
-
-### Injection with the @Inject decorator
-
-Sometimes the dependency injection token isn't a class or constructor function.
-
-In _TypeScript_ and _ES6-with-decorators_, you precede the class constructor parameter
-by calling the `@Inject()` decorator with the injection token.
-In the following example, the token is the string `'heroName'`.
-
-The other JavaScript dialects add a `parameters` array to the class constructor function.
-Each item contains a new instance of `Inject`:
-
-* _Plain ES6_&mdash;each item is a new instance of `Inject(token)` in a sub-array.
-* _ES5_&mdash;simply list the string tokens.
-
-When writing with _ES5 DSL_, set the `Class.constructor` property to a function definition
-array as before. Create a new instance of `ng.core.Inject(token)` for each parameter.
-
-<code-tabs>
-  <code-pane title="TypeScript" path="ts-to-js/ts/src/app/hero-di-inject.component.ts">
-  </code-pane>
-  <code-pane title="ES6 + Decorators" path="ts-to-js/js-es6-decorators/src/app/hero-di-inject.component.es6">
-  </code-pane>
-  <code-pane title="ES6 JavaScript" path="ts-to-js/js-es6/src/app/hero-di-inject.component.es6">
-  </code-pane>
-  <code-pane title="ES5 JavaScript" path="ts-to-js/js/src/app/hero-di-inject.component.js">
-  </code-pane>
-  <code-pane title="ES5 JavaScript with DSL" path="ts-to-js/js/src/app/hero-di-inject.component.js" region="dsl">
-  </code-pane>
-</code-tabs>
-
-### Additional Injection Decorators
-
-You can qualify injection behavior with injection decorators from `@angular/core`.
-
-In _TypeScript_ and _ES6-with-decorators_,
-you precede the constructor parameters with injection qualifiers such as:
-
-* [`@Optional`](api/core/Optional) sets the parameter to `null` if the service is missing.
-* [`@Attribute`](api/core/Attribute) to inject a host element attribute value.
-* [`@ContentChild`](api/core/ContentChild) to inject a content child.
-* [`@ViewChild`](api/core/ViewChild) to inject a view child.
-* [`@Host`](api/core/Host) to inject a service in this component or its host.
-* [`@SkipSelf`](api/core/SkipSelf) to inject a service provided in an ancestor of this component.
-
-In _plain ES6_ and _ES5_, create an instance of the equivalent injection qualifier in a nested array within the `parameters` array.
-For example, you'd write `new Optional()` in _plain ES6_ and `new ng.core.Optional()` in _ES5_.
-
-When writing with _ES5 DSL_, set the `Class.constructor` property to a function definition
-array as before. Use a nested array to define a parameter's complete injection specification.
-
-<code-tabs>
-  <code-pane title="TypeScript" path="ts-to-js/ts/src/app/hero-title.component.ts">
-  </code-pane>
-  <code-pane title="ES6 + Decorators" path="ts-to-js/js-es6-decorators/src/app/hero-title.component.es6">
-  </code-pane>
-  <code-pane title="ES6 JavaScript" path="ts-to-js/js-es6/src/app/hero-title.component.es6">
-  </code-pane>
-  <code-pane title="ES5 JavaScript" path="ts-to-js/js/src/app/hero-title.component.js">
-  </code-pane>
-  <code-pane title="ES5 JavaScript with DSL" path="ts-to-js/js/src/app/hero-title.component.js" region="dsl">
-  </code-pane>
-</code-tabs>
-
-<div class="l-sub-section">
-
-  In the example above, there is no provider for the `'titlePrefix'` token.
-  Without `@Optional()`, Angular would raise an error.
-  With `@Optional()`, Angular sets the constructor parameter to `null`
-  and the component displays the title without a prefix.
-
-</div>
-
-{@a host-binding}
-
-## Host Binding
-
-Angular supports bindings to properties and events of the _host element_, which is the
-element whose tag matches the component selector.
-
-### Host Decorators
-
-In _TypeScript_ and _ES6-with-decorators_, you can use host property decorators to bind a host
-element to a component or directive.
-The [`@HostBinding`](api/core/HostBinding) decorator
-binds host element properties to component data properties.
-The [`@HostListener`](api/core/HostListener) decorator binds
-host element events to component event handlers.
-
-In _plain ES6_ or _ES5_, add a `host` attribute to the component metadata to achieve the
-same effect as `@HostBinding` and `@HostListener`.
-
-The  `host` value is an object whose properties are host property and listener bindings:
-
-* Each key follows regular Angular binding syntax: `[property]` for host bindings
-  or `(event)` for host listeners.
-* Each value identifies the corresponding component property or method.
-
-<code-tabs>
-  <code-pane title="TypeScript" path="ts-to-js/ts/src/app/hero-host.component.ts">
-  </code-pane>
-  <code-pane title="ES6 + Decorators" path="ts-to-js/js-es6-decorators/src/app/hero-host.component.es6">
-  </code-pane>
-  <code-pane title="ES6 JavaScript" path="ts-to-js/js-es6/src/app/hero-host.component.es6">
-  </code-pane>
-  <code-pane title="ES5 JavaScript" path="ts-to-js/js/src/app/hero-host.component.js">
-  </code-pane>
-  <code-pane title="ES5 JavaScript with DSL" path="ts-to-js/js/src/app/hero-host.component.js" region="dsl">
-  </code-pane>
-</code-tabs>
-
-### Host Metadata
-
-Some developers prefer to specify host properties and listeners
-in the component metadata.
-They'd _rather_ do it the way you _must_ do it _ES5_ and _plain ES6_.
-
-The following re-implementation of the `HeroComponent` shows that _any property metadata decorator_
-can be expressed as component or directive metadata in both _TypeScript_ and _ES6-with-decorators_.
-These particular _TypeScript_ and _ES6_ code snippets happen to be identical.
-
-<code-tabs>
-  <code-pane title="TypeScript" path="ts-to-js/ts/src/app/hero-host-meta.component.ts">
-  </code-pane>
-  <code-pane title="ES6 + Decorators" path="ts-to-js/js-es6-decorators/src/app/hero-host-meta.component.es6">
-  </code-pane>
-</code-tabs>
-
-{@a view-child-decorators}
-
-### View and Child Decorators
-
-Several _property_ decorators query a component's nested view and content components.
-
-<div class="l-sub-section">
-
-  _View_ children are associated with element tags that appear _within_ the component's template.
-
-  _Content_ children are associated with elements that appear _between_ the component's element tags;
-  they are projected into an `<ng-content>` slot in the component's template.
-
-</div>
-
-The [`@ViewChild`](api/core/ViewChild) and
-[`@ViewChildren`](api/core/ViewChildren) property decorators
-allow a component to query instances of other components that are used in
-its view.
-
-In _ES5_ and _ES6_, you access a component's view children by adding a `queries` property to the component metadata.
-The `queries` property value is a hash map.
-
-* Each _key_ is the name of a component property that will hold the view child or children.
-* Each _value_ is a new instance of either `ViewChild` or `ViewChildren`.
-
-<code-tabs>
-  <code-pane title="TypeScript" path="ts-to-js/ts/src/app/hero-queries.component.ts" region="view">
-  </code-pane>
-  <code-pane title="ES6 + Decorators" path="ts-to-js/js-es6-decorators/src/app/hero-queries.component.es6" region="view">
-  </code-pane>
-  <code-pane title="ES6 JavaScript" path="ts-to-js/js-es6/src/app/hero-queries.component.es6" region="view">
-  </code-pane>
-  <code-pane title="ES5 JavaScript with DSL" path="ts-to-js/js/src/app/hero-queries.component.js" region="view">
-  </code-pane>
-</code-tabs>
-
-The [`@ContentChild`](api/core/ContentChild) and
-[`@ContentChildren`](api/core/ContentChildren) property decorators
-allow a component to query instances of other components that have been projected
-into its view from elsewhere.
-
-They can be added in the same way as [`@ViewChild`](api/core/ViewChild) and
-[`@ViewChildren`](api/core/ViewChildren).
-
-<code-tabs>
-  <code-pane title="TypeScript" path="ts-to-js/ts/src/app/hero-queries.component.ts" region="content">
-  </code-pane>
-  <code-pane title="ES6 + Decorators" path="ts-to-js/js-es6-decorators/src/app/hero-queries.component.es6" region="content">
-  </code-pane>
-  <code-pane title="ES6 JavaScript" path="ts-to-js/js-es6/src/app/hero-queries.component.es6" region="content">
-  </code-pane>
-  <code-pane title="ES5 JavaScript with DSL" path="ts-to-js/js/src/app/hero-queries.component.js" region="content">
-  </code-pane>
-</code-tabs>
-
-<div class="alert is-helpful">
-
-  In _TypeScript_ and _ES6-with-decorators_ you can also use the  `queries` metadata
-  instead of the `@ViewChild` and `@ContentChild` property decorators.
-
-</div>
-
-{@a aot}
-
-## AOT Compilation in _TypeScript_ only
-
-Angular offers two modes of template compilation, JIT (_just-in-time_) and
-[AOT (_ahead-of-time_)](guide/aot-compiler).
-Currently the AOT compiler only works with _TypeScript_ applications because, in part, it generates
-_TypeScript_ files as an intermediate result.
-**AOT is not an option for pure JavaScript applications** at this time.
diff --git a/aio/content/navigation.json b/aio/content/navigation.json
index 715d247467..cd277cef8d 100644
--- a/aio/content/navigation.json
+++ b/aio/content/navigation.json
@@ -298,11 +298,6 @@
           "title": "Security",
           "tooltip": "Developing for content security in Angular applications."
         },
-        {
-          "url": "guide/ts-to-js",
-          "title": "TypeScript to JavaScript",
-          "tooltip": "Convert Angular TypeScript examples into ES6 and ES5 JavaScript."
-        },
         {
           "title": "Setup & Deployment",
           "tooltip": "Setup and Deployment",
diff --git a/aio/src/app/embedded/code/code.component.ts b/aio/src/app/embedded/code/code.component.ts
index 5a982c7390..ba8953e2b3 100644
--- a/aio/src/app/embedded/code/code.component.ts
+++ b/aio/src/app/embedded/code/code.component.ts
@@ -22,8 +22,8 @@ const defaultLineNumsCount = 10; // by default, show linenums over this number
  *   [code]="variableContainingCode"
  *   [language]="ts"
  *   [linenums]="true"
- *   [path]="ts-to-js/ts/src/app/app.module.ts"
- *   [region]="ng2import">
+ *   [path]="router/src/app/app.module.ts"
+ *   [region]="animations-module">
  * </aio-code>
  * ```
  */

From c65f18a2fa4e605a0900a6ca18caece5e2bd27fc Mon Sep 17 00:00:00 2001
From: ksvitkovsky <ksvitkovsky@yandex.ru>
Date: Sun, 13 Aug 2017 16:12:08 +0400
Subject: [PATCH 36/83] docs(forms): fix reactive-forms guide typo

closes #17943
---
 aio/content/guide/reactive-forms.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/aio/content/guide/reactive-forms.md b/aio/content/guide/reactive-forms.md
index 3279133ef7..929bf17dcc 100644
--- a/aio/content/guide/reactive-forms.md
+++ b/aio/content/guide/reactive-forms.md
@@ -1134,7 +1134,7 @@ The reactive forms approach both emphasizes and facilitates this distinction.
 The default form displays a nameless hero with no addresses.
 
 You need a method to populate (or repopulate) the _secretLairs_ with actual hero addresses whenever
-the parent `HeroListComponent` sets the `HeroListComponent.hero` input property to a new `Hero`.
+the parent `HeroListComponent` sets the `HeroDetailComponent.hero` input property to a new `Hero`.
 
 The following `setAddresses` method replaces the _secretLairs_ `FormArray` with a new `FormArray`,
 initialized by an array of hero address `FormGroups`.

From 32ff21c16bf1833d2da9f8e2ec8536f7a13f92de Mon Sep 17 00:00:00 2001
From: Kara Erickson <karakara@google.com>
Date: Mon, 14 Aug 2017 14:33:54 -0700
Subject: [PATCH 37/83] fix(forms): re-assigning options should not clear
 select

Fixes #18330
---
 .../select_control_value_accessor.ts          |  4 +-
 .../test/value_accessor_integration_spec.ts   | 58 ++++++++++++++++++-
 2 files changed, 59 insertions(+), 3 deletions(-)

diff --git a/packages/forms/src/directives/select_control_value_accessor.ts b/packages/forms/src/directives/select_control_value_accessor.ts
index 43e6322ae3..127470237b 100644
--- a/packages/forms/src/directives/select_control_value_accessor.ts
+++ b/packages/forms/src/directives/select_control_value_accessor.ts
@@ -129,8 +129,8 @@ export class SelectControlValueAccessor implements ControlValueAccessor {
 
   registerOnChange(fn: (value: any) => any): void {
     this.onChange = (valueString: string) => {
-      this.value = valueString;
-      fn(this._getOptionValue(valueString));
+      this.value = this._getOptionValue(valueString);
+      fn(this.value);
     };
   }
   registerOnTouched(fn: () => any): void { this.onTouched = fn; }
diff --git a/packages/forms/test/value_accessor_integration_spec.ts b/packages/forms/test/value_accessor_integration_spec.ts
index b708121882..11ad0271d6 100644
--- a/packages/forms/test/value_accessor_integration_spec.ts
+++ b/packages/forms/test/value_accessor_integration_spec.ts
@@ -8,7 +8,7 @@
 
 import {Component, Directive, EventEmitter, Input, Output, Type} from '@angular/core';
 import {ComponentFixture, TestBed, async, fakeAsync, tick} from '@angular/core/testing';
-import {AbstractControl, ControlValueAccessor, FormControl, FormGroup, FormsModule, NG_VALIDATORS, NG_VALUE_ACCESSOR, NgControl, NgForm, ReactiveFormsModule, Validators} from '@angular/forms';
+import {AbstractControl, ControlValueAccessor, FormControl, FormGroup, FormsModule, NG_VALIDATORS, NG_VALUE_ACCESSOR, NgControl, NgForm, NgModel, ReactiveFormsModule, Validators} from '@angular/forms';
 import {By} from '@angular/platform-browser/src/dom/debug/by';
 import {dispatchEvent} from '@angular/platform-browser/testing/src/browser_util';
 
@@ -210,6 +210,31 @@ export function main() {
           expect(sfOption.nativeElement.selected).toBe(true);
         });
 
+        it('should support re-assigning the options array with compareWith', () => {
+          const fixture = initTest(FormControlSelectWithCompareFn);
+          fixture.detectChanges();
+
+          // Option IDs start out as 0 and 1, so setting the select value to "1: Object"
+          // will select the second option (NY).
+          const select = fixture.debugElement.query(By.css('select'));
+          select.nativeElement.value = '1: Object';
+          dispatchEvent(select.nativeElement, 'change');
+          fixture.detectChanges();
+
+          expect(fixture.componentInstance.form.value).toEqual({city: {id: 2, name: 'NY'}});
+
+          fixture.componentInstance.cities = [{id: 1, name: 'SF'}, {id: 2, name: 'NY'}];
+          fixture.detectChanges();
+
+          // Now that the options array has been re-assigned, new option instances will
+          // be created by ngFor. These instances will have different option IDs, subsequent
+          // to the first: 2 and 3. For the second option to stay selected, the select
+          // value will need to have the ID of the current second option: 3.
+          const nyOption = fixture.debugElement.queryAll(By.css('option'))[1];
+          expect(select.nativeElement.value).toEqual('3: Object');
+          expect(nyOption.nativeElement.selected).toBe(true);
+        });
+
       });
 
       describe('in template-driven forms', () => {
@@ -335,6 +360,37 @@ export function main() {
              expect(sfOption.nativeElement.selected).toBe(true);
            }));
 
+        it('should support re-assigning the options array with compareWith', fakeAsync(() => {
+             const fixture = initTest(NgModelSelectWithCustomCompareFnForm);
+             fixture.componentInstance.selectedCity = {id: 1, name: 'SF'};
+             fixture.componentInstance.cities = [{id: 1, name: 'SF'}, {id: 2, name: 'NY'}];
+             fixture.detectChanges();
+             tick();
+
+             // Option IDs start out as 0 and 1, so setting the select value to "1: Object"
+             // will select the second option (NY).
+             const select = fixture.debugElement.query(By.css('select'));
+             select.nativeElement.value = '1: Object';
+             dispatchEvent(select.nativeElement, 'change');
+             fixture.detectChanges();
+
+             const model = fixture.debugElement.children[0].injector.get(NgModel);
+             expect(model.value).toEqual({id: 2, name: 'NY'});
+
+             fixture.componentInstance.cities = [{id: 1, name: 'SF'}, {id: 2, name: 'NY'}];
+             fixture.detectChanges();
+             tick();
+
+             // Now that the options array has been re-assigned, new option instances will
+             // be created by ngFor. These instances will have different option IDs, subsequent
+             // to the first: 2 and 3. For the second option to stay selected, the select
+             // value will need to have the ID of the current second option: 3.
+             const nyOption = fixture.debugElement.queryAll(By.css('option'))[1];
+             expect(select.nativeElement.value).toEqual('3: Object');
+             expect(nyOption.nativeElement.selected).toBe(true);
+           }));
+
+
       });
 
     });

From 75d484e29dbf6d85ed6d5b0bd011c6ae3b4bc68b Mon Sep 17 00:00:00 2001
From: Hans Larsen <hans@hansl.ca>
Date: Wed, 16 Aug 2017 10:51:23 -0700
Subject: [PATCH 38/83] docs: add changelog for 4.3.5

---
 CHANGELOG.md | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9087d05eba..07ce5d6d9d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,20 @@
+<a name="4.3.5"></a>
+## [4.3.5](https://github.com/angular/angular/compare/4.3.4...4.3.5) (2017-08-16)
+
+
+### Bug Fixes
+
+* **aio:** skip PWA test when redeploying non-public commit ([b9c1c91](https://github.com/angular/angular/commit/b9c1c91))
+* **core:** forbid destroyed views to be inserted or moved in VC ([972538b](https://github.com/angular/angular/commit/972538b)), closes [#18615](https://github.com/angular/angular/issues/18615)
+* **forms:** re-assigning options should not clear select ([a1624f2](https://github.com/angular/angular/commit/a1624f2)), closes [#18330](https://github.com/angular/angular/issues/18330)
+
+
+### Performance Improvements
+
+* **aio:** update to new version of build-optimizer ([d7be4f1](https://github.com/angular/angular/commit/d7be4f1))
+
+
+
 <a name="4.3.4"></a>
 ## [4.3.4](https://github.com/angular/angular/compare/4.3.3...4.3.4) (2017-08-10)
 

From bc22ff1517c06b7b5ba96d8a1cc9cb7acfa3a73e Mon Sep 17 00:00:00 2001
From: Chuck Jazdzewski <chuckj@google.com>
Date: Tue, 15 Aug 2017 17:04:45 -0700
Subject: [PATCH 39/83] fix(language-service): remove tsickle dependency

Removes the tsickle dependency added when tsickle was added to the
transform compiler.

Added a test to ensure stray dependencies are not added and no
errors are introduced during module flattening.
---
 .../language_service_plugin/scripts/test.sh   |  5 +++
 .../tools/load_test.ts                        | 35 +++++++++++++++++++
 .../tools/tsconfig.json                       |  3 +-
 .../compiler-cli/src/language_services.ts     | 24 +++++++++++++
 packages/compiler-cli/tsconfig-build.json     |  1 +
 packages/language-service/src/completions.ts  |  2 +-
 packages/language-service/src/diagnostics.ts  |  2 +-
 packages/language-service/src/expressions.ts  |  2 +-
 .../language-service/src/locate_symbol.ts     |  2 +-
 .../language-service/src/reflector_host.ts    |  3 +-
 packages/language-service/src/types.ts        |  2 +-
 .../language-service/src/typescript_host.ts   |  2 +-
 packages/language-service/src/utils.ts        |  2 +-
 packages/language-service/tsconfig-build.json |  1 +
 14 files changed, 77 insertions(+), 9 deletions(-)
 create mode 100644 integration/language_service_plugin/tools/load_test.ts
 create mode 100644 packages/compiler-cli/src/language_services.ts

diff --git a/integration/language_service_plugin/scripts/test.sh b/integration/language_service_plugin/scripts/test.sh
index 29f5d34be2..0721da0c45 100755
--- a/integration/language_service_plugin/scripts/test.sh
+++ b/integration/language_service_plugin/scripts/test.sh
@@ -9,6 +9,11 @@ source scripts/env.sh
 HOST="node tools/typescript_host.js"
 VALIDATE="node tools/typescript_validator.js"
 
+# Ensure the languages service can load correctly in node before typescript loads it.
+# This verifies its dependencies and emits any exceptions, both of which are  only  
+# emitted to the typescript logs (not the validated output).
+node tools/load_test.js
+
 for TYPESCRIPT in ${TYPESCRIPTS[@]}
 do
   SERVER="node typescripts/$TYPESCRIPT/node_modules/typescript/lib/tsserver.js"
diff --git a/integration/language_service_plugin/tools/load_test.ts b/integration/language_service_plugin/tools/load_test.ts
new file mode 100644
index 0000000000..96638d81d2
--- /dev/null
+++ b/integration/language_service_plugin/tools/load_test.ts
@@ -0,0 +1,35 @@
+const ts = require('typescript');
+const Module = require('module');
+
+const existingRequire = Module.prototype.require;
+
+const recordedRequires: string[] = [];
+
+function recordingRequire(path: string) {
+  recordedRequires.push(path);
+  return existingRequire.call(this, path);
+}
+
+Module.prototype.require = recordingRequire;
+
+try {
+  const lsf = require('@angular/language-service');
+  const ls = lsf({typescript: ts});
+
+  // Assert that the only module that should have been required are '@angular/langauge-service', 'fs', and 'path'
+
+  const allowedLoads = new Set(["@angular/language-service", "fs", "path"]);
+
+  const invalidModules = recordedRequires.filter(m => !allowedLoads.has(m));
+
+  if (invalidModules.length > 0) {
+    console.error(`FAILED: Loading the language service required: ${invalidModules.join(', ')}`);
+    process.exit(1);
+  }
+} catch (e) {
+  console.error(`FAILED: Loading the language service caused the following exception: ${e.stack || e}`);
+  process.exit(1);
+}
+
+console.log('SUCCESS: Loading passed')
+process.exit(0);
\ No newline at end of file
diff --git a/integration/language_service_plugin/tools/tsconfig.json b/integration/language_service_plugin/tools/tsconfig.json
index c576365a6e..fd844f194c 100644
--- a/integration/language_service_plugin/tools/tsconfig.json
+++ b/integration/language_service_plugin/tools/tsconfig.json
@@ -13,6 +13,7 @@
     },
     "files": [
         "typescript_host.ts", 
-        "typescript_validator.ts"
+        "typescript_validator.ts",
+        "load_test.ts"
     ]
 }
\ No newline at end of file
diff --git a/packages/compiler-cli/src/language_services.ts b/packages/compiler-cli/src/language_services.ts
new file mode 100644
index 0000000000..34fd77fd23
--- /dev/null
+++ b/packages/compiler-cli/src/language_services.ts
@@ -0,0 +1,24 @@
+/**
+ * @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
+ */
+
+/*
+
+The API from compiler-cli that language-service can see.
+It is important that none the exported modules require anything other than
+Angular modules and Typescript as this will indirectly add a dependency
+to the language service.
+
+*/
+
+export {AngularCompilerOptions} from '@angular/tsc-wrapped';
+export {CompilerHost, CompilerHostContext, MetadataProvider, ModuleResolutionHostAdapter, NodeCompilerHostContext} from './compiler_host';
+export {TypeChecker} from './diagnostics/check_types';
+export {DiagnosticTemplateInfo, ExpressionDiagnostic, getExpressionDiagnostics, getExpressionScope, getTemplateExpressionDiagnostics} from './diagnostics/expression_diagnostics';
+export {AstType, DiagnosticKind, ExpressionDiagnosticsContext, TypeDiagnostic} from './diagnostics/expression_type';
+export {BuiltinType, DeclarationKind, Definition, Location, PipeInfo, Pipes, Signature, Span, Symbol, SymbolDeclaration, SymbolQuery, SymbolTable} from './diagnostics/symbols';
+export {getClassFromStaticSymbol, getClassMembers, getClassMembersFromDeclaration, getPipesTable, getSymbolQuery} from './diagnostics/typescript_symbols';
diff --git a/packages/compiler-cli/tsconfig-build.json b/packages/compiler-cli/tsconfig-build.json
index 3f1d3a822c..2bbb80d3e1 100644
--- a/packages/compiler-cli/tsconfig-build.json
+++ b/packages/compiler-cli/tsconfig-build.json
@@ -33,6 +33,7 @@
     "index.ts",
     "src/main.ts",
     "src/extract_i18n.ts",
+    "src/language_services.ts",
     "../../node_modules/@types/node/index.d.ts",
     "../../node_modules/@types/jasmine/index.d.ts",
     "../../node_modules/zone.js/dist/zone.js.d.ts"
diff --git a/packages/language-service/src/completions.ts b/packages/language-service/src/completions.ts
index ab78fbce8c..3412abffef 100644
--- a/packages/language-service/src/completions.ts
+++ b/packages/language-service/src/completions.ts
@@ -7,7 +7,7 @@
  */
 
 import {AST, AstPath, AttrAst, Attribute, BoundDirectivePropertyAst, BoundElementPropertyAst, BoundEventAst, BoundTextAst, CssSelector, DirectiveAst, Element, ElementAst, EmbeddedTemplateAst, ImplicitReceiver, NAMED_ENTITIES, NgContentAst, Node as HtmlAst, NullTemplateVisitor, ParseSpan, PropertyRead, ReferenceAst, SelectorMatcher, TagContentType, TemplateAst, TemplateAstVisitor, Text, TextAst, VariableAst, findNode, getHtmlTagDefinition, splitNsName, templateVisitAll} from '@angular/compiler';
-import {DiagnosticTemplateInfo, getExpressionScope} from '@angular/compiler-cli';
+import {DiagnosticTemplateInfo, getExpressionScope} from '@angular/compiler-cli/src/language_services';
 
 import {AstResult, AttrInfo, SelectorInfo, TemplateInfo} from './common';
 import {getExpressionCompletions} from './expressions';
diff --git a/packages/language-service/src/diagnostics.ts b/packages/language-service/src/diagnostics.ts
index 83a37efef3..23ec4316bf 100644
--- a/packages/language-service/src/diagnostics.ts
+++ b/packages/language-service/src/diagnostics.ts
@@ -7,7 +7,7 @@
  */
 
 import {NgAnalyzedModules, StaticSymbol} from '@angular/compiler';
-import {DiagnosticTemplateInfo, getTemplateExpressionDiagnostics} from '@angular/compiler-cli';
+import {DiagnosticTemplateInfo, getTemplateExpressionDiagnostics} from '@angular/compiler-cli/src/language_services';
 
 import {AstResult} from './common';
 import {Declarations, Diagnostic, DiagnosticKind, Diagnostics, Span, TemplateSource} from './types';
diff --git a/packages/language-service/src/expressions.ts b/packages/language-service/src/expressions.ts
index 9af51ec457..95b0018c81 100644
--- a/packages/language-service/src/expressions.ts
+++ b/packages/language-service/src/expressions.ts
@@ -7,7 +7,7 @@
  */
 
 import {AST, ASTWithSource, AstPath as AstPathBase, NullAstVisitor, visitAstChildren} from '@angular/compiler';
-import {AstType} from '@angular/compiler-cli';
+import {AstType} from '@angular/compiler-cli/src/language_services';
 
 import {BuiltinType, Span, Symbol, SymbolQuery, SymbolTable} from './types';
 import {inSpan} from './utils';
diff --git a/packages/language-service/src/locate_symbol.ts b/packages/language-service/src/locate_symbol.ts
index 9dd47837bf..42dce460a4 100644
--- a/packages/language-service/src/locate_symbol.ts
+++ b/packages/language-service/src/locate_symbol.ts
@@ -7,7 +7,7 @@
  */
 
 import {AST, Attribute, BoundDirectivePropertyAst, BoundEventAst, ElementAst, TemplateAst, TemplateAstPath, findNode, tokenReference} from '@angular/compiler';
-import {getExpressionScope} from '@angular/compiler-cli';
+import {getExpressionScope} from '@angular/compiler-cli/src/language_services';
 
 import {TemplateInfo} from './common';
 import {getExpressionSymbol} from './expressions';
diff --git a/packages/language-service/src/reflector_host.ts b/packages/language-service/src/reflector_host.ts
index 9a84fb1e37..f9439f1c51 100644
--- a/packages/language-service/src/reflector_host.ts
+++ b/packages/language-service/src/reflector_host.ts
@@ -6,7 +6,8 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {AngularCompilerOptions, AotCompilerHost, CompilerHost, ModuleResolutionHostAdapter} from '@angular/compiler-cli';
+import {AotCompilerHost} from '@angular/compiler';
+import {AngularCompilerOptions, CompilerHost, ModuleResolutionHostAdapter} from '@angular/compiler-cli/src/language_services';
 import * as ts from 'typescript';
 
 class ReflectorModuleModuleResolutionHost implements ts.ModuleResolutionHost {
diff --git a/packages/language-service/src/types.ts b/packages/language-service/src/types.ts
index 884cf5b02e..8ea1a5c535 100644
--- a/packages/language-service/src/types.ts
+++ b/packages/language-service/src/types.ts
@@ -7,7 +7,7 @@
  */
 
 import {CompileDirectiveMetadata, CompileMetadataResolver, CompilePipeSummary, NgAnalyzedModules, StaticSymbol} from '@angular/compiler';
-import {BuiltinType, DeclarationKind, Definition, PipeInfo, Pipes, Signature, Span, Symbol, SymbolDeclaration, SymbolQuery, SymbolTable} from '@angular/compiler-cli';
+import {BuiltinType, DeclarationKind, Definition, PipeInfo, Pipes, Signature, Span, Symbol, SymbolDeclaration, SymbolQuery, SymbolTable} from '@angular/compiler-cli/src/language_services';
 
 export {
   BuiltinType,
diff --git a/packages/language-service/src/typescript_host.ts b/packages/language-service/src/typescript_host.ts
index 7cdf0a840f..e91ca3f532 100644
--- a/packages/language-service/src/typescript_host.ts
+++ b/packages/language-service/src/typescript_host.ts
@@ -7,7 +7,7 @@
  */
 
 import {AotSummaryResolver, CompileMetadataResolver, CompilerConfig, DEFAULT_INTERPOLATION_CONFIG, DirectiveNormalizer, DirectiveResolver, DomElementSchemaRegistry, HtmlParser, InterpolationConfig, JitSummaryResolver, NgAnalyzedModules, NgModuleResolver, ParseTreeResult, PipeResolver, ResourceLoader, StaticReflector, StaticSymbol, StaticSymbolCache, StaticSymbolResolver, SummaryResolver, analyzeNgModules, createOfflineCompileUrlResolver, extractProgramSymbols} from '@angular/compiler';
-import {AngularCompilerOptions, getClassMembersFromDeclaration, getPipesTable, getSymbolQuery} from '@angular/compiler-cli';
+import {AngularCompilerOptions, getClassMembersFromDeclaration, getPipesTable, getSymbolQuery} from '@angular/compiler-cli/src/language_services';
 import {ViewEncapsulation, ɵConsole as Console} from '@angular/core';
 import * as fs from 'fs';
 import * as path from 'path';
diff --git a/packages/language-service/src/utils.ts b/packages/language-service/src/utils.ts
index 425b9fbd6d..d9914d8c7d 100644
--- a/packages/language-service/src/utils.ts
+++ b/packages/language-service/src/utils.ts
@@ -7,7 +7,7 @@
  */
 
 import {AstPath, CompileDirectiveSummary, CompileTypeMetadata, CssSelector, DirectiveAst, ElementAst, EmbeddedTemplateAst, HtmlAstPath, Node as HtmlNode, ParseSourceSpan, RecursiveTemplateAstVisitor, RecursiveVisitor, TemplateAst, TemplateAstPath, identifierName, templateVisitAll, visitAll} from '@angular/compiler';
-import {DiagnosticTemplateInfo} from '@angular/compiler-cli';
+import {DiagnosticTemplateInfo} from '@angular/compiler-cli/src/language_services';
 import * as ts from 'typescript';
 
 import {SelectorInfo, TemplateInfo} from './common';
diff --git a/packages/language-service/tsconfig-build.json b/packages/language-service/tsconfig-build.json
index 96a8d2658a..ad419575ff 100644
--- a/packages/language-service/tsconfig-build.json
+++ b/packages/language-service/tsconfig-build.json
@@ -17,6 +17,7 @@
       "@angular/common": ["../../dist/packages/common"],
       "@angular/compiler": ["../../dist/packages/compiler"],
       "@angular/compiler-cli": ["../../dist/packages/compiler-cli"],
+      "@angular/compiler-cli/*": ["../../dist/packages/compiler-cli/*"],
       "@angular/http": ["../../dist/packages/http"],
       "@angular/platform-server": ["../../dist/packages/platform-server"],
       "@angular/platform-browser": ["../../dist/packages/platform-browser"],

From 40d69c317c24c383dd3d844146a28d9951affd95 Mon Sep 17 00:00:00 2001
From: Hans Larsen <hans@hansl.ca>
Date: Wed, 16 Aug 2017 12:58:19 -0700
Subject: [PATCH 40/83] release: cut the 5.0.0-beta.4 release

---
 package.json                       | 2 +-
 packages/compiler-cli/package.json | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 6801b85669..be1d406933 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "angular-srcs",
-  "version": "5.0.0-beta.3",
+  "version": "5.0.0-beta.4",
   "private": true,
   "branchPattern": "2.0.*",
   "description": "Angular - a web framework for modern web apps",
diff --git a/packages/compiler-cli/package.json b/packages/compiler-cli/package.json
index c11e9febf0..b3de16ddc3 100644
--- a/packages/compiler-cli/package.json
+++ b/packages/compiler-cli/package.json
@@ -9,7 +9,7 @@
     "ng-xi18n": "./src/extract_i18n.js"
   },
   "dependencies": {
-    "@angular/tsc-wrapped": "5.0.0-beta.3",
+    "@angular/tsc-wrapped": "5.0.0-beta.4",
     "reflect-metadata": "^0.1.2",
     "minimist": "^1.2.0",
     "tsickle": "^0.23.4"

From 9aa05211fffb1cb8b4840e7c99c6a115a78bd15c Mon Sep 17 00:00:00 2001
From: Hans Larsen <hans@hansl.ca>
Date: Wed, 16 Aug 2017 13:01:52 -0700
Subject: [PATCH 41/83] docs: add changelog for 5.0.0-beta.4

---
 CHANGELOG.md | 28 ++++++++++++++++++++++++++++
 1 file changed, 28 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 07ce5d6d9d..e062bedab6 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,31 @@
+<a name="5.0.0-beta.4"></a>
+# [5.0.0-beta.4](https://github.com/angular/angular/compare/5.0.0-beta.3...5.0.0-beta.4) (2017-08-16)
+
+
+### Bug Fixes
+
+* **aio:** fix compilation error by using the correct type for `providers` ([4d523fd](https://github.com/angular/angular/commit/4d523fd))
+* **aio:** skip PWA test when redeploying non-public commit ([06faac8](https://github.com/angular/angular/commit/06faac8))
+* **compiler:** Don't strip CSS source maps ([64b4be9](https://github.com/angular/angular/commit/64b4be9))
+* **forms:** re-assigning options should not clear select ([32ff21c](https://github.com/angular/angular/commit/32ff21c)), closes [#18330](https://github.com/angular/angular/issues/18330)
+* **language-service:** remove tsickle dependency ([bc22ff1](https://github.com/angular/angular/commit/bc22ff1))
+
+
+### Features
+
+* **common:** mark NgTemplateOutlet API as stable ([0a73e8d](https://github.com/angular/angular/commit/0a73e8d))
+* **forms:** add status to `AbstractControlDirective` ([233ef93](https://github.com/angular/angular/commit/233ef93))
+* **forms:** add updateOn support to ngModelOptions ([1cfa79c](https://github.com/angular/angular/commit/1cfa79c))
+
+
+### Performance Improvements
+
+* **aio:** update to new version of build-optimizer ([088532b](https://github.com/angular/angular/commit/088532b))
+* **core:** add option to remove blank text nodes from compiled templates ([d2c0d98](https://github.com/angular/angular/commit/d2c0d98))
+* **core:** Remove decorator DSL which depends on Reflect ([cac130e](https://github.com/angular/angular/commit/cac130e))
+
+
+
 <a name="4.3.5"></a>
 ## [4.3.5](https://github.com/angular/angular/compare/4.3.4...4.3.5) (2017-08-16)
 

From 27d5058e019694e93c9dcd1d5698aea61618f925 Mon Sep 17 00:00:00 2001
From: Tobias Bosch <tbosch1009@gmail.com>
Date: Mon, 14 Aug 2017 11:04:18 -0700
Subject: [PATCH 42/83] refactor(compiler): extract a `BaseAotCompilerHost`
 that is shared between the old and new logic

---
 packages/compiler-cli/src/compiler_host.ts    | 349 +++++++++---------
 .../compiler-cli/src/transformers/program.ts  |  21 +-
 2 files changed, 198 insertions(+), 172 deletions(-)

diff --git a/packages/compiler-cli/src/compiler_host.ts b/packages/compiler-cli/src/compiler_host.ts
index e7c5c03954..422ca7b87a 100644
--- a/packages/compiler-cli/src/compiler_host.ts
+++ b/packages/compiler-cli/src/compiler_host.ts
@@ -20,159 +20,27 @@ const GENERATED_FILES = /\.ngfactory\.ts$|\.ngstyle\.ts$|\.ngsummary\.ts$/;
 const GENERATED_OR_DTS_FILES = /\.d\.ts$|\.ngfactory\.ts$|\.ngstyle\.ts$|\.ngsummary\.ts$/;
 const SHALLOW_IMPORT = /^((\w|-)+|(@(\w|-)+(\/(\w|-)+)+))$/;
 
-export interface CompilerHostContext extends ts.ModuleResolutionHost {
-  readResource?(fileName: string): Promise<string>|string;
-  assumeFileExists(fileName: string): void;
-}
-
 export interface MetadataProvider { getMetadata(source: ts.SourceFile): ModuleMetadata|undefined; }
 
-export class CompilerHost implements AotCompilerHost {
-  private isGenDirChildOfRootDir: boolean;
-  protected basePath: string;
-  private genDir: string;
+export interface BaseAotCompilerHostContext extends ts.ModuleResolutionHost {
+  readResource?(fileName: string): Promise<string>|string;
+}
+
+export abstract class BaseAotCompilerHost<C extends BaseAotCompilerHostContext> implements
+    AotCompilerHost {
   private resolverCache = new Map<string, ModuleMetadata[]>();
   private flatModuleIndexCache = new Map<string, boolean>();
   private flatModuleIndexNames = new Set<string>();
   private flatModuleIndexRedirectNames = new Set<string>();
-  private moduleFileNames = new Map<string, string|null>();
-  protected resolveModuleNameHost: CompilerHostContext;
 
   constructor(
       protected program: ts.Program, protected options: AngularCompilerOptions,
-      protected context: CompilerHostContext, collectorOptions?: CollectorOptions,
-      protected metadataProvider: MetadataProvider = new MetadataCollector()) {
-    // normalize the path so that it never ends with '/'.
-    this.basePath = path.normalize(path.join(this.options.basePath !, '.')).replace(/\\/g, '/');
-    this.genDir = path.normalize(path.join(this.options.genDir !, '.')).replace(/\\/g, '/');
+      protected context: C,
+      protected metadataProvider: MetadataProvider = new MetadataCollector()) {}
 
-    const genPath: string = path.relative(this.basePath, this.genDir);
-    this.isGenDirChildOfRootDir = genPath === '' || !genPath.startsWith('..');
-    this.resolveModuleNameHost = Object.create(this.context);
+  abstract moduleNameToFileName(m: string, containingFile: string): string|null;
 
-    // When calling ts.resolveModuleName,
-    // additional allow checks for .d.ts files to be done based on
-    // checks for .ngsummary.json files,
-    // so that our codegen depends on fewer inputs and requires to be called
-    // less often.
-    // This is needed as we use ts.resolveModuleName in reflector_host
-    // and it should be able to resolve summary file names.
-    this.resolveModuleNameHost.fileExists = (fileName: string): boolean => {
-      if (this.context.fileExists(fileName)) {
-        return true;
-      }
-      if (DTS.test(fileName)) {
-        const base = fileName.substring(0, fileName.length - 5);
-        return this.context.fileExists(base + '.ngsummary.json');
-      }
-      return false;
-    };
-  }
-
-  // We use absolute paths on disk as canonical.
-  getCanonicalFileName(fileName: string): string { return fileName; }
-
-  moduleNameToFileName(m: string, containingFile: string): string|null {
-    const key = m + ':' + (containingFile || '');
-    let result: string|null = this.moduleFileNames.get(key) || null;
-    if (!result) {
-      if (!containingFile || !containingFile.length) {
-        if (m.indexOf('.') === 0) {
-          throw new Error('Resolution of relative paths requires a containing file.');
-        }
-        // Any containing file gives the same result for absolute imports
-        containingFile = this.getCanonicalFileName(path.join(this.basePath, 'index.ts'));
-      }
-      m = m.replace(EXT, '');
-      const resolved =
-          ts.resolveModuleName(
-                m, containingFile.replace(/\\/g, '/'), this.options, this.resolveModuleNameHost)
-              .resolvedModule;
-      result = resolved ? this.getCanonicalFileName(resolved.resolvedFileName) : null;
-      this.moduleFileNames.set(key, result);
-    }
-    return result;
-  };
-
-  /**
-   * We want a moduleId that will appear in import statements in the generated code.
-   * These need to be in a form that system.js can load, so absolute file paths don't work.
-   *
-   * The `containingFile` is always in the `genDir`, where as the `importedFile` can be in
-   * `genDir`, `node_module` or `basePath`.  The `importedFile` is either a generated file or
-   * existing file.
-   *
-   *               | genDir   | node_module |  rootDir
-   * --------------+----------+-------------+----------
-   * generated     | relative |   relative  |   n/a
-   * existing file |   n/a    |   absolute  |  relative(*)
-   *
-   * NOTE: (*) the relative path is computed depending on `isGenDirChildOfRootDir`.
-   */
-  fileNameToModuleName(importedFile: string, containingFile: string): string {
-    // If a file does not yet exist (because we compile it later), we still need to
-    // assume it exists it so that the `resolve` method works!
-    if (importedFile !== containingFile && !this.context.fileExists(importedFile)) {
-      this.context.assumeFileExists(importedFile);
-    }
-
-    containingFile = this.rewriteGenDirPath(containingFile);
-    const containingDir = path.dirname(containingFile);
-    // drop extension
-    importedFile = importedFile.replace(EXT, '');
-
-    const nodeModulesIndex = importedFile.indexOf(NODE_MODULES);
-    const importModule = nodeModulesIndex === -1 ?
-        null :
-        importedFile.substring(nodeModulesIndex + NODE_MODULES.length);
-    const isGeneratedFile = IS_GENERATED.test(importedFile);
-
-    if (isGeneratedFile) {
-      // rewrite to genDir path
-      if (importModule) {
-        // it is generated, therefore we do a relative path to the factory
-        return this.dotRelative(containingDir, this.genDir + NODE_MODULES + importModule);
-      } else {
-        // assume that import is also in `genDir`
-        importedFile = this.rewriteGenDirPath(importedFile);
-        return this.dotRelative(containingDir, importedFile);
-      }
-    } else {
-      // user code import
-      if (importModule) {
-        return importModule;
-      } else {
-        if (!this.isGenDirChildOfRootDir) {
-          // assume that they are on top of each other.
-          importedFile = importedFile.replace(this.basePath, this.genDir);
-        }
-        if (SHALLOW_IMPORT.test(importedFile)) {
-          return importedFile;
-        }
-        return this.dotRelative(containingDir, importedFile);
-      }
-    }
-  }
-
-  private dotRelative(from: string, to: string): string {
-    const rPath: string = path.relative(from, to).replace(/\\/g, '/');
-    return rPath.startsWith('.') ? rPath : './' + rPath;
-  }
-
-  /**
-   * Moves the path into `genDir` folder while preserving the `node_modules` directory.
-   */
-  private rewriteGenDirPath(filepath: string) {
-    const nodeModulesIndex = filepath.indexOf(NODE_MODULES);
-    if (nodeModulesIndex !== -1) {
-      // If we are in node_modulse, transplant them into `genDir`.
-      return path.join(this.genDir, filepath.substring(nodeModulesIndex));
-    } else {
-      // pretend that containing file is on top of the `genDir` to normalize the paths.
-      // we apply the `genDir` => `rootDir` delta through `rootDirPrefix` later.
-      return filepath.replace(this.basePath, this.genDir);
-    }
-  }
+  abstract fileNameToModuleName(importedFile: string, containingFile: string): string|null;
 
   protected getSourceFile(filePath: string): ts.SourceFile {
     const sf = this.program.getSourceFile(filePath);
@@ -294,29 +162,6 @@ export class CompilerHost implements AotCompilerHost {
     return true;
   }
 
-  calculateEmitPath(filePath: string): string {
-    // Write codegen in a directory structure matching the sources.
-    let root = this.options.basePath !;
-    for (const eachRootDir of this.options.rootDirs || []) {
-      if (this.options.trace) {
-        console.error(`Check if ${filePath} is under rootDirs element ${eachRootDir}`);
-      }
-      if (path.relative(eachRootDir, filePath).indexOf('.') !== 0) {
-        root = eachRootDir;
-      }
-    }
-
-    // transplant the codegen path to be inside the `genDir`
-    let relativePath: string = path.relative(root, filePath);
-    while (relativePath.startsWith('..' + path.sep)) {
-      // Strip out any `..` path such as: `../node_modules/@foo` as we want to put everything
-      // into `genDir`.
-      relativePath = relativePath.substr(3);
-    }
-
-    return path.join(this.options.genDir !, relativePath);
-  }
-
   private hasBundleIndex(filePath: string): boolean {
     const checkBundleIndex = (directory: string): boolean => {
       let result = this.flatModuleIndexCache.get(directory);
@@ -375,6 +220,180 @@ export class CompilerHost implements AotCompilerHost {
   }
 }
 
+export interface CompilerHostContext extends ts.ModuleResolutionHost {
+  readResource?(fileName: string): Promise<string>|string;
+  assumeFileExists(fileName: string): void;
+}
+
+export class CompilerHost extends BaseAotCompilerHost<CompilerHostContext> {
+  protected basePath: string;
+  private moduleFileNames = new Map<string, string|null>();
+  private isGenDirChildOfRootDir: boolean;
+  private genDir: string;
+  protected resolveModuleNameHost: CompilerHostContext;
+
+  constructor(
+      program: ts.Program, options: AngularCompilerOptions, context: CompilerHostContext,
+      collectorOptions?: CollectorOptions,
+      metadataProvider: MetadataProvider = new MetadataCollector(collectorOptions)) {
+    super(program, options, context, metadataProvider);
+    // normalize the path so that it never ends with '/'.
+    this.basePath = path.normalize(path.join(this.options.basePath !, '.')).replace(/\\/g, '/');
+    this.genDir = path.normalize(path.join(this.options.genDir !, '.')).replace(/\\/g, '/');
+
+    const genPath: string = path.relative(this.basePath, this.genDir);
+    this.isGenDirChildOfRootDir = genPath === '' || !genPath.startsWith('..');
+
+    this.resolveModuleNameHost = Object.create(this.context);
+
+    // When calling ts.resolveModuleName,
+    // additional allow checks for .d.ts files to be done based on
+    // checks for .ngsummary.json files,
+    // so that our codegen depends on fewer inputs and requires to be called
+    // less often.
+    // This is needed as we use ts.resolveModuleName in reflector_host
+    // and it should be able to resolve summary file names.
+    this.resolveModuleNameHost.fileExists = (fileName: string): boolean => {
+      if (this.context.fileExists(fileName)) {
+        return true;
+      }
+      if (DTS.test(fileName)) {
+        const base = fileName.substring(0, fileName.length - 5);
+        return this.context.fileExists(base + '.ngsummary.json');
+      }
+      return false;
+    };
+  }
+
+  calculateEmitPath(filePath: string): string {
+    // Write codegen in a directory structure matching the sources.
+    let root = this.options.basePath !;
+    for (const eachRootDir of this.options.rootDirs || []) {
+      if (this.options.trace) {
+        console.error(`Check if ${filePath} is under rootDirs element ${eachRootDir}`);
+      }
+      if (path.relative(eachRootDir, filePath).indexOf('.') !== 0) {
+        root = eachRootDir;
+      }
+    }
+
+    // transplant the codegen path to be inside the `genDir`
+    let relativePath: string = path.relative(root, filePath);
+    while (relativePath.startsWith('..' + path.sep)) {
+      // Strip out any `..` path such as: `../node_modules/@foo` as we want to put everything
+      // into `genDir`.
+      relativePath = relativePath.substr(3);
+    }
+
+    return path.join(this.options.genDir !, relativePath);
+  }
+
+  // We use absolute paths on disk as canonical.
+  getCanonicalFileName(fileName: string): string { return fileName; }
+
+  moduleNameToFileName(m: string, containingFile: string): string|null {
+    const key = m + ':' + (containingFile || '');
+    let result: string|null = this.moduleFileNames.get(key) || null;
+    if (!result) {
+      if (!containingFile || !containingFile.length) {
+        if (m.indexOf('.') === 0) {
+          throw new Error('Resolution of relative paths requires a containing file.');
+        }
+        // Any containing file gives the same result for absolute imports
+        containingFile = this.getCanonicalFileName(path.join(this.basePath, 'index.ts'));
+      }
+      m = m.replace(EXT, '');
+      const resolved =
+          ts.resolveModuleName(
+                m, containingFile.replace(/\\/g, '/'), this.options, this.resolveModuleNameHost)
+              .resolvedModule;
+      result = resolved ? this.getCanonicalFileName(resolved.resolvedFileName) : null;
+      this.moduleFileNames.set(key, result);
+    }
+    return result;
+  };
+
+  /**
+   * We want a moduleId that will appear in import statements in the generated code.
+   * These need to be in a form that system.js can load, so absolute file paths don't work.
+   *
+   * The `containingFile` is always in the `genDir`, where as the `importedFile` can be in
+   * `genDir`, `node_module` or `basePath`.  The `importedFile` is either a generated file or
+   * existing file.
+   *
+   *               | genDir   | node_module |  rootDir
+   * --------------+----------+-------------+----------
+   * generated     | relative |   relative  |   n/a
+   * existing file |   n/a    |   absolute  |  relative(*)
+   *
+   * NOTE: (*) the relative path is computed depending on `isGenDirChildOfRootDir`.
+   */
+  fileNameToModuleName(importedFile: string, containingFile: string): string {
+    // If a file does not yet exist (because we compile it later), we still need to
+    // assume it exists it so that the `resolve` method works!
+    if (importedFile !== containingFile && !this.context.fileExists(importedFile)) {
+      this.context.assumeFileExists(importedFile);
+    }
+
+    containingFile = this.rewriteGenDirPath(containingFile);
+    const containingDir = path.dirname(containingFile);
+    // drop extension
+    importedFile = importedFile.replace(EXT, '');
+
+    const nodeModulesIndex = importedFile.indexOf(NODE_MODULES);
+    const importModule = nodeModulesIndex === -1 ?
+        null :
+        importedFile.substring(nodeModulesIndex + NODE_MODULES.length);
+    const isGeneratedFile = IS_GENERATED.test(importedFile);
+
+    if (isGeneratedFile) {
+      // rewrite to genDir path
+      if (importModule) {
+        // it is generated, therefore we do a relative path to the factory
+        return this.dotRelative(containingDir, this.genDir + NODE_MODULES + importModule);
+      } else {
+        // assume that import is also in `genDir`
+        importedFile = this.rewriteGenDirPath(importedFile);
+        return this.dotRelative(containingDir, importedFile);
+      }
+    } else {
+      // user code import
+      if (importModule) {
+        return importModule;
+      } else {
+        if (!this.isGenDirChildOfRootDir) {
+          // assume that they are on top of each other.
+          importedFile = importedFile.replace(this.basePath, this.genDir);
+        }
+        if (SHALLOW_IMPORT.test(importedFile)) {
+          return importedFile;
+        }
+        return this.dotRelative(containingDir, importedFile);
+      }
+    }
+  }
+
+  /**
+   * Moves the path into `genDir` folder while preserving the `node_modules` directory.
+   */
+  private rewriteGenDirPath(filepath: string) {
+    const nodeModulesIndex = filepath.indexOf(NODE_MODULES);
+    if (nodeModulesIndex !== -1) {
+      // If we are in node_modulse, transplant them into `genDir`.
+      return path.join(this.genDir, filepath.substring(nodeModulesIndex));
+    } else {
+      // pretend that containing file is on top of the `genDir` to normalize the paths.
+      // we apply the `genDir` => `rootDir` delta through `rootDirPrefix` later.
+      return filepath.replace(this.basePath, this.genDir);
+    }
+  }
+
+  private dotRelative(from: string, to: string): string {
+    const rPath: string = path.relative(from, to).replace(/\\/g, '/');
+    return rPath.startsWith('.') ? rPath : './' + rPath;
+  }
+}
+
 export class CompilerHostContextAdapter {
   protected assumedExists: {[fileName: string]: boolean} = {};
 
diff --git a/packages/compiler-cli/src/transformers/program.ts b/packages/compiler-cli/src/transformers/program.ts
index 5c079304ce..542f577585 100644
--- a/packages/compiler-cli/src/transformers/program.ts
+++ b/packages/compiler-cli/src/transformers/program.ts
@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {AotCompiler, AotCompilerOptions, GeneratedFile, NgAnalyzedModules, createAotCompiler, getParseErrors, isSyntaxError, toTypeScript} from '@angular/compiler';
+import {AotCompiler, AotCompilerHost, AotCompilerOptions, GeneratedFile, NgAnalyzedModules, createAotCompiler, getParseErrors, isSyntaxError, toTypeScript} from '@angular/compiler';
 import {MissingTranslationStrategy} from '@angular/core';
 import {createBundleIndexHost} from '@angular/tsc-wrapped';
 import * as fs from 'fs';
@@ -14,7 +14,7 @@ import * as path from 'path';
 import * as tsickle from 'tsickle';
 import * as ts from 'typescript';
 
-import {CompilerHost as AotCompilerHost} from '../compiler_host';
+import {BaseAotCompilerHost} from '../compiler_host';
 import {TypeChecker} from '../diagnostics/check_types';
 
 import {CompilerHost, CompilerOptions, Diagnostic, EmitFlags, EmitResult, Program} from './api';
@@ -73,11 +73,8 @@ class AngularCompilerProgram implements Program {
             .map(sf => sf.fileName)
             .filter(f => !f.match(/\.ngfactory\.[\w.]+$|\.ngstyle\.[\w.]+$|\.ngsummary\.[\w.]+$/));
     this.metadataCache = new LowerMetadataCache({quotedNames: true}, !!options.strictMetadataEmit);
-    this.aotCompilerHost = new AotCompilerHost(
-        this.tsProgram, options, host, /* collectorOptions */ undefined, this.metadataCache);
-    if (host.readResource) {
-      this.aotCompilerHost.loadResource = host.readResource.bind(host);
-    }
+    this.aotCompilerHost =
+        new AotCompilerHostImpl(this.tsProgram, options, host, this.metadataCache);
 
     const aotOptions = getAotCompilerOptions(options);
     this.compiler = createAotCompiler(this.aotCompilerHost, aotOptions).compiler;
@@ -309,6 +306,16 @@ class AngularCompilerProgram implements Program {
   }
 }
 
+class AotCompilerHostImpl extends BaseAotCompilerHost<CompilerHost> {
+  moduleNameToFileName(m: string, containingFile: string): string|null {
+    return this.context.moduleNameToFileName(m, containingFile);
+  }
+
+  fileNameToModuleName(importedFile: string, containingFile: string): string|null {
+    return this.context.fileNameToModuleName(importedFile, containingFile);
+  }
+}
+
 export function createProgram(
     {rootNames, options, host, oldProgram}:
         {rootNames: string[], options: CompilerOptions, host: CompilerHost, oldProgram?: Program}):

From 6a1ab61ccead0488966050cef6344f22a639e190 Mon Sep 17 00:00:00 2001
From: Tobias Bosch <tbosch1009@gmail.com>
Date: Mon, 14 Aug 2017 11:04:55 -0700
Subject: [PATCH 43/83] refactor(compiler): simplify the `CompilerHost` used
 for transformers
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- remove unneeded methods (`getNgCanonicalFileName`, `assumeFileExists`)
- simplify moduleName <-> fileName conversion logic as we don’t need to
  account for `genDir` anymore.
- rename `createNgCompilerHost` -> `createCompilerHost`
---
 packages/compiler-cli/src/compiler_host.ts    |   5 +-
 packages/compiler-cli/src/perform-compile.ts  |   2 +-
 packages/compiler-cli/src/transformers/api.ts |  14 +-
 .../src/transformers/compiler_host.ts         | 194 ++++++++++++
 .../src/transformers/entry_points.ts          |  23 +-
 .../transformers/module_filename_resolver.ts  | 292 ------------------
 .../test/transformers/compiler_host_spec.ts   |  98 ++++++
 packages/compiler/src/aot/static_reflector.ts |  11 +-
 .../src/aot/static_symbol_resolver.ts         |   4 +
 9 files changed, 310 insertions(+), 333 deletions(-)
 create mode 100644 packages/compiler-cli/src/transformers/compiler_host.ts
 delete mode 100644 packages/compiler-cli/src/transformers/module_filename_resolver.ts
 create mode 100644 packages/compiler-cli/test/transformers/compiler_host_spec.ts

diff --git a/packages/compiler-cli/src/compiler_host.ts b/packages/compiler-cli/src/compiler_host.ts
index 422ca7b87a..1367de73a6 100644
--- a/packages/compiler-cli/src/compiler_host.ts
+++ b/packages/compiler-cli/src/compiler_host.ts
@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {AotCompilerHost, StaticSymbol} from '@angular/compiler';
+import {AotCompilerHost, StaticSymbol, syntaxError} from '@angular/compiler';
 import {AngularCompilerOptions, CollectorOptions, MetadataCollector, ModuleMetadata} from '@angular/tsc-wrapped';
 import * as fs from 'fs';
 import * as path from 'path';
@@ -131,6 +131,9 @@ export abstract class BaseAotCompilerHost<C extends BaseAotCompilerHostContext>
 
   loadResource(filePath: string): Promise<string>|string {
     if (this.context.readResource) return this.context.readResource(filePath);
+    if (!this.context.fileExists(filePath)) {
+      throw syntaxError(`Error: Resource file not found: ${filePath}`);
+    }
     return this.context.readFile(filePath);
   }
 
diff --git a/packages/compiler-cli/src/perform-compile.ts b/packages/compiler-cli/src/perform-compile.ts
index 258a094ce8..821720a7ce 100644
--- a/packages/compiler-cli/src/perform-compile.ts
+++ b/packages/compiler-cli/src/perform-compile.ts
@@ -131,7 +131,7 @@ export function performCompilation(
   let emitResult: api.EmitResult|undefined;
   try {
     if (!host) {
-      host = ng.createNgCompilerHost({options});
+      host = ng.createCompilerHost({options});
     }
 
     program = ng.createProgram({rootNames, host, options, oldProgram});
diff --git a/packages/compiler-cli/src/transformers/api.ts b/packages/compiler-cli/src/transformers/api.ts
index 1d3b5b6d34..3567de65fa 100644
--- a/packages/compiler-cli/src/transformers/api.ts
+++ b/packages/compiler-cli/src/transformers/api.ts
@@ -117,34 +117,24 @@ export interface CompilerOptions extends ts.CompilerOptions {
   preserveWhitespaces?: boolean;
 }
 
-export interface ModuleFilenameResolver {
+export interface CompilerHost extends ts.CompilerHost {
   /**
    * Converts a module name that is used in an `import` to a file path.
    * I.e. `path/to/containingFile.ts` containing `import {...} from 'module-name'`.
    */
   moduleNameToFileName(moduleName: string, containingFile?: string): string|null;
-
   /**
-   * Converts a file path to a module name that can be used as an `import.
+   * Converts a file path to a module name that can be used as an `import ...`
    * I.e. `path/to/importedFile.ts` should be imported by `path/to/containingFile.ts`.
    *
    * See ImportResolver.
    */
   fileNameToModuleName(importedFilePath: string, containingFilePath: string): string|null;
-
-  getNgCanonicalFileName(fileName: string): string;
-
-  assumeFileExists(fileName: string): void;
-}
-
-export interface CompilerHost extends ts.CompilerHost, ModuleFilenameResolver {
   /**
    * Load a referenced resource either statically or asynchronously. If the host returns a
    * `Promise<string>` it is assumed the user of the corresponding `Program` will call
    * `loadNgStructureAsync()`. Returing  `Promise<string>` outside `loadNgStructureAsync()` will
    * cause a diagnostics diagnostic error or an exception to be thrown.
-   *
-   * If `loadResource()` is not provided, `readFile()` will be called to load the resource.
    */
   readResource?(fileName: string): Promise<string>|string;
 }
diff --git a/packages/compiler-cli/src/transformers/compiler_host.ts b/packages/compiler-cli/src/transformers/compiler_host.ts
new file mode 100644
index 0000000000..375b3af80a
--- /dev/null
+++ b/packages/compiler-cli/src/transformers/compiler_host.ts
@@ -0,0 +1,194 @@
+/**
+ * @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 {syntaxError} from '@angular/compiler';
+import * as path from 'path';
+import * as ts from 'typescript';
+
+import {CompilerHost, CompilerOptions} from './api';
+
+const NODE_MODULES_PACKAGE_NAME = /node_modules\/((\w|-)+|(@(\w|-)+\/(\w|-)+))/;
+const DTS = /\.d\.ts$/;
+const EXT = /(\.ts|\.d\.ts|\.js|\.jsx|\.tsx)$/;
+
+export function createCompilerHost(
+    {options, tsHost = ts.createCompilerHost(options, true)}:
+        {options: CompilerOptions, tsHost?: ts.CompilerHost}): CompilerHost {
+  const mixin = new CompilerHostMixin(tsHost, options);
+  const host = Object.create(tsHost);
+
+  host.moduleNameToFileName = mixin.moduleNameToFileName.bind(mixin);
+  host.fileNameToModuleName = mixin.fileNameToModuleName.bind(mixin);
+
+  // Make sure we do not `host.realpath()` from TS as we do not want to resolve symlinks.
+  // https://github.com/Microsoft/TypeScript/issues/9552
+  host.realpath = (fileName: string) => fileName;
+
+  return host;
+}
+
+class CompilerHostMixin {
+  private moduleFileNames = new Map<string, string|null>();
+  private rootDirs: string[];
+  private basePath: string;
+  private moduleResolutionHost: ModuleFilenameResolutionHost;
+
+  constructor(private context: ts.ModuleResolutionHost, private options: CompilerOptions) {
+    // normalize the path so that it never ends with '/'.
+    this.basePath = normalizePath(this.options.basePath !);
+    this.rootDirs = (this.options.rootDirs || [
+                      this.options.basePath !
+                    ]).map(p => path.resolve(this.basePath, normalizePath(p)));
+    this.moduleResolutionHost = createModuleFilenameResolverHost(context);
+  }
+
+  moduleNameToFileName(m: string, containingFile: string): string|null {
+    const key = m + ':' + (containingFile || '');
+    let result: string|null = this.moduleFileNames.get(key) || null;
+    if (result) {
+      return result;
+    }
+    if (!containingFile) {
+      if (m.indexOf('.') === 0) {
+        throw new Error('Resolution of relative paths requires a containing file.');
+      }
+      // Any containing file gives the same result for absolute imports
+      containingFile = path.join(this.basePath, 'index.ts');
+    }
+    const resolved =
+        ts.resolveModuleName(m, containingFile, this.options, this.moduleResolutionHost)
+            .resolvedModule;
+    if (resolved) {
+      if (this.options.traceResolution) {
+        console.error('resolve', m, containingFile, '=>', resolved.resolvedFileName);
+      }
+      result = resolved.resolvedFileName;
+    }
+    this.moduleFileNames.set(key, result);
+    return result;
+  }
+
+  /**
+   * We want a moduleId that will appear in import statements in the generated code
+   * which will be written to `containingFile`.
+   *
+   * Note that we also generate files for files in node_modules, as libraries
+   * only ship .metadata.json files but not the generated code.
+   *
+   * Logic:
+   * 1. if the importedFile and the containingFile are from the project sources
+   *    or from the same node_modules package, use a relative path
+   * 2. if the importedFile is in a node_modules package,
+   *    use a path that starts with the package name.
+   * 3. Error if the containingFile is in the node_modules package
+   *    and the importedFile is in the project soures,
+   *    as that is a violation of the principle that node_modules packages cannot
+   *    import project sources.
+   */
+  fileNameToModuleName(importedFile: string, containingFile: string): string {
+    const originalImportedFile = importedFile;
+    if (this.options.traceResolution) {
+      console.error(
+          'fileNameToModuleName from containingFile', containingFile, 'to importedFile',
+          importedFile);
+    }
+    // If a file does not yet exist (because we compile it later), we still need to
+    // assume it exists it so that the `resolve` method works!
+    if (!this.moduleResolutionHost.fileExists(importedFile)) {
+      this.moduleResolutionHost.assumeFileExists(importedFile);
+    }
+    // drop extension
+    importedFile = importedFile.replace(EXT, '');
+    const importedFilePackagName = getPackageName(importedFile);
+    const containingFilePackageName = getPackageName(containingFile);
+
+    let moduleName: string;
+    if (importedFilePackagName === containingFilePackageName) {
+      moduleName = dotRelative(
+          path.dirname(stripRootDir(this.rootDirs, containingFile)),
+          stripRootDir(this.rootDirs, importedFile));
+    } else if (importedFilePackagName) {
+      moduleName = stripNodeModulesPrefix(importedFile);
+    } else {
+      throw new Error(
+          `Trying to import a source file from a node_modules package: import ${originalImportedFile} from ${containingFile}`);
+    }
+    return moduleName;
+  }
+}
+
+interface ModuleFilenameResolutionHost extends ts.ModuleResolutionHost {
+  assumeFileExists(fileName: string): void;
+}
+
+function createModuleFilenameResolverHost(host: ts.ModuleResolutionHost):
+    ModuleFilenameResolutionHost {
+  const assumedExists = new Set<string>();
+  const resolveModuleNameHost = Object.create(host);
+  // When calling ts.resolveModuleName, additional allow checks for .d.ts files to be done based on
+  // checks for .ngsummary.json files, so that our codegen depends on fewer inputs and requires
+  // to be called less often.
+  // This is needed as we use ts.resolveModuleName in DefaultModuleFilenameResolver
+  // and it should be able to resolve summary file names.
+  resolveModuleNameHost.fileExists = (fileName: string): boolean => {
+    if (assumedExists.has(fileName)) {
+      return true;
+    }
+
+    if (host.fileExists(fileName)) {
+      return true;
+    }
+
+    if (DTS.test(fileName)) {
+      const base = fileName.substring(0, fileName.length - 5);
+      return host.fileExists(base + '.ngsummary.json');
+    }
+
+    return false;
+  };
+
+  resolveModuleNameHost.assumeFileExists = (fileName: string) => assumedExists.add(fileName);
+  // Make sure we do not `host.realpath()` from TS as we do not want to resolve symlinks.
+  // https://github.com/Microsoft/TypeScript/issues/9552
+  resolveModuleNameHost.realpath = (fileName: string) => fileName;
+
+  return resolveModuleNameHost;
+}
+
+function dotRelative(from: string, to: string): string {
+  const rPath: string = path.relative(from, to).replace(/\\/g, '/');
+  return rPath.startsWith('.') ? rPath : './' + rPath;
+}
+
+/**
+ * Moves the path into `genDir` folder while preserving the `node_modules` directory.
+ */
+function getPackageName(filePath: string): string|null {
+  const match = NODE_MODULES_PACKAGE_NAME.exec(filePath);
+  return match ? match[1] : null;
+}
+
+function stripRootDir(rootDirs: string[], fileName: string): string {
+  if (!fileName) return fileName;
+  // NB: the rootDirs should have been sorted longest-first
+  for (const dir of rootDirs) {
+    if (fileName.indexOf(dir) === 0) {
+      fileName = fileName.substring(dir.length);
+      break;
+    }
+  }
+  return fileName;
+}
+
+function stripNodeModulesPrefix(filePath: string): string {
+  return filePath.replace(/.*node_modules\//, '');
+}
+
+function normalizePath(p: string): string {
+  return path.normalize(path.join(p, '.')).replace(/\\/g, '/');
+}
\ No newline at end of file
diff --git a/packages/compiler-cli/src/transformers/entry_points.ts b/packages/compiler-cli/src/transformers/entry_points.ts
index b6d991a4c9..9a574fa586 100644
--- a/packages/compiler-cli/src/transformers/entry_points.ts
+++ b/packages/compiler-cli/src/transformers/entry_points.ts
@@ -9,25 +9,6 @@
 import * as ts from 'typescript';
 
 import {CompilerHost, CompilerOptions, Program} from './api';
-import {createModuleFilenameResolver} from './module_filename_resolver';
+
+export {createCompilerHost} from './compiler_host';
 export {createProgram} from './program';
-export {createModuleFilenameResolver};
-
-export function createNgCompilerHost(
-    {options, tsHost = ts.createCompilerHost(options, true)}:
-        {options: CompilerOptions, tsHost?: ts.CompilerHost}): CompilerHost {
-  const resolver = createModuleFilenameResolver(tsHost, options);
-
-  const host = Object.create(tsHost);
-
-  host.moduleNameToFileName = resolver.moduleNameToFileName.bind(resolver);
-  host.fileNameToModuleName = resolver.fileNameToModuleName.bind(resolver);
-  host.getNgCanonicalFileName = resolver.getNgCanonicalFileName.bind(resolver);
-  host.assumeFileExists = resolver.assumeFileExists.bind(resolver);
-
-  // Make sure we do not `host.realpath()` from TS as we do not want to resolve symlinks.
-  // https://github.com/Microsoft/TypeScript/issues/9552
-  host.realpath = (fileName: string) => fileName;
-
-  return host;
-}
diff --git a/packages/compiler-cli/src/transformers/module_filename_resolver.ts b/packages/compiler-cli/src/transformers/module_filename_resolver.ts
deleted file mode 100644
index d0a55da56a..0000000000
--- a/packages/compiler-cli/src/transformers/module_filename_resolver.ts
+++ /dev/null
@@ -1,292 +0,0 @@
-/**
- * @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 path from 'path';
-import * as ts from 'typescript';
-
-import {CompilerOptions, ModuleFilenameResolver} from './api';
-
-const EXT = /(\.ts|\.d\.ts|\.js|\.jsx|\.tsx)$/;
-const DTS = /\.d\.ts$/;
-const NODE_MODULES = '/node_modules/';
-const IS_GENERATED = /\.(ngfactory|ngstyle|ngsummary)$/;
-const SHALLOW_IMPORT = /^((\w|-)+|(@(\w|-)+(\/(\w|-)+)+))$/;
-
-export function createModuleFilenameResolver(
-    tsHost: ts.ModuleResolutionHost, options: CompilerOptions): ModuleFilenameResolver {
-  const host = createModuleFilenameResolverHost(tsHost);
-
-  return options.rootDirs && options.rootDirs.length > 0 ?
-      new MultipleRootDirModuleFilenameResolver(host, options) :
-      new SingleRootDirModuleFilenameResolver(host, options);
-}
-
-class SingleRootDirModuleFilenameResolver implements ModuleFilenameResolver {
-  private isGenDirChildOfRootDir: boolean;
-  private basePath: string;
-  private genDir: string;
-  private moduleFileNames = new Map<string, string|null>();
-
-  constructor(private host: ModuleFilenameResolutionHost, private options: CompilerOptions) {
-    // normalize the path so that it never ends with '/'.
-    this.basePath = path.normalize(path.join(options.basePath !, '.')).replace(/\\/g, '/');
-    this.genDir = path.normalize(path.join(options.genDir !, '.')).replace(/\\/g, '/');
-
-    const genPath: string = path.relative(this.basePath, this.genDir);
-    this.isGenDirChildOfRootDir = genPath === '' || !genPath.startsWith('..');
-  }
-
-  moduleNameToFileName(m: string, containingFile: string): string|null {
-    const key = m + ':' + (containingFile || '');
-    let result: string|null = this.moduleFileNames.get(key) || null;
-    if (!result) {
-      if (!containingFile) {
-        if (m.indexOf('.') === 0) {
-          throw new Error('Resolution of relative paths requires a containing file.');
-        }
-        // Any containing file gives the same result for absolute imports
-        containingFile = this.getNgCanonicalFileName(path.join(this.basePath, 'index.ts'));
-      }
-      m = m.replace(EXT, '');
-      const resolved =
-          ts.resolveModuleName(m, containingFile.replace(/\\/g, '/'), this.options, this.host)
-              .resolvedModule;
-      result = resolved ? this.getNgCanonicalFileName(resolved.resolvedFileName) : null;
-      this.moduleFileNames.set(key, result);
-    }
-    return result;
-  }
-
-  /**
-   * We want a moduleId that will appear in import statements in the generated code.
-   * These need to be in a form that system.js can load, so absolute file paths don't work.
-   *
-   * The `containingFile` is always in the `genDir`, where as the `importedFile` can be in
-   * `genDir`, `node_module` or `basePath`.  The `importedFile` is either a generated file or
-   * existing file.
-   *
-   *               | genDir   | node_module |  rootDir
-   * --------------+----------+-------------+----------
-   * generated     | relative |   relative  |   n/a
-   * existing file |   n/a    |   absolute  |  relative(*)
-   *
-   * NOTE: (*) the relative path is computed depending on `isGenDirChildOfRootDir`.
-   */
-  fileNameToModuleName(importedFile: string, containingFile: string): string {
-    // If a file does not yet exist (because we compile it later), we still need to
-    // assume it exists it so that the `resolve` method works!
-    if (!this.host.fileExists(importedFile)) {
-      this.host.assumeFileExists(importedFile);
-    }
-
-    containingFile = this.rewriteGenDirPath(containingFile);
-    const containingDir = path.dirname(containingFile);
-    // drop extension
-    importedFile = importedFile.replace(EXT, '');
-
-    const nodeModulesIndex = importedFile.indexOf(NODE_MODULES);
-    const importModule = nodeModulesIndex === -1 ?
-        null :
-        importedFile.substring(nodeModulesIndex + NODE_MODULES.length);
-    const isGeneratedFile = IS_GENERATED.test(importedFile);
-
-    if (isGeneratedFile) {
-      // rewrite to genDir path
-      if (importModule) {
-        // it is generated, therefore we do a relative path to the factory
-        return this.dotRelative(containingDir, this.genDir + NODE_MODULES + importModule);
-      } else {
-        // assume that import is also in `genDir`
-        importedFile = this.rewriteGenDirPath(importedFile);
-        return this.dotRelative(containingDir, importedFile);
-      }
-    } else {
-      // user code import
-      if (importModule) {
-        return importModule;
-      } else {
-        if (!this.isGenDirChildOfRootDir) {
-          // assume that they are on top of each other.
-          importedFile = importedFile.replace(this.basePath, this.genDir);
-        }
-        if (SHALLOW_IMPORT.test(importedFile)) {
-          return importedFile;
-        }
-        return this.dotRelative(containingDir, importedFile);
-      }
-    }
-  }
-
-  // We use absolute paths on disk as canonical.
-  getNgCanonicalFileName(fileName: string): string { return fileName; }
-
-  assumeFileExists(fileName: string) { this.host.assumeFileExists(fileName); }
-
-  private dotRelative(from: string, to: string): string {
-    const rPath: string = path.relative(from, to).replace(/\\/g, '/');
-    return rPath.startsWith('.') ? rPath : './' + rPath;
-  }
-
-  /**
-   * Moves the path into `genDir` folder while preserving the `node_modules` directory.
-   */
-  private rewriteGenDirPath(filepath: string) {
-    const nodeModulesIndex = filepath.indexOf(NODE_MODULES);
-    if (nodeModulesIndex !== -1) {
-      // If we are in node_module, transplant them into `genDir`.
-      return path.join(this.genDir, filepath.substring(nodeModulesIndex));
-    } else {
-      // pretend that containing file is on top of the `genDir` to normalize the paths.
-      // we apply the `genDir` => `rootDir` delta through `rootDirPrefix` later.
-      return filepath.replace(this.basePath, this.genDir);
-    }
-  }
-}
-
-/**
- * This version of the AotCompilerHost expects that the program will be compiled
- * and executed with a "path mapped" directory structure, where generated files
- * are in a parallel tree with the sources, and imported using a `./` relative
- * import. This requires using TS `rootDirs` option and also teaching the module
- * loader what to do.
- */
-class MultipleRootDirModuleFilenameResolver implements ModuleFilenameResolver {
-  private basePath: string;
-
-  constructor(private host: ModuleFilenameResolutionHost, private options: CompilerOptions) {
-    // normalize the path so that it never ends with '/'.
-    this.basePath = path.normalize(path.join(options.basePath !, '.')).replace(/\\/g, '/');
-  }
-
-  getNgCanonicalFileName(fileName: string): string {
-    if (!fileName) return fileName;
-    // NB: the rootDirs should have been sorted longest-first
-    for (const dir of this.options.rootDirs || []) {
-      if (fileName.indexOf(dir) === 0) {
-        fileName = fileName.substring(dir.length);
-      }
-    }
-    return fileName;
-  }
-
-  assumeFileExists(fileName: string) { this.host.assumeFileExists(fileName); }
-
-  moduleNameToFileName(m: string, containingFile: string): string|null {
-    if (!containingFile) {
-      if (m.indexOf('.') === 0) {
-        throw new Error('Resolution of relative paths requires a containing file.');
-      }
-      // Any containing file gives the same result for absolute imports
-      containingFile = this.getNgCanonicalFileName(path.join(this.basePath, 'index.ts'));
-    }
-    for (const root of this.options.rootDirs || ['']) {
-      const rootedContainingFile = path.join(root, containingFile);
-      const resolved =
-          ts.resolveModuleName(m, rootedContainingFile, this.options, this.host).resolvedModule;
-      if (resolved) {
-        if (this.options.traceResolution) {
-          console.error('resolve', m, containingFile, '=>', resolved.resolvedFileName);
-        }
-        return this.getNgCanonicalFileName(resolved.resolvedFileName);
-      }
-    }
-    return null;
-  }
-
-  /**
-   * We want a moduleId that will appear in import statements in the generated code.
-   * These need to be in a form that system.js can load, so absolute file paths don't work.
-   * Relativize the paths by checking candidate prefixes of the absolute path, to see if
-   * they are resolvable by the moduleResolution strategy from the CompilerHost.
-   */
-  fileNameToModuleName(importedFile: string, containingFile: string): string {
-    if (this.options.traceResolution) {
-      console.error(
-          'getImportPath from containingFile', containingFile, 'to importedFile', importedFile);
-    }
-
-    // If a file does not yet exist (because we compile it later), we still need to
-    // assume it exists so that the `resolve` method works!
-    if (!this.host.fileExists(importedFile)) {
-      if (this.options.rootDirs && this.options.rootDirs.length > 0) {
-        this.host.assumeFileExists(path.join(this.options.rootDirs[0], importedFile));
-      } else {
-        this.host.assumeFileExists(importedFile);
-      }
-    }
-
-    const resolvable = (candidate: string) => {
-      const resolved = this.moduleNameToFileName(candidate, importedFile);
-      return resolved && resolved.replace(EXT, '') === importedFile.replace(EXT, '');
-    };
-
-    const importModuleName = importedFile.replace(EXT, '');
-    const parts = importModuleName.split(path.sep).filter(p => !!p);
-    let foundRelativeImport: string|undefined;
-
-    for (let index = parts.length - 1; index >= 0; index--) {
-      let candidate = parts.slice(index, parts.length).join(path.sep);
-      if (resolvable(candidate)) {
-        return candidate;
-      }
-      candidate = '.' + path.sep + candidate;
-      if (resolvable(candidate)) {
-        foundRelativeImport = candidate;
-      }
-    }
-
-    if (foundRelativeImport) return foundRelativeImport;
-
-    // Try a relative import
-    const candidate = path.relative(path.dirname(containingFile), importModuleName);
-    if (resolvable(candidate)) {
-      return candidate;
-    }
-
-    throw new Error(
-        `Unable to find any resolvable import for ${importedFile} relative to ${containingFile}`);
-  }
-}
-
-interface ModuleFilenameResolutionHost extends ts.ModuleResolutionHost {
-  assumeFileExists(fileName: string): void;
-}
-
-function createModuleFilenameResolverHost(host: ts.ModuleResolutionHost):
-    ModuleFilenameResolutionHost {
-  const assumedExists = new Set<string>();
-  const resolveModuleNameHost = Object.create(host);
-  // When calling ts.resolveModuleName, additional allow checks for .d.ts files to be done based on
-  // checks for .ngsummary.json files, so that our codegen depends on fewer inputs and requires
-  // to be called less often.
-  // This is needed as we use ts.resolveModuleName in reflector_host and it should be able to
-  // resolve summary file names.
-  resolveModuleNameHost.fileExists = (fileName: string): boolean => {
-    if (assumedExists.has(fileName)) {
-      return true;
-    }
-
-    if (host.fileExists(fileName)) {
-      return true;
-    }
-
-    if (DTS.test(fileName)) {
-      const base = fileName.substring(0, fileName.length - 5);
-      return host.fileExists(base + '.ngsummary.json');
-    }
-
-    return false;
-  };
-
-  resolveModuleNameHost.assumeFileExists = (fileName: string) => assumedExists.add(fileName);
-  // Make sure we do not `host.realpath()` from TS as we do not want to resolve symlinks.
-  // https://github.com/Microsoft/TypeScript/issues/9552
-  resolveModuleNameHost.realpath = (fileName: string) => fileName;
-
-  return resolveModuleNameHost;
-}
\ No newline at end of file
diff --git a/packages/compiler-cli/test/transformers/compiler_host_spec.ts b/packages/compiler-cli/test/transformers/compiler_host_spec.ts
new file mode 100644
index 0000000000..e0babe55c2
--- /dev/null
+++ b/packages/compiler-cli/test/transformers/compiler_host_spec.ts
@@ -0,0 +1,98 @@
+/**
+ * @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 ts from 'typescript';
+
+import {CompilerHost, CompilerOptions} from '../../src/transformers/api';
+import {createCompilerHost} from '../../src/transformers/compiler_host';
+import {Directory, Entry, MockAotContext, MockCompilerHost} from '../mocks';
+
+const dummyModule = 'export let foo: any[];';
+
+describe('NgCompilerHost', () => {
+  function createHost(
+      {files = {}, options = {basePath: '/tmp'}}: {files?: Directory,
+                                                   options?: CompilerOptions} = {}) {
+    const context = new MockAotContext('/tmp/', files);
+    const tsHost = new MockCompilerHost(context);
+    return createCompilerHost({tsHost, options});
+  }
+
+  describe('fileNameToModuleName', () => {
+    let ngHost: CompilerHost;
+    beforeEach(() => { ngHost = createHost(); });
+
+    it('should use a package import when accessing a package from a source file', () => {
+      expect(ngHost.fileNameToModuleName('/tmp/node_modules/@angular/core.d.ts', '/tmp/main.ts'))
+          .toBe('@angular/core');
+    });
+
+    it('should use a package import when accessing a package from another package', () => {
+      expect(ngHost.fileNameToModuleName(
+                 '/tmp/node_modules/mod1/index.d.ts', '/tmp/node_modules/mod2/index.d.ts'))
+          .toBe('mod1/index');
+      expect(ngHost.fileNameToModuleName(
+                 '/tmp/node_modules/@angular/core/index.d.ts',
+                 '/tmp/node_modules/@angular/common/index.d.ts'))
+          .toBe('@angular/core/index');
+    });
+
+    it('should use a relative import when accessing a file in the same package', () => {
+      expect(ngHost.fileNameToModuleName(
+                 '/tmp/node_modules/mod/a/child.d.ts', '/tmp/node_modules/mod/index.d.ts'))
+          .toBe('./a/child');
+      expect(ngHost.fileNameToModuleName(
+                 '/tmp/node_modules/@angular/core/src/core.d.ts',
+                 '/tmp/node_modules/@angular/core/index.d.ts'))
+          .toBe('./src/core');
+    });
+
+    it('should use a relative import when accessing a source file from a source file', () => {
+      expect(ngHost.fileNameToModuleName('/tmp/src/a/child.ts', '/tmp/src/index.ts'))
+          .toBe('./a/child');
+    });
+
+    it('should support multiple rootDirs when accessing a source file form a source file', () => {
+      const ngHostWithMultipleRoots = createHost({
+        options: {
+          basePath: '/tmp/',
+          rootDirs: [
+            'src/a',
+            'src/b',
+          ]
+        }
+      });
+      expect(ngHostWithMultipleRoots.fileNameToModuleName('/tmp/src/b/b.ts', '/tmp/src/a/a.ts'))
+          .toBe('./b');
+    });
+
+    it('should error if accessing a source file from a package', () => {
+      expect(
+          () => ngHost.fileNameToModuleName(
+              '/tmp/src/a/child.ts', '/tmp/node_modules/@angular/core.d.ts'))
+          .toThrowError(
+              'Trying to import a source file from a node_modules package: import /tmp/src/a/child.ts from /tmp/node_modules/@angular/core.d.ts');
+    });
+
+  });
+
+  describe('moduleNameToFileName', () => {
+    it('should resolve a package import without a containing file', () => {
+      const ngHost = createHost(
+          {files: {'tmp': {'node_modules': {'@angular': {'core': {'index.d.ts': dummyModule}}}}}});
+      expect(ngHost.moduleNameToFileName('@angular/core'))
+          .toBe('/tmp/node_modules/@angular/core/index.d.ts');
+    });
+
+    it('should resolve an import using the containing file', () => {
+      const ngHost = createHost({files: {'tmp': {'src': {'a': {'child.d.ts': dummyModule}}}}});
+      expect(ngHost.moduleNameToFileName('./a/child', '/tmp/src/index.ts'))
+          .toBe('/tmp/src/a/child.d.ts');
+    });
+  });
+});
\ No newline at end of file
diff --git a/packages/compiler/src/aot/static_reflector.ts b/packages/compiler/src/aot/static_reflector.ts
index fb76750878..06523cc5de 100644
--- a/packages/compiler/src/aot/static_reflector.ts
+++ b/packages/compiler/src/aot/static_reflector.ts
@@ -82,12 +82,11 @@ export class StaticReflector implements CompileReflector {
   }
 
   resolveExternalReference(ref: o.ExternalReference): StaticSymbol {
-    const importSymbol = this.getStaticSymbol(ref.moduleName !, ref.name !);
-    const rootSymbol = this.findDeclaration(ref.moduleName !, ref.name !);
-    if (importSymbol != rootSymbol) {
-      this.symbolResolver.recordImportAs(rootSymbol, importSymbol);
-    }
-    return rootSymbol;
+    const refSymbol = this.symbolResolver.getSymbolByModule(ref.moduleName !, ref.name !);
+    const declarationSymbol = this.findSymbolDeclaration(refSymbol);
+    this.symbolResolver.recordModuleNameForFileName(refSymbol.filePath, ref.moduleName !);
+    this.symbolResolver.recordImportAs(declarationSymbol, refSymbol);
+    return declarationSymbol;
   }
 
   findDeclaration(moduleUrl: string, name: string, containingFile?: string): StaticSymbol {
diff --git a/packages/compiler/src/aot/static_symbol_resolver.ts b/packages/compiler/src/aot/static_symbol_resolver.ts
index 80d3ec5be4..6a66d3ab78 100644
--- a/packages/compiler/src/aot/static_symbol_resolver.ts
+++ b/packages/compiler/src/aot/static_symbol_resolver.ts
@@ -172,6 +172,10 @@ export class StaticSymbolResolver {
     this.importAs.set(sourceSymbol, targetSymbol);
   }
 
+  recordModuleNameForFileName(fileName: string, moduleName: string) {
+    this.knownFileNameToModuleNames.set(fileName, moduleName);
+  }
+
   /**
    * Invalidate all information derived from the given file.
    *

From 2572bf508f03c1939641bae9b5bab112b7499f67 Mon Sep 17 00:00:00 2001
From: Tobias Bosch <tbosch1009@gmail.com>
Date: Tue, 15 Aug 2017 14:41:48 -0700
Subject: [PATCH 44/83] feat(compiler): make `.ngsummary.json` files portable

This also allows to customize the filePaths in `.ngsummary.json` file
via the new methods `toSummaryFileName` and `fromSummaryFileName`
on the `CompilerHost`.
---
 packages/compiler-cli/src/compiler_host.ts    | 14 +++++---
 packages/compiler-cli/src/transformers/api.ts | 14 ++++++++
 .../src/transformers/compiler_host.ts         | 31 ++++++++++++++++--
 .../compiler-cli/src/transformers/program.ts  |  8 +++++
 .../compiler-cli/test/diagnostics/mocks.ts    |  3 +-
 .../test/transformers/compiler_host_spec.ts   |  5 +++
 packages/compiler/src/aot/compiler.ts         | 13 ++++----
 packages/compiler/src/aot/summary_resolver.ts | 24 +++++++++++---
 .../compiler/src/aot/summary_serializer.ts    | 32 +++++++++++--------
 packages/compiler/src/summary_resolver.ts     | 10 +++---
 .../test/aot/static_symbol_resolver_spec.ts   |  3 +-
 .../test/aot/summary_resolver_spec.ts         |  7 ++--
 .../test/aot/summary_serializer_spec.ts       | 29 ++++++++++-------
 packages/compiler/test/aot/test_util.ts       |  6 ++--
 .../language-service/src/typescript_host.ts   |  3 +-
 15 files changed, 149 insertions(+), 53 deletions(-)

diff --git a/packages/compiler-cli/src/compiler_host.ts b/packages/compiler-cli/src/compiler_host.ts
index 1367de73a6..588bfd7779 100644
--- a/packages/compiler-cli/src/compiler_host.ts
+++ b/packages/compiler-cli/src/compiler_host.ts
@@ -42,6 +42,10 @@ export abstract class BaseAotCompilerHost<C extends BaseAotCompilerHostContext>
 
   abstract fileNameToModuleName(importedFile: string, containingFile: string): string|null;
 
+  abstract toSummaryFileName(fileName: string, referringSrcFileName: string): string;
+
+  abstract fromSummaryFileName(fileName: string, referringLibFileName: string): string;
+
   protected getSourceFile(filePath: string): ts.SourceFile {
     const sf = this.program.getSourceFile(filePath);
     if (!sf) {
@@ -144,10 +148,6 @@ export abstract class BaseAotCompilerHost<C extends BaseAotCompilerHostContext>
     return null;
   }
 
-  getOutputFileName(sourceFilePath: string): string {
-    return sourceFilePath.replace(EXT, '') + '.d.ts';
-  }
-
   isSourceFile(filePath: string): boolean {
     const excludeRegex =
         this.options.generateCodeForLibraries === false ? GENERATED_OR_DTS_FILES : GENERATED_FILES;
@@ -268,6 +268,12 @@ export class CompilerHost extends BaseAotCompilerHost<CompilerHostContext> {
     };
   }
 
+  toSummaryFileName(fileName: string, referringSrcFileName: string): string {
+    return fileName.replace(EXT, '') + '.d.ts';
+  }
+
+  fromSummaryFileName(fileName: string, referringLibFileName: string): string { return fileName; }
+
   calculateEmitPath(filePath: string): string {
     // Write codegen in a directory structure matching the sources.
     let root = this.options.basePath !;
diff --git a/packages/compiler-cli/src/transformers/api.ts b/packages/compiler-cli/src/transformers/api.ts
index 3567de65fa..fb2a9e4965 100644
--- a/packages/compiler-cli/src/transformers/api.ts
+++ b/packages/compiler-cli/src/transformers/api.ts
@@ -130,6 +130,20 @@ export interface CompilerHost extends ts.CompilerHost {
    * See ImportResolver.
    */
   fileNameToModuleName(importedFilePath: string, containingFilePath: string): string|null;
+  /**
+   * Converts a file name into a representation that should be stored in a summary file.
+   * This has to include changing the suffix as well.
+   * E.g.
+   * `some_file.ts` -> `some_file.d.ts`
+   *
+   * @param referringSrcFileName the soure file that refers to fileName
+   */
+  toSummaryFileName(fileName: string, referringSrcFileName: string): string;
+  /**
+   * Converts a fileName that was processed by `toSummaryFileName` back into a real fileName
+   * given the fileName of the library that is referrig to it.
+   */
+  fromSummaryFileName(fileName: string, referringLibFileName: string): string;
   /**
    * Load a referenced resource either statically or asynchronously. If the host returns a
    * `Promise<string>` it is assumed the user of the corresponding `Program` will call
diff --git a/packages/compiler-cli/src/transformers/compiler_host.ts b/packages/compiler-cli/src/transformers/compiler_host.ts
index 375b3af80a..a6881e6f24 100644
--- a/packages/compiler-cli/src/transformers/compiler_host.ts
+++ b/packages/compiler-cli/src/transformers/compiler_host.ts
@@ -24,6 +24,8 @@ export function createCompilerHost(
 
   host.moduleNameToFileName = mixin.moduleNameToFileName.bind(mixin);
   host.fileNameToModuleName = mixin.fileNameToModuleName.bind(mixin);
+  host.toSummaryFileName = mixin.toSummaryFileName.bind(mixin);
+  host.fromSummaryFileName = mixin.fromSummaryFileName.bind(mixin);
 
   // Make sure we do not `host.realpath()` from TS as we do not want to resolve symlinks.
   // https://github.com/Microsoft/TypeScript/issues/9552
@@ -109,9 +111,15 @@ class CompilerHostMixin {
 
     let moduleName: string;
     if (importedFilePackagName === containingFilePackageName) {
-      moduleName = dotRelative(
-          path.dirname(stripRootDir(this.rootDirs, containingFile)),
-          stripRootDir(this.rootDirs, importedFile));
+      const rootedContainingFile = stripRootDir(this.rootDirs, containingFile);
+      const rootedImportedFile = stripRootDir(this.rootDirs, importedFile);
+
+      if (rootedContainingFile !== containingFile && rootedImportedFile !== importedFile) {
+        // if both files are contained in the `rootDirs`, then strip the rootDirs
+        containingFile = rootedContainingFile;
+        importedFile = rootedImportedFile;
+      }
+      moduleName = dotRelative(path.dirname(containingFile), importedFile);
     } else if (importedFilePackagName) {
       moduleName = stripNodeModulesPrefix(importedFile);
     } else {
@@ -120,6 +128,18 @@ class CompilerHostMixin {
     }
     return moduleName;
   }
+
+  toSummaryFileName(fileName: string, referringSrcFileName: string): string {
+    return this.fileNameToModuleName(fileName, referringSrcFileName);
+  }
+
+  fromSummaryFileName(fileName: string, referringLibFileName: string): string {
+    const resolved = this.moduleNameToFileName(fileName, referringLibFileName);
+    if (!resolved) {
+      throw new Error(`Could not resolve ${fileName} from ${referringLibFileName}`);
+    }
+    return resolved;
+  }
 }
 
 interface ModuleFilenameResolutionHost extends ts.ModuleResolutionHost {
@@ -189,6 +209,11 @@ function stripNodeModulesPrefix(filePath: string): string {
   return filePath.replace(/.*node_modules\//, '');
 }
 
+function getNodeModulesPrefix(filePath: string): string|null {
+  const match = /.*node_modules\//.exec(filePath);
+  return match ? match[1] : null;
+}
+
 function normalizePath(p: string): string {
   return path.normalize(path.join(p, '.')).replace(/\\/g, '/');
 }
\ No newline at end of file
diff --git a/packages/compiler-cli/src/transformers/program.ts b/packages/compiler-cli/src/transformers/program.ts
index 542f577585..e9c81d6b30 100644
--- a/packages/compiler-cli/src/transformers/program.ts
+++ b/packages/compiler-cli/src/transformers/program.ts
@@ -314,6 +314,14 @@ class AotCompilerHostImpl extends BaseAotCompilerHost<CompilerHost> {
   fileNameToModuleName(importedFile: string, containingFile: string): string|null {
     return this.context.fileNameToModuleName(importedFile, containingFile);
   }
+
+  toSummaryFileName(fileName: string, referringSrcFileName: string): string {
+    return this.context.toSummaryFileName(fileName, referringSrcFileName);
+  }
+
+  fromSummaryFileName(fileName: string, referringLibFileName: string): string {
+    return this.context.fromSummaryFileName(fileName, referringLibFileName);
+  }
 }
 
 export function createProgram(
diff --git a/packages/compiler-cli/test/diagnostics/mocks.ts b/packages/compiler-cli/test/diagnostics/mocks.ts
index c87acd9f96..979d352e27 100644
--- a/packages/compiler-cli/test/diagnostics/mocks.ts
+++ b/packages/compiler-cli/test/diagnostics/mocks.ts
@@ -105,7 +105,8 @@ const summaryResolver = new AotSummaryResolver(
     {
       loadSummary(filePath: string) { return null; },
       isSourceFile(sourceFilePath: string) { return true; },
-      getOutputFileName(sourceFilePath: string) { return sourceFilePath; }
+      toSummaryFileName(sourceFilePath: string) { return sourceFilePath; },
+      fromSummaryFileName(filePath: string): string{return filePath;},
     },
     staticSymbolCache);
 
diff --git a/packages/compiler-cli/test/transformers/compiler_host_spec.ts b/packages/compiler-cli/test/transformers/compiler_host_spec.ts
index e0babe55c2..0d226420e6 100644
--- a/packages/compiler-cli/test/transformers/compiler_host_spec.ts
+++ b/packages/compiler-cli/test/transformers/compiler_host_spec.ts
@@ -67,8 +67,13 @@ describe('NgCompilerHost', () => {
           ]
         }
       });
+      // both files are in the rootDirs
       expect(ngHostWithMultipleRoots.fileNameToModuleName('/tmp/src/b/b.ts', '/tmp/src/a/a.ts'))
           .toBe('./b');
+
+      // one file is not in the rootDirs
+      expect(ngHostWithMultipleRoots.fileNameToModuleName('/tmp/src/c/c.ts', '/tmp/src/a/a.ts'))
+          .toBe('../c/c');
     });
 
     it('should error if accessing a source file from a package', () => {
diff --git a/packages/compiler/src/aot/compiler.ts b/packages/compiler/src/aot/compiler.ts
index 9a4b870f90..76d3aca8df 100644
--- a/packages/compiler/src/aot/compiler.ts
+++ b/packages/compiler/src/aot/compiler.ts
@@ -207,10 +207,10 @@ export class AotCompiler {
   }
 
   private _createSummary(
-      srcFileUrl: string, directives: StaticSymbol[], pipes: StaticSymbol[],
+      srcFileName: string, directives: StaticSymbol[], pipes: StaticSymbol[],
       ngModules: StaticSymbol[], injectables: StaticSymbol[],
       ngFactoryCtx: OutputContext): GeneratedFile[] {
-    const symbolSummaries = this._symbolResolver.getSymbolsOf(srcFileUrl)
+    const symbolSummaries = this._symbolResolver.getSymbolsOf(srcFileName)
                                 .map(symbol => this._symbolResolver.resolveSymbol(symbol));
     const typeData: {
       summary: CompileTypeSummary,
@@ -235,18 +235,19 @@ export class AotCompiler {
                                metadata: this._metadataResolver.getInjectableSummary(ref) !.type
                              }))
         ];
-    const forJitOutputCtx = this._createOutputContext(summaryForJitFileName(srcFileUrl, true));
+    const forJitOutputCtx = this._createOutputContext(summaryForJitFileName(srcFileName, true));
     const {json, exportAs} = serializeSummaries(
-        forJitOutputCtx, this._summaryResolver, this._symbolResolver, symbolSummaries, typeData);
+        srcFileName, forJitOutputCtx, this._summaryResolver, this._symbolResolver, symbolSummaries,
+        typeData);
     exportAs.forEach((entry) => {
       ngFactoryCtx.statements.push(
           o.variable(entry.exportAs).set(ngFactoryCtx.importExpr(entry.symbol)).toDeclStmt(null, [
             o.StmtModifier.Exported
           ]));
     });
-    const summaryJson = new GeneratedFile(srcFileUrl, summaryFileName(srcFileUrl), json);
+    const summaryJson = new GeneratedFile(srcFileName, summaryFileName(srcFileName), json);
     if (this._enableSummariesForJit) {
-      return [summaryJson, this._codegenSourceModule(srcFileUrl, forJitOutputCtx)];
+      return [summaryJson, this._codegenSourceModule(srcFileName, forJitOutputCtx)];
     };
 
     return [summaryJson];
diff --git a/packages/compiler/src/aot/summary_resolver.ts b/packages/compiler/src/aot/summary_resolver.ts
index 52f7857629..c630675dc7 100644
--- a/packages/compiler/src/aot/summary_resolver.ts
+++ b/packages/compiler/src/aot/summary_resolver.ts
@@ -23,11 +23,20 @@ export interface AotSummaryResolverHost {
    */
   isSourceFile(sourceFilePath: string): boolean;
   /**
-   * Returns the output file path of a source file.
+   * Converts a file name into a representation that should be stored in a summary file.
+   * This has to include changing the suffix as well.
    * E.g.
    * `some_file.ts` -> `some_file.d.ts`
+   *
+   * @param referringSrcFileName the soure file that refers to fileName
    */
-  getOutputFileName(sourceFilePath: string): string;
+  toSummaryFileName(fileName: string, referringSrcFileName: string): string;
+
+  /**
+   * Converts a fileName that was processed by `toSummaryFileName` back into a real fileName
+   * given the fileName of the library that is referrig to it.
+   */
+  fromSummaryFileName(fileName: string, referringLibFileName: string): string;
 }
 
 export class AotSummaryResolver implements SummaryResolver<StaticSymbol> {
@@ -46,7 +55,13 @@ export class AotSummaryResolver implements SummaryResolver<StaticSymbol> {
     return !this.host.isSourceFile(stripGeneratedFileSuffix(filePath));
   }
 
-  getLibraryFileName(filePath: string) { return this.host.getOutputFileName(filePath); }
+  toSummaryFileName(filePath: string, referringSrcFileName: string) {
+    return this.host.toSummaryFileName(filePath, referringSrcFileName);
+  }
+
+  fromSummaryFileName(fileName: string, referringLibFileName: string) {
+    return this.host.fromSummaryFileName(fileName, referringLibFileName);
+  }
 
   resolveSummary(staticSymbol: StaticSymbol): Summary<StaticSymbol> {
     staticSymbol.assertNoMembers();
@@ -85,7 +100,8 @@ export class AotSummaryResolver implements SummaryResolver<StaticSymbol> {
         throw e;
       }
       if (json) {
-        const {summaries, importAs} = deserializeSummaries(this.staticSymbolCache, json);
+        const {summaries, importAs} =
+            deserializeSummaries(this.staticSymbolCache, this, filePath, json);
         summaries.forEach((summary) => this.summaryCache.set(summary.symbol, summary));
         importAs.forEach((importAs) => {
           this.importAs.set(
diff --git a/packages/compiler/src/aot/summary_serializer.ts b/packages/compiler/src/aot/summary_serializer.ts
index 11e420a2d1..165c803cbf 100644
--- a/packages/compiler/src/aot/summary_serializer.ts
+++ b/packages/compiler/src/aot/summary_serializer.ts
@@ -15,7 +15,7 @@ import {ResolvedStaticSymbol, StaticSymbolResolver} from './static_symbol_resolv
 import {summaryForJitFileName, summaryForJitName} from './util';
 
 export function serializeSummaries(
-    forJitCtx: OutputContext, summaryResolver: SummaryResolver<StaticSymbol>,
+    srcFileName: string, forJitCtx: OutputContext, summaryResolver: SummaryResolver<StaticSymbol>,
     symbolResolver: StaticSymbolResolver, symbols: ResolvedStaticSymbol[], types: {
       summary: CompileTypeSummary,
       metadata: CompileNgModuleMetadata | CompileDirectiveMetadata | CompilePipeMetadata |
@@ -76,15 +76,17 @@ export function serializeSummaries(
       });
     }
   });
-  const {json, exportAs} = toJsonSerializer.serialize();
+  const {json, exportAs} = toJsonSerializer.serialize(srcFileName);
   forJitSerializer.serialize(exportAs);
   return {json, exportAs};
 }
 
-export function deserializeSummaries(symbolCache: StaticSymbolCache, json: string):
+export function deserializeSummaries(
+    symbolCache: StaticSymbolCache, summaryResolver: SummaryResolver<StaticSymbol>,
+    libraryFileName: string, json: string):
     {summaries: Summary<StaticSymbol>[], importAs: {symbol: StaticSymbol, importAs: string}[]} {
-  const deserializer = new FromJsonDeserializer(symbolCache);
-  return deserializer.deserialize(json);
+  const deserializer = new FromJsonDeserializer(symbolCache, summaryResolver);
+  return deserializer.deserialize(libraryFileName, json);
 }
 
 export function createForJitStub(outputCtx: OutputContext, reference: StaticSymbol) {
@@ -151,7 +153,8 @@ class ToJsonSerializer extends ValueTransformer {
     }
   }
 
-  serialize(): {json: string, exportAs: {symbol: StaticSymbol, exportAs: string}[]} {
+  serialize(srcFileName: string):
+      {json: string, exportAs: {symbol: StaticSymbol, exportAs: string}[]} {
     const exportAs: {symbol: StaticSymbol, exportAs: string}[] = [];
     const json = JSON.stringify({
       summaries: this.processedSummaries,
@@ -165,10 +168,7 @@ class ToJsonSerializer extends ValueTransformer {
         return {
           __symbol: index,
           name: symbol.name,
-          // We convert the source filenames tinto output filenames,
-          // as the generated summary file will be used when the current
-          // compilation unit is used as a library
-          filePath: this.summaryResolver.getLibraryFileName(symbol.filePath),
+          filePath: this.summaryResolver.toSummaryFileName(symbol.filePath, srcFileName),
           importAs: importAs
         };
       })
@@ -317,15 +317,21 @@ class ForJitSerializer {
 class FromJsonDeserializer extends ValueTransformer {
   private symbols: StaticSymbol[];
 
-  constructor(private symbolCache: StaticSymbolCache) { super(); }
+  constructor(
+      private symbolCache: StaticSymbolCache,
+      private summaryResolver: SummaryResolver<StaticSymbol>) {
+    super();
+  }
 
-  deserialize(json: string):
+  deserialize(libraryFileName: string, json: string):
       {summaries: Summary<StaticSymbol>[], importAs: {symbol: StaticSymbol, importAs: string}[]} {
     const data: {summaries: any[], symbols: any[]} = JSON.parse(json);
     const importAs: {symbol: StaticSymbol, importAs: string}[] = [];
     this.symbols = [];
     data.symbols.forEach((serializedSymbol) => {
-      const symbol = this.symbolCache.get(serializedSymbol.filePath, serializedSymbol.name);
+      const symbol = this.symbolCache.get(
+          this.summaryResolver.fromSummaryFileName(serializedSymbol.filePath, libraryFileName),
+          serializedSymbol.name);
       this.symbols.push(symbol);
       if (serializedSymbol.importAs) {
         importAs.push({symbol: symbol, importAs: serializedSymbol.importAs});
diff --git a/packages/compiler/src/summary_resolver.ts b/packages/compiler/src/summary_resolver.ts
index d6246ac9ac..b500910fe7 100644
--- a/packages/compiler/src/summary_resolver.ts
+++ b/packages/compiler/src/summary_resolver.ts
@@ -17,7 +17,8 @@ export interface Summary<T> {
 
 export abstract class SummaryResolver<T> {
   abstract isLibraryFile(fileName: string): boolean;
-  abstract getLibraryFileName(fileName: string): string|null;
+  abstract toSummaryFileName(fileName: string, referringSrcFileName: string): string;
+  abstract fromSummaryFileName(fileName: string, referringLibFileName: string): string;
   abstract resolveSummary(reference: T): Summary<T>|null;
   abstract getSymbolsOf(filePath: string): T[];
   abstract getImportAs(reference: T): T;
@@ -28,12 +29,13 @@ export abstract class SummaryResolver<T> {
 export class JitSummaryResolver implements SummaryResolver<Type<any>> {
   private _summaries = new Map<Type<any>, Summary<Type<any>>>();
 
-  isLibraryFile(fileName: string): boolean { return false; };
-  getLibraryFileName(fileName: string): string|null { return null; }
+  isLibraryFile(): boolean { return false; };
+  toSummaryFileName(fileName: string): string { return fileName; }
+  fromSummaryFileName(fileName: string): string { return fileName; }
   resolveSummary(reference: Type<any>): Summary<Type<any>>|null {
     return this._summaries.get(reference) || null;
   };
-  getSymbolsOf(filePath: string): Type<any>[] { return []; }
+  getSymbolsOf(): Type<any>[] { return []; }
   getImportAs(reference: Type<any>): Type<any> { return reference; }
   addSummary(summary: Summary<Type<any>>) { this._summaries.set(summary.symbol, summary); };
 }
diff --git a/packages/compiler/test/aot/static_symbol_resolver_spec.ts b/packages/compiler/test/aot/static_symbol_resolver_spec.ts
index 4ee26ff77c..728de9264f 100644
--- a/packages/compiler/test/aot/static_symbol_resolver_spec.ts
+++ b/packages/compiler/test/aot/static_symbol_resolver_spec.ts
@@ -386,7 +386,8 @@ export class MockSummaryResolver implements SummaryResolver<StaticSymbol> {
   }
 
   isLibraryFile(filePath: string): boolean { return filePath.endsWith('.d.ts'); }
-  getLibraryFileName(filePath: string): string { return filePath.replace(/(\.d)?\.ts$/, '.d.ts'); }
+  toSummaryFileName(filePath: string): string { return filePath.replace(/(\.d)?\.ts$/, '.d.ts'); }
+  fromSummaryFileName(filePath: string): string { return filePath; }
 }
 
 export class MockStaticSymbolResolverHost implements StaticSymbolResolverHost {
diff --git a/packages/compiler/test/aot/summary_resolver_spec.ts b/packages/compiler/test/aot/summary_resolver_spec.ts
index 60681bb609..efff637a50 100644
--- a/packages/compiler/test/aot/summary_resolver_spec.ts
+++ b/packages/compiler/test/aot/summary_resolver_spec.ts
@@ -35,7 +35,8 @@ export function main() {
       const symbolResolver = new StaticSymbolResolver(
           new MockStaticSymbolResolverHost({}), symbolCache, mockSummaryResolver);
       return serializeSummaries(
-                 createMockOutputContext(), mockSummaryResolver, symbolResolver, symbols, [])
+                 'someFile.ts', createMockOutputContext(), mockSummaryResolver, symbolResolver,
+                 symbols, [])
           .json;
     }
 
@@ -105,10 +106,12 @@ export class MockAotSummaryResolverHost implements AotSummaryResolverHost {
     return './' + path.basename(fileName).replace(EXT, '');
   }
 
-  getOutputFileName(sourceFileName: string): string {
+  toSummaryFileName(sourceFileName: string): string {
     return sourceFileName.replace(EXT, '') + '.d.ts';
   }
 
+  fromSummaryFileName(filePath: string): string { return filePath; }
+
   isSourceFile(filePath: string) { return !filePath.endsWith('.d.ts'); }
 
   loadSummary(filePath: string): string { return this.summaries[filePath]; }
diff --git a/packages/compiler/test/aot/summary_serializer_spec.ts b/packages/compiler/test/aot/summary_serializer_spec.ts
index 6a177df793..90e8c36d06 100644
--- a/packages/compiler/test/aot/summary_serializer_spec.ts
+++ b/packages/compiler/test/aot/summary_serializer_spec.ts
@@ -43,7 +43,7 @@ export function main() {
     it('should serialize various data correctly', () => {
       init();
       const serializedData = serializeSummaries(
-          createMockOutputContext(), summaryResolver, symbolResolver,
+          'someFile.ts', createMockOutputContext(), summaryResolver, symbolResolver,
           [
             {
               symbol: symbolCache.get('/tmp/some_values.ts', 'Values'),
@@ -77,7 +77,9 @@ export function main() {
           }]);
 
 
-      const summaries = deserializeSummaries(symbolCache, serializedData.json).summaries;
+      const summaries =
+          deserializeSummaries(symbolCache, summaryResolver, 'someFile.d.ts', serializedData.json)
+              .summaries;
       expect(summaries.length).toBe(2);
 
       // Note: change from .ts to .d.ts is expected
@@ -105,8 +107,8 @@ export function main() {
     it('should automatically add exported directives / pipes of NgModules that are not source files',
        () => {
          init();
-         const externalSerialized =
-             serializeSummaries(createMockOutputContext(), summaryResolver, symbolResolver, [], [
+         const externalSerialized = serializeSummaries(
+             'someFile.ts', createMockOutputContext(), summaryResolver, symbolResolver, [], [
                {
                  summary: {
                    summaryKind: CompileSummaryKind.Pipe,
@@ -133,7 +135,7 @@ export function main() {
          });
 
          const serialized = serializeSummaries(
-             createMockOutputContext(), summaryResolver, symbolResolver, [], [{
+             'someFile.ts', createMockOutputContext(), summaryResolver, symbolResolver, [], [{
                summary: <any>{
                  summaryKind: CompileSummaryKind.NgModule,
                  type: {reference: symbolCache.get('/tmp/some_module.ts', 'SomeModule')},
@@ -151,7 +153,9 @@ export function main() {
                metadata: null as any
              }]);
 
-         const summaries = deserializeSummaries(symbolCache, serialized.json).summaries;
+         const summaries =
+             deserializeSummaries(symbolCache, summaryResolver, 'someFile.d.ts', serialized.json)
+                 .summaries;
          expect(summaries.length).toBe(3);
          expect(summaries[0].symbol).toBe(symbolCache.get('/tmp/some_module.d.ts', 'SomeModule'));
          expect(summaries[1].symbol).toBe(symbolCache.get('/tmp/external.d.ts', 'SomeExternalDir'));
@@ -163,7 +167,7 @@ export function main() {
        () => {
          init();
          const externalSerialized = serializeSummaries(
-             createMockOutputContext(), summaryResolver, symbolResolver,
+             'someFile.ts', createMockOutputContext(), summaryResolver, symbolResolver,
              [
                {
                  symbol: symbolCache.get('/tmp/external.ts', 'PROVIDERS'),
@@ -195,7 +199,7 @@ export function main() {
                    {__symbolic: 'module', version: 3, metadata: {'external': 'b'}}
              });
          const serialized = serializeSummaries(
-             createMockOutputContext(), summaryResolver, symbolResolver, [{
+             'someFile.ts', createMockOutputContext(), summaryResolver, symbolResolver, [{
                symbol: symbolCache.get('/tmp/test.ts', 'main'),
                metadata: {
                  local: symbolCache.get('/tmp/local.ts', 'local'),
@@ -205,7 +209,9 @@ export function main() {
              }],
              []);
 
-         const summaries = deserializeSummaries(symbolCache, serialized.json).summaries;
+         const summaries =
+             deserializeSummaries(symbolCache, summaryResolver, 'someFile.d.ts', serialized.json)
+                 .summaries;
          // Note: local should not show up!
          expect(summaries.length).toBe(4);
          expect(summaries[0].symbol).toBe(symbolCache.get('/tmp/test.d.ts', 'main'));
@@ -230,7 +236,7 @@ export function main() {
     it('should create "importAs" names for non source symbols', () => {
       init();
       const serialized = serializeSummaries(
-          createMockOutputContext(), summaryResolver, symbolResolver, [{
+          'someFile.ts', createMockOutputContext(), summaryResolver, symbolResolver, [{
             symbol: symbolCache.get('/tmp/test.ts', 'main'),
             metadata: [
               symbolCache.get('/tmp/external.d.ts', 'lib'),
@@ -243,7 +249,8 @@ export function main() {
         {symbol: symbolCache.get('/tmp/external.d.ts', 'lib'), exportAs: 'lib_1'}
       ]);
 
-      const deserialized = deserializeSummaries(symbolCache, serialized.json);
+      const deserialized =
+          deserializeSummaries(symbolCache, summaryResolver, 'someFile.d.ts', serialized.json);
       // Note: no entry for the symbol with members!
       expect(deserialized.importAs).toEqual([
         {symbol: symbolCache.get('/tmp/external.d.ts', 'lib'), importAs: 'lib_1'}
diff --git a/packages/compiler/test/aot/test_util.ts b/packages/compiler/test/aot/test_util.ts
index 7ea8633c78..288aef60d1 100644
--- a/packages/compiler/test/aot/test_util.ts
+++ b/packages/compiler/test/aot/test_util.ts
@@ -382,9 +382,9 @@ export class MockAotCompilerHost implements AotCompilerHost {
         (this.dtsAreSource || !DTS.test(sourceFilePath));
   }
 
-  getOutputFileName(sourceFilePath: string): string {
-    return sourceFilePath.replace(EXT, '') + '.d.ts';
-  }
+  toSummaryFileName(filePath: string): string { return filePath.replace(EXT, '') + '.d.ts'; }
+
+  fromSummaryFileName(filePath: string): string { return filePath; }
 
   // AotCompilerHost
   fileNameToModuleName(importedFile: string, containingFile: string): string|null {
diff --git a/packages/language-service/src/typescript_host.ts b/packages/language-service/src/typescript_host.ts
index e91ca3f532..ae6edd4330 100644
--- a/packages/language-service/src/typescript_host.ts
+++ b/packages/language-service/src/typescript_host.ts
@@ -405,7 +405,8 @@ export class TypeScriptServiceHost implements LanguageServiceHost {
           {
             loadSummary(filePath: string) { return null; },
             isSourceFile(sourceFilePath: string) { return true; },
-            getOutputFileName(sourceFilePath: string) { return sourceFilePath; }
+            toSummaryFileName(sourceFilePath: string) { return sourceFilePath; },
+            fromSummaryFileName(filePath: string): string{return filePath;},
           },
           this._staticSymbolCache);
       result = this._staticSymbolResolver = new StaticSymbolResolver(

From 43226cb93db4f8bdf2ef2da375fe817d764a46a0 Mon Sep 17 00:00:00 2001
From: Tobias Bosch <tbosch1009@gmail.com>
Date: Tue, 15 Aug 2017 17:06:09 -0700
Subject: [PATCH 45/83] feat(compiler): use typescript for resolving resource
 paths

This can also be customized via the new method `resourceNameToFileName` in the
`CompilerHost`.
---
 packages/compiler-cli/src/compiler_host.ts    | 10 +++-
 .../src/diagnostics/typescript_symbols.ts     |  2 +-
 packages/compiler-cli/src/transformers/api.ts |  7 ++-
 .../src/transformers/compiler_host.ts         | 46 +++++++++++++------
 .../compiler-cli/src/transformers/program.ts  |  4 ++
 .../test/transformers/compiler_host_spec.ts   | 25 +++++++++-
 packages/compiler/src/aot/compiler_factory.ts | 19 +++++++-
 packages/compiler/src/aot/compiler_host.ts    |  5 ++
 packages/compiler/src/i18n/extractor.ts       | 12 ++++-
 packages/compiler/src/url_resolver.ts         | 19 +++-----
 packages/compiler/test/aot/test_util.ts       | 30 +++++++++++-
 11 files changed, 142 insertions(+), 37 deletions(-)

diff --git a/packages/compiler-cli/src/compiler_host.ts b/packages/compiler-cli/src/compiler_host.ts
index 588bfd7779..63b7d595d4 100644
--- a/packages/compiler-cli/src/compiler_host.ts
+++ b/packages/compiler-cli/src/compiler_host.ts
@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {AotCompilerHost, StaticSymbol, syntaxError} from '@angular/compiler';
+import {AotCompilerHost, StaticSymbol, UrlResolver, createOfflineCompileUrlResolver, syntaxError} from '@angular/compiler';
 import {AngularCompilerOptions, CollectorOptions, MetadataCollector, ModuleMetadata} from '@angular/tsc-wrapped';
 import * as fs from 'fs';
 import * as path from 'path';
@@ -40,6 +40,8 @@ export abstract class BaseAotCompilerHost<C extends BaseAotCompilerHostContext>
 
   abstract moduleNameToFileName(m: string, containingFile: string): string|null;
 
+  abstract resourceNameToFileName(m: string, containingFile: string): string|null;
+
   abstract fileNameToModuleName(importedFile: string, containingFile: string): string|null;
 
   abstract toSummaryFileName(fileName: string, referringSrcFileName: string): string;
@@ -234,6 +236,7 @@ export class CompilerHost extends BaseAotCompilerHost<CompilerHostContext> {
   private isGenDirChildOfRootDir: boolean;
   private genDir: string;
   protected resolveModuleNameHost: CompilerHostContext;
+  private urlResolver: UrlResolver;
 
   constructor(
       program: ts.Program, options: AngularCompilerOptions, context: CompilerHostContext,
@@ -266,6 +269,7 @@ export class CompilerHost extends BaseAotCompilerHost<CompilerHostContext> {
       }
       return false;
     };
+    this.urlResolver = createOfflineCompileUrlResolver();
   }
 
   toSummaryFileName(fileName: string, referringSrcFileName: string): string {
@@ -382,6 +386,10 @@ export class CompilerHost extends BaseAotCompilerHost<CompilerHostContext> {
     }
   }
 
+  resourceNameToFileName(m: string, containingFile: string): string {
+    return this.urlResolver.resolve(containingFile, m);
+  }
+
   /**
    * Moves the path into `genDir` folder while preserving the `node_modules` directory.
    */
diff --git a/packages/compiler-cli/src/diagnostics/typescript_symbols.ts b/packages/compiler-cli/src/diagnostics/typescript_symbols.ts
index 9d5199be2b..01371b42cc 100644
--- a/packages/compiler-cli/src/diagnostics/typescript_symbols.ts
+++ b/packages/compiler-cli/src/diagnostics/typescript_symbols.ts
@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {AotSummaryResolver, CompileMetadataResolver, CompilePipeSummary, CompilerConfig, DEFAULT_INTERPOLATION_CONFIG, DirectiveNormalizer, DirectiveResolver, DomElementSchemaRegistry, HtmlParser, InterpolationConfig, NgAnalyzedModules, NgModuleResolver, ParseTreeResult, PipeResolver, ResourceLoader, StaticReflector, StaticSymbol, StaticSymbolCache, StaticSymbolResolver, SummaryResolver, analyzeNgModules, createOfflineCompileUrlResolver, extractProgramSymbols} from '@angular/compiler';
+import {AotSummaryResolver, CompileMetadataResolver, CompilePipeSummary, CompilerConfig, DEFAULT_INTERPOLATION_CONFIG, DirectiveNormalizer, DirectiveResolver, DomElementSchemaRegistry, HtmlParser, InterpolationConfig, NgAnalyzedModules, NgModuleResolver, ParseTreeResult, PipeResolver, ResourceLoader, StaticReflector, StaticSymbol, StaticSymbolCache, StaticSymbolResolver, SummaryResolver, analyzeNgModules, extractProgramSymbols} from '@angular/compiler';
 import {ViewEncapsulation, ɵConsole as Console} from '@angular/core';
 import * as fs from 'fs';
 import * as path from 'path';
diff --git a/packages/compiler-cli/src/transformers/api.ts b/packages/compiler-cli/src/transformers/api.ts
index fb2a9e4965..44fcd319f0 100644
--- a/packages/compiler-cli/src/transformers/api.ts
+++ b/packages/compiler-cli/src/transformers/api.ts
@@ -126,10 +126,13 @@ export interface CompilerHost extends ts.CompilerHost {
   /**
    * Converts a file path to a module name that can be used as an `import ...`
    * I.e. `path/to/importedFile.ts` should be imported by `path/to/containingFile.ts`.
-   *
-   * See ImportResolver.
    */
   fileNameToModuleName(importedFilePath: string, containingFilePath: string): string|null;
+  /**
+   * Converts a file path for a resource that is used in a source file or another resource
+   * into a filepath.
+   */
+  resourceNameToFileName(resourceName: string, containingFilePath: string): string|null;
   /**
    * Converts a file name into a representation that should be stored in a summary file.
    * This has to include changing the suffix as well.
diff --git a/packages/compiler-cli/src/transformers/compiler_host.ts b/packages/compiler-cli/src/transformers/compiler_host.ts
index a6881e6f24..74b319838d 100644
--- a/packages/compiler-cli/src/transformers/compiler_host.ts
+++ b/packages/compiler-cli/src/transformers/compiler_host.ts
@@ -26,6 +26,7 @@ export function createCompilerHost(
   host.fileNameToModuleName = mixin.fileNameToModuleName.bind(mixin);
   host.toSummaryFileName = mixin.toSummaryFileName.bind(mixin);
   host.fromSummaryFileName = mixin.fromSummaryFileName.bind(mixin);
+  host.resourceNameToFileName = mixin.resourceNameToFileName.bind(mixin);
 
   // Make sure we do not `host.realpath()` from TS as we do not want to resolve symlinks.
   // https://github.com/Microsoft/TypeScript/issues/9552
@@ -35,26 +36,23 @@ export function createCompilerHost(
 }
 
 class CompilerHostMixin {
-  private moduleFileNames = new Map<string, string|null>();
   private rootDirs: string[];
   private basePath: string;
   private moduleResolutionHost: ModuleFilenameResolutionHost;
+  private moduleResolutionCache: ts.ModuleResolutionCache;
 
-  constructor(private context: ts.ModuleResolutionHost, private options: CompilerOptions) {
+  constructor(private context: ts.CompilerHost, private options: CompilerOptions) {
     // normalize the path so that it never ends with '/'.
     this.basePath = normalizePath(this.options.basePath !);
     this.rootDirs = (this.options.rootDirs || [
                       this.options.basePath !
                     ]).map(p => path.resolve(this.basePath, normalizePath(p)));
     this.moduleResolutionHost = createModuleFilenameResolverHost(context);
+    this.moduleResolutionCache = ts.createModuleResolutionCache(
+        this.context.getCurrentDirectory !(), this.context.getCanonicalFileName.bind(this.context));
   }
 
   moduleNameToFileName(m: string, containingFile: string): string|null {
-    const key = m + ':' + (containingFile || '');
-    let result: string|null = this.moduleFileNames.get(key) || null;
-    if (result) {
-      return result;
-    }
     if (!containingFile) {
       if (m.indexOf('.') === 0) {
         throw new Error('Resolution of relative paths requires a containing file.');
@@ -62,17 +60,17 @@ class CompilerHostMixin {
       // Any containing file gives the same result for absolute imports
       containingFile = path.join(this.basePath, 'index.ts');
     }
-    const resolved =
-        ts.resolveModuleName(m, containingFile, this.options, this.moduleResolutionHost)
-            .resolvedModule;
+    const resolved = ts.resolveModuleName(
+                           m, containingFile, this.options, this.moduleResolutionHost,
+                           this.moduleResolutionCache)
+                         .resolvedModule;
     if (resolved) {
       if (this.options.traceResolution) {
         console.error('resolve', m, containingFile, '=>', resolved.resolvedFileName);
       }
-      result = resolved.resolvedFileName;
+      return resolved.resolvedFileName;
     }
-    this.moduleFileNames.set(key, result);
-    return result;
+    return null;
   }
 
   /**
@@ -140,6 +138,17 @@ class CompilerHostMixin {
     }
     return resolved;
   }
+
+  resourceNameToFileName(resourceName: string, containingFile: string): string|null {
+    // Note: we convert package paths into relative paths to be compatible with the the
+    // previous implementation of UrlResolver.
+    if (resourceName && resourceName.charAt(0) !== '.' && !path.isAbsolute(resourceName)) {
+      resourceName = `./${resourceName}`;
+    }
+    const filePathWithNgResource =
+        this.moduleNameToFileName(addNgResourceSuffix(resourceName), containingFile);
+    return filePathWithNgResource ? stripNgResourceSuffix(filePathWithNgResource) : null;
+  }
 }
 
 interface ModuleFilenameResolutionHost extends ts.ModuleResolutionHost {
@@ -156,6 +165,7 @@ function createModuleFilenameResolverHost(host: ts.ModuleResolutionHost):
   // This is needed as we use ts.resolveModuleName in DefaultModuleFilenameResolver
   // and it should be able to resolve summary file names.
   resolveModuleNameHost.fileExists = (fileName: string): boolean => {
+    fileName = stripNgResourceSuffix(fileName);
     if (assumedExists.has(fileName)) {
       return true;
     }
@@ -216,4 +226,12 @@ function getNodeModulesPrefix(filePath: string): string|null {
 
 function normalizePath(p: string): string {
   return path.normalize(path.join(p, '.')).replace(/\\/g, '/');
-}
\ No newline at end of file
+}
+
+function stripNgResourceSuffix(fileName: string): string {
+  return fileName.replace(/\.\$ngresource\$.*/, '');
+}
+
+function addNgResourceSuffix(fileName: string): string {
+  return `${fileName}.$ngresource$`;
+}
diff --git a/packages/compiler-cli/src/transformers/program.ts b/packages/compiler-cli/src/transformers/program.ts
index e9c81d6b30..75ebebcd3e 100644
--- a/packages/compiler-cli/src/transformers/program.ts
+++ b/packages/compiler-cli/src/transformers/program.ts
@@ -315,6 +315,10 @@ class AotCompilerHostImpl extends BaseAotCompilerHost<CompilerHost> {
     return this.context.fileNameToModuleName(importedFile, containingFile);
   }
 
+  resourceNameToFileName(resourceName: string, containingFile: string): string|null {
+    return this.context.resourceNameToFileName(resourceName, containingFile);
+  }
+
   toSummaryFileName(fileName: string, referringSrcFileName: string): string {
     return this.context.toSummaryFileName(fileName, referringSrcFileName);
   }
diff --git a/packages/compiler-cli/test/transformers/compiler_host_spec.ts b/packages/compiler-cli/test/transformers/compiler_host_spec.ts
index 0d226420e6..9d86f460c6 100644
--- a/packages/compiler-cli/test/transformers/compiler_host_spec.ts
+++ b/packages/compiler-cli/test/transformers/compiler_host_spec.ts
@@ -100,4 +100,27 @@ describe('NgCompilerHost', () => {
           .toBe('/tmp/src/a/child.d.ts');
     });
   });
-});
\ No newline at end of file
+
+  describe('resourceNameToFileName', () => {
+    it('should resolve a relative import', () => {
+      const ngHost = createHost({files: {'tmp': {'src': {'a': {'child.html': '<div>'}}}}});
+      expect(ngHost.resourceNameToFileName('./a/child.html', '/tmp/src/index.ts'))
+          .toBe('/tmp/src/a/child.html');
+
+      expect(ngHost.resourceNameToFileName('./a/non-existing.html', '/tmp/src/index.ts'))
+          .toBe(null);
+    });
+
+    it('should resolve package paths as relative paths', () => {
+      const ngHost = createHost({files: {'tmp': {'src': {'a': {'child.html': '<div>'}}}}});
+      expect(ngHost.resourceNameToFileName('a/child.html', '/tmp/src/index.ts'))
+          .toBe('/tmp/src/a/child.html');
+    });
+
+    it('should resolve absolute paths', () => {
+      const ngHost = createHost({files: {'tmp': {'src': {'a': {'child.html': '<div>'}}}}});
+      expect(ngHost.resourceNameToFileName('/tmp/src/a/child.html', '/tmp/src/index.ts'))
+          .toBe('/tmp/src/a/child.html');
+    });
+  });
+});
diff --git a/packages/compiler/src/aot/compiler_factory.ts b/packages/compiler/src/aot/compiler_factory.ts
index cbdbc806ec..d3a350fc9d 100644
--- a/packages/compiler/src/aot/compiler_factory.ts
+++ b/packages/compiler/src/aot/compiler_factory.ts
@@ -7,6 +7,7 @@
  */
 
 import {MissingTranslationStrategy, ViewEncapsulation, ɵConsole as Console} from '@angular/core';
+
 import {CompilerConfig} from '../config';
 import {DirectiveNormalizer} from '../directive_normalizer';
 import {DirectiveResolver} from '../directive_resolver';
@@ -22,7 +23,8 @@ import {PipeResolver} from '../pipe_resolver';
 import {DomElementSchemaRegistry} from '../schema/dom_element_schema_registry';
 import {StyleCompiler} from '../style_compiler';
 import {TemplateParser} from '../template_parser/template_parser';
-import {createOfflineCompileUrlResolver} from '../url_resolver';
+import {UrlResolver} from '../url_resolver';
+import {syntaxError} from '../util';
 import {ViewCompiler} from '../view_compiler/view_compiler';
 
 import {AotCompiler} from './compiler';
@@ -33,6 +35,19 @@ import {StaticSymbol, StaticSymbolCache} from './static_symbol';
 import {StaticSymbolResolver} from './static_symbol_resolver';
 import {AotSummaryResolver} from './summary_resolver';
 
+export function createAotUrlResolver(host: {
+  resourceNameToFileName(resourceName: string, containingFileName: string): string | null;
+}): UrlResolver {
+  return {
+    resolve: (basePath: string, url: string) => {
+      const filePath = host.resourceNameToFileName(url, basePath);
+      if (!filePath) {
+        throw syntaxError(`Couldn't resolve resource ${url} from ${basePath}`);
+      }
+      return filePath;
+    }
+  };
+}
 
 /**
  * Creates a new AotCompiler based on options and a host.
@@ -41,7 +56,7 @@ export function createAotCompiler(compilerHost: AotCompilerHost, options: AotCom
     {compiler: AotCompiler, reflector: StaticReflector} {
   let translations: string = options.translations || '';
 
-  const urlResolver = createOfflineCompileUrlResolver();
+  const urlResolver = createAotUrlResolver(compilerHost);
   const symbolCache = new StaticSymbolCache();
   const summaryResolver = new AotSummaryResolver(compilerHost, symbolCache);
   const symbolResolver = new StaticSymbolResolver(compilerHost, symbolCache, summaryResolver);
diff --git a/packages/compiler/src/aot/compiler_host.ts b/packages/compiler/src/aot/compiler_host.ts
index e5c2927845..00bbf1e45b 100644
--- a/packages/compiler/src/aot/compiler_host.ts
+++ b/packages/compiler/src/aot/compiler_host.ts
@@ -14,6 +14,11 @@ import {AotSummaryResolverHost} from './summary_resolver';
  * services and from underlying file systems.
  */
 export interface AotCompilerHost extends StaticSymbolResolverHost, AotSummaryResolverHost {
+  /**
+   * Converts a path that refers to a resource into an absolute filePath
+   * that can be later on used for loading the resource via `loadResource.
+   */
+  resourceNameToFileName(resourceName: string, containingFileName: string): string|null;
   /**
    * Loads a resource (e.g. html / css)
    */
diff --git a/packages/compiler/src/i18n/extractor.ts b/packages/compiler/src/i18n/extractor.ts
index 5d6cbb5d1f..526c04f203 100644
--- a/packages/compiler/src/i18n/extractor.ts
+++ b/packages/compiler/src/i18n/extractor.ts
@@ -13,6 +13,7 @@
 import {ViewEncapsulation, ɵConsole as Console} from '@angular/core';
 
 import {analyzeAndValidateNgModules, extractProgramSymbols} from '../aot/compiler';
+import {createAotUrlResolver} from '../aot/compiler_factory';
 import {StaticReflector} from '../aot/static_reflector';
 import {StaticSymbolCache} from '../aot/static_symbol';
 import {StaticSymbolResolver, StaticSymbolResolverHost} from '../aot/static_symbol_resolver';
@@ -28,14 +29,21 @@ import {NgModuleResolver} from '../ng_module_resolver';
 import {ParseError} from '../parse_util';
 import {PipeResolver} from '../pipe_resolver';
 import {DomElementSchemaRegistry} from '../schema/dom_element_schema_registry';
-import {createOfflineCompileUrlResolver} from '../url_resolver';
+import {syntaxError} from '../util';
+
 import {MessageBundle} from './message_bundle';
 
+
 /**
  * The host of the Extractor disconnects the implementation from TypeScript / other language
  * services and from underlying file systems.
  */
 export interface ExtractorHost extends StaticSymbolResolverHost, AotSummaryResolverHost {
+  /**
+   * Converts a path that refers to a resource into an absolute filePath
+   * that can be lateron used for loading the resource via `loadResource.
+   */
+  resourceNameToFileName(path: string, containingFile: string): string|null;
   /**
    * Loads a resource (e.g. html / css)
    */
@@ -87,7 +95,7 @@ export class Extractor {
       {extractor: Extractor, staticReflector: StaticReflector} {
     const htmlParser = new HtmlParser();
 
-    const urlResolver = createOfflineCompileUrlResolver();
+    const urlResolver = createAotUrlResolver(host);
     const symbolCache = new StaticSymbolCache();
     const summaryResolver = new AotSummaryResolver(host, symbolCache);
     const staticSymbolResolver = new StaticSymbolResolver(host, symbolCache, summaryResolver);
diff --git a/packages/compiler/src/url_resolver.ts b/packages/compiler/src/url_resolver.ts
index b72fb3a2c9..ba585c1c65 100644
--- a/packages/compiler/src/url_resolver.ts
+++ b/packages/compiler/src/url_resolver.ts
@@ -11,14 +11,6 @@ import {Inject, InjectionToken, PACKAGE_ROOT_URL} from '@angular/core';
 import {CompilerInjectable} from './injectable';
 
 
-
-/**
- * Create a {@link UrlResolver} with no package prefix.
- */
-export function createUrlResolverWithoutPackagePrefix(): UrlResolver {
-  return new UrlResolver();
-}
-
 export function createOfflineCompileUrlResolver(): UrlResolver {
   return new UrlResolver('.');
 }
@@ -47,9 +39,12 @@ export const DEFAULT_PACKAGE_URL_PROVIDER = {
  * Attacker-controlled data introduced by a template could expose your
  * application to XSS risks. For more detail, see the [Security Guide](http://g.co/ng/security).
  */
-@CompilerInjectable()
-export class UrlResolver {
-  constructor(@Inject(PACKAGE_ROOT_URL) private _packagePrefix: string|null = null) {}
+export interface UrlResolver { resolve(baseUrl: string, url: string): string; }
+
+export interface UrlResolverCtor { new (packagePrefix?: string|null): UrlResolver; }
+
+export const UrlResolver: UrlResolverCtor = class UrlResolverImpl {
+  constructor(private _packagePrefix: string|null = null) {}
 
   /**
    * Resolves the `url` given the `baseUrl`:
@@ -75,7 +70,7 @@ export class UrlResolver {
     }
     return resolvedUrl;
   }
-}
+};
 
 /**
  * Extract the scheme of a URL.
diff --git a/packages/compiler/test/aot/test_util.ts b/packages/compiler/test/aot/test_util.ts
index 288aef60d1..8a28700497 100644
--- a/packages/compiler/test/aot/test_util.ts
+++ b/packages/compiler/test/aot/test_util.ts
@@ -330,8 +330,15 @@ export class MockAotCompilerHost implements AotCompilerHost {
   private metadataCollector = new MetadataCollector();
   private metadataVisible: boolean = true;
   private dtsAreSource: boolean = true;
+  private resolveModuleNameHost: ts.ModuleResolutionHost;
 
-  constructor(private tsHost: MockCompilerHost) {}
+  constructor(private tsHost: MockCompilerHost) {
+    this.resolveModuleNameHost = Object.create(tsHost);
+    this.resolveModuleNameHost.fileExists = (fileName) => {
+      fileName = stripNgResourceSuffix(fileName);
+      return tsHost.fileExists(fileName);
+    };
+  }
 
   hideMetadata() { this.metadataVisible = false; }
 
@@ -369,11 +376,22 @@ export class MockAotCompilerHost implements AotCompilerHost {
     moduleName = moduleName.replace(EXT, '');
     const resolved = ts.resolveModuleName(
                            moduleName, containingFile.replace(/\\/g, '/'),
-                           {baseDir: '/', genDir: '/'}, this.tsHost)
+                           {baseDir: '/', genDir: '/'}, this.resolveModuleNameHost)
                          .resolvedModule;
     return resolved ? resolved.resolvedFileName : null;
   }
 
+  resourceNameToFileName(resourceName: string, containingFile: string) {
+    // Note: we convert package paths into relative paths to be compatible with the the
+    // previous implementation of UrlResolver.
+    if (resourceName && resourceName.charAt(0) !== '.' && !path.isAbsolute(resourceName)) {
+      resourceName = `./${resourceName}`;
+    }
+    const filePathWithNgResource =
+        this.moduleNameToFileName(addNgResourceSuffix(resourceName), containingFile);
+    return filePathWithNgResource ? stripNgResourceSuffix(filePathWithNgResource) : null;
+  }
+
   // AotSummaryResolverHost
   loadSummary(filePath: string): string|null { return this.tsHost.readFile(filePath); }
 
@@ -647,3 +665,11 @@ export function compile(
   }
   return {genFiles, outDir};
 }
+
+function stripNgResourceSuffix(fileName: string): string {
+  return fileName.replace(/\.\$ngresource\$.*/, '');
+}
+
+function addNgResourceSuffix(fileName: string): string {
+  return `${fileName}.$ngresource$`;
+}

From 0d458284601f1bbeece1718a304c8ec7c442f0a8 Mon Sep 17 00:00:00 2001
From: Kara Erickson <karakara@google.com>
Date: Tue, 8 Aug 2017 14:37:29 -0700
Subject: [PATCH 46/83] feat(forms): add updateOn and ngFormOptions to NgForm

This commit introduces a new Input property called
`ngFormOptions` to the `NgForm` directive. You can use it
to set default `updateOn` values for all the form's child
controls. This default will be used unless the child has
already explicitly set its own `updateOn` value in
`ngModelOptions`.

Potential values: `change` | `blur` | `submit`

```html
<form [ngFormOptions]="{updateOn: blur}">
  <input name="one" ngModel>  <!-- will update on blur-->
</form>
```

For more context, see [#18577](https://github.com/angular/angular/pull/18577).
---
 packages/forms/src/directives/ng_form.ts      |  31 ++++-
 .../forms/test/template_integration_spec.ts   | 127 +++++++++++++++++-
 tools/public_api_guard/forms/forms.d.ts       |   6 +-
 3 files changed, 156 insertions(+), 8 deletions(-)

diff --git a/packages/forms/src/directives/ng_form.ts b/packages/forms/src/directives/ng_form.ts
index 6841cc389d..a338f62e24 100644
--- a/packages/forms/src/directives/ng_form.ts
+++ b/packages/forms/src/directives/ng_form.ts
@@ -6,9 +6,9 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Directive, EventEmitter, Inject, Optional, Self, forwardRef} from '@angular/core';
+import {AfterViewInit, Directive, EventEmitter, Inject, Input, Optional, Self, forwardRef} from '@angular/core';
 
-import {AbstractControl, FormControl, FormGroup} from '../model';
+import {AbstractControl, FormControl, FormGroup, FormHooks} from '../model';
 import {NG_ASYNC_VALIDATORS, NG_VALIDATORS} from '../validators';
 
 import {ControlContainer} from './control_container';
@@ -63,13 +63,30 @@ const resolvedPromise = Promise.resolve(null);
   outputs: ['ngSubmit'],
   exportAs: 'ngForm'
 })
-export class NgForm extends ControlContainer implements Form {
+export class NgForm extends ControlContainer implements Form,
+    AfterViewInit {
   private _submitted: boolean = false;
   private _directives: NgModel[] = [];
 
   form: FormGroup;
   ngSubmit = new EventEmitter();
 
+  /**
+   * Options for the `NgForm` instance. Accepts the following properties:
+   *
+   * **updateOn**: Serves as the default `updateOn` value for all child `NgModels` below it
+   * (unless a child has explicitly set its own value for this in `ngModelOptions`).
+   * Potential values: `'change'` | `'blur'` | `'submit'`
+   *
+   * ```html
+   * <form [ngFormOptions]="{updateOn: 'blur'}">
+   *    <input name="one" ngModel>  <!-- this ngModel will update on blur -->
+   * </form>
+   * ```
+   *
+   */
+  @Input('ngFormOptions') options: {updateOn?: FormHooks};
+
   constructor(
       @Optional() @Self() @Inject(NG_VALIDATORS) validators: any[],
       @Optional() @Self() @Inject(NG_ASYNC_VALIDATORS) asyncValidators: any[]) {
@@ -78,6 +95,8 @@ export class NgForm extends ControlContainer implements Form {
         new FormGroup({}, composeValidators(validators), composeAsyncValidators(asyncValidators));
   }
 
+  ngAfterViewInit() { this._setUpdateStrategy(); }
+
   get submitted(): boolean { return this._submitted; }
 
   get formDirective(): Form { return this; }
@@ -154,6 +173,12 @@ export class NgForm extends ControlContainer implements Form {
     this._submitted = false;
   }
 
+  private _setUpdateStrategy() {
+    if (this.options && this.options.updateOn != null) {
+      this.form._updateOn = this.options.updateOn;
+    }
+  }
+
   /** @internal */
   _findContainer(path: string[]): FormGroup {
     path.pop();
diff --git a/packages/forms/test/template_integration_spec.ts b/packages/forms/test/template_integration_spec.ts
index 916b146fcb..1ff07fe41d 100644
--- a/packages/forms/test/template_integration_spec.ts
+++ b/packages/forms/test/template_integration_spec.ts
@@ -6,9 +6,9 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Component, Directive, Type, forwardRef} from '@angular/core';
+import {Component, Directive, Type, ViewChild, forwardRef} from '@angular/core';
 import {ComponentFixture, TestBed, async, fakeAsync, tick} from '@angular/core/testing';
-import {AbstractControl, AsyncValidator, COMPOSITION_BUFFER_MODE, FormControl, FormsModule, NG_ASYNC_VALIDATORS, NgForm} from '@angular/forms';
+import {AbstractControl, AsyncValidator, COMPOSITION_BUFFER_MODE, FormControl, FormsModule, NG_ASYNC_VALIDATORS, NgForm, NgModel} from '@angular/forms';
 import {By} from '@angular/platform-browser/src/dom/debug/by';
 import {getDOM} from '@angular/platform-browser/src/dom/dom_adapter';
 import {dispatchEvent} from '@angular/platform-browser/testing/src/browser_util';
@@ -766,6 +766,123 @@ export function main() {
 
       });
 
+      describe('ngFormOptions', () => {
+
+        it('should use ngFormOptions value when ngModelOptions are not set', fakeAsync(() => {
+             const fixture = initTest(NgModelOptionsStandalone);
+             fixture.componentInstance.options = {name: 'two'};
+             fixture.componentInstance.formOptions = {updateOn: 'blur'};
+             fixture.detectChanges();
+             tick();
+
+             const form = fixture.debugElement.children[0].injector.get(NgForm);
+             const controlOne = form.control.get('one') !as FormControl;
+             expect(controlOne._updateOn).toBeUndefined();
+             expect(controlOne.updateOn)
+                 .toEqual('blur', 'Expected first control to inherit updateOn from parent form.');
+
+             const controlTwo = form.control.get('two') !as FormControl;
+             expect(controlTwo._updateOn).toBeUndefined();
+             expect(controlTwo.updateOn)
+                 .toEqual('blur', 'Expected last control to inherit updateOn from parent form.');
+           }));
+
+        it('should actually update using ngFormOptions value', fakeAsync(() => {
+             const fixture = initTest(NgModelOptionsStandalone);
+             fixture.componentInstance.one = '';
+             fixture.componentInstance.formOptions = {updateOn: 'blur'};
+             fixture.detectChanges();
+             tick();
+
+             const input = fixture.debugElement.query(By.css('input')).nativeElement;
+             input.value = 'Nancy Drew';
+             dispatchEvent(input, 'input');
+             fixture.detectChanges();
+             tick();
+
+             const form = fixture.debugElement.children[0].injector.get(NgForm);
+             expect(form.value).toEqual({one: ''}, 'Expected value not to update on input.');
+
+             dispatchEvent(input, 'blur');
+             fixture.detectChanges();
+
+             expect(form.value).toEqual({one: 'Nancy Drew'}, 'Expected value to update on blur.');
+           }));
+
+        it('should allow ngModelOptions updateOn to override ngFormOptions', fakeAsync(() => {
+             const fixture = initTest(NgModelOptionsStandalone);
+             fixture.componentInstance.options = {updateOn: 'blur', name: 'two'};
+             fixture.componentInstance.formOptions = {updateOn: 'change'};
+             fixture.detectChanges();
+             tick();
+
+             const form = fixture.debugElement.children[0].injector.get(NgForm);
+             const controlOne = form.control.get('one') !as FormControl;
+             expect(controlOne._updateOn).toBeUndefined();
+             expect(controlOne.updateOn)
+                 .toEqual('change', 'Expected control updateOn to inherit form updateOn.');
+
+             const controlTwo = form.control.get('two') !as FormControl;
+             expect(controlTwo._updateOn).toEqual('blur', 'Expected control to set blur override.');
+             expect(controlTwo.updateOn)
+                 .toEqual('blur', 'Expected control updateOn to override form updateOn.');
+           }));
+
+        it('should update using ngModelOptions override', fakeAsync(() => {
+             const fixture = initTest(NgModelOptionsStandalone);
+             fixture.componentInstance.one = '';
+             fixture.componentInstance.two = '';
+             fixture.componentInstance.options = {updateOn: 'blur', name: 'two'};
+             fixture.componentInstance.formOptions = {updateOn: 'change'};
+             fixture.detectChanges();
+             tick();
+
+             const [inputOne, inputTwo] = fixture.debugElement.queryAll(By.css('input'));
+             inputOne.nativeElement.value = 'Nancy Drew';
+             dispatchEvent(inputOne.nativeElement, 'input');
+             fixture.detectChanges();
+
+             const form = fixture.debugElement.children[0].injector.get(NgForm);
+             expect(form.value)
+                 .toEqual({one: 'Nancy Drew', two: ''}, 'Expected first value to update on input.');
+
+             inputTwo.nativeElement.value = 'Carson Drew';
+             dispatchEvent(inputTwo.nativeElement, 'input');
+             fixture.detectChanges();
+             tick();
+
+             expect(form.value)
+                 .toEqual(
+                     {one: 'Nancy Drew', two: ''}, 'Expected second value not to update on input.');
+
+             dispatchEvent(inputTwo.nativeElement, 'blur');
+             fixture.detectChanges();
+
+             expect(form.value)
+                 .toEqual(
+                     {one: 'Nancy Drew', two: 'Carson Drew'},
+                     'Expected second value to update on blur.');
+           }));
+
+        it('should not use ngFormOptions for standalone ngModels', fakeAsync(() => {
+             const fixture = initTest(NgModelOptionsStandalone);
+             fixture.componentInstance.two = '';
+             fixture.componentInstance.options = {standalone: true};
+             fixture.componentInstance.formOptions = {updateOn: 'blur'};
+             fixture.detectChanges();
+             tick();
+
+             const inputTwo = fixture.debugElement.queryAll(By.css('input'))[1].nativeElement;
+             inputTwo.value = 'Nancy Drew';
+             dispatchEvent(inputTwo, 'input');
+             fixture.detectChanges();
+
+             expect(fixture.componentInstance.two)
+                 .toEqual('Nancy Drew', 'Expected standalone ngModel not to inherit blur update.');
+           }));
+
+      });
+
     });
 
     describe('submit and reset events', () => {
@@ -1473,15 +1590,17 @@ class InvalidNgModelNoName {
 @Component({
   selector: 'ng-model-options-standalone',
   template: `
-    <form>
+    <form [ngFormOptions]="formOptions">
       <input name="one" [(ngModel)]="one">
-      <input [(ngModel)]="two" [ngModelOptions]="{standalone: true}">
+      <input [(ngModel)]="two" [ngModelOptions]="options">
     </form>
   `
 })
 class NgModelOptionsStandalone {
   one: string;
   two: string;
+  options: {name?: string, standalone?: boolean, updateOn?: string} = {standalone: true};
+  formOptions = {};
 }
 
 @Component({
diff --git a/tools/public_api_guard/forms/forms.d.ts b/tools/public_api_guard/forms/forms.d.ts
index 43d9f00700..7a478b028a 100644
--- a/tools/public_api_guard/forms/forms.d.ts
+++ b/tools/public_api_guard/forms/forms.d.ts
@@ -388,7 +388,7 @@ export declare class NgControlStatusGroup extends AbstractControlStatus {
 }
 
 /** @stable */
-export declare class NgForm extends ControlContainer implements Form {
+export declare class NgForm extends ControlContainer implements Form, AfterViewInit {
     readonly control: FormGroup;
     readonly controls: {
         [key: string]: AbstractControl;
@@ -396,6 +396,9 @@ export declare class NgForm extends ControlContainer implements Form {
     form: FormGroup;
     readonly formDirective: Form;
     ngSubmit: EventEmitter<{}>;
+    options: {
+        updateOn?: FormHooks;
+    };
     readonly path: string[];
     readonly submitted: boolean;
     constructor(validators: any[], asyncValidators: any[]);
@@ -403,6 +406,7 @@ export declare class NgForm extends ControlContainer implements Form {
     addFormGroup(dir: NgModelGroup): void;
     getControl(dir: NgModel): FormControl;
     getFormGroup(dir: NgModelGroup): FormGroup;
+    ngAfterViewInit(): void;
     onReset(): void;
     onSubmit($event: Event): boolean;
     removeControl(dir: NgModel): void;

From 3a500981ef2a697f40298252821e02f7b21d1c07 Mon Sep 17 00:00:00 2001
From: Jeremy Elbourn <jelbourn@google.com>
Date: Tue, 15 Aug 2017 16:34:47 -0700
Subject: [PATCH 47/83] feat(compiler): allow multiple exportAs names

This change allows users to specify multiple exportAs names for a
directive by giving a comma-delimited list inside the string.

The primary motivation for this change is to allow these names to be
changed in a backwards compatible way.
---
 .../src/template_parser/template_parser.ts    | 19 +++++++-
 .../template_parser/template_parser_spec.ts   | 43 +++++++++++++++++++
 packages/core/src/metadata/directives.ts      |  3 +-
 packages/core/test/linker/integration_spec.ts | 18 ++++++++
 4 files changed, 81 insertions(+), 2 deletions(-)

diff --git a/packages/compiler/src/template_parser/template_parser.ts b/packages/compiler/src/template_parser/template_parser.ts
index ae5dab1455..b52298b211 100644
--- a/packages/compiler/src/template_parser/template_parser.ts
+++ b/packages/compiler/src/template_parser/template_parser.ts
@@ -580,7 +580,7 @@ class TemplateParseVisitor implements html.Visitor {
           directive.inputs, props, directiveProperties, targetBoundDirectivePropNames);
       elementOrDirectiveRefs.forEach((elOrDirRef) => {
         if ((elOrDirRef.value.length === 0 && directive.isComponent) ||
-            (directive.exportAs == elOrDirRef.value)) {
+            (elOrDirRef.isReferenceToDirective(directive))) {
           targetReferences.push(new ReferenceAst(
               elOrDirRef.name, createTokenForReference(directive.type.reference),
               elOrDirRef.sourceSpan));
@@ -805,8 +805,25 @@ class NonBindableVisitor implements html.Visitor {
   visitExpansionCase(expansionCase: html.ExpansionCase, context: any): any { return expansionCase; }
 }
 
+/**
+ * A reference to an element or directive in a template. E.g., the reference in this template:
+ *
+ * <div #myMenu="coolMenu">
+ *
+ * would be {name: 'myMenu', value: 'coolMenu', sourceSpan: ...}
+ */
 class ElementOrDirectiveRef {
   constructor(public name: string, public value: string, public sourceSpan: ParseSourceSpan) {}
+
+  /** Gets whether this is a reference to the given directive. */
+  isReferenceToDirective(directive: CompileDirectiveSummary) {
+    return splitExportAs(directive.exportAs).indexOf(this.value) !== -1;
+  }
+}
+
+/** Splits a raw, potentially comma-delimted `exportAs` value into an array of names. */
+function splitExportAs(exportAs: string | null): string[] {
+  return exportAs ? exportAs.split(',').map(e => e.trim()) : [];
 }
 
 export function splitClasses(classAttrValue: string): string[] {
diff --git a/packages/compiler/test/template_parser/template_parser_spec.ts b/packages/compiler/test/template_parser/template_parser_spec.ts
index 7ffb4dfe58..7937bd7cbd 100644
--- a/packages/compiler/test/template_parser/template_parser_spec.ts
+++ b/packages/compiler/test/template_parser/template_parser_spec.ts
@@ -1209,6 +1209,24 @@ Binding to attribute 'onEvent' is disallowed for security reasons ("<my-componen
           ]);
         });
 
+        it('should assign references to directives via exportAs with multiple names', () => {
+          const pizzaTestDirective =
+              compileDirectiveMetadataCreate({
+                selector: 'pizza-test',
+                type: createTypeMeta({reference: {filePath: someModuleUrl, name: 'Pizza'}}),
+                exportAs: 'pizza, cheeseSauceBread'
+              }).toSummary();
+
+          const template = '<pizza-test #food="pizza" #yum="cheeseSauceBread"></pizza-test>';
+
+          expect(humanizeTplAst(parse(template, [pizzaTestDirective]))).toEqual([
+            [ElementAst, 'pizza-test'],
+            [ReferenceAst, 'food', createTokenForReference(pizzaTestDirective.type.reference)],
+            [ReferenceAst, 'yum', createTokenForReference(pizzaTestDirective.type.reference)],
+            [DirectiveAst, pizzaTestDirective],
+          ]);
+        });
+
         it('should report references with values that dont match a directive as errors', () => {
           expect(() => parse('<div #a="dirA"></div>', [])).toThrowError(`Template parse errors:
 There is no directive with "exportAs" set to "dirA" ("<div [ERROR ->]#a="dirA"></div>"): TestComp@0:5`);
@@ -1231,6 +1249,31 @@ Reference "#a" is defined several times ("<div #a></div><div [ERROR ->]#a></div>
 
         });
 
+        it('should report duplicate reference names when using mutliple exportAs names', () => {
+          const pizzaDirective =
+              compileDirectiveMetadataCreate({
+                selector: '[dessert-pizza]',
+                type: createTypeMeta({reference: {filePath: someModuleUrl, name: 'Pizza'}}),
+                exportAs: 'dessertPizza, chocolate'
+              }).toSummary();
+
+          const chocolateDirective =
+              compileDirectiveMetadataCreate({
+                selector: '[chocolate]',
+                type: createTypeMeta({reference: {filePath: someModuleUrl, name: 'Chocolate'}}),
+                exportAs: 'chocolate'
+              }).toSummary();
+
+          const template = '<div dessert-pizza chocolate #snack="chocolate"></div>';
+          const compileTemplate = () => parse(template, [pizzaDirective, chocolateDirective]);
+          const duplicateReferenceError = 'Template parse errors:\n' +
+              'Reference "#snack" is defined several times ' +
+              '("<div dessert-pizza chocolate [ERROR ->]#snack="chocolate"></div>")' +
+              ': TestComp@0:29';
+
+          expect(compileTemplate).toThrowError(duplicateReferenceError);
+        });
+
         it('should not throw error when there is same reference name in different templates',
            () => {
              expect(() => parse('<div #a><template #a><span>OK</span></template></div>', []))
diff --git a/packages/core/src/metadata/directives.ts b/packages/core/src/metadata/directives.ts
index 8ae0808f67..a8847605ae 100644
--- a/packages/core/src/metadata/directives.ts
+++ b/packages/core/src/metadata/directives.ts
@@ -54,7 +54,8 @@ export interface DirectiveDecorator {
    *
    * **Metadata Properties:**
    *
-   * * **exportAs** - name under which the component instance is exported in a template
+   * * **exportAs** - name under which the component instance is exported in a template. Can be
+   * given a single name or a comma-delimited list of names.
    * * **host** - map of class property to host element bindings for events, properties and
    * attributes
    * * **inputs** - list of class property names to data-bind as component inputs
diff --git a/packages/core/test/linker/integration_spec.ts b/packages/core/test/linker/integration_spec.ts
index 5491c1c131..573a4d40d2 100644
--- a/packages/core/test/linker/integration_spec.ts
+++ b/packages/core/test/linker/integration_spec.ts
@@ -469,6 +469,20 @@ function declareTests({useJit}: {useJit: boolean}) {
               .toBeAnInstanceOf(ExportDir);
         });
 
+        it('should assign a directive to a ref when it has multiple exportAs names', () => {
+          TestBed.configureTestingModule(
+              {declarations: [MyComp, DirectiveWithMultipleExportAsNames]});
+
+          const template = '<div multiple-export-as #x="dirX" #y="dirY"></div>';
+          TestBed.overrideComponent(MyComp, {set: {template}});
+
+          const fixture = TestBed.createComponent(MyComp);
+          expect(fixture.debugElement.children[0].references !['x'])
+              .toBeAnInstanceOf(DirectiveWithMultipleExportAsNames);
+          expect(fixture.debugElement.children[0].references !['y'])
+              .toBeAnInstanceOf(DirectiveWithMultipleExportAsNames);
+        });
+
         it('should make the assigned component accessible in property bindings, even if they were declared before the component',
            () => {
              TestBed.configureTestingModule({declarations: [MyComp, ChildComp]});
@@ -2442,6 +2456,10 @@ class SomeImperativeViewport {
 class ExportDir {
 }
 
+@Directive({selector: '[multiple-export-as]', exportAs: 'dirX, dirY'})
+export class DirectiveWithMultipleExportAsNames {
+}
+
 @Component({selector: 'comp'})
 class ComponentWithoutView {
 }

From 83713ddea446385dfd1db562d06617e6caac995a Mon Sep 17 00:00:00 2001
From: Olivier Combe <olivier.combe@gmail.com>
Date: Wed, 16 Aug 2017 21:01:59 +0200
Subject: [PATCH 48/83] feat(common): add an empty DeprecatedI18NPipesModule
 module (#18737)

Adding an empty module to ease the migration to the i18n pipes.

PR Close #18737
---
 packages/common/src/common.ts             |  2 +-
 packages/common/src/common_module.ts      | 16 ++++++++++++++++
 tools/public_api_guard/common/common.d.ts |  4 ++++
 3 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/packages/common/src/common.ts b/packages/common/src/common.ts
index c4e7d3cb76..5e79a49ad1 100644
--- a/packages/common/src/common.ts
+++ b/packages/common/src/common.ts
@@ -14,7 +14,7 @@
 export * from './location/index';
 export {NgLocaleLocalization, NgLocalization} from './localization';
 export {parseCookieValue as ɵparseCookieValue} from './cookie';
-export {CommonModule} from './common_module';
+export {CommonModule, DeprecatedI18NPipesModule} from './common_module';
 export {NgClass, NgFor, NgForOf, NgForOfContext, NgIf, NgIfContext, NgPlural, NgPluralCase, NgStyle, NgSwitch, NgSwitchCase, NgSwitchDefault, NgTemplateOutlet, NgComponentOutlet} from './directives/index';
 export {DOCUMENT} from './dom_tokens';
 export {AsyncPipe, DatePipe, I18nPluralPipe, I18nSelectPipe, JsonPipe, LowerCasePipe, CurrencyPipe, DecimalPipe, PercentPipe, SlicePipe, UpperCasePipe, TitleCasePipe} from './pipes/index';
diff --git a/packages/common/src/common_module.ts b/packages/common/src/common_module.ts
index 7c80454f93..4a75bb4f39 100644
--- a/packages/common/src/common_module.ts
+++ b/packages/common/src/common_module.ts
@@ -29,3 +29,19 @@ import {COMMON_PIPES} from './pipes/index';
 })
 export class CommonModule {
 }
+
+/**
+ * I18N pipes are being changed to move away from using the JS Intl API.
+ *
+ * The former pipes relying on the Intl API will be moved to this module while the `CommonModule`
+ * will contain the new pipes that do not rely on Intl.
+ *
+ * As a first step this module is created empty to ease the migration.
+ *
+ * see https://github.com/angular/angular/pull/18284
+ *
+ * @deprecated from v5
+ */
+@NgModule({declarations: [], exports: []})
+export class DeprecatedI18NPipesModule {
+}
diff --git a/tools/public_api_guard/common/common.d.ts b/tools/public_api_guard/common/common.d.ts
index 6ea2ce823c..cdefdf3d96 100644
--- a/tools/public_api_guard/common/common.d.ts
+++ b/tools/public_api_guard/common/common.d.ts
@@ -33,6 +33,10 @@ export declare class DecimalPipe implements PipeTransform {
     transform(value: any, digits?: string): string | null;
 }
 
+/** @deprecated */
+export declare class DeprecatedI18NPipesModule {
+}
+
 /** @stable */
 export declare const DOCUMENT: InjectionToken<Document>;
 

From 21c44672c4b4b439f38cc0312b25f633b1ac485d Mon Sep 17 00:00:00 2001
From: Olivier Combe <olivier.combe@gmail.com>
Date: Wed, 16 Aug 2017 16:10:17 +0200
Subject: [PATCH 49/83] build(packaging): increase node memory for tests
 (#18731)

PR Close #18731
---
 test.sh | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/test.sh b/test.sh
index b04cb50b76..998406ee25 100755
--- a/test.sh
+++ b/test.sh
@@ -22,8 +22,8 @@ else
   if [[ $1 == 'node' ]]; then
     # Note: .metadata.json files are needed for the language service tests!
     echo "Creating .metadata.json files..."
-    node dist/all/@angular/tsc-wrapped/src/main -p packages
-    node dist/all/@angular/tsc-wrapped/src/main -p modules
+    node --max-old-space-size=3000 dist/all/@angular/tsc-wrapped/src/main -p packages
+    node --max-old-space-size=3000 dist/all/@angular/tsc-wrapped/src/main -p modules
   fi
   node dist/tools/tsc-watch/ $1 watch
 fi

From 845c68fdb35fe4c43dcb6bb3f91561696fc52dd9 Mon Sep 17 00:00:00 2001
From: Vikram Subramanian <vikram.subramanian@gmail.com>
Date: Thu, 10 Aug 2017 18:08:49 -0700
Subject: [PATCH 50/83] fix(animations): resolve error when using
 AnimationBuilder with platform-server (#18642)

Use an injected DOCUMENT instead of assuming the global 'document'
exists.

Fixes #18635.

PR Close #18642
---
 .../platform-browser/animations/src/animation_builder.ts   | 7 ++++---
 packages/platform-server/test/integration_spec.ts          | 4 +++-
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/packages/platform-browser/animations/src/animation_builder.ts b/packages/platform-browser/animations/src/animation_builder.ts
index d94f6c5e2d..030fb70d01 100644
--- a/packages/platform-browser/animations/src/animation_builder.ts
+++ b/packages/platform-browser/animations/src/animation_builder.ts
@@ -6,7 +6,8 @@
  * found in the LICENSE file at https://angular.io/license
  */
 import {AnimationBuilder, AnimationFactory, AnimationMetadata, AnimationOptions, AnimationPlayer, NoopAnimationPlayer, sequence} from '@angular/animations';
-import {Injectable, RendererFactory2, RendererType2, ViewEncapsulation} from '@angular/core';
+import {Inject, Injectable, RendererFactory2, RendererType2, ViewEncapsulation} from '@angular/core';
+import {DOCUMENT} from '@angular/platform-browser';
 
 import {AnimationRenderer} from './animation_renderer';
 
@@ -15,7 +16,7 @@ export class BrowserAnimationBuilder extends AnimationBuilder {
   private _nextAnimationId = 0;
   private _renderer: AnimationRenderer;
 
-  constructor(rootRenderer: RendererFactory2) {
+  constructor(rootRenderer: RendererFactory2, @Inject(DOCUMENT) doc: any) {
     super();
     const typeData = {
       id: '0',
@@ -23,7 +24,7 @@ export class BrowserAnimationBuilder extends AnimationBuilder {
       styles: [],
       data: {animation: []}
     } as RendererType2;
-    this._renderer = rootRenderer.createRenderer(document.body, typeData) as AnimationRenderer;
+    this._renderer = rootRenderer.createRenderer(doc.body, typeData) as AnimationRenderer;
   }
 
   build(animation: AnimationMetadata|AnimationMetadata[]): AnimationFactory {
diff --git a/packages/platform-server/test/integration_spec.ts b/packages/platform-server/test/integration_spec.ts
index 5844a11c36..3620dc532b 100644
--- a/packages/platform-server/test/integration_spec.ts
+++ b/packages/platform-server/test/integration_spec.ts
@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {animate, style, transition, trigger} from '@angular/animations';
+import {AnimationBuilder, animate, style, transition, trigger} from '@angular/animations';
 import {APP_BASE_HREF, PlatformLocation, isPlatformServer} from '@angular/common';
 import {HttpClient, HttpClientModule} from '@angular/common/http';
 import {HttpClientTestingModule, HttpTestingController} from '@angular/common/http/testing';
@@ -100,6 +100,8 @@ class SVGServerModule {
       [transition('void => *', [style({'opacity': '0'}), animate(500, style({'opacity': '1'}))])])],
 })
 class MyAnimationApp {
+  constructor(private builder: AnimationBuilder) {}
+
   text = 'Works!';
 }
 

From 2da45e629dbf8c2e3b83c369381e261741b619b1 Mon Sep 17 00:00:00 2001
From: Tobias Bosch <tbosch1009@gmail.com>
Date: Thu, 10 Aug 2017 14:46:42 -0700
Subject: [PATCH 51/83] fix(tsc-wrapped): make `test.sh tools` run the
 tsc-wrapped tests again (#18683)

---
 tools/cjs-jasmine/index-tools.ts | 11 +++++------
 tools/tsc-watch/index.ts         |  4 ++--
 tools/tsc-watch/tsc_watch.ts     | 19 +++++++++++++------
 3 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/tools/cjs-jasmine/index-tools.ts b/tools/cjs-jasmine/index-tools.ts
index b584b66c37..77c68d70b6 100644
--- a/tools/cjs-jasmine/index-tools.ts
+++ b/tools/cjs-jasmine/index-tools.ts
@@ -23,9 +23,9 @@ require('zone.js/dist/fake-async-test.js');
 var jrunner = new JasmineRunner();
 (global as any)['jasmine'] = jrunner.jasmine;
 require('zone.js/dist/jasmine-patch.js');
-var toolsDir = process.cwd() + '/dist/tools';
-function toolsDirRequire(moduleId: string) {
-  return require(path.join(toolsDir, moduleId));
+var rootDir = process.cwd();
+function rootDirRequire(moduleId: string) {
+  return require(path.join(rootDir, moduleId));
 }
 
 // Tun on full stack traces in errors to help debugging
@@ -40,9 +40,8 @@ if (globsIndex < 0) {
   args = process.argv.slice(globsIndex + 1);
 }
 
-var specFiles = args.map(function(globstr: string) { return glob.sync(globstr, {cwd: toolsDir}); })
+var specFiles = args.map(function(globstr: string) { return glob.sync(globstr, {cwd: rootDir}); })
                     .reduce((specFiles: string[], paths: string[]) => specFiles.concat(paths), []);
-
 jasmine.DEFAULT_TIMEOUT_INTERVAL = 100;
 
 jrunner.configureDefaultReporter({showColors: process.argv.indexOf('--no-color') === -1});
@@ -50,5 +49,5 @@ jrunner.configureDefaultReporter({showColors: process.argv.indexOf('--no-color')
 jrunner.onComplete(function(passed: boolean) { process.exit(passed ? 0 : 1); });
 jrunner.projectBaseDir = path.resolve(__dirname, '../../');
 jrunner.specDir = '';
-specFiles.forEach((file: string) => { toolsDirRequire(file); });
+specFiles.forEach((file: string) => { rootDirRequire(file); });
 jrunner.execute();
diff --git a/tools/tsc-watch/index.ts b/tools/tsc-watch/index.ts
index 1e6e6d5a57..d3e1e44f39 100644
--- a/tools/tsc-watch/index.ts
+++ b/tools/tsc-watch/index.ts
@@ -96,10 +96,10 @@ if (platform == 'node') {
 } else if (platform == 'tools') {
   tscWatch = new TscWatch(Object.assign(
       {
-        tsconfig: 'tools/tsconfig.json',
+        tsconfig: ['tools/tsconfig.json', 'packages/tsc-wrapped/tsconfig.json'],
         onChangeCmds: [[
           'node', 'dist/tools/cjs-jasmine/index-tools', '--',
-          '@angular/tsc-wrapped/**/*{_,.}spec.js'
+          'dist/all/@angular/tsc-wrapped/**/*{_,.}spec.js'
         ]]
       },
       BaseConfig));
diff --git a/tools/tsc-watch/tsc_watch.ts b/tools/tsc-watch/tsc_watch.ts
index 541549ed5b..5143b6bd93 100644
--- a/tools/tsc-watch/tsc_watch.ts
+++ b/tools/tsc-watch/tsc_watch.ts
@@ -22,7 +22,7 @@ export const TSC = normalize('node_modules/.bin/tsc') + (/^win/.test(platform())
 export type Command = (stdIn: any, stdErr: any) => Promise<number>;
 
 export class TscWatch {
-  private tsconfig: string;
+  private tsconfig: string[];
   private start: string|RegExp;
   private error: string|RegExp;
   private complete: string|RegExp;
@@ -33,13 +33,13 @@ export class TscWatch {
   private runOnce: boolean = false;
 
   constructor({tsconfig, start, error, complete, onStartCmds = null, onChangeCmds = null}: {
-    tsconfig: string,
+    tsconfig: string | string[],
     error: string|RegExp,
     start: string,
     complete: string, onStartCmds?: Array<string[]|Command>, onChangeCmds?: Array<string[]|Command>
   }) {
     console.log('Watching:', tsconfig, 'in', process.cwd());
-    this.tsconfig = tsconfig;
+    this.tsconfig = Array.isArray(tsconfig) ? tsconfig : [tsconfig];
     this.start = start;
     this.error = error;
     this.complete = complete;
@@ -48,10 +48,17 @@ export class TscWatch {
   }
 
   watch() {
-    const args = [TSC, '--emitDecoratorMetadata', '--project', this.tsconfig];
-    if (!this.runOnce) args.push('--watch');
     const tsc =
-        this.runCmd(args, {}, (d) => this.consumeLine(d, false), (d) => this.consumeLine(d, true));
+        Promise
+            .all(this.tsconfig.map(tsconfig => {
+              const args = [TSC, '--emitDecoratorMetadata', '--project', tsconfig];
+              if (!this.runOnce) args.push('--watch');
+              return this.runCmd(
+                  args, {}, (d) => this.consumeLine(d, false), (d) => this.consumeLine(d, true));
+            }))
+            .then(
+                exitCodes =>
+                    exitCodes.reduce((prevValue, currValue) => Math.max(prevValue, currValue), 0));
     if (this.runOnce) {
       tsc.then(() => this.triggerCmds(), code => process.exit(code));
     }

From a0ca01d580d46e791f26e066e91dd830a6896cac Mon Sep 17 00:00:00 2001
From: Tobias Bosch <tbosch1009@gmail.com>
Date: Wed, 16 Aug 2017 13:06:35 -0700
Subject: [PATCH 52/83] refactor(compiler): drop typings tests for TypeScript
 2.1 (#18683)

---
 integration/typings_test_ts21/include-all.ts | 41 --------------------
 integration/typings_test_ts21/package.json   | 28 -------------
 integration/typings_test_ts21/tsconfig.json  | 18 ---------
 3 files changed, 87 deletions(-)
 delete mode 100644 integration/typings_test_ts21/include-all.ts
 delete mode 100644 integration/typings_test_ts21/package.json
 delete mode 100644 integration/typings_test_ts21/tsconfig.json

diff --git a/integration/typings_test_ts21/include-all.ts b/integration/typings_test_ts21/include-all.ts
deleted file mode 100644
index eaa53d24c2..0000000000
--- a/integration/typings_test_ts21/include-all.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-/**
- * @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 platformBrowserDynamic from '@angular/platform-browser-dynamic';
-import * as platformBrowser from '@angular/platform-browser';
-import * as platformBrowserTesting from '@angular/platform-browser/testing';
-import * as platformServer from '@angular/platform-server';
-import * as platformServerTesting from '@angular/platform-server/testing';
-import * as router from '@angular/router';
-import * as routerTesting from '@angular/router/testing';
-import * as upgrade from '@angular/upgrade';
-
-export default {
-  compiler,
-  compilerTesting,
-  core,
-  coreTesting,
-  forms,
-  http,
-  httpTesting,
-  platformBrowser,
-  platformBrowserTesting,
-  platformBrowserDynamic,
-  platformServer,
-  platformServerTesting,
-  router,
-  routerTesting,
-  upgrade
-};
diff --git a/integration/typings_test_ts21/package.json b/integration/typings_test_ts21/package.json
deleted file mode 100644
index b9bd98bb60..0000000000
--- a/integration/typings_test_ts21/package.json
+++ /dev/null
@@ -1,28 +0,0 @@
-{
-  "name": "angular-integration",
-  "description": "Assert that users with TypeScript 2.1 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/router": "file:../../dist/packages-dist/router",
-    "@angular/tsc-wrapped": "file:../../dist/packages-dist/tsc-wrapped",
-    "@angular/upgrade": "file:../../dist/packages-dist/upgrade",
-    "@types/jasmine": "2.5.41",
-    "rxjs": "file:../../node_modules/rxjs",
-    "typescript": "2.1.6",
-    "zone.js": "0.7.6"
-  },
-  "scripts": {
-    "test": "tsc"
-  }
-}
\ No newline at end of file
diff --git a/integration/typings_test_ts21/tsconfig.json b/integration/typings_test_ts21/tsconfig.json
deleted file mode 100644
index 468b20cdac..0000000000
--- a/integration/typings_test_ts21/tsconfig.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "compilerOptions": {
-    "emitDecoratorMetadata": true,
-    "experimentalDecorators": true,
-    "module": "commonjs",
-    "moduleResolution": "node",
-    "outDir": "../../dist/typing-test/",
-    "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"
-  ]
-}

From 0cc77b4a6954e563b6eb7999c9d3f08e2ba7dfeb Mon Sep 17 00:00:00 2001
From: Tobias Bosch <tbosch1009@gmail.com>
Date: Wed, 16 Aug 2017 09:00:03 -0700
Subject: [PATCH 53/83] refactor(compiler): split compiler and core (#18683)

After this, neither @angular/compiler nor @angular/comnpiler-cli depend
on @angular/core.

This add a duplication of some interfaces and enums which is stored
in @angular/compiler/src/core.ts

BREAKING CHANGE:
- `@angular/platform-server` now additionally depends on
  `@angular/platform-browser-dynamic` as a peer dependency.


PR Close #18683
---
 packages/common/test/pipes/date_pipe_spec.ts  |   2 +-
 .../test/pipes/i18n_plural_pipe_spec.ts       |   2 +-
 .../test/pipes/i18n_select_pipe_spec.ts       |   2 +-
 packages/compiler-cli/BUILD.bazel             |   1 -
 packages/compiler-cli/package.json            |   3 +-
 packages/compiler-cli/src/codegen.ts          |  11 +-
 .../src/diagnostics/typescript_symbols.ts     |   1 -
 packages/compiler-cli/src/ngtools_impl.ts     |  10 +-
 .../compiler-cli/src/transformers/program.ts  |  11 +-
 packages/compiler-cli/src/version.ts          |   2 +-
 packages/compiler-cli/tsconfig-build.json     |   5 -
 packages/compiler/BUILD.bazel                 |   2 +-
 packages/compiler/package.json                |   3 -
 packages/compiler/src/aot/compiler_factory.ts |   4 +-
 packages/compiler/src/aot/compiler_options.ts |   2 +-
 packages/compiler/src/aot/static_reflector.ts |  89 ++-
 packages/compiler/src/assertions.ts           |   7 +-
 packages/compiler/src/compile_metadata.ts     |  30 +-
 packages/compiler/src/compile_reflector.ts    |   2 +-
 packages/compiler/src/compiler.ts             |  13 +-
 packages/compiler/src/config.ts               |  12 +-
 packages/compiler/src/core.ts                 | 262 +++++++
 packages/compiler/src/directive_normalizer.ts |   7 +-
 packages/compiler/src/directive_resolver.ts   |  77 +-
 .../compiler/src/expression_parser/lexer.ts   |   2 -
 .../compiler/src/expression_parser/parser.ts  |   2 -
 packages/compiler/src/i18n/extractor.ts       |   6 +-
 .../compiler/src/i18n/i18n_html_parser.ts     |   4 +-
 .../compiler/src/i18n/translation_bundle.ts   |   5 +-
 packages/compiler/src/identifiers.ts          | 107 ++-
 packages/compiler/src/injectable.ts           |  17 -
 packages/compiler/src/jit/compiler.ts         | 155 ++--
 packages/compiler/src/jit/jit_reflector.ts    |  46 --
 packages/compiler/src/metadata_resolver.ts    | 126 ++--
 .../compiler/src/ml_parser/html_parser.ts     |   3 -
 packages/compiler/src/ng_module_compiler.ts   |   5 +-
 packages/compiler/src/ng_module_resolver.ts   |  16 +-
 packages/compiler/src/output/output_ast.ts    |   3 +-
 .../compiler/src/output/output_interpreter.ts |  12 +-
 packages/compiler/src/output/output_jit.ts    |  21 +-
 packages/compiler/src/pipe_resolver.ts        |  18 +-
 .../src/schema/dom_element_schema_registry.ts |   4 +-
 .../src/schema/dom_security_schema.ts         |   2 +-
 .../src/schema/element_schema_registry.ts     |   2 +-
 packages/compiler/src/style_compiler.ts       |   5 +-
 packages/compiler/src/summary_resolver.ts     |  16 +-
 .../src/template_parser/binding_parser.ts     |   3 +-
 .../src/template_parser/template_ast.ts       |   3 +-
 .../src/template_parser/template_parser.ts    |  18 +-
 packages/compiler/src/url_resolver.ts         |  18 +-
 packages/compiler/src/util.ts                 |  70 +-
 packages/compiler/src/version.ts              |   2 +-
 .../src/view_compiler/provider_compiler.ts    |   3 +-
 .../src/view_compiler/view_compiler.ts        |   9 +-
 packages/compiler/test/aot/compiler_spec.ts   |  21 +-
 .../compiler/test/aot/jit_summaries_spec.ts   |   9 +-
 .../test/aot/static_reflector_spec.ts         | 672 ++++++------------
 packages/compiler/test/aot/test_util.ts       |  21 +-
 .../compiler/test/directive_lifecycle_spec.ts |   2 +-
 .../test/directive_normalizer_spec.ts         |   2 +-
 .../test/directive_resolver_mock_spec.ts      |  48 +-
 .../compiler/test/directive_resolver_spec.ts  |   9 +-
 .../test/i18n/extractor_merger_spec.ts        |   2 +-
 .../compiler/test/metadata_resolver_spec.ts   |   2 +-
 .../test/ng_module_resolver_mock_spec.ts      |   4 +-
 .../compiler/test/ng_module_resolver_spec.ts  |   2 +-
 .../compiler/test/output/output_jit_spec.ts   |   3 +-
 .../compiler/test/pipe_resolver_mock_spec.ts  |   4 +-
 packages/compiler/test/pipe_resolver_spec.ts  |   2 +-
 .../compiler/test/runtime_compiler_spec.ts    |   7 +-
 .../template_parser/template_parser_spec.ts   |  86 +--
 .../{testing/src => test}/test_bindings.ts    |   4 +-
 .../testing/src/directive_resolver_mock.ts    | 136 +---
 .../testing/src/ng_module_resolver_mock.ts    |  17 +-
 .../testing/src/pipe_resolver_mock.ts         |  19 +-
 .../testing/src/schema_registry_mock.ts       |  11 +-
 packages/compiler/testing/src/testing.ts      | 116 +--
 packages/compiler/testing/tsconfig-build.json |   2 -
 packages/compiler/tsconfig-build.json         |   9 +-
 .../core/src/change_detection/constants.ts    |   4 +-
 packages/core/src/core_private_export.ts      |   2 -
 packages/core/src/di/injection_token.ts       |   3 +
 packages/core/src/errors.ts                   |   1 -
 packages/core/src/i18n/tokens.ts              |   6 +-
 packages/core/src/metadata/view.ts            |  66 +-
 packages/core/src/security.ts                 |  12 +-
 packages/core/src/util/decorators.ts          |   6 +-
 packages/core/src/view/types.ts               |  14 +-
 .../change_detection_integration_spec.ts      |  18 +-
 packages/core/testing/src/test_bed.ts         |  11 +-
 packages/core/testing/src/test_compiler.ts    |   6 +
 .../src}/compiler_factory.ts                  | 118 +--
 .../src/compiler_reflector.ts                 | 149 ++++
 .../src/platform-browser-dynamic.ts           |   6 +-
 .../src/platform_core_dynamic.ts              |  20 +
 .../src/private_export.ts                     |   2 +
 .../test/metadata_overrider_spec.ts           |   0
 .../testing/src/compiler_factory.ts           | 106 +++
 .../testing/src/metadata_overrider.ts         |   0
 .../src/platform_core_dynamic_testing.ts      |  27 +
 .../testing/src/private_export_testing.ts     |   1 +
 .../testing/src/testing.ts                    |   2 +-
 .../integrationtest/package.json              |   1 +
 packages/platform-server/package.json         |   3 +-
 packages/platform-server/src/server.ts        |   2 +-
 .../platform-server/testing/src/server.ts     |   3 +-
 .../src/platform-webworker-dynamic.ts         |   6 +-
 107 files changed, 1504 insertions(+), 1564 deletions(-)
 create mode 100644 packages/compiler/src/core.ts
 delete mode 100644 packages/compiler/src/injectable.ts
 delete mode 100644 packages/compiler/src/jit/jit_reflector.ts
 rename packages/compiler/{testing/src => test}/test_bindings.ts (83%)
 rename packages/{compiler/src/jit => platform-browser-dynamic/src}/compiler_factory.ts (56%)
 create mode 100644 packages/platform-browser-dynamic/src/compiler_reflector.ts
 create mode 100644 packages/platform-browser-dynamic/src/platform_core_dynamic.ts
 rename packages/{compiler => platform-browser-dynamic}/test/metadata_overrider_spec.ts (100%)
 create mode 100644 packages/platform-browser-dynamic/testing/src/compiler_factory.ts
 rename packages/{compiler => platform-browser-dynamic}/testing/src/metadata_overrider.ts (100%)
 create mode 100644 packages/platform-browser-dynamic/testing/src/platform_core_dynamic_testing.ts

diff --git a/packages/common/test/pipes/date_pipe_spec.ts b/packages/common/test/pipes/date_pipe_spec.ts
index a4fb977011..85a997bcc1 100644
--- a/packages/common/test/pipes/date_pipe_spec.ts
+++ b/packages/common/test/pipes/date_pipe_spec.ts
@@ -7,8 +7,8 @@
  */
 
 import {DatePipe} from '@angular/common';
-import {JitReflector} from '@angular/compiler';
 import {PipeResolver} from '@angular/compiler/src/pipe_resolver';
+import {JitReflector} from '@angular/platform-browser-dynamic/src/compiler_reflector';
 import {browserDetection} from '@angular/platform-browser/testing/src/browser_util';
 
 export function main() {
diff --git a/packages/common/test/pipes/i18n_plural_pipe_spec.ts b/packages/common/test/pipes/i18n_plural_pipe_spec.ts
index 436657b026..0dc60f8ad5 100644
--- a/packages/common/test/pipes/i18n_plural_pipe_spec.ts
+++ b/packages/common/test/pipes/i18n_plural_pipe_spec.ts
@@ -7,9 +7,9 @@
  */
 
 import {I18nPluralPipe, NgLocalization} from '@angular/common';
-import {JitReflector} from '@angular/compiler';
 import {PipeResolver} from '@angular/compiler/src/pipe_resolver';
 import {beforeEach, describe, expect, it} from '@angular/core/testing/src/testing_internal';
+import {JitReflector} from '@angular/platform-browser-dynamic/src/compiler_reflector';
 
 export function main() {
   describe('I18nPluralPipe', () => {
diff --git a/packages/common/test/pipes/i18n_select_pipe_spec.ts b/packages/common/test/pipes/i18n_select_pipe_spec.ts
index d88e4b5c64..d0b716f032 100644
--- a/packages/common/test/pipes/i18n_select_pipe_spec.ts
+++ b/packages/common/test/pipes/i18n_select_pipe_spec.ts
@@ -7,8 +7,8 @@
  */
 
 import {I18nSelectPipe} from '@angular/common';
-import {JitReflector} from '@angular/compiler';
 import {PipeResolver} from '@angular/compiler/src/pipe_resolver';
+import {JitReflector} from '@angular/platform-browser-dynamic/src/compiler_reflector';
 
 export function main() {
   describe('I18nSelectPipe', () => {
diff --git a/packages/compiler-cli/BUILD.bazel b/packages/compiler-cli/BUILD.bazel
index 02d37f163f..3e7e682949 100644
--- a/packages/compiler-cli/BUILD.bazel
+++ b/packages/compiler-cli/BUILD.bazel
@@ -10,7 +10,6 @@ ts_library(
     module_name = "@angular/compiler-cli",
     deps = [
         "//packages/compiler",
-        "//packages/core",
         "//packages/tsc-wrapped",
     ],
     tsconfig = ":tsconfig-build.json",
diff --git a/packages/compiler-cli/package.json b/packages/compiler-cli/package.json
index b3de16ddc3..fddcdf19f9 100644
--- a/packages/compiler-cli/package.json
+++ b/packages/compiler-cli/package.json
@@ -16,8 +16,7 @@
   },
   "peerDependencies": {
     "typescript": "^2.0.2",
-    "@angular/compiler": "0.0.0-PLACEHOLDER",
-    "@angular/core": "0.0.0-PLACEHOLDER"
+    "@angular/compiler": "0.0.0-PLACEHOLDER"
   },
   "repository": {
     "type": "git",
diff --git a/packages/compiler-cli/src/codegen.ts b/packages/compiler-cli/src/codegen.ts
index f861db7382..a2ac62f7d0 100644
--- a/packages/compiler-cli/src/codegen.ts
+++ b/packages/compiler-cli/src/codegen.ts
@@ -11,7 +11,6 @@
  * Intended to be used in a build step.
  */
 import * as compiler from '@angular/compiler';
-import {MissingTranslationStrategy} from '@angular/core';
 import {AngularCompilerOptions, NgcCliOptions} from '@angular/tsc-wrapped';
 import {readFileSync} from 'fs';
 import * as ts from 'typescript';
@@ -78,17 +77,17 @@ export class CodeGenerator {
       }
       transContent = readFileSync(cliOptions.i18nFile, 'utf8');
     }
-    let missingTranslation = MissingTranslationStrategy.Warning;
+    let missingTranslation = compiler.core.MissingTranslationStrategy.Warning;
     if (cliOptions.missingTranslation) {
       switch (cliOptions.missingTranslation) {
         case 'error':
-          missingTranslation = MissingTranslationStrategy.Error;
+          missingTranslation = compiler.core.MissingTranslationStrategy.Error;
           break;
         case 'warning':
-          missingTranslation = MissingTranslationStrategy.Warning;
+          missingTranslation = compiler.core.MissingTranslationStrategy.Warning;
           break;
         case 'ignore':
-          missingTranslation = MissingTranslationStrategy.Ignore;
+          missingTranslation = compiler.core.MissingTranslationStrategy.Ignore;
           break;
         default:
           throw new Error(
@@ -96,7 +95,7 @@ export class CodeGenerator {
       }
     }
     if (!transContent) {
-      missingTranslation = MissingTranslationStrategy.Ignore;
+      missingTranslation = compiler.core.MissingTranslationStrategy.Ignore;
     }
     const {compiler: aotCompiler} = compiler.createAotCompiler(ngCompilerHost, {
       translations: transContent,
diff --git a/packages/compiler-cli/src/diagnostics/typescript_symbols.ts b/packages/compiler-cli/src/diagnostics/typescript_symbols.ts
index 01371b42cc..216c04e3b9 100644
--- a/packages/compiler-cli/src/diagnostics/typescript_symbols.ts
+++ b/packages/compiler-cli/src/diagnostics/typescript_symbols.ts
@@ -7,7 +7,6 @@
  */
 
 import {AotSummaryResolver, CompileMetadataResolver, CompilePipeSummary, CompilerConfig, DEFAULT_INTERPOLATION_CONFIG, DirectiveNormalizer, DirectiveResolver, DomElementSchemaRegistry, HtmlParser, InterpolationConfig, NgAnalyzedModules, NgModuleResolver, ParseTreeResult, PipeResolver, ResourceLoader, StaticReflector, StaticSymbol, StaticSymbolCache, StaticSymbolResolver, SummaryResolver, analyzeNgModules, extractProgramSymbols} from '@angular/compiler';
-import {ViewEncapsulation, ɵConsole as Console} from '@angular/core';
 import * as fs from 'fs';
 import * as path from 'path';
 import * as ts from 'typescript';
diff --git a/packages/compiler-cli/src/ngtools_impl.ts b/packages/compiler-cli/src/ngtools_impl.ts
index c14f35f09a..2e90fd6bc6 100644
--- a/packages/compiler-cli/src/ngtools_impl.ts
+++ b/packages/compiler-cli/src/ngtools_impl.ts
@@ -12,8 +12,8 @@
  * This API should be stable for NG 2. It can be removed in NG 4..., but should be replaced by
  * something else.
  */
-import {AotCompilerHost, StaticReflector, StaticSymbol} from '@angular/compiler';
-import {NgModule} from '@angular/core';
+import {AotCompilerHost, StaticReflector, StaticSymbol, core} from '@angular/compiler';
+
 
 // We cannot depend directly to @angular/router.
 type Route = any;
@@ -168,8 +168,10 @@ function _extractLazyRoutesFromStaticModule(
 /**
  * Get the NgModule Metadata of a symbol.
  */
-function _getNgModuleMetadata(staticSymbol: StaticSymbol, reflector: StaticReflector): NgModule {
-  const ngModules = reflector.annotations(staticSymbol).filter((s: any) => s instanceof NgModule);
+function _getNgModuleMetadata(
+    staticSymbol: StaticSymbol, reflector: StaticReflector): core.NgModule {
+  const ngModules =
+      reflector.annotations(staticSymbol).filter((s: any) => core.createNgModule.isTypeOf(s));
   if (ngModules.length === 0) {
     throw new Error(`${staticSymbol.name} is not an NgModule`);
   }
diff --git a/packages/compiler-cli/src/transformers/program.ts b/packages/compiler-cli/src/transformers/program.ts
index 75ebebcd3e..3bab5f51c3 100644
--- a/packages/compiler-cli/src/transformers/program.ts
+++ b/packages/compiler-cli/src/transformers/program.ts
@@ -6,8 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {AotCompiler, AotCompilerHost, AotCompilerOptions, GeneratedFile, NgAnalyzedModules, createAotCompiler, getParseErrors, isSyntaxError, toTypeScript} from '@angular/compiler';
-import {MissingTranslationStrategy} from '@angular/core';
+import {AotCompiler, AotCompilerHost, AotCompilerOptions, GeneratedFile, NgAnalyzedModules, core, createAotCompiler, getParseErrors, isSyntaxError, toTypeScript} from '@angular/compiler';
 import {createBundleIndexHost} from '@angular/tsc-wrapped';
 import * as fs from 'fs';
 import * as path from 'path';
@@ -337,14 +336,14 @@ export function createProgram(
 
 // Compute the AotCompiler options
 function getAotCompilerOptions(options: CompilerOptions): AotCompilerOptions {
-  let missingTranslation = MissingTranslationStrategy.Warning;
+  let missingTranslation = core.MissingTranslationStrategy.Warning;
 
   switch (options.i18nInMissingTranslations) {
     case 'ignore':
-      missingTranslation = MissingTranslationStrategy.Ignore;
+      missingTranslation = core.MissingTranslationStrategy.Ignore;
       break;
     case 'error':
-      missingTranslation = MissingTranslationStrategy.Error;
+      missingTranslation = core.MissingTranslationStrategy.Error;
       break;
   }
 
@@ -358,7 +357,7 @@ function getAotCompilerOptions(options: CompilerOptions): AotCompilerOptions {
   } else {
     // No translations are provided, ignore any errors
     // We still go through i18n to remove i18n attributes
-    missingTranslation = MissingTranslationStrategy.Ignore;
+    missingTranslation = core.MissingTranslationStrategy.Ignore;
   }
 
   return {
diff --git a/packages/compiler-cli/src/version.ts b/packages/compiler-cli/src/version.ts
index 19db5be5a5..dd4544fcb4 100644
--- a/packages/compiler-cli/src/version.ts
+++ b/packages/compiler-cli/src/version.ts
@@ -12,7 +12,7 @@
  * Entry point for all public APIs of the common package.
  */
 
-import {Version} from '@angular/core';
+import {Version} from '@angular/compiler';
 /**
  * @stable
  */
diff --git a/packages/compiler-cli/tsconfig-build.json b/packages/compiler-cli/tsconfig-build.json
index 2bbb80d3e1..14d2bb226b 100644
--- a/packages/compiler-cli/tsconfig-build.json
+++ b/packages/compiler-cli/tsconfig-build.json
@@ -8,12 +8,7 @@
     "module": "commonjs",
     "outDir": "../../dist/packages/compiler-cli",
     "paths": {
-      "@angular/core": ["../../dist/packages/core"],
-      "@angular/common": ["../../dist/packages/common"],
       "@angular/compiler": ["../../dist/packages/compiler"],
-      "@angular/http": ["../../dist/packages/http"],
-      "@angular/platform-server": ["../../dist/packages/platform-server"],
-      "@angular/platform-browser": ["../../dist/packages/platform-browser"],
       "@angular/tsc-wrapped": ["../../dist/packages-dist/tsc-wrapped"]
     },
     "rootDir": ".",
diff --git a/packages/compiler/BUILD.bazel b/packages/compiler/BUILD.bazel
index 857fadd6e0..fde96d4c01 100644
--- a/packages/compiler/BUILD.bazel
+++ b/packages/compiler/BUILD.bazel
@@ -8,6 +8,6 @@ ts_library(
       "testing/**",
     ]),
     module_name = "@angular/compiler",
-    deps = ["//packages/core"],
+    deps = [],
     tsconfig = ":tsconfig-build.json",
 )
diff --git a/packages/compiler/package.json b/packages/compiler/package.json
index a3b4bd3858..5232563993 100644
--- a/packages/compiler/package.json
+++ b/packages/compiler/package.json
@@ -11,9 +11,6 @@
   "dependencies": {
     "tslib": "^1.7.1"
   },
-  "peerDependencies": {
-    "@angular/core": "0.0.0-PLACEHOLDER"
-  },
   "repository": {
     "type": "git",
     "url": "https://github.com/angular/angular.git"
diff --git a/packages/compiler/src/aot/compiler_factory.ts b/packages/compiler/src/aot/compiler_factory.ts
index d3a350fc9d..f8155dad33 100644
--- a/packages/compiler/src/aot/compiler_factory.ts
+++ b/packages/compiler/src/aot/compiler_factory.ts
@@ -6,9 +6,8 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {MissingTranslationStrategy, ViewEncapsulation, ɵConsole as Console} from '@angular/core';
-
 import {CompilerConfig} from '../config';
+import {MissingTranslationStrategy, ViewEncapsulation} from '../core';
 import {DirectiveNormalizer} from '../directive_normalizer';
 import {DirectiveResolver} from '../directive_resolver';
 import {Lexer} from '../expression_parser/lexer';
@@ -61,7 +60,6 @@ export function createAotCompiler(compilerHost: AotCompilerHost, options: AotCom
   const summaryResolver = new AotSummaryResolver(compilerHost, symbolCache);
   const symbolResolver = new StaticSymbolResolver(compilerHost, symbolCache, summaryResolver);
   const staticReflector = new StaticReflector(summaryResolver, symbolResolver);
-  const console = new Console();
   const htmlParser = new I18NHtmlParser(
       new HtmlParser(), translations, options.i18nFormat, options.missingTranslation, console);
   const config = new CompilerConfig({
diff --git a/packages/compiler/src/aot/compiler_options.ts b/packages/compiler/src/aot/compiler_options.ts
index 063c4d137b..5528e9b5d2 100644
--- a/packages/compiler/src/aot/compiler_options.ts
+++ b/packages/compiler/src/aot/compiler_options.ts
@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {MissingTranslationStrategy} from '@angular/core';
+import {MissingTranslationStrategy} from '../core';
 
 export interface AotCompilerOptions {
   locale?: string;
diff --git a/packages/compiler/src/aot/static_reflector.ts b/packages/compiler/src/aot/static_reflector.ts
index 06523cc5de..0a72ad91fa 100644
--- a/packages/compiler/src/aot/static_reflector.ts
+++ b/packages/compiler/src/aot/static_reflector.ts
@@ -6,10 +6,9 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Attribute, Component, ContentChild, ContentChildren, Directive, Host, HostBinding, HostListener, Inject, Injectable, Input, NgModule, Optional, Output, Pipe, Self, SkipSelf, ViewChild, ViewChildren, animate, group, keyframes, sequence, state, style, transition, trigger} from '@angular/core';
-
 import {CompileSummaryKind} from '../compile_metadata';
 import {CompileReflector} from '../compile_reflector';
+import {MetadataFactory, createAttribute, createComponent, createContentChild, createContentChildren, createDirective, createHost, createHostBinding, createHostListener, createInject, createInjectable, createInput, createNgModule, createOptional, createOutput, createPipe, createSelf, createSkipSelf, createViewChild, createViewChildren} from '../core';
 import * as o from '../output/output_ast';
 import {SummaryResolver} from '../summary_resolver';
 import {syntaxError} from '../util';
@@ -48,8 +47,8 @@ export class StaticReflector implements CompileReflector {
   private opaqueToken: StaticSymbol;
   private ROUTES: StaticSymbol;
   private ANALYZE_FOR_ENTRY_COMPONENTS: StaticSymbol;
-  private annotationForParentClassWithSummaryKind = new Map<CompileSummaryKind, any[]>();
-  private annotationNames = new Map<any, string>();
+  private annotationForParentClassWithSummaryKind =
+      new Map<CompileSummaryKind, MetadataFactory<any>[]>();
 
   constructor(
       private summaryResolver: SummaryResolver<StaticSymbol>,
@@ -64,16 +63,12 @@ export class StaticReflector implements CompileReflector {
     knownMetadataFunctions.forEach(
         (kf) => this._registerFunction(this.getStaticSymbol(kf.filePath, kf.name), kf.fn));
     this.annotationForParentClassWithSummaryKind.set(
-        CompileSummaryKind.Directive, [Directive, Component]);
-    this.annotationForParentClassWithSummaryKind.set(CompileSummaryKind.Pipe, [Pipe]);
-    this.annotationForParentClassWithSummaryKind.set(CompileSummaryKind.NgModule, [NgModule]);
+        CompileSummaryKind.Directive, [createDirective, createComponent]);
+    this.annotationForParentClassWithSummaryKind.set(CompileSummaryKind.Pipe, [createPipe]);
+    this.annotationForParentClassWithSummaryKind.set(CompileSummaryKind.NgModule, [createNgModule]);
     this.annotationForParentClassWithSummaryKind.set(
-        CompileSummaryKind.Injectable, [Injectable, Pipe, Directive, Component, NgModule]);
-    this.annotationNames.set(Directive, 'Directive');
-    this.annotationNames.set(Component, 'Component');
-    this.annotationNames.set(Pipe, 'Pipe');
-    this.annotationNames.set(NgModule, 'NgModule');
-    this.annotationNames.set(Injectable, 'Injectable');
+        CompileSummaryKind.Injectable,
+        [createInjectable, createPipe, createDirective, createComponent, createNgModule]);
   }
 
   componentModuleUrl(typeOrFunc: StaticSymbol): string {
@@ -129,12 +124,12 @@ export class StaticReflector implements CompileReflector {
           const requiredAnnotationTypes =
               this.annotationForParentClassWithSummaryKind.get(summary.type.summaryKind !) !;
           const typeHasRequiredAnnotation = requiredAnnotationTypes.some(
-              (requiredType: any) => ownAnnotations.some(ann => ann instanceof requiredType));
+              (requiredType) => ownAnnotations.some(ann => requiredType.isTypeOf(ann)));
           if (!typeHasRequiredAnnotation) {
             this.reportError(
                 syntaxError(
                     `Class ${type.name} in ${type.filePath} extends from a ${CompileSummaryKind[summary.type.summaryKind!]} in another compilation unit without duplicating the decorator. ` +
-                    `Please add a ${requiredAnnotationTypes.map((type: any) => this.annotationNames.get(type)).join(' or ')} decorator to the class.`),
+                    `Please add a ${requiredAnnotationTypes.map((type) => type.ngMetadataName).join(' or ')} decorator to the class.`),
                 type);
           }
         }
@@ -281,50 +276,48 @@ export class StaticReflector implements CompileReflector {
     this.ANALYZE_FOR_ENTRY_COMPONENTS =
         this.findDeclaration(ANGULAR_CORE, 'ANALYZE_FOR_ENTRY_COMPONENTS');
 
-    this._registerDecoratorOrConstructor(this.findDeclaration(ANGULAR_CORE, 'Host'), Host);
+    this._registerDecoratorOrConstructor(this.findDeclaration(ANGULAR_CORE, 'Host'), createHost);
     this._registerDecoratorOrConstructor(
-        this.findDeclaration(ANGULAR_CORE, 'Injectable'), Injectable);
-    this._registerDecoratorOrConstructor(this.findDeclaration(ANGULAR_CORE, 'Self'), Self);
-    this._registerDecoratorOrConstructor(this.findDeclaration(ANGULAR_CORE, 'SkipSelf'), SkipSelf);
-    this._registerDecoratorOrConstructor(this.findDeclaration(ANGULAR_CORE, 'Inject'), Inject);
-    this._registerDecoratorOrConstructor(this.findDeclaration(ANGULAR_CORE, 'Optional'), Optional);
+        this.findDeclaration(ANGULAR_CORE, 'Injectable'), createInjectable);
+    this._registerDecoratorOrConstructor(this.findDeclaration(ANGULAR_CORE, 'Self'), createSelf);
     this._registerDecoratorOrConstructor(
-        this.findDeclaration(ANGULAR_CORE, 'Attribute'), Attribute);
+        this.findDeclaration(ANGULAR_CORE, 'SkipSelf'), createSkipSelf);
     this._registerDecoratorOrConstructor(
-        this.findDeclaration(ANGULAR_CORE, 'ContentChild'), ContentChild);
+        this.findDeclaration(ANGULAR_CORE, 'Inject'), createInject);
     this._registerDecoratorOrConstructor(
-        this.findDeclaration(ANGULAR_CORE, 'ContentChildren'), ContentChildren);
+        this.findDeclaration(ANGULAR_CORE, 'Optional'), createOptional);
     this._registerDecoratorOrConstructor(
-        this.findDeclaration(ANGULAR_CORE, 'ViewChild'), ViewChild);
+        this.findDeclaration(ANGULAR_CORE, 'Attribute'), createAttribute);
     this._registerDecoratorOrConstructor(
-        this.findDeclaration(ANGULAR_CORE, 'ViewChildren'), ViewChildren);
-    this._registerDecoratorOrConstructor(this.findDeclaration(ANGULAR_CORE, 'Input'), Input);
-    this._registerDecoratorOrConstructor(this.findDeclaration(ANGULAR_CORE, 'Output'), Output);
-    this._registerDecoratorOrConstructor(this.findDeclaration(ANGULAR_CORE, 'Pipe'), Pipe);
+        this.findDeclaration(ANGULAR_CORE, 'ContentChild'), createContentChild);
     this._registerDecoratorOrConstructor(
-        this.findDeclaration(ANGULAR_CORE, 'HostBinding'), HostBinding);
+        this.findDeclaration(ANGULAR_CORE, 'ContentChildren'), createContentChildren);
     this._registerDecoratorOrConstructor(
-        this.findDeclaration(ANGULAR_CORE, 'HostListener'), HostListener);
+        this.findDeclaration(ANGULAR_CORE, 'ViewChild'), createViewChild);
     this._registerDecoratorOrConstructor(
-        this.findDeclaration(ANGULAR_CORE, 'Directive'), Directive);
+        this.findDeclaration(ANGULAR_CORE, 'ViewChildren'), createViewChildren);
+    this._registerDecoratorOrConstructor(this.findDeclaration(ANGULAR_CORE, 'Input'), createInput);
     this._registerDecoratorOrConstructor(
-        this.findDeclaration(ANGULAR_CORE, 'Component'), Component);
-    this._registerDecoratorOrConstructor(this.findDeclaration(ANGULAR_CORE, 'NgModule'), NgModule);
+        this.findDeclaration(ANGULAR_CORE, 'Output'), createOutput);
+    this._registerDecoratorOrConstructor(this.findDeclaration(ANGULAR_CORE, 'Pipe'), createPipe);
+    this._registerDecoratorOrConstructor(
+        this.findDeclaration(ANGULAR_CORE, 'HostBinding'), createHostBinding);
+    this._registerDecoratorOrConstructor(
+        this.findDeclaration(ANGULAR_CORE, 'HostListener'), createHostListener);
+    this._registerDecoratorOrConstructor(
+        this.findDeclaration(ANGULAR_CORE, 'Directive'), createDirective);
+    this._registerDecoratorOrConstructor(
+        this.findDeclaration(ANGULAR_CORE, 'Component'), createComponent);
+    this._registerDecoratorOrConstructor(
+        this.findDeclaration(ANGULAR_CORE, 'NgModule'), createNgModule);
 
     // Note: Some metadata classes can be used directly with Provider.deps.
-    this._registerDecoratorOrConstructor(this.findDeclaration(ANGULAR_CORE, 'Host'), Host);
-    this._registerDecoratorOrConstructor(this.findDeclaration(ANGULAR_CORE, 'Self'), Self);
-    this._registerDecoratorOrConstructor(this.findDeclaration(ANGULAR_CORE, 'SkipSelf'), SkipSelf);
-    this._registerDecoratorOrConstructor(this.findDeclaration(ANGULAR_CORE, 'Optional'), Optional);
-
-    this._registerFunction(this.findDeclaration(ANGULAR_CORE, 'trigger'), trigger);
-    this._registerFunction(this.findDeclaration(ANGULAR_CORE, 'state'), state);
-    this._registerFunction(this.findDeclaration(ANGULAR_CORE, 'transition'), transition);
-    this._registerFunction(this.findDeclaration(ANGULAR_CORE, 'style'), style);
-    this._registerFunction(this.findDeclaration(ANGULAR_CORE, 'animate'), animate);
-    this._registerFunction(this.findDeclaration(ANGULAR_CORE, 'keyframes'), keyframes);
-    this._registerFunction(this.findDeclaration(ANGULAR_CORE, 'sequence'), sequence);
-    this._registerFunction(this.findDeclaration(ANGULAR_CORE, 'group'), group);
+    this._registerDecoratorOrConstructor(this.findDeclaration(ANGULAR_CORE, 'Host'), createHost);
+    this._registerDecoratorOrConstructor(this.findDeclaration(ANGULAR_CORE, 'Self'), createSelf);
+    this._registerDecoratorOrConstructor(
+        this.findDeclaration(ANGULAR_CORE, 'SkipSelf'), createSkipSelf);
+    this._registerDecoratorOrConstructor(
+        this.findDeclaration(ANGULAR_CORE, 'Optional'), createOptional);
   }
 
   /**
@@ -755,4 +748,4 @@ function positionalError(message: string, fileName: string, line: number, column
   (result as any).line = line;
   (result as any).column = column;
   return result;
-}
+}
\ No newline at end of file
diff --git a/packages/compiler/src/assertions.ts b/packages/compiler/src/assertions.ts
index a3a525e202..2b3736e0e1 100644
--- a/packages/compiler/src/assertions.ts
+++ b/packages/compiler/src/assertions.ts
@@ -6,11 +6,8 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {isDevMode} from '@angular/core';
-
-
 export function assertArrayOfStrings(identifier: string, value: any) {
-  if (!isDevMode() || value == null) {
+  if (value == null) {
     return;
   }
   if (!Array.isArray(value)) {
@@ -34,7 +31,7 @@ const INTERPOLATION_BLACKLIST_REGEXPS = [
 export function assertInterpolationSymbols(identifier: string, value: any): void {
   if (value != null && !(Array.isArray(value) && value.length == 2)) {
     throw new Error(`Expected '${identifier}' to be an array, [start, end].`);
-  } else if (isDevMode() && value != null) {
+  } else if (value != null) {
     const start = value[0] as string;
     const end = value[1] as string;
     // black list checking
diff --git a/packages/compiler/src/compile_metadata.ts b/packages/compiler/src/compile_metadata.ts
index 9c62149604..82829da690 100644
--- a/packages/compiler/src/compile_metadata.ts
+++ b/packages/compiler/src/compile_metadata.ts
@@ -6,12 +6,11 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {ChangeDetectionStrategy, ComponentFactory, RendererType2, SchemaMetadata, Type, ViewEncapsulation, ɵstringify as stringify} from '@angular/core';
-
 import {StaticSymbol} from './aot/static_symbol';
+import {ChangeDetectionStrategy, SchemaMetadata, Type, ViewEncapsulation} from './core';
 import {LifecycleHooks} from './lifecycle_reflector';
 import {CssSelector} from './selector';
-import {splitAtColon} from './util';
+import {splitAtColon, stringify} from './util';
 
 
 
@@ -294,7 +293,7 @@ export class CompileTemplateMetadata {
 
 export interface CompileEntryComponentMetadata {
   componentType: any;
-  componentFactory: StaticSymbol|ComponentFactory<any>;
+  componentFactory: StaticSymbol|object;
 }
 
 // Note: This should only use interfaces as nested data types
@@ -317,8 +316,8 @@ export interface CompileDirectiveSummary extends CompileTypeSummary {
   changeDetection: ChangeDetectionStrategy|null;
   template: CompileTemplateSummary|null;
   componentViewType: StaticSymbol|ProxyClass|null;
-  rendererType: StaticSymbol|RendererType2|null;
-  componentFactory: StaticSymbol|ComponentFactory<any>|null;
+  rendererType: StaticSymbol|object|null;
+  componentFactory: StaticSymbol|object|null;
 }
 
 /**
@@ -344,8 +343,8 @@ export class CompileDirectiveMetadata {
     entryComponents: CompileEntryComponentMetadata[],
     template: CompileTemplateMetadata,
     componentViewType: StaticSymbol|ProxyClass|null,
-    rendererType: StaticSymbol|RendererType2|null,
-    componentFactory: StaticSymbol|ComponentFactory<any>|null,
+    rendererType: StaticSymbol|object|null,
+    componentFactory: StaticSymbol|object|null,
   }): CompileDirectiveMetadata {
     const hostListeners: {[key: string]: string} = {};
     const hostProperties: {[key: string]: string} = {};
@@ -422,8 +421,8 @@ export class CompileDirectiveMetadata {
   template: CompileTemplateMetadata|null;
 
   componentViewType: StaticSymbol|ProxyClass|null;
-  rendererType: StaticSymbol|RendererType2|null;
-  componentFactory: StaticSymbol|ComponentFactory<any>|null;
+  rendererType: StaticSymbol|object|null;
+  componentFactory: StaticSymbol|object|null;
 
   constructor({isHost,          type,      isComponent,       selector,      exportAs,
                changeDetection, inputs,    outputs,           hostListeners, hostProperties,
@@ -447,8 +446,8 @@ export class CompileDirectiveMetadata {
     entryComponents: CompileEntryComponentMetadata[],
     template: CompileTemplateMetadata|null,
     componentViewType: StaticSymbol|ProxyClass|null,
-    rendererType: StaticSymbol|RendererType2|null,
-    componentFactory: StaticSymbol|ComponentFactory<any>|null,
+    rendererType: StaticSymbol|object|null,
+    componentFactory: StaticSymbol|object|null,
   }) {
     this.isHost = !!isHost;
     this.type = type;
@@ -534,7 +533,8 @@ export function createHostComponentMeta(
     queries: [],
     viewQueries: [],
     componentViewType: hostViewType,
-    rendererType: {id: '__Host__', encapsulation: ViewEncapsulation.None, styles: [], data: {}},
+    rendererType:
+        {id: '__Host__', encapsulation: ViewEncapsulation.None, styles: [], data: {}} as object,
     entryComponents: [],
     componentFactory: null
   });
@@ -720,7 +720,7 @@ function _normalizeArray(obj: any[] | undefined | null): any[] {
 
 export class ProviderMeta {
   token: any;
-  useClass: Type<any>|null;
+  useClass: Type|null;
   useValue: any;
   useExisting: any;
   useFactory: Function|null;
@@ -728,7 +728,7 @@ export class ProviderMeta {
   multi: boolean;
 
   constructor(token: any, {useClass, useValue, useExisting, useFactory, deps, multi}: {
-    useClass?: Type<any>,
+    useClass?: Type,
     useValue?: any,
     useExisting?: any,
     useFactory?: Function|null,
diff --git a/packages/compiler/src/compile_reflector.ts b/packages/compiler/src/compile_reflector.ts
index 67eec55e54..96cc30c8c9 100644
--- a/packages/compiler/src/compile_reflector.ts
+++ b/packages/compiler/src/compile_reflector.ts
@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Component} from '@angular/core';
+import {Component} from './core';
 import * as o from './output/output_ast';
 
 /**
diff --git a/packages/compiler/src/compiler.ts b/packages/compiler/src/compiler.ts
index f3f9fa87d8..8b42c8efc1 100644
--- a/packages/compiler/src/compiler.ts
+++ b/packages/compiler/src/compiler.ts
@@ -21,9 +21,13 @@
  *   </p>
  * </div>
  */
-export {VERSION} from './version';
+
+import * as core from './core';
+
+export {core};
+
+export * from './version';
 export * from './template_parser/template_ast';
-export {TEMPLATE_TRANSFORMS} from './template_parser/template_parser';
 export {CompilerConfig, preserveWhitespacesDefault} from './config';
 export * from './compile_metadata';
 export * from './aot/compiler_factory';
@@ -37,9 +41,8 @@ export * from './aot/static_symbol_resolver';
 export * from './aot/summary_resolver';
 export * from './ast_path';
 export * from './summary_resolver';
+export {Identifiers} from './identifiers';
 export {JitCompiler} from './jit/compiler';
-export * from './jit/compiler_factory';
-export * from './jit/jit_reflector';
 export * from './compile_reflector';
 export * from './url_resolver';
 export * from './resource_loader';
@@ -69,5 +72,5 @@ export * from './selector';
 export * from './style_compiler';
 export * from './template_parser/template_parser';
 export {ViewCompiler} from './view_compiler/view_compiler';
-export {getParseErrors, isSyntaxError, syntaxError} from './util';
+export {getParseErrors, isSyntaxError, syntaxError, Version} from './util';
 // This file only reexports content of the `src` folder. Keep it that way.
diff --git a/packages/compiler/src/config.ts b/packages/compiler/src/config.ts
index 8ab10926e5..12bab10a0b 100644
--- a/packages/compiler/src/config.ts
+++ b/packages/compiler/src/config.ts
@@ -6,7 +6,10 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {MissingTranslationStrategy, ViewEncapsulation} from '@angular/core';
+import {CompileIdentifierMetadata} from './compile_metadata';
+import {MissingTranslationStrategy, ViewEncapsulation} from './core';
+import {Identifiers} from './identifiers';
+import * as o from './output/output_ast';
 import {noUndefined} from './util';
 
 export class CompilerConfig {
@@ -15,20 +18,23 @@ export class CompilerConfig {
   // templates. They have been deprecated in 4.x, `<ng-template>` should be used instead.
   public enableLegacyTemplate: boolean;
   public useJit: boolean;
+  public jitDevMode: boolean;
   public missingTranslation: MissingTranslationStrategy|null;
   public preserveWhitespaces: boolean;
 
   constructor(
-      {defaultEncapsulation = ViewEncapsulation.Emulated, useJit = true, missingTranslation,
-       enableLegacyTemplate, preserveWhitespaces}: {
+      {defaultEncapsulation = ViewEncapsulation.Emulated, useJit = true, jitDevMode = false,
+       missingTranslation, enableLegacyTemplate, preserveWhitespaces}: {
         defaultEncapsulation?: ViewEncapsulation,
         useJit?: boolean,
+        jitDevMode?: boolean,
         missingTranslation?: MissingTranslationStrategy,
         enableLegacyTemplate?: boolean,
         preserveWhitespaces?: boolean
       } = {}) {
     this.defaultEncapsulation = defaultEncapsulation;
     this.useJit = !!useJit;
+    this.jitDevMode = !!jitDevMode;
     this.missingTranslation = missingTranslation || null;
     this.enableLegacyTemplate = enableLegacyTemplate !== false;
     this.preserveWhitespaces = preserveWhitespacesDefault(noUndefined(preserveWhitespaces));
diff --git a/packages/compiler/src/core.ts b/packages/compiler/src/core.ts
new file mode 100644
index 0000000000..032bead530
--- /dev/null
+++ b/packages/compiler/src/core.ts
@@ -0,0 +1,262 @@
+/**
+ * @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
+ */
+
+// Attention:
+// This file duplicates types and values from @angular/core
+// so that we are able to make @angular/compiler independent of @angular/core.
+// This is important to prevent a build cycle, as @angular/core needs to
+// be compiled with the compiler.
+
+export interface Inject { token: any; }
+export const createInject = makeMetadataFactory<Inject>('Inject', (token: any) => ({token}));
+export const createInjectionToken =
+    makeMetadataFactory<object>('InjectionToken', (token: any) => token);
+
+export interface Attribute { attributeName?: string; }
+export const createAttribute =
+    makeMetadataFactory<Attribute>('Attribute', (attributeName?: string) => ({attributeName}));
+
+export interface Query {
+  descendants: boolean;
+  first: boolean;
+  read: any;
+  isViewQuery: boolean;
+  selector: any;
+}
+
+export const createContentChildren = makeMetadataFactory<Query>(
+    'ContentChildren',
+    (selector?: any, data: any = {}) =>
+        ({selector, first: false, isViewQuery: false, descendants: false, ...data}));
+export const createContentChild = makeMetadataFactory<Query>(
+    'ContentChild', (selector?: any, data: any = {}) =>
+                        ({selector, first: true, isViewQuery: false, descendants: true, ...data}));
+export const createViewChildren = makeMetadataFactory<Query>(
+    'ViewChildren', (selector?: any, data: any = {}) =>
+                        ({selector, first: false, isViewQuery: true, descendants: true, ...data}));
+export const createViewChild = makeMetadataFactory<Query>(
+    'ViewChild', (selector: any, data: any) =>
+                     ({selector, first: true, isViewQuery: true, descendants: true, ...data}));
+
+export interface Directive {
+  selector?: string;
+  inputs?: string[];
+  outputs?: string[];
+  host?: {[key: string]: string};
+  providers?: Provider[];
+  exportAs?: string;
+  queries?: {[key: string]: any};
+}
+export const createDirective =
+    makeMetadataFactory<Directive>('Directive', (dir: Directive = {}) => dir);
+
+export interface Component extends Directive {
+  changeDetection?: ChangeDetectionStrategy;
+  viewProviders?: Provider[];
+  moduleId?: string;
+  templateUrl?: string;
+  template?: string;
+  styleUrls?: string[];
+  styles?: string[];
+  animations?: any[];
+  encapsulation?: ViewEncapsulation;
+  interpolation?: [string, string];
+  entryComponents?: Array<Type|any[]>;
+  preserveWhitespaces?: boolean;
+}
+export enum ViewEncapsulation {
+  Emulated = 0,
+  Native = 1,
+  None = 2
+}
+
+export enum ChangeDetectionStrategy {
+  OnPush = 0,
+  Default = 1
+}
+
+export const createComponent = makeMetadataFactory<Component>(
+    'Component', (c: Component = {}) => ({changeDetection: ChangeDetectionStrategy.Default, ...c}));
+
+export interface Pipe {
+  name: string;
+  pure?: boolean;
+}
+export const createPipe = makeMetadataFactory<Pipe>('Pipe', (p: Pipe) => ({pure: true, ...p}));
+
+export interface Input { bindingPropertyName?: string; }
+export const createInput =
+    makeMetadataFactory<Input>('Input', (bindingPropertyName?: string) => ({bindingPropertyName}));
+
+export interface Output { bindingPropertyName?: string; }
+export const createOutput = makeMetadataFactory<Output>(
+    'Output', (bindingPropertyName?: string) => ({bindingPropertyName}));
+
+export interface HostBinding { hostPropertyName?: string; }
+export const createHostBinding = makeMetadataFactory<HostBinding>(
+    'HostBinding', (hostPropertyName?: string) => ({hostPropertyName}));
+
+export interface HostListener {
+  eventName?: string;
+  args?: string[];
+}
+export const createHostListener = makeMetadataFactory<HostListener>(
+    'HostListener', (eventName?: string, args?: string[]) => ({eventName, args}));
+
+export interface NgModule {
+  providers?: Provider[];
+  declarations?: Array<Type|any[]>;
+  imports?: Array<Type|ModuleWithProviders|any[]>;
+  exports?: Array<Type|any[]>;
+  entryComponents?: Array<Type|any[]>;
+  bootstrap?: Array<Type|any[]>;
+  schemas?: Array<SchemaMetadata|any[]>;
+  id?: string;
+}
+export const createNgModule =
+    makeMetadataFactory<NgModule>('NgModule', (ngModule: NgModule) => ngModule);
+
+export interface ModuleWithProviders {
+  ngModule: Type;
+  providers?: Provider[];
+}
+
+export interface SchemaMetadata { name: string; }
+
+export const CUSTOM_ELEMENTS_SCHEMA: SchemaMetadata = {
+  name: 'custom-elements'
+};
+
+export const NO_ERRORS_SCHEMA: SchemaMetadata = {
+  name: 'no-errors-schema'
+};
+
+export const createOptional = makeMetadataFactory('Optional');
+export const createInjectable = makeMetadataFactory('Injectable');
+export const createSelf = makeMetadataFactory('Self');
+export const createSkipSelf = makeMetadataFactory('SkipSelf');
+export const createHost = makeMetadataFactory('Host');
+
+export interface Type extends Function { new (...args: any[]): any; }
+export const Type = Function;
+
+export enum SecurityContext {
+  NONE = 0,
+  HTML = 1,
+  STYLE = 2,
+  SCRIPT = 3,
+  URL = 4,
+  RESOURCE_URL = 5,
+}
+
+export type Provider = any;
+
+export const enum NodeFlags {
+  None = 0,
+  TypeElement = 1 << 0,
+  TypeText = 1 << 1,
+  ProjectedTemplate = 1 << 2,
+  CatRenderNode = TypeElement | TypeText,
+  TypeNgContent = 1 << 3,
+  TypePipe = 1 << 4,
+  TypePureArray = 1 << 5,
+  TypePureObject = 1 << 6,
+  TypePurePipe = 1 << 7,
+  CatPureExpression = TypePureArray | TypePureObject | TypePurePipe,
+  TypeValueProvider = 1 << 8,
+  TypeClassProvider = 1 << 9,
+  TypeFactoryProvider = 1 << 10,
+  TypeUseExistingProvider = 1 << 11,
+  LazyProvider = 1 << 12,
+  PrivateProvider = 1 << 13,
+  TypeDirective = 1 << 14,
+  Component = 1 << 15,
+  CatProviderNoDirective =
+      TypeValueProvider | TypeClassProvider | TypeFactoryProvider | TypeUseExistingProvider,
+  CatProvider = CatProviderNoDirective | TypeDirective,
+  OnInit = 1 << 16,
+  OnDestroy = 1 << 17,
+  DoCheck = 1 << 18,
+  OnChanges = 1 << 19,
+  AfterContentInit = 1 << 20,
+  AfterContentChecked = 1 << 21,
+  AfterViewInit = 1 << 22,
+  AfterViewChecked = 1 << 23,
+  EmbeddedViews = 1 << 24,
+  ComponentView = 1 << 25,
+  TypeContentQuery = 1 << 26,
+  TypeViewQuery = 1 << 27,
+  StaticQuery = 1 << 28,
+  DynamicQuery = 1 << 29,
+  CatQuery = TypeContentQuery | TypeViewQuery,
+
+  // mutually exclusive values...
+  Types = CatRenderNode | TypeNgContent | TypePipe | CatPureExpression | CatProvider | CatQuery
+}
+
+export const enum DepFlags {
+  None = 0,
+  SkipSelf = 1 << 0,
+  Optional = 1 << 1,
+  Value = 2 << 2,
+}
+
+export const enum ArgumentType {Inline = 0, Dynamic = 1}
+
+export const enum BindingFlags {
+  TypeElementAttribute = 1 << 0,
+  TypeElementClass = 1 << 1,
+  TypeElementStyle = 1 << 2,
+  TypeProperty = 1 << 3,
+  SyntheticProperty = 1 << 4,
+  SyntheticHostProperty = 1 << 5,
+  CatSyntheticProperty = SyntheticProperty | SyntheticHostProperty,
+
+  // mutually exclusive values...
+  Types = TypeElementAttribute | TypeElementClass | TypeElementStyle | TypeProperty
+}
+
+export const enum QueryBindingType {First = 0, All = 1}
+
+export const enum QueryValueType {
+  ElementRef = 0,
+  RenderElement = 1,
+  TemplateRef = 2,
+  ViewContainerRef = 3,
+  Provider = 4
+}
+
+export const enum ViewFlags {
+  None = 0,
+  OnPush = 1 << 1,
+}
+
+export enum MissingTranslationStrategy {
+  Error = 0,
+  Warning = 1,
+  Ignore = 2,
+}
+
+export interface MetadataFactory<T> {
+  (...args: any[]): T;
+  isTypeOf(obj: any): obj is T;
+  ngMetadataName: string;
+}
+
+function makeMetadataFactory<T>(name: string, props?: (...args: any[]) => T): MetadataFactory<T> {
+  const factory: any = (...args: any[]) => {
+    const values = props ? props(...args) : {};
+    return {
+      ngMetadataName: name,
+      ...values,
+    };
+  };
+  factory.isTypeOf = (obj: any) => obj && obj.ngMetadataName === name;
+  factory.ngMetadataName = name;
+  return factory;
+}
diff --git a/packages/compiler/src/directive_normalizer.ts b/packages/compiler/src/directive_normalizer.ts
index 299263feeb..2ac66f6f76 100644
--- a/packages/compiler/src/directive_normalizer.ts
+++ b/packages/compiler/src/directive_normalizer.ts
@@ -6,11 +6,9 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {ViewEncapsulation, ɵstringify as stringify} from '@angular/core';
-
 import {CompileAnimationEntryMetadata, CompileDirectiveMetadata, CompileStylesheetMetadata, CompileTemplateMetadata, templateSourceUrl} from './compile_metadata';
 import {CompilerConfig, preserveWhitespacesDefault} from './config';
-import {CompilerInjectable} from './injectable';
+import {ViewEncapsulation} from './core';
 import * as html from './ml_parser/ast';
 import {HtmlParser} from './ml_parser/html_parser';
 import {InterpolationConfig} from './ml_parser/interpolation_config';
@@ -18,7 +16,7 @@ import {ResourceLoader} from './resource_loader';
 import {extractStyleUrls, isStyleUrlResolvable} from './style_url_resolver';
 import {PreparsedElementType, preparseElement} from './template_parser/template_preparser';
 import {UrlResolver} from './url_resolver';
-import {SyncAsync, isDefined, syntaxError} from './util';
+import {SyncAsync, isDefined, stringify, syntaxError} from './util';
 
 export interface PrenormalizedTemplateMetadata {
   ngModuleType: any;
@@ -34,7 +32,6 @@ export interface PrenormalizedTemplateMetadata {
   preserveWhitespaces: boolean|null;
 }
 
-@CompilerInjectable()
 export class DirectiveNormalizer {
   private _resourceLoaderCache = new Map<string, SyncAsync<string>>();
 
diff --git a/packages/compiler/src/directive_resolver.ts b/packages/compiler/src/directive_resolver.ts
index 599dc26678..c32f328d1a 100644
--- a/packages/compiler/src/directive_resolver.ts
+++ b/packages/compiler/src/directive_resolver.ts
@@ -6,13 +6,16 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Component, Directive, HostBinding, HostListener, Input, Output, Query, Type, resolveForwardRef, ɵstringify as stringify} from '@angular/core';
-
 import {CompileReflector} from './compile_reflector';
-import {CompilerInjectable} from './injectable';
-import {splitAtColon} from './util';
-
+import {Component, Directive, Type, createComponent, createContentChild, createContentChildren, createDirective, createHostBinding, createHostListener, createInput, createOutput, createViewChild, createViewChildren} from './core';
+import {resolveForwardRef, splitAtColon, stringify} from './util';
 
+const QUERY_METADATA_IDENTIFIERS = [
+  createViewChild,
+  createViewChildren,
+  createContentChild,
+  createContentChildren,
+];
 
 /*
  * Resolve a `Type` for {@link Directive}.
@@ -21,11 +24,10 @@ import {splitAtColon} from './util';
  *
  * See {@link Compiler}
  */
-@CompilerInjectable()
 export class DirectiveResolver {
   constructor(private _reflector: CompileReflector) {}
 
-  isDirective(type: Type<any>) {
+  isDirective(type: Type) {
     const typeMetadata = this._reflector.annotations(resolveForwardRef(type));
     return typeMetadata && typeMetadata.some(isDirectiveMetadata);
   }
@@ -33,10 +35,10 @@ export class DirectiveResolver {
   /**
    * Return {@link Directive} for a given `Type`.
    */
-  resolve(type: Type<any>): Directive;
-  resolve(type: Type<any>, throwIfNotFound: true): Directive;
-  resolve(type: Type<any>, throwIfNotFound: boolean): Directive|null;
-  resolve(type: Type<any>, throwIfNotFound = true): Directive|null {
+  resolve(type: Type): Directive;
+  resolve(type: Type, throwIfNotFound: true): Directive;
+  resolve(type: Type, throwIfNotFound: boolean): Directive|null;
+  resolve(type: Type, throwIfNotFound = true): Directive|null {
     const typeMetadata = this._reflector.annotations(resolveForwardRef(type));
     if (typeMetadata) {
       const metadata = findLast(typeMetadata, isDirectiveMetadata);
@@ -54,15 +56,14 @@ export class DirectiveResolver {
   }
 
   private _mergeWithPropertyMetadata(
-      dm: Directive, propertyMetadata: {[key: string]: any[]},
-      directiveType: Type<any>): Directive {
+      dm: Directive, propertyMetadata: {[key: string]: any[]}, directiveType: Type): Directive {
     const inputs: string[] = [];
     const outputs: string[] = [];
     const host: {[key: string]: string} = {};
     const queries: {[key: string]: any} = {};
 
     Object.keys(propertyMetadata).forEach((propName: string) => {
-      const input = findLast(propertyMetadata[propName], (a) => a instanceof Input);
+      const input = findLast(propertyMetadata[propName], (a) => createInput.isTypeOf(a));
       if (input) {
         if (input.bindingPropertyName) {
           inputs.push(`${propName}: ${input.bindingPropertyName}`);
@@ -70,7 +71,7 @@ export class DirectiveResolver {
           inputs.push(propName);
         }
       }
-      const output = findLast(propertyMetadata[propName], (a) => a instanceof Output);
+      const output = findLast(propertyMetadata[propName], (a) => createOutput.isTypeOf(a));
       if (output) {
         if (output.bindingPropertyName) {
           outputs.push(`${propName}: ${output.bindingPropertyName}`);
@@ -78,7 +79,7 @@ export class DirectiveResolver {
           outputs.push(propName);
         }
       }
-      const hostBindings = propertyMetadata[propName].filter(a => a && a instanceof HostBinding);
+      const hostBindings = propertyMetadata[propName].filter(a => createHostBinding.isTypeOf(a));
       hostBindings.forEach(hostBinding => {
         if (hostBinding.hostPropertyName) {
           const startWith = hostBinding.hostPropertyName[0];
@@ -93,12 +94,13 @@ export class DirectiveResolver {
           host[`[${propName}]`] = propName;
         }
       });
-      const hostListeners = propertyMetadata[propName].filter(a => a && a instanceof HostListener);
+      const hostListeners = propertyMetadata[propName].filter(a => createHostListener.isTypeOf(a));
       hostListeners.forEach(hostListener => {
         const args = hostListener.args || [];
         host[`(${hostListener.eventName})`] = `${propName}(${args.join(',')})`;
       });
-      const query = findLast(propertyMetadata[propName], (a) => a instanceof Query);
+      const query = findLast(
+          propertyMetadata[propName], (a) => QUERY_METADATA_IDENTIFIERS.some(i => i.isTypeOf(a)));
       if (query) {
         queries[propName] = query;
       }
@@ -125,7 +127,7 @@ export class DirectiveResolver {
 
   private _merge(
       directive: Directive, inputs: string[], outputs: string[], host: {[key: string]: string},
-      queries: {[key: string]: any}, directiveType: Type<any>): Directive {
+      queries: {[key: string]: any}, directiveType: Type): Directive {
     const mergedInputs =
         this._dedupeBindings(directive.inputs ? directive.inputs.concat(inputs) : inputs);
     const mergedOutputs =
@@ -133,30 +135,31 @@ export class DirectiveResolver {
     const mergedHost = directive.host ? {...directive.host, ...host} : host;
     const mergedQueries = directive.queries ? {...directive.queries, ...queries} : queries;
 
-    if (directive instanceof Component) {
-      return new Component({
-        selector: directive.selector,
+    if (createComponent.isTypeOf(directive)) {
+      const comp = directive as Component;
+      return createComponent({
+        selector: comp.selector,
         inputs: mergedInputs,
         outputs: mergedOutputs,
         host: mergedHost,
-        exportAs: directive.exportAs,
-        moduleId: directive.moduleId,
+        exportAs: comp.exportAs,
+        moduleId: comp.moduleId,
         queries: mergedQueries,
-        changeDetection: directive.changeDetection,
-        providers: directive.providers,
-        viewProviders: directive.viewProviders,
-        entryComponents: directive.entryComponents,
-        template: directive.template,
-        templateUrl: directive.templateUrl,
-        styles: directive.styles,
-        styleUrls: directive.styleUrls,
-        encapsulation: directive.encapsulation,
-        animations: directive.animations,
-        interpolation: directive.interpolation,
+        changeDetection: comp.changeDetection,
+        providers: comp.providers,
+        viewProviders: comp.viewProviders,
+        entryComponents: comp.entryComponents,
+        template: comp.template,
+        templateUrl: comp.templateUrl,
+        styles: comp.styles,
+        styleUrls: comp.styleUrls,
+        encapsulation: comp.encapsulation,
+        animations: comp.animations,
+        interpolation: comp.interpolation,
         preserveWhitespaces: directive.preserveWhitespaces,
       });
     } else {
-      return new Directive({
+      return createDirective({
         selector: directive.selector,
         inputs: mergedInputs,
         outputs: mergedOutputs,
@@ -170,7 +173,7 @@ export class DirectiveResolver {
 }
 
 function isDirectiveMetadata(type: any): type is Directive {
-  return type instanceof Directive;
+  return createDirective.isTypeOf(type) || createComponent.isTypeOf(type);
 }
 
 export function findLast<T>(arr: T[], condition: (value: T) => boolean): T|null {
diff --git a/packages/compiler/src/expression_parser/lexer.ts b/packages/compiler/src/expression_parser/lexer.ts
index 17b59c4284..cc485ea791 100644
--- a/packages/compiler/src/expression_parser/lexer.ts
+++ b/packages/compiler/src/expression_parser/lexer.ts
@@ -7,7 +7,6 @@
  */
 
 import * as chars from '../chars';
-import {CompilerInjectable} from '../injectable';
 
 export enum TokenType {
   Character,
@@ -21,7 +20,6 @@ export enum TokenType {
 
 const KEYWORDS = ['var', 'let', 'as', 'null', 'undefined', 'true', 'false', 'if', 'else', 'this'];
 
-@CompilerInjectable()
 export class Lexer {
   tokenize(text: string): Token[] {
     const scanner = new _Scanner(text);
diff --git a/packages/compiler/src/expression_parser/parser.ts b/packages/compiler/src/expression_parser/parser.ts
index 14dacda156..93d2362a43 100644
--- a/packages/compiler/src/expression_parser/parser.ts
+++ b/packages/compiler/src/expression_parser/parser.ts
@@ -7,7 +7,6 @@
  */
 
 import * as chars from '../chars';
-import {CompilerInjectable} from '../injectable';
 import {DEFAULT_INTERPOLATION_CONFIG, InterpolationConfig} from '../ml_parser/interpolation_config';
 import {escapeRegExp} from '../util';
 
@@ -29,7 +28,6 @@ function _createInterpolateRegExp(config: InterpolationConfig): RegExp {
   return new RegExp(pattern, 'g');
 }
 
-@CompilerInjectable()
 export class Parser {
   private errors: ParserError[] = [];
 
diff --git a/packages/compiler/src/i18n/extractor.ts b/packages/compiler/src/i18n/extractor.ts
index 526c04f203..3b573e7f47 100644
--- a/packages/compiler/src/i18n/extractor.ts
+++ b/packages/compiler/src/i18n/extractor.ts
@@ -10,8 +10,6 @@
 /**
  * Extract i18n messages from source code
  */
-import {ViewEncapsulation, ɵConsole as Console} from '@angular/core';
-
 import {analyzeAndValidateNgModules, extractProgramSymbols} from '../aot/compiler';
 import {createAotUrlResolver} from '../aot/compiler_factory';
 import {StaticReflector} from '../aot/static_reflector';
@@ -20,6 +18,7 @@ import {StaticSymbolResolver, StaticSymbolResolverHost} from '../aot/static_symb
 import {AotSummaryResolver, AotSummaryResolverHost} from '../aot/summary_resolver';
 import {CompileDirectiveMetadata} from '../compile_metadata';
 import {CompilerConfig} from '../config';
+import {ViewEncapsulation} from '../core';
 import {DirectiveNormalizer} from '../directive_normalizer';
 import {DirectiveResolver} from '../directive_resolver';
 import {CompileMetadataResolver} from '../metadata_resolver';
@@ -34,6 +33,7 @@ import {syntaxError} from '../util';
 import {MessageBundle} from './message_bundle';
 
 
+
 /**
  * The host of the Extractor disconnects the implementation from TypeScript / other language
  * services and from underlying file systems.
@@ -110,7 +110,7 @@ export class Extractor {
     const resolver = new CompileMetadataResolver(
         config, new NgModuleResolver(staticReflector), new DirectiveResolver(staticReflector),
         new PipeResolver(staticReflector), summaryResolver, elementSchemaRegistry, normalizer,
-        new Console(), symbolCache, staticReflector);
+        console, symbolCache, staticReflector);
 
     // TODO(vicb): implicit tags & attributes
     const messageBundle = new MessageBundle(htmlParser, [], {}, locale);
diff --git a/packages/compiler/src/i18n/i18n_html_parser.ts b/packages/compiler/src/i18n/i18n_html_parser.ts
index aab0aa0b95..b0c3397c03 100644
--- a/packages/compiler/src/i18n/i18n_html_parser.ts
+++ b/packages/compiler/src/i18n/i18n_html_parser.ts
@@ -6,11 +6,11 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {MissingTranslationStrategy, ɵConsole as Console} from '@angular/core';
-
+import {MissingTranslationStrategy} from '../core';
 import {HtmlParser} from '../ml_parser/html_parser';
 import {DEFAULT_INTERPOLATION_CONFIG, InterpolationConfig} from '../ml_parser/interpolation_config';
 import {ParseTreeResult} from '../ml_parser/parser';
+import {Console} from '../util';
 
 import {digest} from './digest';
 import {mergeTranslations} from './extractor_merger';
diff --git a/packages/compiler/src/i18n/translation_bundle.ts b/packages/compiler/src/i18n/translation_bundle.ts
index 90c334833c..c1c5daf68c 100644
--- a/packages/compiler/src/i18n/translation_bundle.ts
+++ b/packages/compiler/src/i18n/translation_bundle.ts
@@ -6,13 +6,16 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {MissingTranslationStrategy, ɵConsole as Console} from '@angular/core';
+import {MissingTranslationStrategy} from '../core';
 import * as html from '../ml_parser/ast';
 import {HtmlParser} from '../ml_parser/html_parser';
+import {Console} from '../util';
+
 import * as i18n from './i18n_ast';
 import {I18nError} from './parse_util';
 import {PlaceholderMapper, Serializer} from './serializers/serializer';
 
+
 /**
  * A container for translated messages
  */
diff --git a/packages/compiler/src/identifiers.ts b/packages/compiler/src/identifiers.ts
index b2c1d179eb..598aff3454 100644
--- a/packages/compiler/src/identifiers.ts
+++ b/packages/compiler/src/identifiers.ts
@@ -6,10 +6,9 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {ANALYZE_FOR_ENTRY_COMPONENTS, ChangeDetectionStrategy, ChangeDetectorRef, ComponentFactory, ComponentFactoryResolver, ComponentRef, ElementRef, Injector, LOCALE_ID, NgModuleFactory, NgModuleRef, QueryList, Renderer, SecurityContext, TRANSLATIONS_FORMAT, TemplateRef, ViewContainerRef, ViewEncapsulation, ɵCodegenComponentFactoryResolver, ɵEMPTY_ARRAY, ɵEMPTY_MAP, ɵand, ɵccf, ɵcmf, ɵcrt, ɵdid, ɵeld, ɵinlineInterpolate, ɵinterpolate, ɵmod, ɵmpd, ɵncd, ɵnov, ɵpad, ɵpid, ɵpod, ɵppd, ɵprd, ɵqud, ɵregisterModuleFactory, ɵted, ɵunv, ɵvid} from '@angular/core';
-
 import {CompileIdentifierMetadata, CompileTokenMetadata} from './compile_metadata';
 import {CompileReflector} from './compile_reflector';
+import {Attribute, Component, Directive, HostBinding, HostListener, Inject, Input, NgModule, Output, Pipe, Query} from './core';
 import * as o from './output/output_ast';
 
 const CORE = '@angular/core';
@@ -18,121 +17,109 @@ export class Identifiers {
   static ANALYZE_FOR_ENTRY_COMPONENTS: o.ExternalReference = {
     name: 'ANALYZE_FOR_ENTRY_COMPONENTS',
     moduleName: CORE,
-    runtime: ANALYZE_FOR_ENTRY_COMPONENTS
+
   };
-  static ElementRef:
-      o.ExternalReference = {name: 'ElementRef', moduleName: CORE, runtime: ElementRef};
-  static NgModuleRef:
-      o.ExternalReference = {name: 'NgModuleRef', moduleName: CORE, runtime: NgModuleRef};
-  static ViewContainerRef:
-      o.ExternalReference = {name: 'ViewContainerRef', moduleName: CORE, runtime: ViewContainerRef};
+  static ElementRef: o.ExternalReference = {name: 'ElementRef', moduleName: CORE};
+  static NgModuleRef: o.ExternalReference = {name: 'NgModuleRef', moduleName: CORE};
+  static ViewContainerRef: o.ExternalReference = {name: 'ViewContainerRef', moduleName: CORE};
   static ChangeDetectorRef: o.ExternalReference = {
     name: 'ChangeDetectorRef',
     moduleName: CORE,
-    runtime: ChangeDetectorRef
+
   };
-  static QueryList: o.ExternalReference = {name: 'QueryList', moduleName: CORE, runtime: QueryList};
-  static TemplateRef:
-      o.ExternalReference = {name: 'TemplateRef', moduleName: CORE, runtime: TemplateRef};
+  static QueryList: o.ExternalReference = {name: 'QueryList', moduleName: CORE};
+  static TemplateRef: o.ExternalReference = {name: 'TemplateRef', moduleName: CORE};
   static CodegenComponentFactoryResolver: o.ExternalReference = {
     name: 'ɵCodegenComponentFactoryResolver',
     moduleName: CORE,
-    runtime: ɵCodegenComponentFactoryResolver
+
   };
   static ComponentFactoryResolver: o.ExternalReference = {
     name: 'ComponentFactoryResolver',
     moduleName: CORE,
-    runtime: ComponentFactoryResolver
+
   };
-  static ComponentFactory:
-      o.ExternalReference = {name: 'ComponentFactory', moduleName: CORE, runtime: ComponentFactory};
-  static ComponentRef:
-      o.ExternalReference = {name: 'ComponentRef', moduleName: CORE, runtime: ComponentRef};
-  static NgModuleFactory:
-      o.ExternalReference = {name: 'NgModuleFactory', moduleName: CORE, runtime: NgModuleFactory};
+  static ComponentFactory: o.ExternalReference = {name: 'ComponentFactory', moduleName: CORE};
+  static ComponentRef: o.ExternalReference = {name: 'ComponentRef', moduleName: CORE};
+  static NgModuleFactory: o.ExternalReference = {name: 'NgModuleFactory', moduleName: CORE};
   static createModuleFactory: o.ExternalReference = {
     name: 'ɵcmf',
     moduleName: CORE,
-    runtime: ɵcmf,
+
   };
   static moduleDef: o.ExternalReference = {
     name: 'ɵmod',
     moduleName: CORE,
-    runtime: ɵmod,
+
   };
   static moduleProviderDef: o.ExternalReference = {
     name: 'ɵmpd',
     moduleName: CORE,
-    runtime: ɵmpd,
+
   };
   static RegisterModuleFactoryFn: o.ExternalReference = {
     name: 'ɵregisterModuleFactory',
     moduleName: CORE,
-    runtime: ɵregisterModuleFactory,
+
   };
-  static Injector: o.ExternalReference = {name: 'Injector', moduleName: CORE, runtime: Injector};
+  static Injector: o.ExternalReference = {name: 'Injector', moduleName: CORE};
   static ViewEncapsulation: o.ExternalReference = {
     name: 'ViewEncapsulation',
     moduleName: CORE,
-    runtime: ViewEncapsulation
+
   };
   static ChangeDetectionStrategy: o.ExternalReference = {
     name: 'ChangeDetectionStrategy',
     moduleName: CORE,
-    runtime: ChangeDetectionStrategy
+
   };
   static SecurityContext: o.ExternalReference = {
     name: 'SecurityContext',
     moduleName: CORE,
-    runtime: SecurityContext,
+
   };
-  static LOCALE_ID: o.ExternalReference = {name: 'LOCALE_ID', moduleName: CORE, runtime: LOCALE_ID};
+  static LOCALE_ID: o.ExternalReference = {name: 'LOCALE_ID', moduleName: CORE};
   static TRANSLATIONS_FORMAT: o.ExternalReference = {
     name: 'TRANSLATIONS_FORMAT',
     moduleName: CORE,
-    runtime: TRANSLATIONS_FORMAT
+
   };
   static inlineInterpolate: o.ExternalReference = {
     name: 'ɵinlineInterpolate',
     moduleName: CORE,
-    runtime: ɵinlineInterpolate
+
   };
-  static interpolate:
-      o.ExternalReference = {name: 'ɵinterpolate', moduleName: CORE, runtime: ɵinterpolate};
-  static EMPTY_ARRAY:
-      o.ExternalReference = {name: 'ɵEMPTY_ARRAY', moduleName: CORE, runtime: ɵEMPTY_ARRAY};
-  static EMPTY_MAP:
-      o.ExternalReference = {name: 'ɵEMPTY_MAP', moduleName: CORE, runtime: ɵEMPTY_MAP};
-  static Renderer: o.ExternalReference = {name: 'Renderer', moduleName: CORE, runtime: Renderer};
-  static viewDef: o.ExternalReference = {name: 'ɵvid', moduleName: CORE, runtime: ɵvid};
-  static elementDef: o.ExternalReference = {name: 'ɵeld', moduleName: CORE, runtime: ɵeld};
-  static anchorDef: o.ExternalReference = {name: 'ɵand', moduleName: CORE, runtime: ɵand};
-  static textDef: o.ExternalReference = {name: 'ɵted', moduleName: CORE, runtime: ɵted};
-  static directiveDef: o.ExternalReference = {name: 'ɵdid', moduleName: CORE, runtime: ɵdid};
-  static providerDef: o.ExternalReference = {name: 'ɵprd', moduleName: CORE, runtime: ɵprd};
-  static queryDef: o.ExternalReference = {name: 'ɵqud', moduleName: CORE, runtime: ɵqud};
-  static pureArrayDef: o.ExternalReference = {name: 'ɵpad', moduleName: CORE, runtime: ɵpad};
-  static pureObjectDef: o.ExternalReference = {name: 'ɵpod', moduleName: CORE, runtime: ɵpod};
-  static purePipeDef: o.ExternalReference = {name: 'ɵppd', moduleName: CORE, runtime: ɵppd};
-  static pipeDef: o.ExternalReference = {name: 'ɵpid', moduleName: CORE, runtime: ɵpid};
-  static nodeValue: o.ExternalReference = {name: 'ɵnov', moduleName: CORE, runtime: ɵnov};
-  static ngContentDef: o.ExternalReference = {name: 'ɵncd', moduleName: CORE, runtime: ɵncd};
-  static unwrapValue: o.ExternalReference = {name: 'ɵunv', moduleName: CORE, runtime: ɵunv};
-  static createRendererType2: o.ExternalReference = {name: 'ɵcrt', moduleName: CORE, runtime: ɵcrt};
+  static interpolate: o.ExternalReference = {name: 'ɵinterpolate', moduleName: CORE};
+  static EMPTY_ARRAY: o.ExternalReference = {name: 'ɵEMPTY_ARRAY', moduleName: CORE};
+  static EMPTY_MAP: o.ExternalReference = {name: 'ɵEMPTY_MAP', moduleName: CORE};
+  static Renderer: o.ExternalReference = {name: 'Renderer', moduleName: CORE};
+  static viewDef: o.ExternalReference = {name: 'ɵvid', moduleName: CORE};
+  static elementDef: o.ExternalReference = {name: 'ɵeld', moduleName: CORE};
+  static anchorDef: o.ExternalReference = {name: 'ɵand', moduleName: CORE};
+  static textDef: o.ExternalReference = {name: 'ɵted', moduleName: CORE};
+  static directiveDef: o.ExternalReference = {name: 'ɵdid', moduleName: CORE};
+  static providerDef: o.ExternalReference = {name: 'ɵprd', moduleName: CORE};
+  static queryDef: o.ExternalReference = {name: 'ɵqud', moduleName: CORE};
+  static pureArrayDef: o.ExternalReference = {name: 'ɵpad', moduleName: CORE};
+  static pureObjectDef: o.ExternalReference = {name: 'ɵpod', moduleName: CORE};
+  static purePipeDef: o.ExternalReference = {name: 'ɵppd', moduleName: CORE};
+  static pipeDef: o.ExternalReference = {name: 'ɵpid', moduleName: CORE};
+  static nodeValue: o.ExternalReference = {name: 'ɵnov', moduleName: CORE};
+  static ngContentDef: o.ExternalReference = {name: 'ɵncd', moduleName: CORE};
+  static unwrapValue: o.ExternalReference = {name: 'ɵunv', moduleName: CORE};
+  static createRendererType2: o.ExternalReference = {name: 'ɵcrt', moduleName: CORE};
+  // type only
   static RendererType2: o.ExternalReference = {
     name: 'RendererType2',
     moduleName: CORE,
-    // type only
-    runtime: null
+
   };
+  // type only
   static ViewDefinition: o.ExternalReference = {
     name: 'ɵViewDefinition',
     moduleName: CORE,
-    // type only
-    runtime: null
   };
-  static createComponentFactory:
-      o.ExternalReference = {name: 'ɵccf', moduleName: CORE, runtime: ɵccf};
+  static createComponentFactory: o.ExternalReference = {name: 'ɵccf', moduleName: CORE};
 }
 
 export function createTokenForReference(reference: any): CompileTokenMetadata {
diff --git a/packages/compiler/src/injectable.ts b/packages/compiler/src/injectable.ts
deleted file mode 100644
index b5dcb4ec2e..0000000000
--- a/packages/compiler/src/injectable.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * @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
- */
-
-/**
- * A replacement for @Injectable to be used in the compiler, so that
- * we don't try to evaluate the metadata in the compiler during AoT.
- * This decorator is enough to make the compiler work with the ReflectiveInjector though.
- * @Annotation
- */
-export function CompilerInjectable(): (data: any) => any {
-  return (x) => x;
-}
diff --git a/packages/compiler/src/jit/compiler.ts b/packages/compiler/src/jit/compiler.ts
index 4a3fbf9430..dfc508a4aa 100644
--- a/packages/compiler/src/jit/compiler.ts
+++ b/packages/compiler/src/jit/compiler.ts
@@ -6,11 +6,10 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Compiler, ComponentFactory, Inject, Injector, ModuleWithComponentFactories, NgModuleFactory, Type, ɵConsole as Console, ɵgetComponentViewDefinitionFactory as getComponentViewDefinitionFactory, ɵstringify as stringify} from '@angular/core';
-
-import {CompileDirectiveMetadata, CompileIdentifierMetadata, CompileNgModuleMetadata, CompileStylesheetMetadata, CompileTypeSummary, ProviderMeta, ProxyClass, createHostComponentMeta, identifierName, ngModuleJitUrl, sharedStylesheetJitUrl, templateJitUrl, templateSourceUrl} from '../compile_metadata';
+import {CompileDirectiveMetadata, CompileIdentifierMetadata, CompileNgModuleMetadata, CompileProviderMetadata, CompileStylesheetMetadata, CompileTypeSummary, ProviderMeta, ProxyClass, createHostComponentMeta, identifierName, ngModuleJitUrl, sharedStylesheetJitUrl, templateJitUrl, templateSourceUrl} from '../compile_metadata';
+import {CompileReflector} from '../compile_reflector';
 import {CompilerConfig} from '../config';
-import {CompilerInjectable} from '../injectable';
+import {Type} from '../core';
 import {CompileMetadataResolver} from '../metadata_resolver';
 import {NgModuleCompiler} from '../ng_module_compiler';
 import * as ir from '../output/output_ast';
@@ -19,10 +18,13 @@ import {jitStatements} from '../output/output_jit';
 import {CompiledStylesheet, StyleCompiler} from '../style_compiler';
 import {SummaryResolver} from '../summary_resolver';
 import {TemplateParser} from '../template_parser/template_parser';
-import {OutputContext, SyncAsync} from '../util';
+import {Console, OutputContext, SyncAsync, stringify} from '../util';
 import {ViewCompiler} from '../view_compiler/view_compiler';
 
-
+export interface ModuleWithComponentFactories {
+  ngModuleFactory: object;
+  componentFactories: object[];
+}
 
 /**
  * An internal module of the Angular compiler that begins with component types,
@@ -33,41 +35,38 @@ import {ViewCompiler} from '../view_compiler/view_compiler';
  * from a trusted source. Attacker-controlled data introduced by a template could expose your
  * application to XSS risks.  For more detail, see the [Security Guide](http://g.co/ng/security).
  */
-@CompilerInjectable()
-export class JitCompiler implements Compiler {
-  private _compiledTemplateCache = new Map<Type<any>, CompiledTemplate>();
-  private _compiledHostTemplateCache = new Map<Type<any>, CompiledTemplate>();
-  private _compiledDirectiveWrapperCache = new Map<Type<any>, Type<any>>();
-  private _compiledNgModuleCache = new Map<Type<any>, NgModuleFactory<any>>();
+export class JitCompiler {
+  private _compiledTemplateCache = new Map<Type, CompiledTemplate>();
+  private _compiledHostTemplateCache = new Map<Type, CompiledTemplate>();
+  private _compiledDirectiveWrapperCache = new Map<Type, Type>();
+  private _compiledNgModuleCache = new Map<Type, object>();
   private _sharedStylesheetCount = 0;
 
   constructor(
-      private _injector: Injector, private _metadataResolver: CompileMetadataResolver,
-      private _templateParser: TemplateParser, private _styleCompiler: StyleCompiler,
-      private _viewCompiler: ViewCompiler, private _ngModuleCompiler: NgModuleCompiler,
-      private _summaryResolver: SummaryResolver<Type<any>>, private _compilerConfig: CompilerConfig,
-      private _console: Console) {}
+      private _metadataResolver: CompileMetadataResolver, private _templateParser: TemplateParser,
+      private _styleCompiler: StyleCompiler, private _viewCompiler: ViewCompiler,
+      private _ngModuleCompiler: NgModuleCompiler, private _summaryResolver: SummaryResolver<Type>,
+      private _reflector: CompileReflector, private _compilerConfig: CompilerConfig,
+      private _console: Console,
+      private getExtraNgModuleProviders: (ngModule: any) => CompileProviderMetadata[]) {}
 
-  get injector(): Injector { return this._injector; }
-
-  compileModuleSync<T>(moduleType: Type<T>): NgModuleFactory<T> {
+  compileModuleSync(moduleType: Type): object {
     return SyncAsync.assertSync(this._compileModuleAndComponents(moduleType, true));
   }
 
-  compileModuleAsync<T>(moduleType: Type<T>): Promise<NgModuleFactory<T>> {
+  compileModuleAsync(moduleType: Type): Promise<object> {
     return Promise.resolve(this._compileModuleAndComponents(moduleType, false));
   }
 
-  compileModuleAndAllComponentsSync<T>(moduleType: Type<T>): ModuleWithComponentFactories<T> {
+  compileModuleAndAllComponentsSync(moduleType: Type): ModuleWithComponentFactories {
     return SyncAsync.assertSync(this._compileModuleAndAllComponents(moduleType, true));
   }
 
-  compileModuleAndAllComponentsAsync<T>(moduleType: Type<T>):
-      Promise<ModuleWithComponentFactories<T>> {
+  compileModuleAndAllComponentsAsync(moduleType: Type): Promise<ModuleWithComponentFactories> {
     return Promise.resolve(this._compileModuleAndAllComponents(moduleType, false));
   }
 
-  getNgContentSelectors(component: Type<any>): string[] {
+  getNgContentSelectors(component: Type): string[] {
     this._console.warn(
         'Compiler.getNgContentSelectors is deprecated. Use ComponentFactory.ngContentSelectors instead!');
     const template = this._compiledTemplateCache.get(component);
@@ -77,9 +76,9 @@ export class JitCompiler implements Compiler {
     return template.compMeta.template !.ngContentSelectors;
   }
 
-  getComponentFactory<T>(component: Type<T>): ComponentFactory<T> {
+  getComponentFactory(component: Type): object {
     const summary = this._metadataResolver.getDirectiveSummary(component);
-    return <ComponentFactory<T>>summary.componentFactory;
+    return summary.componentFactory as object;
   }
 
   loadAotSummaries(summaries: () => any[]) {
@@ -90,26 +89,28 @@ export class JitCompiler implements Compiler {
     });
   }
 
-  hasAotSummary(ref: Type<any>) { return !!this._summaryResolver.resolveSummary(ref); }
+  hasAotSummary(ref: Type) { return !!this._summaryResolver.resolveSummary(ref); }
 
   private _filterJitIdentifiers(ids: CompileIdentifierMetadata[]): any[] {
     return ids.map(mod => mod.reference).filter((ref) => !this.hasAotSummary(ref));
   }
 
-  private _compileModuleAndComponents<T>(moduleType: Type<T>, isSync: boolean):
-      SyncAsync<NgModuleFactory<T>> {
+  private _compileModuleAndComponents(moduleType: Type, isSync: boolean): SyncAsync<object> {
     return SyncAsync.then(this._loadModules(moduleType, isSync), () => {
       this._compileComponents(moduleType, null);
       return this._compileModule(moduleType);
     });
   }
 
-  private _compileModuleAndAllComponents<T>(moduleType: Type<T>, isSync: boolean):
-      SyncAsync<ModuleWithComponentFactories<T>> {
+  private _compileModuleAndAllComponents(moduleType: Type, isSync: boolean):
+      SyncAsync<ModuleWithComponentFactories> {
     return SyncAsync.then(this._loadModules(moduleType, isSync), () => {
-      const componentFactories: ComponentFactory<any>[] = [];
+      const componentFactories: object[] = [];
       this._compileComponents(moduleType, componentFactories);
-      return new ModuleWithComponentFactories(this._compileModule(moduleType), componentFactories);
+      return {
+        ngModuleFactory: this._compileModule(moduleType),
+        componentFactories: componentFactories
+      };
     });
   }
 
@@ -134,22 +135,16 @@ export class JitCompiler implements Compiler {
     return SyncAsync.all(loading);
   }
 
-  private _compileModule<T>(moduleType: Type<T>): NgModuleFactory<T> {
+  private _compileModule(moduleType: Type): object {
     let ngModuleFactory = this._compiledNgModuleCache.get(moduleType) !;
     if (!ngModuleFactory) {
       const moduleMeta = this._metadataResolver.getNgModuleMetadata(moduleType) !;
       // Always provide a bound Compiler
-      const extraProviders = [this._metadataResolver.getProviderMetadata(new ProviderMeta(
-          Compiler, {useFactory: () => new ModuleBoundCompiler(this, moduleMeta.type.reference)}))];
+      const extraProviders = this.getExtraNgModuleProviders(moduleMeta.type.reference);
       const outputCtx = createOutputContext();
       const compileResult = this._ngModuleCompiler.compile(outputCtx, moduleMeta, extraProviders);
-      if (!this._compilerConfig.useJit) {
-        ngModuleFactory =
-            interpretStatements(outputCtx.statements)[compileResult.ngModuleFactoryVar];
-      } else {
-        ngModuleFactory = jitStatements(
-            ngModuleJitUrl(moduleMeta), outputCtx.statements, )[compileResult.ngModuleFactoryVar];
-      }
+      ngModuleFactory = this._interpretOrJit(
+          ngModuleJitUrl(moduleMeta), outputCtx.statements)[compileResult.ngModuleFactoryVar];
       this._compiledNgModuleCache.set(moduleMeta.type.reference, ngModuleFactory);
     }
     return ngModuleFactory;
@@ -158,7 +153,7 @@ export class JitCompiler implements Compiler {
   /**
    * @internal
    */
-  _compileComponents(mainModule: Type<any>, allComponentFactories: ComponentFactory<any>[]|null) {
+  _compileComponents(mainModule: Type, allComponentFactories: object[]|null) {
     const ngModule = this._metadataResolver.getNgModuleMetadata(mainModule) !;
     const moduleByJitDirective = new Map<any, CompileNgModuleMetadata>();
     const templates = new Set<CompiledTemplate>();
@@ -175,7 +170,7 @@ export class JitCompiler implements Compiler {
             const template =
                 this._createCompiledHostTemplate(dirMeta.type.reference, localModuleMeta);
             templates.add(template);
-            allComponentFactories.push(<ComponentFactory<any>>dirMeta.componentFactory);
+            allComponentFactories.push(dirMeta.componentFactory as object);
           }
         }
       });
@@ -203,7 +198,7 @@ export class JitCompiler implements Compiler {
     templates.forEach((template) => this._compileTemplate(template));
   }
 
-  clearCacheFor(type: Type<any>) {
+  clearCacheFor(type: Type) {
     this._compiledNgModuleCache.delete(type);
     this._metadataResolver.clearCacheFor(type);
     this._compiledHostTemplateCache.delete(type);
@@ -220,7 +215,7 @@ export class JitCompiler implements Compiler {
     this._compiledNgModuleCache.clear();
   }
 
-  private _createCompiledHostTemplate(compType: Type<any>, ngModule: CompileNgModuleMetadata):
+  private _createCompiledHostTemplate(compType: Type, ngModule: CompileNgModuleMetadata):
       CompiledTemplate {
     if (!ngModule) {
       throw new Error(
@@ -231,10 +226,9 @@ export class JitCompiler implements Compiler {
       const compMeta = this._metadataResolver.getDirectiveMetadata(compType);
       assertComponent(compMeta);
 
-      const componentFactory = <ComponentFactory<any>>compMeta.componentFactory;
       const hostClass = this._metadataResolver.getHostComponentType(compType);
       const hostMeta = createHostComponentMeta(
-          hostClass, compMeta, <any>getComponentViewDefinitionFactory(componentFactory));
+          hostClass, compMeta, (compMeta.componentFactory as any).viewDefFactory);
       compiledTemplate =
           new CompiledTemplate(true, compMeta.type, hostMeta, ngModule, [compMeta.type]);
       this._compiledHostTemplateCache.set(compType, compiledTemplate);
@@ -280,13 +274,8 @@ export class JitCompiler implements Compiler {
     const compileResult = this._viewCompiler.compileComponent(
         outputContext, compMeta, parsedTemplate, ir.variable(componentStylesheet.stylesVar),
         usedPipes);
-    let evalResult: any;
-    if (!this._compilerConfig.useJit) {
-      evalResult = interpretStatements(outputContext.statements);
-    } else {
-      evalResult = jitStatements(
-          templateJitUrl(template.ngModule.type, template.compMeta), outputContext.statements);
-    }
+    const evalResult = this._interpretOrJit(
+        templateJitUrl(template.ngModule.type, template.compMeta), outputContext.statements);
     const viewClass = evalResult[compileResult.viewClassVar];
     const rendererType = evalResult[compileResult.rendererTypeVar];
     template.compiled(viewClass, rendererType);
@@ -306,12 +295,16 @@ export class JitCompiler implements Compiler {
       result: CompiledStylesheet,
       externalStylesheetsByModuleUrl: Map<string, CompiledStylesheet>): string[] {
     this._resolveStylesCompileResult(result, externalStylesheetsByModuleUrl);
+    return this._interpretOrJit(
+        sharedStylesheetJitUrl(result.meta, this._sharedStylesheetCount++),
+        result.outputCtx.statements)[result.stylesVar];
+  }
+
+  private _interpretOrJit(sourceUrl: string, statements: ir.Statement[]): any {
     if (!this._compilerConfig.useJit) {
-      return interpretStatements(result.outputCtx.statements)[result.stylesVar];
+      return interpretStatements(statements, this._reflector);
     } else {
-      return jitStatements(
-          sharedStylesheetJitUrl(result.meta, this._sharedStylesheetCount++),
-          result.outputCtx.statements)[result.stylesVar];
+      return jitStatements(sourceUrl, statements, this._reflector, this._compilerConfig.jitDevMode);
     }
   }
 }
@@ -342,46 +335,6 @@ function assertComponent(meta: CompileDirectiveMetadata) {
   }
 }
 
-/**
- * Implements `Compiler` by delegating to the JitCompiler using a known module.
- */
-class ModuleBoundCompiler implements Compiler {
-  constructor(private _delegate: JitCompiler, private _ngModule: Type<any>) {}
-
-  get _injector(): Injector { return this._delegate.injector; }
-
-  compileModuleSync<T>(moduleType: Type<T>): NgModuleFactory<T> {
-    return this._delegate.compileModuleSync(moduleType);
-  }
-
-  compileModuleAsync<T>(moduleType: Type<T>): Promise<NgModuleFactory<T>> {
-    return this._delegate.compileModuleAsync(moduleType);
-  }
-  compileModuleAndAllComponentsSync<T>(moduleType: Type<T>): ModuleWithComponentFactories<T> {
-    return this._delegate.compileModuleAndAllComponentsSync(moduleType);
-  }
-
-  compileModuleAndAllComponentsAsync<T>(moduleType: Type<T>):
-      Promise<ModuleWithComponentFactories<T>> {
-    return this._delegate.compileModuleAndAllComponentsAsync(moduleType);
-  }
-
-  getNgContentSelectors(component: Type<any>): string[] {
-    return this._delegate.getNgContentSelectors(component);
-  }
-
-  /**
-   * Clears all caches
-   */
-  clearCache(): void { this._delegate.clearCache(); }
-
-  /**
-   * Clears the cache for the given component/ngModule.
-   */
-  clearCacheFor(type: Type<any>) { this._delegate.clearCacheFor(type); }
-}
-
-
 function flattenSummaries(fn: () => any[], out: CompileTypeSummary[] = []): CompileTypeSummary[] {
   fn().forEach((entry) => {
     if (typeof entry === 'function') {
diff --git a/packages/compiler/src/jit/jit_reflector.ts b/packages/compiler/src/jit/jit_reflector.ts
deleted file mode 100644
index 2fd8a31c01..0000000000
--- a/packages/compiler/src/jit/jit_reflector.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-/**
- * @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 {Component, ɵReflectionCapabilities as ReflectionCapabilities, ɵstringify as stringify} from '@angular/core';
-
-import {CompileReflector} from '../compile_reflector';
-import * as o from '../output/output_ast';
-import {getUrlScheme} from '../url_resolver';
-import {MODULE_SUFFIX, ValueTransformer, noUndefined, syntaxError, visitValue} from '../util';
-
-export class JitReflector implements CompileReflector {
-  private reflectionCapabilities: ReflectionCapabilities;
-  constructor() { this.reflectionCapabilities = new ReflectionCapabilities(); }
-  componentModuleUrl(type: any, cmpMetadata: Component): string {
-    const moduleId = cmpMetadata.moduleId;
-
-    if (typeof moduleId === 'string') {
-      const scheme = getUrlScheme(moduleId);
-      return scheme ? moduleId : `package:${moduleId}${MODULE_SUFFIX}`;
-    } else if (moduleId !== null && moduleId !== void 0) {
-      throw syntaxError(
-          `moduleId should be a string in "${stringify(type)}". See https://goo.gl/wIDDiL for more information.\n` +
-          `If you're using Webpack you should inline the template and the styles, see https://goo.gl/X2J8zc.`);
-    }
-
-    return `./${stringify(type)}`;
-  }
-  parameters(typeOrFunc: /*Type*/ any): any[][] {
-    return this.reflectionCapabilities.parameters(typeOrFunc);
-  }
-  annotations(typeOrFunc: /*Type*/ any): any[] {
-    return this.reflectionCapabilities.annotations(typeOrFunc);
-  }
-  propMetadata(typeOrFunc: /*Type*/ any): {[key: string]: any[]} {
-    return this.reflectionCapabilities.propMetadata(typeOrFunc);
-  }
-  hasLifecycleHook(type: any, lcProperty: string): boolean {
-    return this.reflectionCapabilities.hasLifecycleHook(type, lcProperty);
-  }
-  resolveExternalReference(ref: o.ExternalReference): any { return ref.runtime; }
-}
\ No newline at end of file
diff --git a/packages/compiler/src/metadata_resolver.ts b/packages/compiler/src/metadata_resolver.ts
index 5a1a9e3f25..3392966529 100644
--- a/packages/compiler/src/metadata_resolver.ts
+++ b/packages/compiler/src/metadata_resolver.ts
@@ -6,27 +6,26 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Attribute, ChangeDetectionStrategy, Component, ComponentFactory, Directive, Host, Inject, Injectable, InjectionToken, ModuleWithProviders, Optional, Provider, Query, RendererType2, SchemaMetadata, Self, SkipSelf, Type, resolveForwardRef, ɵConsole as Console, ɵERROR_COMPONENT_TYPE, ɵccf as createComponentFactory, ɵisPromise as isPromise, ɵstringify as stringify} from '@angular/core';
-
 import {StaticSymbol, StaticSymbolCache} from './aot/static_symbol';
 import {ngfactoryFilePath} from './aot/util';
 import {assertArrayOfStrings, assertInterpolationSymbols} from './assertions';
 import * as cpl from './compile_metadata';
 import {CompileReflector} from './compile_reflector';
 import {CompilerConfig} from './config';
+import {ChangeDetectionStrategy, Component, Directive, ModuleWithProviders, Provider, Query, SchemaMetadata, Type, createAttribute, createComponent, createHost, createInject, createInjectable, createInjectionToken, createOptional, createSelf, createSkipSelf} from './core';
 import {DirectiveNormalizer} from './directive_normalizer';
 import {DirectiveResolver} from './directive_resolver';
 import {Identifiers} from './identifiers';
-import {CompilerInjectable} from './injectable';
 import {getAllLifecycleHooks} from './lifecycle_reflector';
 import {NgModuleResolver} from './ng_module_resolver';
 import {PipeResolver} from './pipe_resolver';
 import {ElementSchemaRegistry} from './schema/element_schema_registry';
 import {SummaryResolver} from './summary_resolver';
-import {SyncAsync, ValueTransformer, noUndefined, syntaxError, visitValue} from './util';
+import {Console, SyncAsync, ValueTransformer, isPromise, noUndefined, resolveForwardRef, stringify, syntaxError, visitValue} from './util';
 
 export type ErrorCollector = (error: any, type?: any) => void;
-export const ERROR_COLLECTOR_TOKEN = new InjectionToken('ErrorCollector');
+
+export const ERROR_COMPONENT_TYPE = 'ngComponentType';
 
 // Design notes:
 // - don't lazily create metadata:
@@ -35,15 +34,14 @@ export const ERROR_COLLECTOR_TOKEN = new InjectionToken('ErrorCollector');
 //   But we want to report errors even when the async work is
 //   not required to check that the user would have been able
 //   to wait correctly.
-@CompilerInjectable()
 export class CompileMetadataResolver {
   private _nonNormalizedDirectiveCache =
-      new Map<Type<any>, {annotation: Directive, metadata: cpl.CompileDirectiveMetadata}>();
-  private _directiveCache = new Map<Type<any>, cpl.CompileDirectiveMetadata>();
-  private _summaryCache = new Map<Type<any>, cpl.CompileTypeSummary|null>();
-  private _pipeCache = new Map<Type<any>, cpl.CompilePipeMetadata>();
-  private _ngModuleCache = new Map<Type<any>, cpl.CompileNgModuleMetadata>();
-  private _ngModuleOfTypes = new Map<Type<any>, Type<any>>();
+      new Map<Type, {annotation: Directive, metadata: cpl.CompileDirectiveMetadata}>();
+  private _directiveCache = new Map<Type, cpl.CompileDirectiveMetadata>();
+  private _summaryCache = new Map<Type, cpl.CompileTypeSummary|null>();
+  private _pipeCache = new Map<Type, cpl.CompilePipeMetadata>();
+  private _ngModuleCache = new Map<Type, cpl.CompileNgModuleMetadata>();
+  private _ngModuleOfTypes = new Map<Type, Type>();
 
   constructor(
       private _config: CompilerConfig, private _ngModuleResolver: NgModuleResolver,
@@ -51,13 +49,12 @@ export class CompileMetadataResolver {
       private _summaryResolver: SummaryResolver<any>,
       private _schemaRegistry: ElementSchemaRegistry,
       private _directiveNormalizer: DirectiveNormalizer, private _console: Console,
-      @Optional() private _staticSymbolCache: StaticSymbolCache,
-      private _reflector: CompileReflector,
-      @Optional() @Inject(ERROR_COLLECTOR_TOKEN) private _errorCollector?: ErrorCollector) {}
+      private _staticSymbolCache: StaticSymbolCache, private _reflector: CompileReflector,
+      private _errorCollector?: ErrorCollector) {}
 
   getReflector(): CompileReflector { return this._reflector; }
 
-  clearCacheFor(type: Type<any>) {
+  clearCacheFor(type: Type) {
     const dirMeta = this._directiveCache.get(type);
     this._directiveCache.delete(type);
     this._nonNormalizedDirectiveCache.delete(type);
@@ -115,7 +112,7 @@ export class CompileMetadataResolver {
     return this.getGeneratedClass(dirType, cpl.hostViewClassName(dirType));
   }
 
-  getHostComponentType(dirType: any): StaticSymbol|Type<any> {
+  getHostComponentType(dirType: any): StaticSymbol|Type {
     const name = `${cpl.identifierName({reference: dirType})}_Host`;
     if (dirType instanceof StaticSymbol) {
       return this._staticSymbolCache.get(dirType.filePath, name);
@@ -127,7 +124,7 @@ export class CompileMetadataResolver {
     }
   }
 
-  private getRendererType(dirType: any): StaticSymbol|RendererType2 {
+  private getRendererType(dirType: any): StaticSymbol|object {
     if (dirType instanceof StaticSymbol) {
       return this._staticSymbolCache.get(
           ngfactoryFilePath(dirType.filePath), cpl.rendererTypeName(dirType));
@@ -140,7 +137,7 @@ export class CompileMetadataResolver {
 
   private getComponentFactory(
       selector: string, dirType: any, inputs: {[key: string]: string}|null,
-      outputs: {[key: string]: string}): StaticSymbol|ComponentFactory<any> {
+      outputs: {[key: string]: string}): StaticSymbol|object {
     if (dirType instanceof StaticSymbol) {
       return this._staticSymbolCache.get(
           ngfactoryFilePath(dirType.filePath), cpl.componentFactoryName(dirType));
@@ -148,14 +145,15 @@ export class CompileMetadataResolver {
       const hostView = this.getHostComponentViewClass(dirType);
       // Note: ngContentSelectors will be filled later once the template is
       // loaded.
+      const createComponentFactory =
+          this._reflector.resolveExternalReference(Identifiers.createComponentFactory);
       return createComponentFactory(selector, dirType, <any>hostView, inputs, outputs, []);
     }
   }
 
-  private initComponentFactory(
-      factory: StaticSymbol|ComponentFactory<any>, ngContentSelectors: string[]) {
+  private initComponentFactory(factory: StaticSymbol|object, ngContentSelectors: string[]) {
     if (!(factory instanceof StaticSymbol)) {
-      factory.ngContentSelectors.push(...ngContentSelectors);
+      (factory as any).ngContentSelectors.push(...ngContentSelectors);
     }
   }
 
@@ -250,23 +248,24 @@ export class CompileMetadataResolver {
     }
     let nonNormalizedTemplateMetadata: cpl.CompileTemplateMetadata = undefined !;
 
-    if (dirMeta instanceof Component) {
+    if (createComponent.isTypeOf(dirMeta)) {
       // component
-      assertArrayOfStrings('styles', dirMeta.styles);
-      assertArrayOfStrings('styleUrls', dirMeta.styleUrls);
-      assertInterpolationSymbols('interpolation', dirMeta.interpolation);
+      const compMeta = dirMeta as Component;
+      assertArrayOfStrings('styles', compMeta.styles);
+      assertArrayOfStrings('styleUrls', compMeta.styleUrls);
+      assertInterpolationSymbols('interpolation', compMeta.interpolation);
 
-      const animations = dirMeta.animations;
+      const animations = compMeta.animations;
 
       nonNormalizedTemplateMetadata = new cpl.CompileTemplateMetadata({
-        encapsulation: noUndefined(dirMeta.encapsulation),
-        template: noUndefined(dirMeta.template),
-        templateUrl: noUndefined(dirMeta.templateUrl),
-        styles: dirMeta.styles || [],
-        styleUrls: dirMeta.styleUrls || [],
+        encapsulation: noUndefined(compMeta.encapsulation),
+        template: noUndefined(compMeta.template),
+        templateUrl: noUndefined(compMeta.templateUrl),
+        styles: compMeta.styles || [],
+        styleUrls: compMeta.styleUrls || [],
         animations: animations || [],
-        interpolation: noUndefined(dirMeta.interpolation),
-        isInline: !!dirMeta.template,
+        interpolation: noUndefined(compMeta.interpolation),
+        isInline: !!compMeta.template,
         externalStylesheets: [],
         ngContentSelectors: [],
         preserveWhitespaces: noUndefined(dirMeta.preserveWhitespaces),
@@ -278,16 +277,17 @@ export class CompileMetadataResolver {
     let entryComponentMetadata: cpl.CompileEntryComponentMetadata[] = [];
     let selector = dirMeta.selector;
 
-    if (dirMeta instanceof Component) {
+    if (createComponent.isTypeOf(dirMeta)) {
       // Component
-      changeDetectionStrategy = dirMeta.changeDetection !;
-      if (dirMeta.viewProviders) {
+      const compMeta = dirMeta as Component;
+      changeDetectionStrategy = compMeta.changeDetection !;
+      if (compMeta.viewProviders) {
         viewProviders = this._getProvidersMetadata(
-            dirMeta.viewProviders, entryComponentMetadata,
+            compMeta.viewProviders, entryComponentMetadata,
             `viewProviders for "${stringifyType(directiveType)}"`, [], directiveType);
       }
-      if (dirMeta.entryComponents) {
-        entryComponentMetadata = flattenAndDedupeArray(dirMeta.entryComponents)
+      if (compMeta.entryComponents) {
+        entryComponentMetadata = flattenAndDedupeArray(compMeta.entryComponents)
                                      .map((type) => this._getEntryComponentMetadata(type) !)
                                      .concat(entryComponentMetadata);
       }
@@ -444,7 +444,7 @@ export class CompileMetadataResolver {
 
     if (meta.imports) {
       flattenAndDedupeArray(meta.imports).forEach((importedType) => {
-        let importedModuleType: Type<any> = undefined !;
+        let importedModuleType: Type = undefined !;
         if (isValidType(importedType)) {
           importedModuleType = importedType;
         } else if (importedType && importedType.ngModule) {
@@ -603,7 +603,7 @@ export class CompileMetadataResolver {
     return compileMeta;
   }
 
-  private _checkSelfImport(moduleType: Type<any>, importedModuleType: Type<any>): boolean {
+  private _checkSelfImport(moduleType: Type, importedModuleType: Type): boolean {
     if (moduleType === importedModuleType) {
       this._reportError(
           syntaxError(`'${stringifyType(moduleType)}' module can't import itself`), moduleType);
@@ -612,7 +612,7 @@ export class CompileMetadataResolver {
     return false;
   }
 
-  private _getTypeDescriptor(type: Type<any>): string {
+  private _getTypeDescriptor(type: Type): string {
     if (this.isDirective(type)) {
       return 'directive';
     }
@@ -633,7 +633,7 @@ export class CompileMetadataResolver {
   }
 
 
-  private _addTypeToModule(type: Type<any>, moduleType: Type<any>) {
+  private _addTypeToModule(type: Type, moduleType: Type) {
     const oldModule = this._ngModuleOfTypes.get(type);
     if (oldModule && oldModule !== moduleType) {
       this._reportError(
@@ -685,16 +685,14 @@ export class CompileMetadataResolver {
     return result;
   }
 
-  private _getIdentifierMetadata(type: Type<any>): cpl.CompileIdentifierMetadata {
+  private _getIdentifierMetadata(type: Type): cpl.CompileIdentifierMetadata {
     type = resolveForwardRef(type);
     return {reference: type};
   }
 
   isInjectable(type: any): boolean {
     const annotations = this._reflector.annotations(type);
-    // Note: We need an exact check here as @Component / @Directive / ... inherit
-    // from @CompilerInjectable!
-    return annotations.some(ann => ann.constructor === Injectable);
+    return annotations.some(ann => createInjectable.isTypeOf(ann));
   }
 
   getInjectableSummary(type: any): cpl.CompileTypeSummary {
@@ -704,7 +702,7 @@ export class CompileMetadataResolver {
     };
   }
 
-  private _getInjectableMetadata(type: Type<any>, dependencies: any[]|null = null):
+  private _getInjectableMetadata(type: Type, dependencies: any[]|null = null):
       cpl.CompileTypeMetadata {
     const typeSummary = this._loadSummary(type, cpl.CompileSummaryKind.Injectable);
     if (typeSummary) {
@@ -713,9 +711,8 @@ export class CompileMetadataResolver {
     return this._getTypeMetadata(type, dependencies);
   }
 
-  private _getTypeMetadata(
-      type: Type<any>, dependencies: any[]|null = null,
-      throwOnUnknownDeps = true): cpl.CompileTypeMetadata {
+  private _getTypeMetadata(type: Type, dependencies: any[]|null = null, throwOnUnknownDeps = true):
+      cpl.CompileTypeMetadata {
     const identifier = this._getIdentifierMetadata(type);
     return {
       reference: identifier.reference,
@@ -780,7 +777,7 @@ export class CompileMetadataResolver {
   }
 
   private _getDependenciesMetadata(
-      typeOrFunc: Type<any>|Function, dependencies: any[]|null,
+      typeOrFunc: Type|Function, dependencies: any[]|null,
       throwOnUnknownDeps = true): cpl.CompileDiDependencyMetadata[] {
     let hasUnknownDeps = false;
     const params = dependencies || this._reflector.parameters(typeOrFunc) || [];
@@ -794,20 +791,21 @@ export class CompileMetadataResolver {
       let token: any = null;
       if (Array.isArray(param)) {
         param.forEach((paramEntry) => {
-          if (paramEntry instanceof Host) {
+          if (createHost.isTypeOf(paramEntry)) {
             isHost = true;
-          } else if (paramEntry instanceof Self) {
+          } else if (createSelf.isTypeOf(paramEntry)) {
             isSelf = true;
-          } else if (paramEntry instanceof SkipSelf) {
+          } else if (createSkipSelf.isTypeOf(paramEntry)) {
             isSkipSelf = true;
-          } else if (paramEntry instanceof Optional) {
+          } else if (createOptional.isTypeOf(paramEntry)) {
             isOptional = true;
-          } else if (paramEntry instanceof Attribute) {
+          } else if (createAttribute.isTypeOf(paramEntry)) {
             isAttribute = true;
             token = paramEntry.attributeName;
-          } else if (paramEntry instanceof Inject) {
+          } else if (createInject.isTypeOf(paramEntry)) {
             token = paramEntry.token;
-          } else if (paramEntry instanceof InjectionToken) {
+          } else if (
+              createInjectionToken.isTypeOf(paramEntry) || paramEntry instanceof StaticSymbol) {
             token = paramEntry;
           } else if (isValidType(paramEntry) && token == null) {
             token = paramEntry;
@@ -995,7 +993,7 @@ export class CompileMetadataResolver {
 
   private _getQueriesMetadata(
       queries: {[key: string]: Query}, isViewQuery: boolean,
-      directiveType: Type<any>): cpl.CompileQueryMetadata[] {
+      directiveType: Type): cpl.CompileQueryMetadata[] {
     const res: cpl.CompileQueryMetadata[] = [];
 
     Object.keys(queries).forEach((propertyName: string) => {
@@ -1010,7 +1008,7 @@ export class CompileMetadataResolver {
 
   private _queryVarBindings(selector: any): string[] { return selector.split(/\s*,\s*/); }
 
-  private _getQueryMetadata(q: Query, propertyName: string, typeOrFunc: Type<any>|Function):
+  private _getQueryMetadata(q: Query, propertyName: string, typeOrFunc: Type|Function):
       cpl.CompileQueryMetadata {
     let selectors: cpl.CompileTokenMetadata[];
     if (typeof q.selector === 'string') {
@@ -1098,9 +1096,9 @@ function stringifyType(type: any): string {
 /**
  * Indicates that a component is still being loaded in a synchronous compile.
  */
-function componentStillLoadingError(compType: Type<any>) {
+function componentStillLoadingError(compType: Type) {
   const error =
       Error(`Can't compile synchronously as ${stringify(compType)} is still being loaded!`);
-  (error as any)[ɵERROR_COMPONENT_TYPE] = compType;
+  (error as any)[ERROR_COMPONENT_TYPE] = compType;
   return error;
 }
diff --git a/packages/compiler/src/ml_parser/html_parser.ts b/packages/compiler/src/ml_parser/html_parser.ts
index ad69f6c2d9..60702f25b0 100644
--- a/packages/compiler/src/ml_parser/html_parser.ts
+++ b/packages/compiler/src/ml_parser/html_parser.ts
@@ -6,15 +6,12 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {CompilerInjectable} from '../injectable';
-
 import {getHtmlTagDefinition} from './html_tags';
 import {DEFAULT_INTERPOLATION_CONFIG, InterpolationConfig} from './interpolation_config';
 import {ParseTreeResult, Parser} from './parser';
 
 export {ParseTreeResult, TreeError} from './parser';
 
-@CompilerInjectable()
 export class HtmlParser extends Parser {
   constructor() { super(getHtmlTagDefinition); }
 
diff --git a/packages/compiler/src/ng_module_compiler.ts b/packages/compiler/src/ng_module_compiler.ts
index 9b576f1a25..70ba3f6f52 100644
--- a/packages/compiler/src/ng_module_compiler.ts
+++ b/packages/compiler/src/ng_module_compiler.ts
@@ -6,12 +6,10 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {ɵNodeFlags as NodeFlags} from '@angular/core';
-
 import {CompileNgModuleMetadata, CompileProviderMetadata, identifierName} from './compile_metadata';
 import {CompileReflector} from './compile_reflector';
+import {NodeFlags} from './core';
 import {Identifiers} from './identifiers';
-import {CompilerInjectable} from './injectable';
 import * as o from './output/output_ast';
 import {typeSourceSpan} from './parse_util';
 import {NgModuleProviderAnalyzer} from './provider_analyzer';
@@ -24,7 +22,6 @@ export class NgModuleCompileResult {
 
 const LOG_VAR = o.variable('_l');
 
-@CompilerInjectable()
 export class NgModuleCompiler {
   constructor(private reflector: CompileReflector) {}
   compile(
diff --git a/packages/compiler/src/ng_module_resolver.ts b/packages/compiler/src/ng_module_resolver.ts
index 59472eeaf7..6996f376a1 100644
--- a/packages/compiler/src/ng_module_resolver.ts
+++ b/packages/compiler/src/ng_module_resolver.ts
@@ -6,27 +6,23 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {NgModule, Type, ɵstringify as stringify} from '@angular/core';
-
 import {CompileReflector} from './compile_reflector';
+import {NgModule, Type, createNgModule} from './core';
 import {findLast} from './directive_resolver';
-import {CompilerInjectable} from './injectable';
+import {stringify} from './util';
 
-function _isNgModuleMetadata(obj: any): obj is NgModule {
-  return obj instanceof NgModule;
-}
 
 /**
  * Resolves types to {@link NgModule}.
  */
-@CompilerInjectable()
 export class NgModuleResolver {
   constructor(private _reflector: CompileReflector) {}
 
-  isNgModule(type: any) { return this._reflector.annotations(type).some(_isNgModuleMetadata); }
+  isNgModule(type: any) { return this._reflector.annotations(type).some(createNgModule.isTypeOf); }
 
-  resolve(type: Type<any>, throwIfNotFound = true): NgModule|null {
-    const ngModuleMeta: NgModule = findLast(this._reflector.annotations(type), _isNgModuleMetadata);
+  resolve(type: Type, throwIfNotFound = true): NgModule|null {
+    const ngModuleMeta: NgModule =
+        findLast(this._reflector.annotations(type), createNgModule.isTypeOf);
 
     if (ngModuleMeta) {
       return ngModuleMeta;
diff --git a/packages/compiler/src/output/output_ast.ts b/packages/compiler/src/output/output_ast.ts
index d98f67f4d1..4f36042f0d 100644
--- a/packages/compiler/src/output/output_ast.ts
+++ b/packages/compiler/src/output/output_ast.ts
@@ -353,7 +353,8 @@ export class ExternalExpr extends Expression {
 }
 
 export class ExternalReference {
-  constructor(public moduleName: string|null, public name: string|null, public runtime: any|null) {}
+  constructor(public moduleName: string|null, public name: string|null, public runtime?: any|null) {
+  }
 }
 
 export class ConditionalExpr extends Expression {
diff --git a/packages/compiler/src/output/output_interpreter.ts b/packages/compiler/src/output/output_interpreter.ts
index 4339c78062..3f2b134a84 100644
--- a/packages/compiler/src/output/output_interpreter.ts
+++ b/packages/compiler/src/output/output_interpreter.ts
@@ -8,12 +8,15 @@
 
 
 
+import {CompileReflector} from '../compile_reflector';
+
 import * as o from './output_ast';
 import {debugOutputAstAsTypeScript} from './ts_emitter';
 
-export function interpretStatements(statements: o.Statement[]): {[key: string]: any} {
+export function interpretStatements(
+    statements: o.Statement[], reflector: CompileReflector): {[key: string]: any} {
   const ctx = new _ExecutionContext(null, null, null, new Map<string, any>());
-  const visitor = new StatementInterpreter();
+  const visitor = new StatementInterpreter(reflector);
   visitor.visitAllStatements(statements, ctx);
   const result: {[key: string]: any} = {};
   ctx.exports.forEach((exportName) => { result[exportName] = ctx.vars.get(exportName); });
@@ -88,6 +91,7 @@ function createDynamicClass(
 }
 
 class StatementInterpreter implements o.StatementVisitor, o.ExpressionVisitor {
+  constructor(private reflector: CompileReflector) {}
   debugAst(ast: o.Expression|o.Statement|o.Type): string { return debugOutputAstAsTypeScript(ast); }
 
   visitDeclareVarStmt(stmt: o.DeclareVarStmt, ctx: _ExecutionContext): any {
@@ -227,7 +231,9 @@ class StatementInterpreter implements o.StatementVisitor, o.ExpressionVisitor {
     return new clazz(...args);
   }
   visitLiteralExpr(ast: o.LiteralExpr, ctx: _ExecutionContext): any { return ast.value; }
-  visitExternalExpr(ast: o.ExternalExpr, ctx: _ExecutionContext): any { return ast.value.runtime; }
+  visitExternalExpr(ast: o.ExternalExpr, ctx: _ExecutionContext): any {
+    return this.reflector.resolveExternalReference(ast.value);
+  }
   visitConditionalExpr(ast: o.ConditionalExpr, ctx: _ExecutionContext): any {
     if (ast.condition.visitExpression(this, ctx)) {
       return ast.trueCase.visitExpression(this, ctx);
diff --git a/packages/compiler/src/output/output_jit.ts b/packages/compiler/src/output/output_jit.ts
index 0135be2096..1239c9280c 100644
--- a/packages/compiler/src/output/output_jit.ts
+++ b/packages/compiler/src/output/output_jit.ts
@@ -6,15 +6,16 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {isDevMode} from '@angular/core';
 import {identifierName} from '../compile_metadata';
+import {CompileReflector} from '../compile_reflector';
 
 import {EmitterVisitorContext} from './abstract_emitter';
 import {AbstractJsEmitterVisitor} from './abstract_js_emitter';
 import * as o from './output_ast';
 
 function evalExpression(
-    sourceUrl: string, ctx: EmitterVisitorContext, vars: {[key: string]: any}): any {
+    sourceUrl: string, ctx: EmitterVisitorContext, vars: {[key: string]: any},
+    createSourceMap: boolean): any {
   let fnBody = `${ctx.toSource()}\n//# sourceURL=${sourceUrl}`;
   const fnArgNames: string[] = [];
   const fnArgValues: any[] = [];
@@ -22,7 +23,7 @@ function evalExpression(
     fnArgNames.push(argName);
     fnArgValues.push(vars[argName]);
   }
-  if (isDevMode()) {
+  if (createSourceMap) {
     // using `new Function(...)` generates a header, 1 line of no arguments, 2 lines otherwise
     // E.g. ```
     // function anonymous(a,b,c
@@ -35,12 +36,14 @@ function evalExpression(
   return new Function(...fnArgNames.concat(fnBody))(...fnArgValues);
 }
 
-export function jitStatements(sourceUrl: string, statements: o.Statement[]): {[key: string]: any} {
-  const converter = new JitEmitterVisitor();
+export function jitStatements(
+    sourceUrl: string, statements: o.Statement[], reflector: CompileReflector,
+    createSourceMaps: boolean): {[key: string]: any} {
+  const converter = new JitEmitterVisitor(reflector);
   const ctx = EmitterVisitorContext.createRoot();
   converter.visitAllStatements(statements, ctx);
   converter.createReturnStmt(ctx);
-  return evalExpression(sourceUrl, ctx, converter.getArgs());
+  return evalExpression(sourceUrl, ctx, converter.getArgs(), createSourceMaps);
 }
 
 export class JitEmitterVisitor extends AbstractJsEmitterVisitor {
@@ -48,6 +51,8 @@ export class JitEmitterVisitor extends AbstractJsEmitterVisitor {
   private _evalArgValues: any[] = [];
   private _evalExportedVars: string[] = [];
 
+  constructor(private reflector: CompileReflector) { super(); }
+
   createReturnStmt(ctx: EmitterVisitorContext) {
     const stmt = new o.ReturnStatement(new o.LiteralMapExpr(this._evalExportedVars.map(
         resultVar => new o.LiteralMapEntry(resultVar, o.variable(resultVar), false))));
@@ -63,12 +68,12 @@ export class JitEmitterVisitor extends AbstractJsEmitterVisitor {
   }
 
   visitExternalExpr(ast: o.ExternalExpr, ctx: EmitterVisitorContext): any {
-    const value = ast.value.runtime;
+    const value = this.reflector.resolveExternalReference(ast.value);
     let id = this._evalArgValues.indexOf(value);
     if (id === -1) {
       id = this._evalArgValues.length;
       this._evalArgValues.push(value);
-      const name = identifierName({reference: ast.value.runtime}) || 'val';
+      const name = identifierName({reference: value}) || 'val';
       this._evalArgNames.push(`jit_${name}_${id}`);
     }
     ctx.print(ast, this._evalArgNames[id]);
diff --git a/packages/compiler/src/pipe_resolver.ts b/packages/compiler/src/pipe_resolver.ts
index a7f36ee129..4f15e9a3ee 100644
--- a/packages/compiler/src/pipe_resolver.ts
+++ b/packages/compiler/src/pipe_resolver.ts
@@ -6,15 +6,10 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Pipe, Type, resolveForwardRef, ɵstringify as stringify} from '@angular/core';
-
 import {CompileReflector} from './compile_reflector';
+import {Pipe, Type, createPipe} from './core';
 import {findLast} from './directive_resolver';
-import {CompilerInjectable} from './injectable';
-
-function _isPipeMetadata(type: any): boolean {
-  return type instanceof Pipe;
-}
+import {resolveForwardRef, stringify} from './util';
 
 /**
  * Resolve a `Type` for {@link Pipe}.
@@ -23,22 +18,21 @@ function _isPipeMetadata(type: any): boolean {
  *
  * See {@link Compiler}
  */
-@CompilerInjectable()
 export class PipeResolver {
   constructor(private _reflector: CompileReflector) {}
 
-  isPipe(type: Type<any>) {
+  isPipe(type: Type) {
     const typeMetadata = this._reflector.annotations(resolveForwardRef(type));
-    return typeMetadata && typeMetadata.some(_isPipeMetadata);
+    return typeMetadata && typeMetadata.some(createPipe.isTypeOf);
   }
 
   /**
    * Return {@link Pipe} for a given `Type`.
    */
-  resolve(type: Type<any>, throwIfNotFound = true): Pipe|null {
+  resolve(type: Type, throwIfNotFound = true): Pipe|null {
     const metas = this._reflector.annotations(resolveForwardRef(type));
     if (metas) {
-      const annotation = findLast(metas, _isPipeMetadata);
+      const annotation = findLast(metas, createPipe.isTypeOf);
       if (annotation) {
         return annotation;
       }
diff --git a/packages/compiler/src/schema/dom_element_schema_registry.ts b/packages/compiler/src/schema/dom_element_schema_registry.ts
index f5961ebd82..7382670a94 100644
--- a/packages/compiler/src/schema/dom_element_schema_registry.ts
+++ b/packages/compiler/src/schema/dom_element_schema_registry.ts
@@ -6,9 +6,8 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA, SchemaMetadata, SecurityContext} from '@angular/core';
+import {CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA, SchemaMetadata, SecurityContext} from '../core';
 
-import {CompilerInjectable} from '../injectable';
 import {isNgContainer, isNgContent} from '../ml_parser/tags';
 import {dashCaseToCamelCase} from '../util';
 
@@ -241,7 +240,6 @@ const _ATTR_TO_PROP: {[name: string]: string} = {
   'tabindex': 'tabIndex',
 };
 
-@CompilerInjectable()
 export class DomElementSchemaRegistry extends ElementSchemaRegistry {
   private _schema: {[element: string]: {[property: string]: string}} = {};
 
diff --git a/packages/compiler/src/schema/dom_security_schema.ts b/packages/compiler/src/schema/dom_security_schema.ts
index 81c3ed888c..0843a95840 100644
--- a/packages/compiler/src/schema/dom_security_schema.ts
+++ b/packages/compiler/src/schema/dom_security_schema.ts
@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {SecurityContext} from '@angular/core';
+import {SecurityContext} from '../core';
 
 // =================================================================================================
 // =================================================================================================
diff --git a/packages/compiler/src/schema/element_schema_registry.ts b/packages/compiler/src/schema/element_schema_registry.ts
index 3b8727b0b7..ce856f2ece 100644
--- a/packages/compiler/src/schema/element_schema_registry.ts
+++ b/packages/compiler/src/schema/element_schema_registry.ts
@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {SchemaMetadata, SecurityContext} from '@angular/core';
+import {SchemaMetadata, SecurityContext} from '../core';
 
 export abstract class ElementSchemaRegistry {
   abstract hasProperty(tagName: string, propName: string, schemaMetas: SchemaMetadata[]): boolean;
diff --git a/packages/compiler/src/style_compiler.ts b/packages/compiler/src/style_compiler.ts
index 71c84d25dc..59010f393e 100644
--- a/packages/compiler/src/style_compiler.ts
+++ b/packages/compiler/src/style_compiler.ts
@@ -6,10 +6,8 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {ViewEncapsulation} from '@angular/core';
-
 import {CompileDirectiveMetadata, CompileIdentifierMetadata, CompileStylesheetMetadata, identifierModuleUrl, identifierName} from './compile_metadata';
-import {CompilerInjectable} from './injectable';
+import {ViewEncapsulation} from './core';
 import * as o from './output/output_ast';
 import {ShadowCss} from './shadow_css';
 import {UrlResolver} from './url_resolver';
@@ -31,7 +29,6 @@ export class CompiledStylesheet {
       public meta: CompileStylesheetMetadata) {}
 }
 
-@CompilerInjectable()
 export class StyleCompiler {
   private _shadowCss: ShadowCss = new ShadowCss();
 
diff --git a/packages/compiler/src/summary_resolver.ts b/packages/compiler/src/summary_resolver.ts
index b500910fe7..1c7cd7a166 100644
--- a/packages/compiler/src/summary_resolver.ts
+++ b/packages/compiler/src/summary_resolver.ts
@@ -5,9 +5,8 @@
  * 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 {Type} from '@angular/core';
 import {CompileTypeSummary} from './compile_metadata';
-import {CompilerInjectable} from './injectable';
+import {Type} from './core';
 
 export interface Summary<T> {
   symbol: T;
@@ -25,17 +24,16 @@ export abstract class SummaryResolver<T> {
   abstract addSummary(summary: Summary<T>): void;
 }
 
-@CompilerInjectable()
-export class JitSummaryResolver implements SummaryResolver<Type<any>> {
-  private _summaries = new Map<Type<any>, Summary<Type<any>>>();
+export class JitSummaryResolver implements SummaryResolver<Type> {
+  private _summaries = new Map<Type, Summary<Type>>();
 
   isLibraryFile(): boolean { return false; };
   toSummaryFileName(fileName: string): string { return fileName; }
   fromSummaryFileName(fileName: string): string { return fileName; }
-  resolveSummary(reference: Type<any>): Summary<Type<any>>|null {
+  resolveSummary(reference: Type): Summary<Type>|null {
     return this._summaries.get(reference) || null;
   };
-  getSymbolsOf(): Type<any>[] { return []; }
-  getImportAs(reference: Type<any>): Type<any> { return reference; }
-  addSummary(summary: Summary<Type<any>>) { this._summaries.set(summary.symbol, summary); };
+  getSymbolsOf(): Type[] { return []; }
+  getImportAs(reference: Type): Type { return reference; }
+  addSummary(summary: Summary<Type>) { this._summaries.set(summary.symbol, summary); };
 }
diff --git a/packages/compiler/src/template_parser/binding_parser.ts b/packages/compiler/src/template_parser/binding_parser.ts
index b44bcbf8bf..1d57173d55 100644
--- a/packages/compiler/src/template_parser/binding_parser.ts
+++ b/packages/compiler/src/template_parser/binding_parser.ts
@@ -6,9 +6,8 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {SecurityContext} from '@angular/core';
-
 import {CompileDirectiveSummary, CompilePipeSummary} from '../compile_metadata';
+import {SecurityContext} from '../core';
 import {ASTWithSource, BindingPipe, EmptyExpr, ParserError, RecursiveAstVisitor, TemplateBinding} from '../expression_parser/ast';
 import {Parser} from '../expression_parser/parser';
 import {InterpolationConfig} from '../ml_parser/interpolation_config';
diff --git a/packages/compiler/src/template_parser/template_ast.ts b/packages/compiler/src/template_parser/template_ast.ts
index f0710f7a13..391caf6b81 100644
--- a/packages/compiler/src/template_parser/template_ast.ts
+++ b/packages/compiler/src/template_parser/template_ast.ts
@@ -6,10 +6,9 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {SecurityContext} from '@angular/core';
-
 import {AstPath} from '../ast_path';
 import {CompileDirectiveSummary, CompileProviderMetadata, CompileTokenMetadata} from '../compile_metadata';
+import {SecurityContext} from '../core';
 import {AST} from '../expression_parser/ast';
 import {LifecycleHooks} from '../lifecycle_reflector';
 import {ParseSourceSpan} from '../parse_util';
diff --git a/packages/compiler/src/template_parser/template_parser.ts b/packages/compiler/src/template_parser/template_parser.ts
index b52298b211..255e048ca1 100644
--- a/packages/compiler/src/template_parser/template_parser.ts
+++ b/packages/compiler/src/template_parser/template_parser.ts
@@ -6,16 +6,14 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Inject, InjectionToken, Optional, SchemaMetadata, ɵConsole as Console} from '@angular/core';
-
 import {CompileDirectiveMetadata, CompileDirectiveSummary, CompilePipeSummary, CompileTokenMetadata, CompileTypeMetadata, identifierName} from '../compile_metadata';
 import {CompileReflector} from '../compile_reflector';
 import {CompilerConfig} from '../config';
+import {SchemaMetadata} from '../core';
 import {AST, ASTWithSource, EmptyExpr} from '../expression_parser/ast';
 import {Parser} from '../expression_parser/parser';
 import {I18NHtmlParser} from '../i18n/i18n_html_parser';
 import {Identifiers, createTokenForExternalReference, createTokenForReference} from '../identifiers';
-import {CompilerInjectable} from '../injectable';
 import * as html from '../ml_parser/ast';
 import {ParseTreeResult} from '../ml_parser/html_parser';
 import {removeWhitespaces} from '../ml_parser/html_whitespaces';
@@ -27,7 +25,7 @@ import {ProviderElementContext, ProviderViewContext} from '../provider_analyzer'
 import {ElementSchemaRegistry} from '../schema/element_schema_registry';
 import {CssSelector, SelectorMatcher} from '../selector';
 import {isStyleUrlResolvable} from '../style_url_resolver';
-import {syntaxError} from '../util';
+import {Console, syntaxError} from '../util';
 
 import {BindingParser, BoundProperty} from './binding_parser';
 import {AttrAst, BoundDirectivePropertyAst, BoundElementPropertyAst, BoundEventAst, BoundTextAst, DirectiveAst, ElementAst, EmbeddedTemplateAst, NgContentAst, PropertyBindingType, ReferenceAst, TemplateAst, TemplateAstVisitor, TextAst, VariableAst, templateVisitAll} from './template_ast';
@@ -83,15 +81,6 @@ function warnOnlyOnce(warnings: string[]): (warning: ParseError) => boolean {
   };
 }
 
-/**
- * Provides an array of {@link TemplateAstVisitor}s which will be used to transform
- * parsed templates before compilation is invoked, allowing custom expression syntax
- * and other advanced transformations.
- *
- * This is currently an internal-only feature and not meant for general use.
- */
-export const TEMPLATE_TRANSFORMS = new InjectionToken('TemplateTransforms');
-
 export class TemplateParseError extends ParseError {
   constructor(message: string, span: ParseSourceSpan, level: ParseErrorLevel) {
     super(span, message, level);
@@ -104,13 +93,12 @@ export class TemplateParseResult {
       public errors?: ParseError[]) {}
 }
 
-@CompilerInjectable()
 export class TemplateParser {
   constructor(
       private _config: CompilerConfig, private _reflector: CompileReflector,
       private _exprParser: Parser, private _schemaRegistry: ElementSchemaRegistry,
       private _htmlParser: I18NHtmlParser, private _console: Console,
-      @Optional() @Inject(TEMPLATE_TRANSFORMS) public transforms: TemplateAstVisitor[]) {}
+      public transforms: TemplateAstVisitor[]) {}
 
   parse(
       component: CompileDirectiveMetadata, template: string, directives: CompileDirectiveSummary[],
diff --git a/packages/compiler/src/url_resolver.ts b/packages/compiler/src/url_resolver.ts
index ba585c1c65..3f819309c0 100644
--- a/packages/compiler/src/url_resolver.ts
+++ b/packages/compiler/src/url_resolver.ts
@@ -6,23 +6,17 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Inject, InjectionToken, PACKAGE_ROOT_URL} from '@angular/core';
-
-import {CompilerInjectable} from './injectable';
-
+/**
+ * Create a {@link UrlResolver} with no package prefix.
+ */
+export function createUrlResolverWithoutPackagePrefix(): UrlResolver {
+  return new UrlResolver();
+}
 
 export function createOfflineCompileUrlResolver(): UrlResolver {
   return new UrlResolver('.');
 }
 
-/**
- * A default provider for {@link PACKAGE_ROOT_URL} that maps to '/'.
- */
-export const DEFAULT_PACKAGE_URL_PROVIDER = {
-  provide: PACKAGE_ROOT_URL,
-  useValue: '/'
-};
-
 /**
  * Used by the {@link Compiler} when resolving HTML and CSS template URLs.
  *
diff --git a/packages/compiler/src/util.ts b/packages/compiler/src/util.ts
index 8692eda3a3..8ca94c62f8 100644
--- a/packages/compiler/src/util.ts
+++ b/packages/compiler/src/util.ts
@@ -6,13 +6,9 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {ɵisPromise as isPromise} from '@angular/core';
-
 import * as o from './output/output_ast';
 import {ParseError} from './parse_util';
 
-export const MODULE_SUFFIX = '';
-
 const CAMEL_CASE_REGEXP = /([A-Z])/g;
 const DASH_CASE_REGEXP = /-+([a-z0-9])/g;
 
@@ -163,3 +159,69 @@ export interface OutputContext {
   statements: o.Statement[];
   importExpr(reference: any, typeParams?: o.Type[]|null): o.Expression;
 }
+
+export function stringify(token: any): string {
+  if (typeof token === 'string') {
+    return token;
+  }
+
+  if (token instanceof Array) {
+    return '[' + token.map(stringify).join(', ') + ']';
+  }
+
+  if (token == null) {
+    return '' + token;
+  }
+
+  if (token.overriddenName) {
+    return `${token.overriddenName}`;
+  }
+
+  if (token.name) {
+    return `${token.name}`;
+  }
+
+  const res = token.toString();
+
+  if (res == null) {
+    return '' + res;
+  }
+
+  const newLineIndex = res.indexOf('\n');
+  return newLineIndex === -1 ? res : res.substring(0, newLineIndex);
+}
+
+/**
+ * Lazily retrieves the reference value from a forwardRef.
+ */
+export function resolveForwardRef(type: any): any {
+  if (typeof type === 'function' && type.hasOwnProperty('__forward_ref__')) {
+    return type();
+  } else {
+    return type;
+  }
+}
+
+/**
+ * Determine if the argument is shaped like a Promise
+ */
+export function isPromise(obj: any): obj is Promise<any> {
+  // allow any Promise/A+ compliant thenable.
+  // It's up to the caller to ensure that obj.then conforms to the spec
+  return !!obj && typeof obj.then === 'function';
+}
+
+export class Version {
+  constructor(public full: string) {}
+
+  get major(): string { return this.full.split('.')[0]; }
+
+  get minor(): string { return this.full.split('.')[1]; }
+
+  get patch(): string { return this.full.split('.').slice(2).join('.'); }
+}
+
+export interface Console {
+  log(message: string): void;
+  warn(message: string): void;
+}
diff --git a/packages/compiler/src/version.ts b/packages/compiler/src/version.ts
index 19db5be5a5..e7ed88caf3 100644
--- a/packages/compiler/src/version.ts
+++ b/packages/compiler/src/version.ts
@@ -12,7 +12,7 @@
  * Entry point for all public APIs of the common package.
  */
 
-import {Version} from '@angular/core';
+import {Version} from './util';
 /**
  * @stable
  */
diff --git a/packages/compiler/src/view_compiler/provider_compiler.ts b/packages/compiler/src/view_compiler/provider_compiler.ts
index e99578b712..0babaf57bc 100644
--- a/packages/compiler/src/view_compiler/provider_compiler.ts
+++ b/packages/compiler/src/view_compiler/provider_compiler.ts
@@ -6,10 +6,9 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {ɵDepFlags as DepFlags, ɵNodeFlags as NodeFlags} from '@angular/core';
-
 import {CompileDiDependencyMetadata, CompileEntryComponentMetadata, CompileProviderMetadata, CompileTokenMetadata} from '../compile_metadata';
 import {CompileReflector} from '../compile_reflector';
+import {DepFlags, NodeFlags} from '../core';
 import {Identifiers, createTokenForExternalReference} from '../identifiers';
 import {LifecycleHooks} from '../lifecycle_reflector';
 import * as o from '../output/output_ast';
diff --git a/packages/compiler/src/view_compiler/view_compiler.ts b/packages/compiler/src/view_compiler/view_compiler.ts
index f0dca508b5..fbf3d80710 100644
--- a/packages/compiler/src/view_compiler/view_compiler.ts
+++ b/packages/compiler/src/view_compiler/view_compiler.ts
@@ -6,15 +6,13 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {ChangeDetectionStrategy, ɵArgumentType as ArgumentType, ɵBindingFlags as BindingFlags, ɵDepFlags as DepFlags, ɵNodeFlags as NodeFlags, ɵQueryBindingType as QueryBindingType, ɵQueryValueType as QueryValueType, ɵViewFlags as ViewFlags, ɵelementEventFullName as elementEventFullName} from '@angular/core';
-
 import {CompileDiDependencyMetadata, CompileDirectiveMetadata, CompilePipeSummary, CompileProviderMetadata, CompileTokenMetadata, CompileTypeMetadata, rendererTypeName, tokenReference, viewClassName} from '../compile_metadata';
 import {CompileReflector} from '../compile_reflector';
 import {BuiltinConverter, EventHandlerVars, LocalResolver, convertActionBinding, convertPropertyBinding, convertPropertyBindingBuiltins} from '../compiler_util/expression_converter';
 import {CompilerConfig} from '../config';
+import {ArgumentType, BindingFlags, ChangeDetectionStrategy, DepFlags, NodeFlags, QueryBindingType, QueryValueType, ViewFlags} from '../core';
 import {AST, ASTWithSource, Interpolation} from '../expression_parser/ast';
 import {Identifiers} from '../identifiers';
-import {CompilerInjectable} from '../injectable';
 import {LifecycleHooks} from '../lifecycle_reflector';
 import {isNgContainer} from '../ml_parser/tags';
 import * as o from '../output/output_ast';
@@ -35,7 +33,6 @@ export class ViewCompileResult {
   constructor(public viewClassVar: string, public rendererTypeVar: string) {}
 }
 
-@CompilerInjectable()
 export class ViewCompiler {
   constructor(
       private _config: CompilerConfig, private _reflector: CompileReflector,
@@ -1072,3 +1069,7 @@ function calcStaticDynamicQueryFlags(
   }
   return flags;
 }
+
+export function elementEventFullName(target: string | null, name: string): string {
+  return target ? `${target}:${name}` : name;
+}
diff --git a/packages/compiler/test/aot/compiler_spec.ts b/packages/compiler/test/aot/compiler_spec.ts
index a515126e51..fe081e3f0a 100644
--- a/packages/compiler/test/aot/compiler_spec.ts
+++ b/packages/compiler/test/aot/compiler_spec.ts
@@ -459,6 +459,11 @@ describe('compiler (unbundled Angular)', () => {
   });
 
   describe('inheritance with summaries', () => {
+    let angularSummaryFiles: MockDirectory;
+    beforeEach(() => {
+      angularSummaryFiles = compile(angularFiles, {useSummaries: false, emit: true}).outDir;
+    });
+
     function compileParentAndChild(
         {parentClassDecorator, parentModuleDecorator, childClassDecorator, childModuleDecorator}: {
           parentClassDecorator: string,
@@ -494,8 +499,8 @@ describe('compiler (unbundled Angular)', () => {
         }
       };
 
-      const {outDir: libOutDir} = compile([libInput, angularFiles], {useSummaries: true});
-      const {genFiles} = compile([libOutDir, appInput, angularFiles], {useSummaries: true});
+      const {outDir: libOutDir} = compile([libInput, angularSummaryFiles], {useSummaries: true});
+      const {genFiles} = compile([libOutDir, appInput, angularSummaryFiles], {useSummaries: true});
       return genFiles.find(gf => gf.srcFileUrl === '/app/main.ts');
     }
 
@@ -529,8 +534,8 @@ describe('compiler (unbundled Angular)', () => {
         }
       };
 
-      const {outDir: libOutDir} = compile([libInput, angularFiles], {useSummaries: true});
-      const {genFiles} = compile([libOutDir, appInput, angularFiles], {useSummaries: true});
+      const {outDir: libOutDir} = compile([libInput, angularSummaryFiles], {useSummaries: true});
+      const {genFiles} = compile([libOutDir, appInput, angularSummaryFiles], {useSummaries: true});
       const mainNgFactory = genFiles.find(gf => gf.srcFileUrl === '/app/main.ts');
       const flags = NodeFlags.TypeDirective | NodeFlags.Component | NodeFlags.OnDestroy;
       expect(toTypeScript(mainNgFactory))
@@ -578,10 +583,12 @@ describe('compiler (unbundled Angular)', () => {
           `
            }
          };
-         const {outDir: lib1OutDir} = compile([lib1Input, angularFiles], {useSummaries: true});
+         const {outDir: lib1OutDir} =
+             compile([lib1Input, angularSummaryFiles], {useSummaries: true});
          const {outDir: lib2OutDir} =
-             compile([lib1OutDir, lib2Input, angularFiles], {useSummaries: true});
-         const {genFiles} = compile([lib2OutDir, appInput, angularFiles], {useSummaries: true});
+             compile([lib1OutDir, lib2Input, angularSummaryFiles], {useSummaries: true});
+         const {genFiles} =
+             compile([lib2OutDir, appInput, angularSummaryFiles], {useSummaries: true});
          const mainNgFactory = genFiles.find(gf => gf.srcFileUrl === '/app/main.ts');
          const flags = NodeFlags.TypeDirective | NodeFlags.Component | NodeFlags.OnDestroy;
          expect(toTypeScript(mainNgFactory))
diff --git a/packages/compiler/test/aot/jit_summaries_spec.ts b/packages/compiler/test/aot/jit_summaries_spec.ts
index 0bf7643a61..dd63c3c411 100644
--- a/packages/compiler/test/aot/jit_summaries_spec.ts
+++ b/packages/compiler/test/aot/jit_summaries_spec.ts
@@ -12,10 +12,17 @@ import {MockDirectory, compile, setup} from './test_util';
 
 describe('aot summaries for jit', () => {
   let angularFiles = setup();
+  let angularSummaryFiles: MockDirectory;
+
+  beforeEach(() => {
+    angularSummaryFiles = compile(angularFiles, {useSummaries: false, emit: true}).outDir;
+  });
 
   function compileApp(rootDir: MockDirectory, options: {useSummaries?: boolean} = {}):
       {genFiles: GeneratedFile[], outDir: MockDirectory} {
-    return compile([rootDir, angularFiles], {...options, enableSummariesForJit: true});
+    return compile(
+        [rootDir, options.useSummaries ? angularSummaryFiles : angularFiles],
+        {...options, enableSummariesForJit: true});
   }
 
   it('should create @Injectable summaries', () => {
diff --git a/packages/compiler/test/aot/static_reflector_spec.ts b/packages/compiler/test/aot/static_reflector_spec.ts
index c594c15a30..8a1824ad6e 100644
--- a/packages/compiler/test/aot/static_reflector_spec.ts
+++ b/packages/compiler/test/aot/static_reflector_spec.ts
@@ -6,8 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {StaticReflector, StaticSymbol, StaticSymbolCache, StaticSymbolResolver, StaticSymbolResolverHost} from '@angular/compiler';
-import {HostListener, Inject, animate, group, keyframes, sequence, state, style, transition, trigger} from '@angular/core';
+import {StaticReflector, StaticSymbol, StaticSymbolCache, StaticSymbolResolver, StaticSymbolResolverHost, core as compilerCore} from '@angular/compiler';
 import {CollectorOptions} from '@angular/tsc-wrapped';
 
 import {MockStaticSymbolResolverHost, MockSummaryResolver} from './static_symbol_resolver_spec';
@@ -66,14 +65,6 @@ describe('StaticReflector', () => {
     expect(annotations.length).toEqual(1);
     const annotation = annotations[0];
     expect(annotation.selector).toEqual('my-hero-detail');
-    expect(annotation.animations).toEqual([trigger('myAnimation', [
-      state('state1', style({'background': 'white'})),
-      transition(
-          '* => *',
-          sequence([group([animate(
-              '1s 0.5s',
-              keyframes([style({'background': 'blue'}), style({'background': 'red'})]))])]))
-    ])]);
   });
 
   it('should get and empty annotation list for an unknown class', () => {
@@ -97,7 +88,8 @@ describe('StaticReflector', () => {
         reflector.findDeclaration('src/app/hero-detail.component', 'HeroDetailComponent');
     const props = reflector.propMetadata(HeroDetailComponent);
     expect(props['hero']).toBeTruthy();
-    expect(props['onMouseOver']).toEqual([new HostListener('mouseover', ['$event'])]);
+    expect(props['onMouseOver']).toEqual([compilerCore.createHostListener(
+        'mouseover', ['$event'])]);
   });
 
   it('should get an empty object from propMetadata for an unknown class', () => {
@@ -401,7 +393,7 @@ describe('StaticReflector', () => {
     const src = '/tmp/src/forward-ref.ts';
     const dep = reflector.getStaticSymbol(src, 'Dep');
     const props = reflector.parameters(reflector.getStaticSymbol(src, 'Forward'));
-    expect(props).toEqual([[dep, new Inject(dep)]]);
+    expect(props).toEqual([[dep, compilerCore.createInject(dep)]]);
   });
 
   it('should report an error for invalid function calls', () => {
@@ -600,7 +592,7 @@ describe('StaticReflector', () => {
 
     const someClass = reflector.getStaticSymbol(file, 'SomeClass');
     const parameters = reflector.parameters(someClass);
-    expect(parameters.toString()).toEqual('@Inject');
+    expect(compilerCore.createInject.isTypeOf(parameters[0][0])).toBe(true);
   });
 
   it('should reject a ctor parameter without a @Inject and a type exprssion', () => {
@@ -889,431 +881,237 @@ describe('StaticReflector', () => {
 });
 
 const DEFAULT_TEST_DATA: {[key: string]: any} = {
-      '/tmp/@angular/common/src/forms-deprecated/directives.d.ts': [{
-        '__symbolic': 'module',
-        'version': 3,
-        'metadata': {
-          'FORM_DIRECTIVES': [
-            {
-              '__symbolic': 'reference',
-              'name': 'NgFor',
-              'module': '@angular/common/src/directives/ng_for'
-            }
-          ]
-        }
-      }],
-      '/tmp/@angular/common/src/directives/ng_for.d.ts': {
-        '__symbolic': 'module',
-        'version': 3,
-        'metadata': {
-          'NgFor': {
-            '__symbolic': 'class',
-            'decorators': [
-              {
-                '__symbolic': 'call',
-                'expression': {
-                  '__symbolic': 'reference',
-                  'name': 'Directive',
-                  'module': '@angular/core'
-                },
-                'arguments': [
-                  {
-                    'selector': '[ngFor][ngForOf]',
-                    'inputs': ['ngForTrackBy', 'ngForOf', 'ngForTemplate']
-                  }
-                ]
+  '/tmp/@angular/common/src/forms-deprecated/directives.d.ts': [{
+    '__symbolic': 'module',
+    'version': 3,
+    'metadata': {
+      'FORM_DIRECTIVES': [{
+        '__symbolic': 'reference',
+        'name': 'NgFor',
+        'module': '@angular/common/src/directives/ng_for'
+      }]
+    }
+  }],
+  '/tmp/@angular/common/src/directives/ng_for.d.ts': {
+    '__symbolic': 'module',
+    'version': 3,
+    'metadata': {
+      'NgFor': {
+        '__symbolic': 'class',
+        'decorators': [{
+          '__symbolic': 'call',
+          'expression': {'__symbolic': 'reference', 'name': 'Directive', 'module': '@angular/core'},
+          'arguments': [{
+            'selector': '[ngFor][ngForOf]',
+            'inputs': ['ngForTrackBy', 'ngForOf', 'ngForTemplate']
+          }]
+        }],
+        'members': {
+          '__ctor__': [{
+            '__symbolic': 'constructor',
+            'parameters': [
+              {'__symbolic': 'reference', 'module': '@angular/core', 'name': 'ViewContainerRef'},
+              {'__symbolic': 'reference', 'module': '@angular/core', 'name': 'TemplateRef'},
+              {'__symbolic': 'reference', 'module': '@angular/core', 'name': 'IterableDiffers'}, {
+                '__symbolic': 'reference',
+                'module': '@angular/core',
+                'name': 'ChangeDetectorRef'
               }
-            ],
-            'members': {
-              '__ctor__': [
-                {
-                  '__symbolic': 'constructor',
-                  'parameters': [
-                    {
-                      '__symbolic': 'reference',
-                      'module': '@angular/core',
-                      'name': 'ViewContainerRef'
-                    },
-                    {
-                      '__symbolic': 'reference',
-                      'module': '@angular/core',
-                      'name': 'TemplateRef'
-                    },
-                    {
-                      '__symbolic': 'reference',
-                      'module': '@angular/core',
-                      'name': 'IterableDiffers'
-                    },
-                    {
-                      '__symbolic': 'reference',
-                      'module': '@angular/core',
-                      'name': 'ChangeDetectorRef'
-                    }
-                  ]
-                }
-              ]
-            }
-          }
-        }
-      },
-      '/tmp/@angular/core/src/linker/view_container_ref.d.ts':
-          {version: 3, 'metadata': {'ViewContainerRef': {'__symbolic': 'class'}}},
-      '/tmp/@angular/core/src/linker/template_ref.d.ts':
-          {version: 3, 'module': './template_ref', 'metadata': {'TemplateRef': {'__symbolic': 'class'}}},
-      '/tmp/@angular/core/src/change_detection/differs/iterable_differs.d.ts':
-          {version: 3, 'metadata': {'IterableDiffers': {'__symbolic': 'class'}}},
-      '/tmp/@angular/core/src/change_detection/change_detector_ref.d.ts':
-          {version: 3, 'metadata': {'ChangeDetectorRef': {'__symbolic': 'class'}}},
-      '/tmp/src/app/hero-detail.component.d.ts': {
-        '__symbolic': 'module',
-        'version': 3,
-        'metadata': {
-          'HeroDetailComponent': {
-            '__symbolic': 'class',
-            'decorators': [
-              {
-                '__symbolic': 'call',
-                'expression': {
-                  '__symbolic': 'reference',
-                  'name': 'Component',
-                  'module': '@angular/core'
-                },
-                'arguments': [
-                  {
-                    'selector': 'my-hero-detail',
-                    'template':
-                        '\n  <div *ngIf="hero">\n    <h2>{{hero.name}} details!</h2>\n    <div><label>id: </label>{{hero.id}}</div>\n    <div>\n      <label>name: </label>\n      <input [(ngModel)]="hero.name" placeholder="name"/>\n    </div>\n  </div>\n',
-                    'animations': [{
-                      '__symbolic': 'call',
-                      'expression': {
-                        '__symbolic': 'reference',
-                        'name': 'trigger',
-                        'module': '@angular/core'
-                      },
-                      'arguments': [
-                        'myAnimation',
-                        [{ '__symbolic': 'call',
-                           'expression': {
-                             '__symbolic': 'reference',
-                             'name': 'state',
-                             'module': '@angular/core'
-                           },
-                           'arguments': [
-                             'state1',
-                              { '__symbolic': 'call',
-                                'expression': {
-                                  '__symbolic': 'reference',
-                                  'name': 'style',
-                                  'module': '@angular/core'
-                                },
-                                'arguments': [
-                                  { 'background':'white' }
-                                ]
-                              }
-                            ]
-                          }, {
-                            '__symbolic': 'call',
-                            'expression': {
-                              '__symbolic':'reference',
-                              'name':'transition',
-                              'module': '@angular/core'
-                            },
-                            'arguments': [
-                              '* => *',
-                              {
-                                '__symbolic':'call',
-                                'expression':{
-                                  '__symbolic':'reference',
-                                  'name':'sequence',
-                                  'module': '@angular/core'
-                                },
-                                'arguments':[[{ '__symbolic': 'call',
-                                  'expression': {
-                                    '__symbolic':'reference',
-                                    'name':'group',
-                                    'module': '@angular/core'
-                                  },
-                                  'arguments':[[{
-                                    '__symbolic': 'call',
-                                    'expression': {
-                                      '__symbolic':'reference',
-                                      'name':'animate',
-                                      'module': '@angular/core'
-                                    },
-                                    'arguments':[
-                                      '1s 0.5s',
-                                      { '__symbolic': 'call',
-                                        'expression': {
-                                          '__symbolic':'reference',
-                                          'name':'keyframes',
-                                          'module': '@angular/core'
-                                        },
-                                        'arguments':[[{ '__symbolic': 'call',
-                                          'expression': {
-                                            '__symbolic':'reference',
-                                            'name':'style',
-                                            'module': '@angular/core'
-                                          },
-                                          'arguments':[ { 'background': 'blue'} ]
-                                        }, {
-                                          '__symbolic': 'call',
-                                          'expression': {
-                                            '__symbolic':'reference',
-                                            'name':'style',
-                                            'module': '@angular/core'
-                                          },
-                                          'arguments':[ { 'background': 'red'} ]
-                                        }]]
-                                      }
-                                    ]
-                                  }]]
-                                }]]
-                              }
-                            ]
-                          }
-                        ]
-                    ]
-                  }]
-                }]
-              }],
-            'members': {
-              'hero': [
-                {
-                  '__symbolic': 'property',
-                  'decorators': [
-                    {
-                      '__symbolic': 'call',
-                      'expression': {
-                        '__symbolic': 'reference',
-                        'name': 'Input',
-                        'module': '@angular/core'
-                      }
-                    }
-                  ]
-                }
-              ],
-              'onMouseOver': [
-                    {
-                        '__symbolic': 'method',
-                        'decorators': [
-                            {
-                                '__symbolic': 'call',
-                                'expression': {
-                                    '__symbolic': 'reference',
-                                    'module': '@angular/core',
-                                    'name': 'HostListener'
-                                },
-                                'arguments': [
-                                    'mouseover',
-                                    [
-                                        '$event'
-                                    ]
-                                ]
-                            }
-                        ]
-                    }
-                ]
-            }
-          }
-        }
-      },
-      '/src/extern.d.ts': {'__symbolic': 'module', 'version': 3, metadata: {s: 's'}},
-      '/tmp/src/error-reporting.d.ts': {
-        __symbolic: 'module',
-        version: 3,
-        metadata: {
-          SomeClass: {
-            __symbolic: 'class',
-            decorators: [
-              {
-                __symbolic: 'call',
-                expression: {
-                  __symbolic: 'reference',
-                  name: 'Component',
-                  module: '@angular/core'
-                },
-                arguments: [
-                  {
-                    entryComponents: [
-                      {
-                        __symbolic: 'reference',
-                        module: 'src/error-references',
-                        name: 'Link1',
-                      }
-                    ]
-                  }
-                ]
-              }
-            ],
-          }
-        }
-      },
-      '/tmp/src/error-references.d.ts': {
-        __symbolic: 'module',
-        version: 3,
-        metadata: {
-          Link1: {
-            __symbolic: 'reference',
-            module: 'src/error-references',
-            name: 'Link2'
-          },
-          Link2: {
-            __symbolic: 'reference',
-            module: 'src/error-references',
-            name: 'ErrorSym'
-          },
-          ErrorSym: {
-            __symbolic: 'error',
-            message: 'A reasonable error message',
-            line: 12,
-            character: 33
-          }
-        }
-      },
-      '/tmp/src/function-declaration.d.ts': {
-        __symbolic: 'module',
-        version: 3,
-        metadata: {
-          one: {
-            __symbolic: 'function',
-            parameters: ['a'],
-            value: [
-              {__symbolic: 'reference', name: 'a'}
             ]
-          },
-          add: {
-            __symbolic: 'function',
-            parameters: ['a','b'],
-            value: {
-              __symbolic: 'binop',
-              operator: '+',
-              left: {__symbolic: 'reference', name: 'a'},
-              right: {
-                __symbolic: 'binop',
-                operator: '+',
-                left: {__symbolic: 'reference', name: 'b'},
-                right: {__symbolic: 'reference', name: 'oneLiteral'}
-              }
-            }
-          },
-          oneLiteral: 1
+          }]
         }
+      }
+    }
+  },
+  '/tmp/@angular/core/src/linker/view_container_ref.d.ts':
+      {version: 3, 'metadata': {'ViewContainerRef': {'__symbolic': 'class'}}},
+  '/tmp/@angular/core/src/linker/template_ref.d.ts': {
+    version: 3,
+    'module': './template_ref',
+    'metadata': {'TemplateRef': {'__symbolic': 'class'}}
+  },
+  '/tmp/@angular/core/src/change_detection/differs/iterable_differs.d.ts':
+      {version: 3, 'metadata': {'IterableDiffers': {'__symbolic': 'class'}}},
+  '/tmp/@angular/core/src/change_detection/change_detector_ref.d.ts':
+      {version: 3, 'metadata': {'ChangeDetectorRef': {'__symbolic': 'class'}}},
+  '/tmp/src/app/hero-detail.component.d.ts': {
+    '__symbolic': 'module',
+    'version': 3,
+    'metadata': {
+      'HeroDetailComponent': {
+        '__symbolic': 'class',
+        'decorators': [{
+          '__symbolic': 'call',
+          'expression': {'__symbolic': 'reference', 'name': 'Component', 'module': '@angular/core'},
+          'arguments': [{
+            'selector': 'my-hero-detail',
+            'template':
+                '\n  <div *ngIf="hero">\n    <h2>{{hero.name}} details!</h2>\n    <div><label>id: </label>{{hero.id}}</div>\n    <div>\n      <label>name: </label>\n      <input [(ngModel)]="hero.name" placeholder="name"/>\n    </div>\n  </div>\n',
+          }]
+        }],
+        'members': {
+          'hero': [{
+            '__symbolic': 'property',
+            'decorators': [{
+              '__symbolic': 'call',
+              'expression':
+                  {'__symbolic': 'reference', 'name': 'Input', 'module': '@angular/core'}
+            }]
+          }],
+          'onMouseOver': [{
+            '__symbolic': 'method',
+            'decorators': [{
+              '__symbolic': 'call',
+              'expression':
+                  {'__symbolic': 'reference', 'module': '@angular/core', 'name': 'HostListener'},
+              'arguments': ['mouseover', ['$event']]
+            }]
+          }]
+        }
+      }
+    }
+  },
+  '/src/extern.d.ts': {'__symbolic': 'module', 'version': 3, metadata: {s: 's'}},
+  '/tmp/src/error-reporting.d.ts': {
+    __symbolic: 'module',
+    version: 3,
+    metadata: {
+      SomeClass: {
+        __symbolic: 'class',
+        decorators: [{
+          __symbolic: 'call',
+          expression: {__symbolic: 'reference', name: 'Component', module: '@angular/core'},
+          arguments: [{
+            entryComponents: [{
+              __symbolic: 'reference',
+              module: 'src/error-references',
+              name: 'Link1',
+            }]
+          }]
+        }],
+      }
+    }
+  },
+  '/tmp/src/error-references.d.ts': {
+    __symbolic: 'module',
+    version: 3,
+    metadata: {
+      Link1: {__symbolic: 'reference', module: 'src/error-references', name: 'Link2'},
+      Link2: {__symbolic: 'reference', module: 'src/error-references', name: 'ErrorSym'},
+      ErrorSym:
+          {__symbolic: 'error', message: 'A reasonable error message', line: 12, character: 33}
+    }
+  },
+  '/tmp/src/function-declaration.d.ts': {
+    __symbolic: 'module',
+    version: 3,
+    metadata: {
+      one: {
+        __symbolic: 'function',
+        parameters: ['a'],
+        value: [{__symbolic: 'reference', name: 'a'}]
       },
-      '/tmp/src/function-reference.ts': {
-        __symbolic: 'module',
-        version: 3,
-        metadata: {
-          one: {
-            __symbolic: 'call',
-            expression: {
-              __symbolic: 'reference',
-              module: './function-declaration',
-              name: 'one'
-            },
-            arguments: ['some-value']
-          },
-          three: {
-            __symbolic: 'call',
-            expression: {
-              __symbolic: 'reference',
-              module: './function-declaration',
-              name: 'add'
-            },
-            arguments: [1, 1]
-          },
-          recursion: {
-            __symbolic: 'call',
-            expression: {
-              __symbolic: 'reference',
-              module: './function-recursive',
-              name: 'recursive'
-            },
-            arguments: [1]
-          },
-          indirectRecursion: {
-            __symbolic: 'call',
-            expression: {
-              __symbolic: 'reference',
-              module: './function-recursive',
-              name: 'indirectRecursion1'
-            },
-            arguments: [1]
+      add: {
+        __symbolic: 'function',
+        parameters: ['a', 'b'],
+        value: {
+          __symbolic: 'binop',
+          operator: '+',
+          left: {__symbolic: 'reference', name: 'a'},
+          right: {
+            __symbolic: 'binop',
+            operator: '+',
+            left: {__symbolic: 'reference', name: 'b'},
+            right: {__symbolic: 'reference', name: 'oneLiteral'}
           }
         }
       },
-      '/tmp/src/function-recursive.d.ts': {
-        __symbolic: 'modules',
-        version: 3,
-        metadata: {
-          recursive: {
-            __symbolic: 'function',
-            parameters: ['a'],
-            value: {
-              __symbolic: 'call',
-              expression: {
-                __symbolic: 'reference',
-                module: './function-recursive',
-                name: 'recursive',
-              },
-              arguments: [
-                {
-                  __symbolic: 'reference',
-                  name: 'a'
-                }
-              ]
-            }
-          },
-          indirectRecursion1: {
-            __symbolic: 'function',
-            parameters: ['a'],
-            value: {
-              __symbolic: 'call',
-              expression: {
-                __symbolic: 'reference',
-                module: './function-recursive',
-                name: 'indirectRecursion2',
-              },
-              arguments: [
-                {
-                  __symbolic: 'reference',
-                  name: 'a'
-                }
-              ]
-            }
-          },
-          indirectRecursion2: {
-            __symbolic: 'function',
-            parameters: ['a'],
-            value: {
-              __symbolic: 'call',
-              expression: {
-                __symbolic: 'reference',
-                module: './function-recursive',
-                name: 'indirectRecursion1',
-              },
-              arguments: [
-                {
-                  __symbolic: 'reference',
-                  name: 'a'
-                }
-              ]
-            }
-          }
-        },
+      oneLiteral: 1
+    }
+  },
+  '/tmp/src/function-reference.ts': {
+    __symbolic: 'module',
+    version: 3,
+    metadata: {
+      one: {
+        __symbolic: 'call',
+        expression: {__symbolic: 'reference', module: './function-declaration', name: 'one'},
+        arguments: ['some-value']
       },
-      '/tmp/src/spread.ts': {
-        __symbolic: 'module',
-        version: 3,
-        metadata: {
-          spread: [0, {__symbolic: 'spread', expression: [1, 2, 3, 4]}, 5]
+      three: {
+        __symbolic: 'call',
+        expression: {__symbolic: 'reference', module: './function-declaration', name: 'add'},
+        arguments: [1, 1]
+      },
+      recursion: {
+        __symbolic: 'call',
+        expression: {__symbolic: 'reference', module: './function-recursive', name: 'recursive'},
+        arguments: [1]
+      },
+      indirectRecursion: {
+        __symbolic: 'call',
+        expression:
+            {__symbolic: 'reference', module: './function-recursive', name: 'indirectRecursion1'},
+        arguments: [1]
+      }
+    }
+  },
+  '/tmp/src/function-recursive.d.ts': {
+    __symbolic: 'modules',
+    version: 3,
+    metadata: {
+      recursive: {
+        __symbolic: 'function',
+        parameters: ['a'],
+        value: {
+          __symbolic: 'call',
+          expression: {
+            __symbolic: 'reference',
+            module: './function-recursive',
+            name: 'recursive',
+          },
+          arguments: [{__symbolic: 'reference', name: 'a'}]
         }
       },
-      '/tmp/src/custom-decorator.ts': `
+      indirectRecursion1: {
+        __symbolic: 'function',
+        parameters: ['a'],
+        value: {
+          __symbolic: 'call',
+          expression: {
+            __symbolic: 'reference',
+            module: './function-recursive',
+            name: 'indirectRecursion2',
+          },
+          arguments: [{__symbolic: 'reference', name: 'a'}]
+        }
+      },
+      indirectRecursion2: {
+        __symbolic: 'function',
+        parameters: ['a'],
+        value: {
+          __symbolic: 'call',
+          expression: {
+            __symbolic: 'reference',
+            module: './function-recursive',
+            name: 'indirectRecursion1',
+          },
+          arguments: [{__symbolic: 'reference', name: 'a'}]
+        }
+      }
+    },
+  },
+  '/tmp/src/spread.ts': {
+    __symbolic: 'module',
+    version: 3,
+    metadata: {spread: [0, {__symbolic: 'spread', expression: [1, 2, 3, 4]}, 5]}
+  },
+  '/tmp/src/custom-decorator.ts': `
         export function CustomDecorator(): any {
           return () => {};
         }
       `,
-      '/tmp/src/custom-decorator-reference.ts': `
+  '/tmp/src/custom-decorator-reference.ts': `
         import {CustomDecorator} from './custom-decorator';
 
         @CustomDecorator()
@@ -1321,7 +1119,7 @@ const DEFAULT_TEST_DATA: {[key: string]: any} = {
           @CustomDecorator() get foo(): string { return ''; }
         }
       `,
-      '/tmp/src/invalid-calll-definitions.ts': `
+  '/tmp/src/invalid-calll-definitions.ts': `
         export function someFunction(a: any) {
           if (Array.isArray(a)) {
             return a;
@@ -1329,7 +1127,7 @@ const DEFAULT_TEST_DATA: {[key: string]: any} = {
           return undefined;
         }
       `,
-      '/tmp/src/invalid-calls.ts': `
+  '/tmp/src/invalid-calls.ts': `
         import {someFunction} from './nvalid-calll-definitions.ts';
         import {Component} from '@angular/core';
         import {NgIf} from '@angular/common';
@@ -1347,7 +1145,7 @@ const DEFAULT_TEST_DATA: {[key: string]: any} = {
         })
         export class MyOtherComponent { }
       `,
-      '/tmp/src/static-method.ts': `
+  '/tmp/src/static-method.ts': `
         import {Component} from '@angular/core/src/metadata';
 
         @Component({
@@ -1374,7 +1172,7 @@ const DEFAULT_TEST_DATA: {[key: string]: any} = {
           }
         }
       `,
-      '/tmp/src/static-method-call.ts': `
+  '/tmp/src/static-method-call.ts': `
         import {Component} from '@angular/core';
         import {MyModule} from './static-method';
 
@@ -1398,7 +1196,7 @@ const DEFAULT_TEST_DATA: {[key: string]: any} = {
         })
         export class MyFactoryComponent { }
       `,
-      '/tmp/src/static-field.ts': `
+  '/tmp/src/static-field.ts': `
         import {Injectable} from '@angular/core';
 
         @Injectable()
@@ -1406,12 +1204,12 @@ const DEFAULT_TEST_DATA: {[key: string]: any} = {
           static VALUE = 'Some string';
         }
       `,
-      '/tmp/src/macro-function.ts': `
+  '/tmp/src/macro-function.ts': `
         export function v(value: any) {
           return { provide: 'a', useValue: value };
         }
       `,
-      '/tmp/src/call-macro-function.ts': `
+  '/tmp/src/call-macro-function.ts': `
         import {Component} from '@angular/core';
         import {v} from './macro-function';
 
@@ -1425,7 +1223,7 @@ const DEFAULT_TEST_DATA: {[key: string]: any} = {
         })
         export class MyComponentNested { }
       `,
-      '/tmp/src/static-field-reference.ts': `
+  '/tmp/src/static-field-reference.ts': `
         import {Component} from '@angular/core';
         import {MyModule} from './static-field';
 
@@ -1434,12 +1232,12 @@ const DEFAULT_TEST_DATA: {[key: string]: any} = {
         })
         export class Foo { }
       `,
-      '/tmp/src/static-method-def.ts': `
+  '/tmp/src/static-method-def.ts': `
         export class ClassWithStatics {
           static staticMethod() {}
         }
       `,
-      '/tmp/src/static-method-ref.ts': `
+  '/tmp/src/static-method-ref.ts': `
         import {Component} from '@angular/core';
         import {ClassWithStatics} from './static-method-def';
 
@@ -1450,7 +1248,7 @@ const DEFAULT_TEST_DATA: {[key: string]: any} = {
 
         }
       `,
-      '/tmp/src/invalid-metadata.ts': `
+  '/tmp/src/invalid-metadata.ts': `
         import {Component} from '@angular/core';
 
         @Component({
@@ -1458,7 +1256,7 @@ const DEFAULT_TEST_DATA: {[key: string]: any} = {
         })
         export class InvalidMetadata {}
       `,
-      '/tmp/src/forward-ref.ts': `
+  '/tmp/src/forward-ref.ts': `
         import {forwardRef} from '@angular/core';
         import {Component} from '@angular/core';
         import {Inject} from '@angular/core';
@@ -1470,4 +1268,4 @@ const DEFAULT_TEST_DATA: {[key: string]: any} = {
           @Input f: Forward;
         }
       `
-    };
+};
diff --git a/packages/compiler/test/aot/test_util.ts b/packages/compiler/test/aot/test_util.ts
index 8a28700497..f38b2ed897 100644
--- a/packages/compiler/test/aot/test_util.ts
+++ b/packages/compiler/test/aot/test_util.ts
@@ -611,7 +611,15 @@ export function expectNoDiagnostics(program: ts.Program) {
 }
 
 export function isSource(fileName: string): boolean {
-  return !/\.d\.ts$/.test(fileName) && /\.ts$/.test(fileName);
+  return !isDts(fileName) && /\.ts$/.test(fileName);
+}
+
+function isDts(fileName: string): boolean {
+  return /\.d.ts$/.test(fileName);
+}
+
+function isSourceOrDts(fileName: string): boolean {
+  return /\.ts$/.test(fileName);
 }
 
 export function compile(
@@ -628,7 +636,8 @@ export function compile(
   const preCompile = options.preCompile || (() => {});
   const postCompile = options.postCompile || expectNoDiagnostics;
   const rootDirArr = toMockFileArray(rootDirs);
-  const scriptNames = rootDirArr.map(entry => entry.fileName).filter(isSource);
+  const scriptNames = rootDirArr.map(entry => entry.fileName)
+                          .filter(options.useSummaries ? isSource : isSourceOrDts);
 
   const host = new MockCompilerHost(scriptNames, arrayToMockDir(rootDirArr));
   const aotHost = new MockAotCompilerHost(host);
@@ -659,9 +668,11 @@ export function compile(
   }
   let outDir: MockDirectory = {};
   if (emit) {
-    outDir = arrayToMockDir(toMockFileArray([
-                              host.writtenFiles, host.overrides
-                            ]).filter((entry) => !isSource(entry.fileName)));
+    const dtsFilesWithGenFiles = new Set<string>(genFiles.map(gf => gf.srcFileUrl).filter(isDts));
+    outDir =
+        arrayToMockDir(toMockFileArray([host.writtenFiles, host.overrides])
+                           .filter((entry) => !isSource(entry.fileName))
+                           .concat(rootDirArr.filter(e => dtsFilesWithGenFiles.has(e.fileName))));
   }
   return {genFiles, outDir};
 }
diff --git a/packages/compiler/test/directive_lifecycle_spec.ts b/packages/compiler/test/directive_lifecycle_spec.ts
index a4b35f4bf3..5d1193ccda 100644
--- a/packages/compiler/test/directive_lifecycle_spec.ts
+++ b/packages/compiler/test/directive_lifecycle_spec.ts
@@ -6,9 +6,9 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {JitReflector} from '@angular/compiler';
 import {LifecycleHooks as Hooks, hasLifecycleHook as hasLifecycleHookImpl} from '@angular/compiler/src/lifecycle_reflector';
 import {SimpleChanges} from '@angular/core';
+import {JitReflector} from '@angular/platform-browser-dynamic/src/compiler_reflector';
 
 function hasLifecycleHook(hook: Hooks, directive: any): boolean {
   return hasLifecycleHookImpl(new JitReflector(), hook, directive);
diff --git a/packages/compiler/test/directive_normalizer_spec.ts b/packages/compiler/test/directive_normalizer_spec.ts
index a2a1c06cc4..0ed2fa5b77 100644
--- a/packages/compiler/test/directive_normalizer_spec.ts
+++ b/packages/compiler/test/directive_normalizer_spec.ts
@@ -11,7 +11,6 @@ import {CompilerConfig, preserveWhitespacesDefault} from '@angular/compiler/src/
 import {DirectiveNormalizer} from '@angular/compiler/src/directive_normalizer';
 import {ResourceLoader} from '@angular/compiler/src/resource_loader';
 import {MockResourceLoader} from '@angular/compiler/testing/src/resource_loader_mock';
-import {TEST_COMPILER_PROVIDERS} from '@angular/compiler/testing/src/test_bindings';
 import {ViewEncapsulation} from '@angular/core/src/metadata/view';
 import {TestBed} from '@angular/core/testing';
 import {AsyncTestCompleter, beforeEach, describe, expect, inject, it} from '@angular/core/testing/src/testing_internal';
@@ -19,6 +18,7 @@ import {AsyncTestCompleter, beforeEach, describe, expect, inject, it} from '@ang
 import {noUndefined} from '../src/util';
 
 import {SpyResourceLoader} from './spies';
+import {TEST_COMPILER_PROVIDERS} from './test_bindings';
 
 const SOME_MODULE_URL = 'package:some/module/a.js';
 const SOME_HTTP_MODULE_URL = 'http://some/module/a.js';
diff --git a/packages/compiler/test/directive_resolver_mock_spec.ts b/packages/compiler/test/directive_resolver_mock_spec.ts
index 926bbc018c..48be217725 100644
--- a/packages/compiler/test/directive_resolver_mock_spec.ts
+++ b/packages/compiler/test/directive_resolver_mock_spec.ts
@@ -6,9 +6,9 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {JitReflector} from '@angular/compiler';
-import {Component, Directive, Injector, ɵViewMetadata as ViewMetadata} from '@angular/core';
+import {Component, Directive, Injector} from '@angular/core';
 import {TestBed, inject} from '@angular/core/testing';
+import {JitReflector} from '@angular/platform-browser-dynamic/src/compiler_reflector';
 
 import {MockDirectiveResolver} from '../testing';
 
@@ -22,7 +22,7 @@ export function main() {
     });
 
     beforeEach(inject([Injector], (injector: Injector) => {
-      dirResolver = new MockDirectiveResolver(injector, new JitReflector());
+      dirResolver = new MockDirectiveResolver(new JitReflector());
     }));
 
     describe('Directive overriding', () => {
@@ -38,48 +38,6 @@ export function main() {
         expect(metadata.selector).toEqual('someOtherSelector');
       });
     });
-
-    describe('View overriding', () => {
-      it('should fallback to the default ViewResolver when templates are not overridden', () => {
-        const view = <Component>dirResolver.resolve(SomeComponent);
-        expect(view.template).toEqual('template');
-      });
-
-      it('should allow overriding the @View', () => {
-        dirResolver.setView(SomeComponent, new ViewMetadata({template: 'overridden template'}));
-        const view = <Component>dirResolver.resolve(SomeComponent);
-        expect(view.template).toEqual('overridden template');
-      });
-
-      it('should allow overriding a view after it has been resolved', () => {
-        dirResolver.resolve(SomeComponent);
-        dirResolver.setView(SomeComponent, new ViewMetadata({template: 'overridden template'}));
-        const view = <Component>dirResolver.resolve(SomeComponent);
-        expect(view.template).toEqual('overridden template');
-      });
-    });
-
-    describe('inline template definition overriding', () => {
-      it('should allow overriding the default template', () => {
-        dirResolver.setInlineTemplate(SomeComponent, 'overridden template');
-        const view = <Component>dirResolver.resolve(SomeComponent);
-        expect(view.template).toEqual('overridden template');
-      });
-
-      it('should allow overriding an overridden @View', () => {
-        dirResolver.setView(SomeComponent, new ViewMetadata({template: 'overridden template'}));
-        dirResolver.setInlineTemplate(SomeComponent, 'overridden template x 2');
-        const view = <Component>dirResolver.resolve(SomeComponent);
-        expect(view.template).toEqual('overridden template x 2');
-      });
-
-      it('should allow overriding a view after it has been resolved', () => {
-        dirResolver.resolve(SomeComponent);
-        dirResolver.setInlineTemplate(SomeComponent, 'overridden template');
-        const view = <Component>dirResolver.resolve(SomeComponent);
-        expect(view.template).toEqual('overridden template');
-      });
-    });
   });
 }
 
diff --git a/packages/compiler/test/directive_resolver_spec.ts b/packages/compiler/test/directive_resolver_spec.ts
index b98eb0eab0..3e4db96754 100644
--- a/packages/compiler/test/directive_resolver_spec.ts
+++ b/packages/compiler/test/directive_resolver_spec.ts
@@ -6,9 +6,10 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {JitReflector} from '@angular/compiler';
+import {core} from '@angular/compiler';
 import {DirectiveResolver} from '@angular/compiler/src/directive_resolver';
 import {Component, ContentChild, ContentChildren, Directive, HostBinding, HostListener, Input, Output, ViewChild, ViewChildren} from '@angular/core/src/metadata';
+import {JitReflector} from '@angular/platform-browser-dynamic/src/compiler_reflector';
 
 @Directive({selector: 'someDirective'})
 class SomeDirective {
@@ -119,7 +120,7 @@ export function main() {
 
     it('should read out the Directive metadata', () => {
       const directiveMetadata = resolver.resolve(SomeDirective);
-      expect(directiveMetadata).toEqual(new Directive({
+      expect(directiveMetadata).toEqual(core.createDirective({
         selector: 'someDirective',
         inputs: [],
         outputs: [],
@@ -147,7 +148,7 @@ export function main() {
       class ChildWithDecorator extends Parent {
       }
 
-      expect(resolver.resolve(ChildNoDecorator)).toEqual(new Directive({
+      expect(resolver.resolve(ChildNoDecorator)).toEqual(core.createDirective({
         selector: 'p',
         inputs: [],
         outputs: [],
@@ -157,7 +158,7 @@ export function main() {
         providers: undefined
       }));
 
-      expect(resolver.resolve(ChildWithDecorator)).toEqual(new Directive({
+      expect(resolver.resolve(ChildWithDecorator)).toEqual(core.createDirective({
         selector: 'c',
         inputs: [],
         outputs: [],
diff --git a/packages/compiler/test/i18n/extractor_merger_spec.ts b/packages/compiler/test/i18n/extractor_merger_spec.ts
index 0618e0408f..1cca886b3e 100644
--- a/packages/compiler/test/i18n/extractor_merger_spec.ts
+++ b/packages/compiler/test/i18n/extractor_merger_spec.ts
@@ -253,7 +253,7 @@ export function main() {
       });
 
       it('should extract from attributes in translatable ICUs', () => {
-        expect(extract(`<!-- i18n -->{count, plural, =0 {<p><b i18n-title="m|d@@i" 
+        expect(extract(`<!-- i18n -->{count, plural, =0 {<p><b i18n-title="m|d@@i"
                  title="msg"></b></p>}}<!-- /i18n -->`))
             .toEqual([
               [['msg'], 'm', 'd', 'i'],
diff --git a/packages/compiler/test/metadata_resolver_spec.ts b/packages/compiler/test/metadata_resolver_spec.ts
index 9c16f77099..df9e3b1c3a 100644
--- a/packages/compiler/test/metadata_resolver_spec.ts
+++ b/packages/compiler/test/metadata_resolver_spec.ts
@@ -7,7 +7,6 @@
  */
 
 import {LIFECYCLE_HOOKS_VALUES, LifecycleHooks} from '@angular/compiler/src/lifecycle_reflector';
-import {TEST_COMPILER_PROVIDERS} from '@angular/compiler/testing/src/test_bindings';
 import {AfterContentChecked, AfterContentInit, AfterViewChecked, AfterViewInit, ChangeDetectionStrategy, Component, Directive, DoCheck, Injectable, NgModule, OnChanges, OnDestroy, OnInit, Pipe, SimpleChanges, ViewEncapsulation, ɵstringify as stringify} from '@angular/core';
 import {TestBed, async, inject} from '@angular/core/testing';
 
@@ -17,6 +16,7 @@ import {ResourceLoader} from '../src/resource_loader';
 import {MockResourceLoader} from '../testing/src/resource_loader_mock';
 
 import {MalformedStylesComponent} from './metadata_resolver_fixture';
+import {TEST_COMPILER_PROVIDERS} from './test_bindings';
 
 export function main() {
   describe('CompileMetadataResolver', () => {
diff --git a/packages/compiler/test/ng_module_resolver_mock_spec.ts b/packages/compiler/test/ng_module_resolver_mock_spec.ts
index 81ebf312c2..adf792edde 100644
--- a/packages/compiler/test/ng_module_resolver_mock_spec.ts
+++ b/packages/compiler/test/ng_module_resolver_mock_spec.ts
@@ -6,9 +6,9 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {JitReflector} from '@angular/compiler';
 import {Injector, NgModule} from '@angular/core';
 import {beforeEach, describe, expect, inject, it} from '@angular/core/testing/src/testing_internal';
+import {JitReflector} from '@angular/platform-browser-dynamic/src/compiler_reflector';
 
 import {MockNgModuleResolver} from '../testing';
 
@@ -17,7 +17,7 @@ export function main() {
     let ngModuleResolver: MockNgModuleResolver;
 
     beforeEach(inject([Injector], (injector: Injector) => {
-      ngModuleResolver = new MockNgModuleResolver(injector, new JitReflector());
+      ngModuleResolver = new MockNgModuleResolver(new JitReflector());
     }));
 
     describe('NgModule overriding', () => {
diff --git a/packages/compiler/test/ng_module_resolver_spec.ts b/packages/compiler/test/ng_module_resolver_spec.ts
index 91d6a466cd..c56dfc1ec2 100644
--- a/packages/compiler/test/ng_module_resolver_spec.ts
+++ b/packages/compiler/test/ng_module_resolver_spec.ts
@@ -6,10 +6,10 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {JitReflector} from '@angular/compiler';
 import {NgModuleResolver} from '@angular/compiler/src/ng_module_resolver';
 import {ɵstringify as stringify} from '@angular/core';
 import {NgModule} from '@angular/core/src/metadata';
+import {JitReflector} from '@angular/platform-browser-dynamic/src/compiler_reflector';
 
 class SomeClass1 {}
 class SomeClass2 {}
diff --git a/packages/compiler/test/output/output_jit_spec.ts b/packages/compiler/test/output/output_jit_spec.ts
index b9aad8dadf..5587d4109a 100644
--- a/packages/compiler/test/output/output_jit_spec.ts
+++ b/packages/compiler/test/output/output_jit_spec.ts
@@ -9,6 +9,7 @@
 import {EmitterVisitorContext} from '@angular/compiler/src/output/abstract_emitter';
 import * as o from '@angular/compiler/src/output/output_ast';
 import {JitEmitterVisitor} from '@angular/compiler/src/output/output_jit';
+import {JitReflector} from '@angular/platform-browser-dynamic/src/compiler_reflector';
 
 const anotherModuleUrl = 'somePackage/someOtherPath';
 
@@ -23,7 +24,7 @@ export function main() {
             (_, index) => new o.ExternalReference(
                 anotherModuleUrl, `id_${index}_1`, {name: `id_${index}_1`}));
         const ctx = EmitterVisitorContext.createRoot();
-        const converter = new JitEmitterVisitor();
+        const converter = new JitEmitterVisitor(new JitReflector());
         converter.visitAllStatements(
             [o.literalArr([...externalIds1, ...externalIds].map(id => o.importExpr(id))).toStmt()],
             ctx);
diff --git a/packages/compiler/test/pipe_resolver_mock_spec.ts b/packages/compiler/test/pipe_resolver_mock_spec.ts
index d52b1b494b..4db3e71a6b 100644
--- a/packages/compiler/test/pipe_resolver_mock_spec.ts
+++ b/packages/compiler/test/pipe_resolver_mock_spec.ts
@@ -6,9 +6,9 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {JitReflector} from '@angular/compiler';
 import {Injector, Pipe} from '@angular/core';
 import {inject} from '@angular/core/testing';
+import {JitReflector} from '@angular/platform-browser-dynamic/src/compiler_reflector';
 
 import {MockPipeResolver} from '../testing';
 
@@ -17,7 +17,7 @@ export function main() {
     let pipeResolver: MockPipeResolver;
 
     beforeEach(inject([Injector], (injector: Injector) => {
-      pipeResolver = new MockPipeResolver(injector, new JitReflector());
+      pipeResolver = new MockPipeResolver(new JitReflector());
     }));
 
     describe('Pipe overriding', () => {
diff --git a/packages/compiler/test/pipe_resolver_spec.ts b/packages/compiler/test/pipe_resolver_spec.ts
index 2fd5cf7c23..2e5285c823 100644
--- a/packages/compiler/test/pipe_resolver_spec.ts
+++ b/packages/compiler/test/pipe_resolver_spec.ts
@@ -6,10 +6,10 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {JitReflector} from '@angular/compiler';
 import {PipeResolver} from '@angular/compiler/src/pipe_resolver';
 import {ɵstringify as stringify} from '@angular/core';
 import {Pipe} from '@angular/core/src/metadata';
+import {JitReflector} from '@angular/platform-browser-dynamic/src/compiler_reflector';
 
 @Pipe({name: 'somePipe', pure: true})
 class SomePipe {
diff --git a/packages/compiler/test/runtime_compiler_spec.ts b/packages/compiler/test/runtime_compiler_spec.ts
index 199e9e2827..73bedc3d05 100644
--- a/packages/compiler/test/runtime_compiler_spec.ts
+++ b/packages/compiler/test/runtime_compiler_spec.ts
@@ -7,7 +7,7 @@
  */
 
 import {DirectiveResolver, ResourceLoader} from '@angular/compiler';
-import {Compiler, Component, Injector, NgModule, NgModuleFactory, ɵViewMetadata as ViewMetadata, ɵstringify as stringify} from '@angular/core';
+import {Compiler, Component, Injector, NgModule, NgModuleFactory, ɵstringify as stringify} from '@angular/core';
 import {TestBed, async, fakeAsync, inject, tick} from '@angular/core/testing';
 import {expect} from '@angular/platform-browser/testing/src/matchers';
 import {MockDirectiveResolver} from '../testing';
@@ -137,8 +137,9 @@ export function main() {
            }
 
            resourceLoader.spy('get').and.callFake(() => Promise.resolve(''));
-           dirResolver.setView(SomeComp, new ViewMetadata({template: ''}));
-           dirResolver.setView(ChildComp, new ViewMetadata({templateUrl: '/someTpl.html'}));
+           dirResolver.setDirective(SomeComp, new Component({selector: 'some-cmp', template: ''}));
+           dirResolver.setDirective(
+               ChildComp, new Component({selector: 'child-cmp', templateUrl: '/someTpl.html'}));
            expect(() => compiler.compileModuleSync(SomeModule))
                .toThrowError(
                    `Can't compile synchronously as ${stringify(ChildComp)} is still being loaded!`);
diff --git a/packages/compiler/test/template_parser/template_parser_spec.ts b/packages/compiler/test/template_parser/template_parser_spec.ts
index 7937bd7cbd..a6371c5b1f 100644
--- a/packages/compiler/test/template_parser/template_parser_spec.ts
+++ b/packages/compiler/test/template_parser/template_parser_spec.ts
@@ -5,16 +5,16 @@
  * 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 {CompileQueryMetadata, CompilerConfig, JitReflector, ProxyClass, StaticSymbol, preserveWhitespacesDefault} from '@angular/compiler';
+import {CompileQueryMetadata, CompilerConfig, ProxyClass, StaticSymbol, preserveWhitespacesDefault} from '@angular/compiler';
 import {CompileAnimationEntryMetadata, CompileDiDependencyMetadata, CompileDirectiveMetadata, CompileDirectiveSummary, CompilePipeMetadata, CompilePipeSummary, CompileProviderMetadata, CompileTemplateMetadata, CompileTokenMetadata, CompileTypeMetadata, tokenReference} from '@angular/compiler/src/compile_metadata';
 import {DomElementSchemaRegistry} from '@angular/compiler/src/schema/dom_element_schema_registry';
 import {ElementSchemaRegistry} from '@angular/compiler/src/schema/element_schema_registry';
 import {AttrAst, BoundDirectivePropertyAst, BoundElementPropertyAst, BoundEventAst, BoundTextAst, DirectiveAst, ElementAst, EmbeddedTemplateAst, NgContentAst, PropertyBindingType, ProviderAstType, ReferenceAst, TemplateAst, TemplateAstVisitor, TextAst, VariableAst, templateVisitAll} from '@angular/compiler/src/template_parser/template_ast';
-import {TEMPLATE_TRANSFORMS, TemplateParser, splitClasses} from '@angular/compiler/src/template_parser/template_parser';
-import {TEST_COMPILER_PROVIDERS} from '@angular/compiler/testing/src/test_bindings';
+import {TemplateParser, splitClasses} from '@angular/compiler/src/template_parser/template_parser';
 import {ChangeDetectionStrategy, ComponentFactory, RendererType2, SchemaMetadata, SecurityContext, ViewEncapsulation} from '@angular/core';
 import {Console} from '@angular/core/src/console';
 import {TestBed, inject} from '@angular/core/testing';
+import {JitReflector} from '@angular/platform-browser-dynamic/src/compiler_reflector';
 
 import {CompileEntryComponentMetadata, CompileStylesheetMetadata} from '../../src/compile_metadata';
 import {Identifiers, createTokenForExternalReference, createTokenForReference} from '../../src/identifiers';
@@ -22,6 +22,7 @@ import {DEFAULT_INTERPOLATION_CONFIG, InterpolationConfig} from '../../src/ml_pa
 import {noUndefined} from '../../src/util';
 import {MockSchemaRegistry} from '../../testing';
 import {unparse} from '../expression_parser/unparser';
+import {TEST_COMPILER_PROVIDERS} from '../test_bindings';
 
 const someModuleUrl = 'package:someModule';
 
@@ -37,29 +38,28 @@ function createTypeMeta({reference, diDeps}: {reference: any, diDeps?: any[]}):
   return {reference: reference, diDeps: diDeps || [], lifecycleHooks: []};
 }
 
-function compileDirectiveMetadataCreate(
-    {isHost, type, isComponent, selector, exportAs, changeDetection, inputs, outputs, host,
-     providers, viewProviders, queries, viewQueries, entryComponents, template, componentViewType,
-     rendererType, componentFactory}: {
-      isHost?: boolean,
-      type?: CompileTypeMetadata,
-      isComponent?: boolean,
-      selector?: string | null,
-      exportAs?: string | null,
-      changeDetection?: ChangeDetectionStrategy | null,
-      inputs?: string[],
-      outputs?: string[],
-      host?: {[key: string]: string},
-      providers?: CompileProviderMetadata[] | null,
-      viewProviders?: CompileProviderMetadata[] | null,
-      queries?: CompileQueryMetadata[] | null,
-      viewQueries?: CompileQueryMetadata[],
-      entryComponents?: CompileEntryComponentMetadata[],
-      template?: CompileTemplateMetadata,
-      componentViewType?: StaticSymbol | ProxyClass | null,
-      rendererType?: StaticSymbol | RendererType2 | null,
-      componentFactory?: StaticSymbol | ComponentFactory<any>
-    }) {
+function compileDirectiveMetadataCreate({isHost, type, isComponent, selector, exportAs,
+                                         changeDetection, inputs, outputs, host, providers,
+                                         viewProviders, queries, viewQueries, entryComponents,
+                                         template, componentViewType, rendererType}: {
+  isHost?: boolean,
+  type?: CompileTypeMetadata,
+  isComponent?: boolean,
+  selector?: string | null,
+  exportAs?: string | null,
+  changeDetection?: ChangeDetectionStrategy | null,
+  inputs?: string[],
+  outputs?: string[],
+  host?: {[key: string]: string},
+  providers?: CompileProviderMetadata[] | null,
+  viewProviders?: CompileProviderMetadata[] | null,
+  queries?: CompileQueryMetadata[] | null,
+  viewQueries?: CompileQueryMetadata[],
+  entryComponents?: CompileEntryComponentMetadata[],
+  template?: CompileTemplateMetadata,
+  componentViewType?: StaticSymbol | ProxyClass | null,
+  rendererType?: StaticSymbol | RendererType2 | null,
+}) {
   return CompileDirectiveMetadata.create({
     isHost: !!isHost,
     type: noUndefined(type) !,
@@ -78,7 +78,7 @@ function compileDirectiveMetadataCreate(
     template: noUndefined(template) !,
     componentViewType: noUndefined(componentViewType),
     rendererType: noUndefined(rendererType),
-    componentFactory: noUndefined(componentFactory),
+    componentFactory: null,
   });
 }
 
@@ -274,38 +274,6 @@ export function main() {
     });
   });
 
-  describe('TemplateParser template transform', () => {
-    beforeEach(() => { TestBed.configureCompiler({providers: TEST_COMPILER_PROVIDERS}); });
-
-    beforeEach(() => {
-      TestBed.configureCompiler({
-        providers:
-            [{provide: TEMPLATE_TRANSFORMS, useValue: new FooAstTransformer(), multi: true}]
-      });
-    });
-
-    describe('single', () => {
-      commonBeforeEach();
-      it('should transform TemplateAST', () => {
-        expect(humanizeTplAst(parse('<div>', []))).toEqual([[ElementAst, 'foo']]);
-      });
-    });
-
-    describe('multiple', () => {
-      beforeEach(() => {
-        TestBed.configureCompiler({
-          providers:
-              [{provide: TEMPLATE_TRANSFORMS, useValue: new BarAstTransformer(), multi: true}]
-        });
-      });
-
-      commonBeforeEach();
-      it('should compose transformers', () => {
-        expect(humanizeTplAst(parse('<div>', []))).toEqual([[ElementAst, 'bar']]);
-      });
-    });
-  });
-
   describe('TemplateParser Security', () => {
     // Semi-integration test to make sure TemplateParser properly sets the security context.
     // Uses the actual DomElementSchemaRegistry.
diff --git a/packages/compiler/testing/src/test_bindings.ts b/packages/compiler/test/test_bindings.ts
similarity index 83%
rename from packages/compiler/testing/src/test_bindings.ts
rename to packages/compiler/test/test_bindings.ts
index 4956bf64f4..3618a4e58a 100644
--- a/packages/compiler/testing/src/test_bindings.ts
+++ b/packages/compiler/test/test_bindings.ts
@@ -7,9 +7,9 @@
  */
 
 import {ElementSchemaRegistry, ResourceLoader, UrlResolver} from '@angular/compiler';
+import {MockResourceLoader} from '@angular/compiler/testing/src/resource_loader_mock';
+import {MockSchemaRegistry} from '@angular/compiler/testing/src/schema_registry_mock';
 import {Provider} from '@angular/core';
-import {MockResourceLoader} from './resource_loader_mock';
-import {MockSchemaRegistry} from './schema_registry_mock';
 
 export function createUrlResolverWithoutPackagePrefix(): UrlResolver {
   return new UrlResolver();
diff --git a/packages/compiler/testing/src/directive_resolver_mock.ts b/packages/compiler/testing/src/directive_resolver_mock.ts
index c03bb61645..f3de0fe888 100644
--- a/packages/compiler/testing/src/directive_resolver_mock.ts
+++ b/packages/compiler/testing/src/directive_resolver_mock.ts
@@ -5,144 +5,28 @@
  * 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 {CompileReflector, DirectiveResolver} from '@angular/compiler';
-import {Compiler, Component, Directive, Injectable, Injector, Provider, Type, resolveForwardRef, ɵViewMetadata as ViewMetadata} from '@angular/core';
-
-
+import {CompileReflector, DirectiveResolver, core} from '@angular/compiler';
 
 /**
  * An implementation of {@link DirectiveResolver} that allows overriding
  * various properties of directives.
  */
-@Injectable()
 export class MockDirectiveResolver extends DirectiveResolver {
-  private _directives = new Map<Type<any>, Directive>();
-  private _providerOverrides = new Map<Type<any>, any[]>();
-  private _viewProviderOverrides = new Map<Type<any>, any[]>();
-  private _views = new Map<Type<any>, ViewMetadata>();
-  private _inlineTemplates = new Map<Type<any>, string>();
+  private _directives = new Map<core.Type, core.Directive>();
 
-  constructor(private _injector: Injector, reflector: CompileReflector) { super(reflector); }
+  constructor(reflector: CompileReflector) { super(reflector); }
 
-  private get _compiler(): Compiler { return this._injector.get(Compiler); }
-
-  private _clearCacheFor(component: Type<any>) { this._compiler.clearCacheFor(component); }
-
-  resolve(type: Type<any>): Directive;
-  resolve(type: Type<any>, throwIfNotFound: true): Directive;
-  resolve(type: Type<any>, throwIfNotFound: boolean): Directive|null;
-  resolve(type: Type<any>, throwIfNotFound = true): Directive|null {
-    let metadata = this._directives.get(type) || null;
-    if (!metadata) {
-      metadata = super.resolve(type, throwIfNotFound);
-    }
-    if (!metadata) {
-      return null;
-    }
-
-    const providerOverrides = this._providerOverrides.get(type);
-    const viewProviderOverrides = this._viewProviderOverrides.get(type);
-
-    let providers = metadata.providers;
-    if (providerOverrides != null) {
-      const originalViewProviders: Provider[] = metadata.providers || [];
-      providers = originalViewProviders.concat(providerOverrides);
-    }
-
-    if (metadata instanceof Component) {
-      let viewProviders = metadata.viewProviders;
-      if (viewProviderOverrides != null) {
-        const originalViewProviders: Provider[] = metadata.viewProviders || [];
-        viewProviders = originalViewProviders.concat(viewProviderOverrides);
-      }
-
-      let view = this._views.get(type) || metadata;
-      let animations = view.animations;
-      let templateUrl: string|undefined = view.templateUrl;
-
-      let inlineTemplate = this._inlineTemplates.get(type);
-      if (inlineTemplate) {
-        templateUrl = undefined;
-      } else {
-        inlineTemplate = view.template;
-      }
-
-      return new Component({
-        selector: metadata.selector,
-        inputs: metadata.inputs,
-        outputs: metadata.outputs,
-        host: metadata.host,
-        exportAs: metadata.exportAs,
-        moduleId: metadata.moduleId,
-        queries: metadata.queries,
-        changeDetection: metadata.changeDetection,
-        providers: providers,
-        viewProviders: viewProviders,
-        entryComponents: metadata.entryComponents,
-        template: inlineTemplate,
-        templateUrl: templateUrl,
-        animations: animations,
-        styles: view.styles,
-        styleUrls: view.styleUrls,
-        encapsulation: view.encapsulation,
-        interpolation: view.interpolation,
-        preserveWhitespaces: view.preserveWhitespaces,
-      });
-    }
-
-    return new Directive({
-      selector: metadata.selector,
-      inputs: metadata.inputs,
-      outputs: metadata.outputs,
-      host: metadata.host,
-      providers: providers,
-      exportAs: metadata.exportAs,
-      queries: metadata.queries
-    });
+  resolve(type: core.Type): core.Directive;
+  resolve(type: core.Type, throwIfNotFound: true): core.Directive;
+  resolve(type: core.Type, throwIfNotFound: boolean): core.Directive|null;
+  resolve(type: core.Type, throwIfNotFound = true): core.Directive|null {
+    return this._directives.get(type) || super.resolve(type, throwIfNotFound);
   }
 
   /**
-   * Overrides the {@link Directive} for a directive.
+   * Overrides the {@link core.Directive} for a directive.
    */
-  setDirective(type: Type<any>, metadata: Directive): void {
+  setDirective(type: core.Type, metadata: core.Directive): void {
     this._directives.set(type, metadata);
-    this._clearCacheFor(type);
-  }
-
-  setProvidersOverride(type: Type<any>, providers: Provider[]): void {
-    this._providerOverrides.set(type, providers);
-    this._clearCacheFor(type);
-  }
-
-  setViewProvidersOverride(type: Type<any>, viewProviders: Provider[]): void {
-    this._viewProviderOverrides.set(type, viewProviders);
-    this._clearCacheFor(type);
-  }
-
-  /**
-   * Overrides the {@link ViewMetadata} for a component.
-   */
-  setView(component: Type<any>, view: ViewMetadata): void {
-    this._views.set(component, view);
-    this._clearCacheFor(component);
-  }
-  /**
-   * Overrides the inline template for a component - other configuration remains unchanged.
-   */
-  setInlineTemplate(component: Type<any>, template: string): void {
-    this._inlineTemplates.set(component, template);
-    this._clearCacheFor(component);
-  }
-}
-
-function flattenArray(tree: any[], out: Array<Type<any>|any[]>): void {
-  if (tree == null) return;
-  for (let i = 0; i < tree.length; i++) {
-    const item = resolveForwardRef(tree[i]);
-    if (Array.isArray(item)) {
-      flattenArray(item, out);
-    } else {
-      out.push(item);
-    }
   }
 }
diff --git a/packages/compiler/testing/src/ng_module_resolver_mock.ts b/packages/compiler/testing/src/ng_module_resolver_mock.ts
index 602c5e2b87..619435c9e4 100644
--- a/packages/compiler/testing/src/ng_module_resolver_mock.ts
+++ b/packages/compiler/testing/src/ng_module_resolver_mock.ts
@@ -6,21 +6,18 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {CompileReflector, NgModuleResolver} from '@angular/compiler';
-import {Compiler, Injectable, Injector, NgModule, Type} from '@angular/core';
+import {CompileReflector, NgModuleResolver, core} from '@angular/compiler';
 
-@Injectable()
 export class MockNgModuleResolver extends NgModuleResolver {
-  private _ngModules = new Map<Type<any>, NgModule>();
+  private _ngModules = new Map<core.Type, core.NgModule>();
 
-  constructor(private _injector: Injector, reflector: CompileReflector) { super(reflector); }
+  constructor(reflector: CompileReflector) { super(reflector); }
 
   /**
    * Overrides the {@link NgModule} for a module.
    */
-  setNgModule(type: Type<any>, metadata: NgModule): void {
+  setNgModule(type: core.Type, metadata: core.NgModule): void {
     this._ngModules.set(type, metadata);
-    this._clearCacheFor(type);
   }
 
   /**
@@ -29,11 +26,7 @@ export class MockNgModuleResolver extends NgModuleResolver {
    * default
    * `NgModuleResolver`, see `setNgModule`.
    */
-  resolve(type: Type<any>, throwIfNotFound = true): NgModule {
+  resolve(type: core.Type, throwIfNotFound = true): core.NgModule {
     return this._ngModules.get(type) || super.resolve(type, throwIfNotFound) !;
   }
-
-  private get _compiler(): Compiler { return this._injector.get(Compiler); }
-
-  private _clearCacheFor(component: Type<any>) { this._compiler.clearCacheFor(component); }
 }
diff --git a/packages/compiler/testing/src/pipe_resolver_mock.ts b/packages/compiler/testing/src/pipe_resolver_mock.ts
index a636002dd1..36fb91667a 100644
--- a/packages/compiler/testing/src/pipe_resolver_mock.ts
+++ b/packages/compiler/testing/src/pipe_resolver_mock.ts
@@ -6,26 +6,17 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {CompileReflector, PipeResolver} from '@angular/compiler';
-import {Compiler, Injectable, Injector, Pipe, Type} from '@angular/core';
+import {CompileReflector, PipeResolver, core} from '@angular/compiler';
 
-@Injectable()
 export class MockPipeResolver extends PipeResolver {
-  private _pipes = new Map<Type<any>, Pipe>();
+  private _pipes = new Map<core.Type, core.Pipe>();
 
-  constructor(private _injector: Injector, refector: CompileReflector) { super(refector); }
-
-  private get _compiler(): Compiler { return this._injector.get(Compiler); }
-
-  private _clearCacheFor(pipe: Type<any>) { this._compiler.clearCacheFor(pipe); }
+  constructor(refector: CompileReflector) { super(refector); }
 
   /**
    * Overrides the {@link Pipe} for a pipe.
    */
-  setPipe(type: Type<any>, metadata: Pipe): void {
-    this._pipes.set(type, metadata);
-    this._clearCacheFor(type);
-  }
+  setPipe(type: core.Type, metadata: core.Pipe): void { this._pipes.set(type, metadata); }
 
   /**
    * Returns the {@link Pipe} for a pipe:
@@ -33,7 +24,7 @@ export class MockPipeResolver extends PipeResolver {
    * default
    * `PipeResolver`, see `setPipe`.
    */
-  resolve(type: Type<any>, throwIfNotFound = true): Pipe {
+  resolve(type: core.Type, throwIfNotFound = true): core.Pipe {
     let metadata = this._pipes.get(type);
     if (!metadata) {
       metadata = super.resolve(type, throwIfNotFound) !;
diff --git a/packages/compiler/testing/src/schema_registry_mock.ts b/packages/compiler/testing/src/schema_registry_mock.ts
index b5dc6037a6..b1c5b25ccf 100644
--- a/packages/compiler/testing/src/schema_registry_mock.ts
+++ b/packages/compiler/testing/src/schema_registry_mock.ts
@@ -6,8 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {ElementSchemaRegistry} from '@angular/compiler';
-import {SchemaMetadata, SecurityContext} from '@angular/core';
+import {ElementSchemaRegistry, core} from '@angular/compiler';
 
 export class MockSchemaRegistry implements ElementSchemaRegistry {
   constructor(
@@ -16,20 +15,20 @@ export class MockSchemaRegistry implements ElementSchemaRegistry {
       public existingElements: {[key: string]: boolean}, public invalidProperties: Array<string>,
       public invalidAttributes: Array<string>) {}
 
-  hasProperty(tagName: string, property: string, schemas: SchemaMetadata[]): boolean {
+  hasProperty(tagName: string, property: string, schemas: core.SchemaMetadata[]): boolean {
     const value = this.existingProperties[property];
     return value === void 0 ? true : value;
   }
 
-  hasElement(tagName: string, schemaMetas: SchemaMetadata[]): boolean {
+  hasElement(tagName: string, schemaMetas: core.SchemaMetadata[]): boolean {
     const value = this.existingElements[tagName.toLowerCase()];
     return value === void 0 ? true : value;
   }
 
   allKnownElementNames(): string[] { return Object.keys(this.existingElements); }
 
-  securityContext(selector: string, property: string, isAttribute: boolean): SecurityContext {
-    return SecurityContext.NONE;
+  securityContext(selector: string, property: string, isAttribute: boolean): core.SecurityContext {
+    return core.SecurityContext.NONE;
   }
 
   getMappedPropName(attrName: string): string { return this.attrPropMapping[attrName] || attrName; }
diff --git a/packages/compiler/testing/src/testing.ts b/packages/compiler/testing/src/testing.ts
index 0d259fa709..cc89dd3f75 100644
--- a/packages/compiler/testing/src/testing.ts
+++ b/packages/compiler/testing/src/testing.ts
@@ -21,122 +21,8 @@
  *   </p>
  * </div>
  */
+export * from './resource_loader_mock';
 export * from './schema_registry_mock';
 export * from './directive_resolver_mock';
 export * from './ng_module_resolver_mock';
 export * from './pipe_resolver_mock';
-
-import {createPlatformFactory, ModuleWithComponentFactories, Injectable, CompilerOptions, COMPILER_OPTIONS, CompilerFactory, ComponentFactory, NgModuleFactory, Injector, NgModule, Component, Directive, Pipe, Type, PlatformRef, ɵstringify} from '@angular/core';
-import {MetadataOverride, ɵTestingCompilerFactory as TestingCompilerFactory, ɵTestingCompiler as TestingCompiler} from '@angular/core/testing';
-import {platformCoreDynamic, JitCompiler, DirectiveResolver, NgModuleResolver, PipeResolver, CompileMetadataResolver, CompileReflector} from '@angular/compiler';
-import {MockDirectiveResolver} from './directive_resolver_mock';
-import {MockNgModuleResolver} from './ng_module_resolver_mock';
-import {MockPipeResolver} from './pipe_resolver_mock';
-import {MetadataOverrider} from './metadata_overrider';
-
-@Injectable()
-export class TestingCompilerFactoryImpl implements TestingCompilerFactory {
-  constructor(private _compilerFactory: CompilerFactory) {}
-
-  createTestingCompiler(options: CompilerOptions[]): TestingCompiler {
-    const compiler = <JitCompiler>this._compilerFactory.createCompiler(options);
-    return new TestingCompilerImpl(
-        compiler, compiler.injector.get(MockDirectiveResolver),
-        compiler.injector.get(MockPipeResolver), compiler.injector.get(MockNgModuleResolver),
-        compiler.injector.get(CompileMetadataResolver));
-  }
-}
-
-export class TestingCompilerImpl implements TestingCompiler {
-  private _overrider = new MetadataOverrider();
-  constructor(
-      private _compiler: JitCompiler, private _directiveResolver: MockDirectiveResolver,
-      private _pipeResolver: MockPipeResolver, private _moduleResolver: MockNgModuleResolver,
-      private _metadataResolver: CompileMetadataResolver) {}
-  get injector(): Injector { return this._compiler.injector; }
-
-  compileModuleSync<T>(moduleType: Type<T>): NgModuleFactory<T> {
-    return this._compiler.compileModuleSync(moduleType);
-  }
-
-  compileModuleAsync<T>(moduleType: Type<T>): Promise<NgModuleFactory<T>> {
-    return this._compiler.compileModuleAsync(moduleType);
-  }
-  compileModuleAndAllComponentsSync<T>(moduleType: Type<T>): ModuleWithComponentFactories<T> {
-    return this._compiler.compileModuleAndAllComponentsSync(moduleType);
-  }
-
-  compileModuleAndAllComponentsAsync<T>(moduleType: Type<T>):
-      Promise<ModuleWithComponentFactories<T>> {
-    return this._compiler.compileModuleAndAllComponentsAsync(moduleType);
-  }
-
-  getNgContentSelectors(component: Type<any>): string[] {
-    return this._compiler.getNgContentSelectors(component);
-  }
-
-  getComponentFactory<T>(component: Type<T>): ComponentFactory<T> {
-    return this._compiler.getComponentFactory(component);
-  }
-
-  checkOverrideAllowed(type: Type<any>) {
-    if (this._compiler.hasAotSummary(type)) {
-      throw new Error(`${ɵstringify(type)} was AOT compiled, so its metadata cannot be changed.`);
-    }
-  }
-
-  overrideModule(ngModule: Type<any>, override: MetadataOverride<NgModule>): void {
-    this.checkOverrideAllowed(ngModule);
-    const oldMetadata = this._moduleResolver.resolve(ngModule, false);
-    this._moduleResolver.setNgModule(
-        ngModule, this._overrider.overrideMetadata(NgModule, oldMetadata, override));
-  }
-  overrideDirective(directive: Type<any>, override: MetadataOverride<Directive>): void {
-    this.checkOverrideAllowed(directive);
-    const oldMetadata = this._directiveResolver.resolve(directive, false);
-    this._directiveResolver.setDirective(
-        directive, this._overrider.overrideMetadata(Directive, oldMetadata !, override));
-  }
-  overrideComponent(component: Type<any>, override: MetadataOverride<Component>): void {
-    this.checkOverrideAllowed(component);
-    const oldMetadata = this._directiveResolver.resolve(component, false);
-    this._directiveResolver.setDirective(
-        component, this._overrider.overrideMetadata(Component, oldMetadata !, override));
-  }
-  overridePipe(pipe: Type<any>, override: MetadataOverride<Pipe>): void {
-    this.checkOverrideAllowed(pipe);
-    const oldMetadata = this._pipeResolver.resolve(pipe, false);
-    this._pipeResolver.setPipe(pipe, this._overrider.overrideMetadata(Pipe, oldMetadata, override));
-  }
-  loadAotSummaries(summaries: () => any[]) { this._compiler.loadAotSummaries(summaries); }
-  clearCache(): void { this._compiler.clearCache(); }
-  clearCacheFor(type: Type<any>) { this._compiler.clearCacheFor(type); }
-}
-
-/**
- * Platform for dynamic tests
- *
- * @experimental
- */
-export const platformCoreDynamicTesting: (extraProviders?: any[]) => PlatformRef =
-    createPlatformFactory(platformCoreDynamic, 'coreDynamicTesting', [
-      {
-        provide: COMPILER_OPTIONS,
-        useValue: {
-          providers: [
-            {provide: MockPipeResolver, deps: [Injector, CompileReflector]},
-            {provide: PipeResolver, useExisting: MockPipeResolver},
-            {provide: MockDirectiveResolver, deps: [Injector, CompileReflector]},
-            {provide: DirectiveResolver, useExisting: MockDirectiveResolver},
-            {provide: MockNgModuleResolver, deps: [Injector, CompileReflector]},
-            {provide: NgModuleResolver, useExisting: MockNgModuleResolver},
-          ]
-        },
-        multi: true
-      },
-      {
-        provide: TestingCompilerFactory,
-        useClass: TestingCompilerFactoryImpl,
-        deps: [CompilerFactory]
-      }
-    ]);
diff --git a/packages/compiler/testing/tsconfig-build.json b/packages/compiler/testing/tsconfig-build.json
index 48497dfcce..ed9fcb4da6 100644
--- a/packages/compiler/testing/tsconfig-build.json
+++ b/packages/compiler/testing/tsconfig-build.json
@@ -5,8 +5,6 @@
     // Test that we rely on decorator downleveling
     "emitDecoratorMetadata": false,
     "paths": {
-      "@angular/core": ["../../dist/packages/core"],
-      "@angular/core/testing": ["../../dist/packages/core/testing"],
       "@angular/compiler": ["../../dist/packages/compiler"]
     }
   },
diff --git a/packages/compiler/tsconfig-build.json b/packages/compiler/tsconfig-build.json
index edad3e483b..27d4084c32 100644
--- a/packages/compiler/tsconfig-build.json
+++ b/packages/compiler/tsconfig-build.json
@@ -11,10 +11,6 @@
     "module": "es2015",
     "moduleResolution": "node",
     "outDir": "../../dist/packages/compiler",
-    "paths": {
-      "@angular/core": ["../../dist/packages/core"],
-      "@angular/core/testing": ["../../dist/packages/core/testing"]
-    },
     "rootDir": ".",
     "sourceMap": true,
     "inlineSources": true,
@@ -27,8 +23,5 @@
   "files": [
     "index.ts",
     "../../node_modules/zone.js/dist/zone.js.d.ts"
-  ],
-  "angularCompilerOptions": {
-    "annotateForClosureCompiler": true
-  }
+  ]
 }
diff --git a/packages/core/src/change_detection/constants.ts b/packages/core/src/change_detection/constants.ts
index 03f4104f3f..21129486fb 100644
--- a/packages/core/src/change_detection/constants.ts
+++ b/packages/core/src/change_detection/constants.ts
@@ -16,12 +16,12 @@ export enum ChangeDetectionStrategy {
   /**
    * `OnPush` means that the change detector's mode will be set to `CheckOnce` during hydration.
    */
-  OnPush,
+  OnPush = 0,
 
   /**
    * `Default` means that the change detector's mode will be set to `CheckAlways` during hydration.
    */
-  Default,
+  Default = 1,
 }
 
 /**
diff --git a/packages/core/src/core_private_export.ts b/packages/core/src/core_private_export.ts
index c3c275dedb..33d36d7adb 100644
--- a/packages/core/src/core_private_export.ts
+++ b/packages/core/src/core_private_export.ts
@@ -12,10 +12,8 @@ export {ValueUnwrapper as ɵValueUnwrapper, devModeEqual as ɵdevModeEqual} from
 export {isListLikeIterable as ɵisListLikeIterable} from './change_detection/change_detection_util';
 export {ChangeDetectorStatus as ɵChangeDetectorStatus, isDefaultChangeDetectionStrategy as ɵisDefaultChangeDetectionStrategy} from './change_detection/constants';
 export {Console as ɵConsole} from './console';
-export {ERROR_COMPONENT_TYPE as ɵERROR_COMPONENT_TYPE} from './errors';
 export {ComponentFactory as ɵComponentFactory} from './linker/component_factory';
 export {CodegenComponentFactoryResolver as ɵCodegenComponentFactoryResolver} from './linker/component_factory_resolver';
-export {ViewMetadata as ɵViewMetadata} from './metadata/view';
 export {ReflectionCapabilities as ɵReflectionCapabilities} from './reflection/reflection_capabilities';
 export {GetterFn as ɵGetterFn, MethodFn as ɵMethodFn, SetterFn as ɵSetterFn} from './reflection/types';
 export {DirectRenderer as ɵDirectRenderer, RenderDebugInfo as ɵRenderDebugInfo} from './render/api';
diff --git a/packages/core/src/di/injection_token.ts b/packages/core/src/di/injection_token.ts
index 0602cd92e8..6f05a8ca9b 100644
--- a/packages/core/src/di/injection_token.ts
+++ b/packages/core/src/di/injection_token.ts
@@ -64,4 +64,7 @@ export class InjectionToken<T> extends OpaqueToken {
   constructor(desc: string) { super(desc); }
 
   toString(): string { return `InjectionToken ${this._desc}`; }
+
+  /** @internal */
+  get ngMetadataName() { return 'InjectionToken'; }
 }
diff --git a/packages/core/src/errors.ts b/packages/core/src/errors.ts
index a8a1ae8928..002dbe903d 100644
--- a/packages/core/src/errors.ts
+++ b/packages/core/src/errors.ts
@@ -9,7 +9,6 @@
 import {DebugContext} from './view';
 
 export const ERROR_TYPE = 'ngType';
-export const ERROR_COMPONENT_TYPE = 'ngComponentType';
 export const ERROR_DEBUG_CONTEXT = 'ngDebugContext';
 export const ERROR_ORIGINAL_ERROR = 'ngOriginalError';
 export const ERROR_LOGGER = 'ngErrorLogger';
diff --git a/packages/core/src/i18n/tokens.ts b/packages/core/src/i18n/tokens.ts
index 0dd471bd5c..da156b7fef 100644
--- a/packages/core/src/i18n/tokens.ts
+++ b/packages/core/src/i18n/tokens.ts
@@ -27,7 +27,7 @@ export const TRANSLATIONS_FORMAT = new InjectionToken<string>('TranslationsForma
  * @experimental i18n support is experimental.
  */
 export enum MissingTranslationStrategy {
-  Error,
-  Warning,
-  Ignore,
+  Error = 0,
+  Warning = 1,
+  Ignore = 2,
 }
diff --git a/packages/core/src/metadata/view.ts b/packages/core/src/metadata/view.ts
index b0b8fa3ec5..624d56d4e4 100644
--- a/packages/core/src/metadata/view.ts
+++ b/packages/core/src/metadata/view.ts
@@ -21,76 +21,16 @@ export enum ViewEncapsulation {
    *
    * This is the default option.
    */
-  Emulated,
+  Emulated = 0,
   /**
    * Use the native encapsulation mechanism of the renderer.
    *
    * For the DOM this means using [Shadow DOM](https://w3c.github.io/webcomponents/spec/shadow/) and
    * creating a ShadowRoot for Component's Host Element.
    */
-  Native,
+  Native = 1,
   /**
    * Don't provide any template or style encapsulation.
    */
-  None
-}
-
-/**
- * Metadata properties available for configuring Views.
- *
- * For details on the `@Component` annotation, see {@link Component}.
- *
- * ### Example
- *
- * ```
- * @Component({
- *   selector: 'greet',
- *   template: 'Hello {{name}}!',
- * })
- * class Greet {
- *   name: string;
- *
- *   constructor() {
- *     this.name = 'World';
- *   }
- * }
- * ```
- *
- * @deprecated Use Component instead.
- *
- * {@link Component}
- */
-export class ViewMetadata {
-  /** {@link Component#templateUrl} */
-  templateUrl: string|undefined;
-  /** {@link Component#template} */
-  template: string|undefined;
-  /** {@link Component#stylesUrl} */
-  styleUrls: string[]|undefined;
-  /** {@link Component#styles} */
-  styles: string[]|undefined;
-  /** {@link Component#encapsulation} */
-  encapsulation: ViewEncapsulation|undefined;
-  /** {@link Component#animation} */
-  animations: any[]|undefined;
-  /** {@link Component#interpolation} */
-  interpolation: [string, string]|undefined;
-
-  constructor(opts: {
-    templateUrl?: string,
-    template?: string,
-    encapsulation?: ViewEncapsulation,
-    styles?: string[],
-    styleUrls?: string[],
-    animations?: any[],
-    interpolation?: [string, string]
-  } = {}) {
-    this.templateUrl = opts.templateUrl;
-    this.template = opts.template;
-    this.styleUrls = opts.styleUrls;
-    this.styles = opts.styles;
-    this.encapsulation = opts.encapsulation;
-    this.animations = opts.animations;
-    this.interpolation = opts.interpolation;
-  }
+  None = 2
 }
diff --git a/packages/core/src/security.ts b/packages/core/src/security.ts
index 54f1844780..c47e30bde9 100644
--- a/packages/core/src/security.ts
+++ b/packages/core/src/security.ts
@@ -16,12 +16,12 @@
  * @stable
  */
 export enum SecurityContext {
-  NONE,
-  HTML,
-  STYLE,
-  SCRIPT,
-  URL,
-  RESOURCE_URL,
+  NONE = 0,
+  HTML = 1,
+  STYLE = 2,
+  SCRIPT = 3,
+  URL = 4,
+  RESOURCE_URL = 5,
 }
 
 /**
diff --git a/packages/core/src/util/decorators.ts b/packages/core/src/util/decorators.ts
index 2aae8c6a1d..868106b69f 100644
--- a/packages/core/src/util/decorators.ts
+++ b/packages/core/src/util/decorators.ts
@@ -71,7 +71,7 @@ export function makeDecorator(
     DecoratorFactory.prototype = Object.create(parentClass.prototype);
   }
 
-  DecoratorFactory.prototype.toString = () => `@${name}`;
+  DecoratorFactory.prototype.ngMetadataName = name;
   (<any>DecoratorFactory).annotationCls = DecoratorFactory;
   return DecoratorFactory as any;
 }
@@ -120,7 +120,7 @@ export function makeParamDecorator(
   if (parentClass) {
     ParamDecoratorFactory.prototype = Object.create(parentClass.prototype);
   }
-  ParamDecoratorFactory.prototype.toString = () => `@${name}`;
+  ParamDecoratorFactory.prototype.ngMetadataName = name;
   (<any>ParamDecoratorFactory).annotationCls = ParamDecoratorFactory;
   return ParamDecoratorFactory;
 }
@@ -153,7 +153,7 @@ export function makePropDecorator(
     PropDecoratorFactory.prototype = Object.create(parentClass.prototype);
   }
 
-  PropDecoratorFactory.prototype.toString = () => `@${name}`;
+  PropDecoratorFactory.prototype.ngMetadataName = name;
   (<any>PropDecoratorFactory).annotationCls = PropDecoratorFactory;
   return PropDecoratorFactory;
 }
diff --git a/packages/core/src/view/types.ts b/packages/core/src/view/types.ts
index 2e1fcc67b6..7b5093bdcb 100644
--- a/packages/core/src/view/types.ts
+++ b/packages/core/src/view/types.ts
@@ -82,7 +82,7 @@ export interface NodeCheckFn {
    v3?: any, v4?: any, v5?: any, v6?: any, v7?: any, v8?: any, v9?: any): any;
 }
 
-export const enum ArgumentType {Inline, Dynamic}
+export const enum ArgumentType {Inline = 0, Dynamic = 1}
 
 export interface ViewHandleEventFn {
   (view: ViewData, nodeIndex: number, eventName: string, event: any): boolean;
@@ -225,11 +225,11 @@ export interface OutputDef {
 export const enum OutputType {ElementOutput, DirectiveOutput}
 
 export const enum QueryValueType {
-  ElementRef,
-  RenderElement,
-  TemplateRef,
-  ViewContainerRef,
-  Provider
+  ElementRef = 0,
+  RenderElement = 1,
+  TemplateRef = 2,
+  ViewContainerRef = 3,
+  Provider = 4
 }
 
 export interface ElementDef {
@@ -301,7 +301,7 @@ export interface QueryBindingDef {
   bindingType: QueryBindingType;
 }
 
-export const enum QueryBindingType {First, All}
+export const enum QueryBindingType {First = 0, All = 1}
 
 export interface NgContentDef {
   /**
diff --git a/packages/core/test/linker/change_detection_integration_spec.ts b/packages/core/test/linker/change_detection_integration_spec.ts
index e5d7b3f508..ddbf4600d6 100644
--- a/packages/core/test/linker/change_detection_integration_spec.ts
+++ b/packages/core/test/linker/change_detection_integration_spec.ts
@@ -6,16 +6,24 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {ElementSchemaRegistry} from '@angular/compiler/src/schema/element_schema_registry';
-import {TEST_COMPILER_PROVIDERS} from '@angular/compiler/testing/src/test_bindings';
-import {AfterContentChecked, AfterContentInit, AfterViewChecked, AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChild, DebugElement, Directive, DoCheck, EventEmitter, HostBinding, Inject, Injectable, Input, OnChanges, OnDestroy, OnInit, Output, Pipe, PipeTransform, RenderComponentType, Renderer, RendererFactory2, RootRenderer, SimpleChange, SimpleChanges, TemplateRef, Type, ViewChild, ViewContainerRef, WrappedValue} from '@angular/core';
+import {DomElementSchemaRegistry, ElementSchemaRegistry, ResourceLoader, UrlResolver} from '@angular/compiler';
+import {MockResourceLoader, MockSchemaRegistry} from '@angular/compiler/testing';
+import {AfterContentChecked, AfterContentInit, AfterViewChecked, AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChild, DebugElement, Directive, DoCheck, EventEmitter, HostBinding, Inject, Injectable, Input, OnChanges, OnDestroy, OnInit, Output, Pipe, PipeTransform, Provider, RenderComponentType, Renderer, RendererFactory2, RootRenderer, SimpleChange, SimpleChanges, TemplateRef, Type, ViewChild, ViewContainerRef, WrappedValue} from '@angular/core';
 import {ComponentFixture, TestBed, fakeAsync} from '@angular/core/testing';
 import {By} from '@angular/platform-browser/src/dom/debug/by';
 import {getDOM} from '@angular/platform-browser/src/dom/dom_adapter';
 import {expect} from '@angular/platform-browser/testing/src/matchers';
 
-import {DomElementSchemaRegistry} from '../../../compiler/index';
-import {MockSchemaRegistry} from '../../../compiler/testing/index';
+export function createUrlResolverWithoutPackagePrefix(): UrlResolver {
+  return new UrlResolver();
+}
+
+const TEST_COMPILER_PROVIDERS: Provider[] = [
+  {provide: ElementSchemaRegistry, useValue: new MockSchemaRegistry({}, {}, {}, [], [])},
+  {provide: ResourceLoader, useClass: MockResourceLoader, deps: []},
+  {provide: UrlResolver, useFactory: createUrlResolverWithoutPackagePrefix, deps: []}
+];
+
 
 export function main() {
   let elSchema: MockSchemaRegistry;
diff --git a/packages/core/testing/src/test_bed.ts b/packages/core/testing/src/test_bed.ts
index ff169116ca..f6bfb0ddbb 100644
--- a/packages/core/testing/src/test_bed.ts
+++ b/packages/core/testing/src/test_bed.ts
@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {ApplicationInitStatus, CompilerOptions, Component, Directive, InjectionToken, Injector, ModuleWithComponentFactories, NgModule, NgModuleFactory, NgModuleRef, NgZone, Optional, Pipe, PlatformRef, Provider, SchemaMetadata, SkipSelf, Type, ɵDepFlags as DepFlags, ɵERROR_COMPONENT_TYPE, ɵNodeFlags as NodeFlags, ɵclearProviderOverrides as clearProviderOverrides, ɵoverrideProvider as overrideProvider, ɵstringify as stringify} from '@angular/core';
+import {ApplicationInitStatus, CompilerOptions, Component, Directive, InjectionToken, Injector, ModuleWithComponentFactories, NgModule, NgModuleFactory, NgModuleRef, NgZone, Optional, Pipe, PlatformRef, Provider, SchemaMetadata, SkipSelf, Type, ɵDepFlags as DepFlags, ɵNodeFlags as NodeFlags, ɵclearProviderOverrides as clearProviderOverrides, ɵoverrideProvider as overrideProvider, ɵstringify as stringify} from '@angular/core';
 
 import {AsyncTestCompleter} from './async_test_completer';
 import {ComponentFixture} from './component_fixture';
@@ -298,9 +298,10 @@ export class TestBed implements Injector {
         this._moduleFactory =
             this._compiler.compileModuleAndAllComponentsSync(moduleType).ngModuleFactory;
       } catch (e) {
-        if (getComponentType(e)) {
+        const errorCompType = this._compiler.getComponentFromError(e);
+        if (errorCompType) {
           throw new Error(
-              `This test module uses the component ${stringify(getComponentType(e))} which is using a "templateUrl" or "styleUrls", but they were never compiled. ` +
+              `This test module uses the component ${stringify(errorCompType)} which is using a "templateUrl" or "styleUrls", but they were never compiled. ` +
               `Please call "TestBed.compileComponents" before your test.`);
         } else {
           throw e;
@@ -551,7 +552,3 @@ export function withModule(moduleDef: TestModuleMetadata, fn?: Function | null):
   }
   return new InjectSetupWrapper(() => moduleDef);
 }
-
-function getComponentType(error: Error): Function {
-  return (error as any)[ɵERROR_COMPONENT_TYPE];
-}
diff --git a/packages/core/testing/src/test_compiler.ts b/packages/core/testing/src/test_compiler.ts
index f2dd3d474f..049a273739 100644
--- a/packages/core/testing/src/test_compiler.ts
+++ b/packages/core/testing/src/test_compiler.ts
@@ -45,6 +45,12 @@ export class TestingCompiler extends Compiler {
    * `compileModuleAndAllComponents*`.
    */
   getComponentFactory<T>(component: Type<T>): ComponentFactory<T> { throw unimplemented(); }
+
+  /**
+   * Returns the component type that is stored in the given error.
+   * This can be used for errors created by compileModule...
+   */
+  getComponentFromError(error: Error): Type<any>|null { throw unimplemented(); }
 }
 
 /**
diff --git a/packages/compiler/src/jit/compiler_factory.ts b/packages/platform-browser-dynamic/src/compiler_factory.ts
similarity index 56%
rename from packages/compiler/src/jit/compiler_factory.ts
rename to packages/platform-browser-dynamic/src/compiler_factory.ts
index b57b2bf0c8..1ffb7a839f 100644
--- a/packages/compiler/src/jit/compiler_factory.ts
+++ b/packages/platform-browser-dynamic/src/compiler_factory.ts
@@ -6,33 +6,21 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {COMPILER_OPTIONS, Compiler, CompilerFactory, CompilerOptions, Inject, InjectionToken, Injector, MissingTranslationStrategy, Optional, PACKAGE_ROOT_URL, PlatformRef, StaticProvider, TRANSLATIONS, TRANSLATIONS_FORMAT, Type, ViewEncapsulation, createPlatformFactory, isDevMode, platformCore, ɵConsole as Console} from '@angular/core';
+import {Compiler, CompilerFactory, ComponentFactory, CompilerOptions, ModuleWithComponentFactories, Inject, InjectionToken, Optional, PACKAGE_ROOT_URL, PlatformRef, StaticProvider, TRANSLATIONS, Type, isDevMode, platformCore, ɵConsole as Console, ViewEncapsulation, Injector, NgModuleFactory, TRANSLATIONS_FORMAT, MissingTranslationStrategy,} from '@angular/core';
 
-import {StaticSymbolCache} from '../aot/static_symbol';
-import {CompileReflector} from '../compile_reflector';
-import {CompilerConfig} from '../config';
-import {DirectiveNormalizer} from '../directive_normalizer';
-import {DirectiveResolver} from '../directive_resolver';
-import {Lexer} from '../expression_parser/lexer';
-import {Parser} from '../expression_parser/parser';
-import * as i18n from '../i18n/index';
-import {CompilerInjectable} from '../injectable';
-import {CompileMetadataResolver, ERROR_COLLECTOR_TOKEN} from '../metadata_resolver';
-import {HtmlParser} from '../ml_parser/html_parser';
-import {NgModuleCompiler} from '../ng_module_compiler';
-import {NgModuleResolver} from '../ng_module_resolver';
-import {PipeResolver} from '../pipe_resolver';
-import {ResourceLoader} from '../resource_loader';
-import {DomElementSchemaRegistry} from '../schema/dom_element_schema_registry';
-import {ElementSchemaRegistry} from '../schema/element_schema_registry';
-import {StyleCompiler} from '../style_compiler';
-import {JitSummaryResolver, SummaryResolver} from '../summary_resolver';
-import {TEMPLATE_TRANSFORMS, TemplateParser} from '../template_parser/template_parser';
-import {DEFAULT_PACKAGE_URL_PROVIDER, UrlResolver} from '../url_resolver';
-import {ViewCompiler} from '../view_compiler/view_compiler';
+import {StaticSymbolCache, JitCompiler, ProviderMeta, ExternalReference, I18NHtmlParser, Identifiers, ViewCompiler, CompileMetadataResolver, UrlResolver, TemplateParser, NgModuleCompiler, JitSummaryResolver, SummaryResolver, StyleCompiler, PipeResolver, ElementSchemaRegistry, DomElementSchemaRegistry, ResourceLoader, NgModuleResolver, HtmlParser, CompileReflector, CompilerConfig, DirectiveNormalizer, DirectiveResolver, Lexer, Parser} from '@angular/compiler';
 
-import {JitCompiler} from './compiler';
-import {JitReflector} from './jit_reflector';
+import {JitReflector} from './compiler_reflector';
+
+export const ERROR_COLLECTOR_TOKEN = new InjectionToken('ErrorCollector');
+
+/**
+ * A default provider for {@link PACKAGE_ROOT_URL} that maps to '/'.
+ */
+export const DEFAULT_PACKAGE_URL_PROVIDER = {
+  provide: PACKAGE_ROOT_URL,
+  useValue: '/'
+};
 
 const _NO_RESOURCE_LOADER: ResourceLoader = {
   get(url: string): Promise<string>{
@@ -42,6 +30,59 @@ const _NO_RESOURCE_LOADER: ResourceLoader = {
 
 const baseHtmlParser = new InjectionToken('HtmlParser');
 
+export class CompilerImpl implements Compiler {
+  private _delegate: JitCompiler;
+  constructor(
+      private _injector: Injector, private _metadataResolver: CompileMetadataResolver,
+      templateParser: TemplateParser, styleCompiler: StyleCompiler, viewCompiler: ViewCompiler,
+      ngModuleCompiler: NgModuleCompiler, summaryResolver: SummaryResolver<Type<any>>,
+      compileReflector: CompileReflector, compilerConfig: CompilerConfig, console: Console) {
+    this._delegate = new JitCompiler(
+        _metadataResolver, templateParser, styleCompiler, viewCompiler, ngModuleCompiler,
+        summaryResolver, compileReflector, compilerConfig, console,
+        this.getExtraNgModuleProviders.bind(this));
+  }
+
+  get injector(): Injector { return this._injector; }
+
+  private getExtraNgModuleProviders() {
+    return [this._metadataResolver.getProviderMetadata(
+        new ProviderMeta(Compiler, {useValue: this}))];
+  }
+
+  compileModuleSync<T>(moduleType: Type<T>): NgModuleFactory<T> {
+    return this._delegate.compileModuleSync(moduleType) as NgModuleFactory<T>;
+  }
+  compileModuleAsync<T>(moduleType: Type<T>): Promise<NgModuleFactory<T>> {
+    return this._delegate.compileModuleAsync(moduleType) as Promise<NgModuleFactory<T>>;
+  }
+  compileModuleAndAllComponentsSync<T>(moduleType: Type<T>): ModuleWithComponentFactories<T> {
+    const result = this._delegate.compileModuleAndAllComponentsSync(moduleType);
+    return {
+      ngModuleFactory: result.ngModuleFactory as NgModuleFactory<T>,
+      componentFactories: result.componentFactories as ComponentFactory<any>[],
+    };
+  }
+  compileModuleAndAllComponentsAsync<T>(moduleType: Type<T>):
+      Promise<ModuleWithComponentFactories<T>> {
+    return this._delegate.compileModuleAndAllComponentsAsync(moduleType)
+        .then((result) => ({
+                ngModuleFactory: result.ngModuleFactory as NgModuleFactory<T>,
+                componentFactories: result.componentFactories as ComponentFactory<any>[],
+              }));
+  }
+  getNgContentSelectors(component: Type<any>): string[] {
+    return this._delegate.getNgContentSelectors(component);
+  }
+  loadAotSummaries(summaries: () => any[]) { this._delegate.loadAotSummaries(summaries); }
+  hasAotSummary(ref: Type<any>): boolean { return this._delegate.hasAotSummary(ref); }
+  getComponentFactory<T>(component: Type<T>): ComponentFactory<T> {
+    return this._delegate.getComponentFactory(component) as ComponentFactory<T>;
+  }
+  clearCache(): void { this._delegate.clearCache(); }
+  clearCacheFor(type: Type<any>) { this._delegate.clearCacheFor(type); }
+}
+
 /**
  * A set of providers that provide `JitCompiler` and its dependencies to use for
  * template compilation.
@@ -60,13 +101,13 @@ export const COMPILER_PROVIDERS = <StaticProvider[]>[
     deps: [],
   },
   {
-    provide: i18n.I18NHtmlParser,
+    provide: I18NHtmlParser,
     useFactory: (parser: HtmlParser, translations: string | null, format: string,
                  config: CompilerConfig, console: Console) => {
       translations = translations || '';
       const missingTranslation =
           translations ? config.missingTranslation ! : MissingTranslationStrategy.Ignore;
-      return new i18n.I18NHtmlParser(parser, translations, format, missingTranslation, console);
+      return new I18NHtmlParser(parser, translations, format, missingTranslation, console);
     },
     deps: [
       baseHtmlParser,
@@ -78,12 +119,12 @@ export const COMPILER_PROVIDERS = <StaticProvider[]>[
   },
   {
     provide: HtmlParser,
-    useExisting: i18n.I18NHtmlParser,
+    useExisting: I18NHtmlParser,
   },
   {
     provide: TemplateParser, deps: [CompilerConfig, CompileReflector,
     Parser, ElementSchemaRegistry,
-    i18n.I18NHtmlParser, Console, [Optional, TEMPLATE_TRANSFORMS]]
+    I18NHtmlParser, Console]
   },
   { provide: DirectiveNormalizer, deps: [ResourceLoader, UrlResolver, HtmlParser, CompilerConfig]},
   { provide: CompileMetadataResolver, deps: [CompilerConfig, NgModuleResolver,
@@ -99,12 +140,11 @@ export const COMPILER_PROVIDERS = <StaticProvider[]>[
   { provide: ViewCompiler, deps: [CompilerConfig, CompileReflector, ElementSchemaRegistry]},
   { provide: NgModuleCompiler, deps: [CompileReflector] },
   { provide: CompilerConfig, useValue: new CompilerConfig()},
-  { provide: JitCompiler, deps: [Injector, CompileMetadataResolver,
+  { provide: Compiler, useClass: CompilerImpl, deps: [Injector, CompileMetadataResolver,
                                 TemplateParser, StyleCompiler,
                                 ViewCompiler, NgModuleCompiler,
-                                SummaryResolver,  CompilerConfig,
+                                SummaryResolver, CompileReflector, CompilerConfig,
                                 Console]},
-  { provide: Compiler, useExisting: JitCompiler},
   { provide: DomElementSchemaRegistry, deps: []},
   { provide: ElementSchemaRegistry, useExisting: DomElementSchemaRegistry},
   { provide: UrlResolver, deps: [PACKAGE_ROOT_URL]},
@@ -113,10 +153,9 @@ export const COMPILER_PROVIDERS = <StaticProvider[]>[
   { provide: NgModuleResolver, deps: [CompileReflector]},
 ];
 
-@CompilerInjectable()
 export class JitCompilerFactory implements CompilerFactory {
   private _defaultOptions: CompilerOptions[];
-  constructor(@Inject(COMPILER_OPTIONS) defaultOptions: CompilerOptions[]) {
+  constructor(defaultOptions: CompilerOptions[]) {
     const compilerOptions: CompilerOptions = {
       useDebug: isDevMode(),
       useJit: true,
@@ -138,6 +177,7 @@ export class JitCompilerFactory implements CompilerFactory {
             // let explicit values from the compiler options overwrite options
             // from the app providers
             useJit: opts.useJit,
+            jitDevMode: isDevMode(),
             // let explicit values from the compiler options overwrite options
             // from the app providers
             defaultEncapsulation: opts.defaultEncapsulation,
@@ -154,16 +194,6 @@ export class JitCompilerFactory implements CompilerFactory {
   }
 }
 
-/**
- * A platform that included corePlatform and the compiler.
- *
- * @experimental
- */
-export const platformCoreDynamic = createPlatformFactory(platformCore, 'coreDynamic', [
-  {provide: COMPILER_OPTIONS, useValue: {}, multi: true},
-  {provide: CompilerFactory, useClass: JitCompilerFactory, deps: [COMPILER_OPTIONS]},
-]);
-
 function _mergeOptions(optionsArr: CompilerOptions[]): CompilerOptions {
   return {
     useJit: _lastDefined(optionsArr.map(options => options.useJit)),
diff --git a/packages/platform-browser-dynamic/src/compiler_reflector.ts b/packages/platform-browser-dynamic/src/compiler_reflector.ts
new file mode 100644
index 0000000000..43349801a6
--- /dev/null
+++ b/packages/platform-browser-dynamic/src/compiler_reflector.ts
@@ -0,0 +1,149 @@
+/**
+ * @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 {CompileReflector, ExternalReference, Identifiers, getUrlScheme, syntaxError} from '@angular/compiler';
+import {ANALYZE_FOR_ENTRY_COMPONENTS, ChangeDetectionStrategy, ChangeDetectorRef, Component, ComponentFactory, ComponentFactoryResolver, ComponentRef, ElementRef, Inject, InjectionToken, Injector, LOCALE_ID, NgModuleFactory, NgModuleRef, Optional, PACKAGE_ROOT_URL, PlatformRef, QueryList, Renderer, SecurityContext, StaticProvider, TRANSLATIONS, TRANSLATIONS_FORMAT, TemplateRef, Type, ViewContainerRef, ViewEncapsulation, createPlatformFactory, isDevMode, platformCore, ɵCodegenComponentFactoryResolver, ɵConsole as Console, ɵEMPTY_ARRAY, ɵEMPTY_MAP, ɵReflectionCapabilities as ReflectionCapabilities, ɵand, ɵccf, ɵcmf, ɵcrt, ɵdid, ɵeld, ɵinlineInterpolate, ɵinterpolate, ɵmod, ɵmpd, ɵncd, ɵnov, ɵpad, ɵpid, ɵpod, ɵppd, ɵprd, ɵqud, ɵregisterModuleFactory, ɵstringify as stringify, ɵted, ɵunv, ɵvid} from '@angular/core';
+
+export const MODULE_SUFFIX = '';
+const builtinExternalReferences = createBuiltinExternalReferencesMap();
+
+export class JitReflector implements CompileReflector {
+  private reflectionCapabilities: ReflectionCapabilities;
+  private builtinExternalReferences = new Map<ExternalReference, any>();
+  constructor() { this.reflectionCapabilities = new ReflectionCapabilities(); }
+  componentModuleUrl(type: any, cmpMetadata: Component): string {
+    const moduleId = cmpMetadata.moduleId;
+
+    if (typeof moduleId === 'string') {
+      const scheme = getUrlScheme(moduleId);
+      return scheme ? moduleId : `package:${moduleId}${MODULE_SUFFIX}`;
+    } else if (moduleId !== null && moduleId !== void 0) {
+      throw syntaxError(
+          `moduleId should be a string in "${stringify(type)}". See https://goo.gl/wIDDiL for more information.\n` +
+          `If you're using Webpack you should inline the template and the styles, see https://goo.gl/X2J8zc.`);
+    }
+
+    return `./${stringify(type)}`;
+  }
+  parameters(typeOrFunc: /*Type*/ any): any[][] {
+    return this.reflectionCapabilities.parameters(typeOrFunc);
+  }
+  annotations(typeOrFunc: /*Type*/ any): any[] {
+    return this.reflectionCapabilities.annotations(typeOrFunc);
+  }
+  propMetadata(typeOrFunc: /*Type*/ any): {[key: string]: any[]} {
+    return this.reflectionCapabilities.propMetadata(typeOrFunc);
+  }
+  hasLifecycleHook(type: any, lcProperty: string): boolean {
+    return this.reflectionCapabilities.hasLifecycleHook(type, lcProperty);
+  }
+  resolveExternalReference(ref: ExternalReference): any {
+    return builtinExternalReferences.get(ref) || ref.runtime;
+  }
+}
+
+
+function createBuiltinExternalReferencesMap() {
+  const map = new Map<ExternalReference, any>();
+  map.set(
+      Identifiers.ANALYZE_FOR_ENTRY_COMPONENTS,
+
+
+      ANALYZE_FOR_ENTRY_COMPONENTS);
+  map.set(Identifiers.ElementRef, ElementRef);
+  map.set(Identifiers.NgModuleRef, NgModuleRef);
+  map.set(Identifiers.ViewContainerRef, ViewContainerRef);
+  map.set(
+      Identifiers.ChangeDetectorRef,
+
+
+      ChangeDetectorRef);
+  map.set(Identifiers.QueryList, QueryList);
+  map.set(Identifiers.TemplateRef, TemplateRef);
+  map.set(
+      Identifiers.CodegenComponentFactoryResolver,
+
+
+      ɵCodegenComponentFactoryResolver);
+  map.set(
+      Identifiers.ComponentFactoryResolver,
+
+
+      ComponentFactoryResolver);
+  map.set(Identifiers.ComponentFactory, ComponentFactory);
+  map.set(Identifiers.ComponentRef, ComponentRef);
+  map.set(Identifiers.NgModuleFactory, NgModuleFactory);
+  map.set(
+      Identifiers.createModuleFactory,
+
+
+      ɵcmf, );
+  map.set(
+      Identifiers.moduleDef,
+
+
+      ɵmod, );
+  map.set(
+      Identifiers.moduleProviderDef,
+
+
+      ɵmpd, );
+  map.set(
+      Identifiers.RegisterModuleFactoryFn,
+
+
+      ɵregisterModuleFactory, );
+  map.set(Identifiers.Injector, Injector);
+  map.set(
+      Identifiers.ViewEncapsulation,
+
+
+      ViewEncapsulation);
+  map.set(
+      Identifiers.ChangeDetectionStrategy,
+
+
+      ChangeDetectionStrategy);
+  map.set(
+      Identifiers.SecurityContext,
+
+
+      SecurityContext, );
+  map.set(Identifiers.LOCALE_ID, LOCALE_ID);
+  map.set(
+      Identifiers.TRANSLATIONS_FORMAT,
+
+
+      TRANSLATIONS_FORMAT);
+  map.set(
+      Identifiers.inlineInterpolate,
+
+
+      ɵinlineInterpolate);
+  map.set(Identifiers.interpolate, ɵinterpolate);
+  map.set(Identifiers.EMPTY_ARRAY, ɵEMPTY_ARRAY);
+  map.set(Identifiers.EMPTY_MAP, ɵEMPTY_MAP);
+  map.set(Identifiers.Renderer, Renderer);
+  map.set(Identifiers.viewDef, ɵvid);
+  map.set(Identifiers.elementDef, ɵeld);
+  map.set(Identifiers.anchorDef, ɵand);
+  map.set(Identifiers.textDef, ɵted);
+  map.set(Identifiers.directiveDef, ɵdid);
+  map.set(Identifiers.providerDef, ɵprd);
+  map.set(Identifiers.queryDef, ɵqud);
+  map.set(Identifiers.pureArrayDef, ɵpad);
+  map.set(Identifiers.pureObjectDef, ɵpod);
+  map.set(Identifiers.purePipeDef, ɵppd);
+  map.set(Identifiers.pipeDef, ɵpid);
+  map.set(Identifiers.nodeValue, ɵnov);
+  map.set(Identifiers.ngContentDef, ɵncd);
+  map.set(Identifiers.unwrapValue, ɵunv);
+  map.set(Identifiers.createRendererType2, ɵcrt);
+  map.set(Identifiers.createComponentFactory, ɵccf);
+  return map;
+}
\ No newline at end of file
diff --git a/packages/platform-browser-dynamic/src/platform-browser-dynamic.ts b/packages/platform-browser-dynamic/src/platform-browser-dynamic.ts
index 929ae41858..a97968ce93 100644
--- a/packages/platform-browser-dynamic/src/platform-browser-dynamic.ts
+++ b/packages/platform-browser-dynamic/src/platform-browser-dynamic.ts
@@ -6,14 +6,16 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {ResourceLoader, platformCoreDynamic} from '@angular/compiler';
-import {PlatformRef, Provider, StaticProvider, createPlatformFactory} from '@angular/core';
+import {ResourceLoader} from '@angular/compiler';
+import {CompilerFactory, PlatformRef, Provider, StaticProvider, createPlatformFactory, platformCore} from '@angular/core';
 
+import {platformCoreDynamic} from './platform_core_dynamic';
 import {INTERNAL_BROWSER_DYNAMIC_PLATFORM_PROVIDERS} from './platform_providers';
 import {CachedResourceLoader} from './resource_loader/resource_loader_cache';
 
 export * from './private_export';
 export {VERSION} from './version';
+
 /**
  * @experimental
  */
diff --git a/packages/platform-browser-dynamic/src/platform_core_dynamic.ts b/packages/platform-browser-dynamic/src/platform_core_dynamic.ts
new file mode 100644
index 0000000000..987bc1e673
--- /dev/null
+++ b/packages/platform-browser-dynamic/src/platform_core_dynamic.ts
@@ -0,0 +1,20 @@
+/**
+ * @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 {COMPILER_OPTIONS, CompilerFactory, PlatformRef, StaticProvider, createPlatformFactory, platformCore} from '@angular/core';
+import {JitCompilerFactory} from './compiler_factory';
+
+/**
+ * A platform that included corePlatform and the compiler.
+ *
+ * @experimental
+ */
+export const platformCoreDynamic = createPlatformFactory(platformCore, 'coreDynamic', [
+  {provide: COMPILER_OPTIONS, useValue: {}, multi: true},
+  {provide: CompilerFactory, useClass: JitCompilerFactory, deps: [COMPILER_OPTIONS]},
+]);
diff --git a/packages/platform-browser-dynamic/src/private_export.ts b/packages/platform-browser-dynamic/src/private_export.ts
index e6cbe564f4..42da202adc 100644
--- a/packages/platform-browser-dynamic/src/private_export.ts
+++ b/packages/platform-browser-dynamic/src/private_export.ts
@@ -6,5 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+export {CompilerImpl as ɵCompilerImpl} from './compiler_factory';
+export {platformCoreDynamic as ɵplatformCoreDynamic} from './platform_core_dynamic';
 export {INTERNAL_BROWSER_DYNAMIC_PLATFORM_PROVIDERS as ɵINTERNAL_BROWSER_DYNAMIC_PLATFORM_PROVIDERS} from './platform_providers';
 export {ResourceLoaderImpl as ɵResourceLoaderImpl} from './resource_loader/resource_loader_impl';
diff --git a/packages/compiler/test/metadata_overrider_spec.ts b/packages/platform-browser-dynamic/test/metadata_overrider_spec.ts
similarity index 100%
rename from packages/compiler/test/metadata_overrider_spec.ts
rename to packages/platform-browser-dynamic/test/metadata_overrider_spec.ts
diff --git a/packages/platform-browser-dynamic/testing/src/compiler_factory.ts b/packages/platform-browser-dynamic/testing/src/compiler_factory.ts
new file mode 100644
index 0000000000..eaae83a22e
--- /dev/null
+++ b/packages/platform-browser-dynamic/testing/src/compiler_factory.ts
@@ -0,0 +1,106 @@
+/**
+ * @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 {CompileReflector, DirectiveResolver, ERROR_COMPONENT_TYPE, NgModuleResolver, PipeResolver} from '@angular/compiler';
+import {MockDirectiveResolver, MockNgModuleResolver, MockPipeResolver} from '@angular/compiler/testing';
+import {Compiler, CompilerFactory, CompilerOptions, Component, ComponentFactory, Directive, Injectable, Injector, ModuleWithComponentFactories, NgModule, NgModuleFactory, Pipe, PlatformRef, StaticProvider, Type, createPlatformFactory, ɵstringify} from '@angular/core';
+import {MetadataOverride, ɵTestingCompiler as TestingCompiler, ɵTestingCompilerFactory as TestingCompilerFactory} from '@angular/core/testing';
+import {ɵCompilerImpl as CompilerImpl, ɵplatformCoreDynamic as platformCoreDynamic} from '@angular/platform-browser-dynamic';
+
+import {MetadataOverrider} from './metadata_overrider';
+
+export const COMPILER_PROVIDERS: StaticProvider[] = [
+  {provide: MockPipeResolver, deps: [CompileReflector]},
+  {provide: PipeResolver, useExisting: MockPipeResolver},
+  {provide: MockDirectiveResolver, deps: [CompileReflector]},
+  {provide: DirectiveResolver, useExisting: MockDirectiveResolver},
+  {provide: MockNgModuleResolver, deps: [CompileReflector]},
+  {provide: NgModuleResolver, useExisting: MockNgModuleResolver},
+];
+
+export class TestingCompilerFactoryImpl implements TestingCompilerFactory {
+  constructor(private _injector: Injector, private _compilerFactory: CompilerFactory) {}
+
+  createTestingCompiler(options: CompilerOptions[]): TestingCompiler {
+    const compiler = <CompilerImpl>this._compilerFactory.createCompiler(options);
+    return new TestingCompilerImpl(
+        compiler, compiler.injector.get(MockDirectiveResolver),
+        compiler.injector.get(MockPipeResolver), compiler.injector.get(MockNgModuleResolver));
+  }
+}
+
+export class TestingCompilerImpl implements TestingCompiler {
+  private _overrider = new MetadataOverrider();
+  constructor(
+      private _compiler: CompilerImpl, private _directiveResolver: MockDirectiveResolver,
+      private _pipeResolver: MockPipeResolver, private _moduleResolver: MockNgModuleResolver) {}
+  get injector(): Injector { return this._compiler.injector; }
+
+  compileModuleSync<T>(moduleType: Type<T>): NgModuleFactory<T> {
+    return this._compiler.compileModuleSync(moduleType);
+  }
+
+  compileModuleAsync<T>(moduleType: Type<T>): Promise<NgModuleFactory<T>> {
+    return this._compiler.compileModuleAsync(moduleType);
+  }
+  compileModuleAndAllComponentsSync<T>(moduleType: Type<T>): ModuleWithComponentFactories<T> {
+    return this._compiler.compileModuleAndAllComponentsSync(moduleType);
+  }
+
+  compileModuleAndAllComponentsAsync<T>(moduleType: Type<T>):
+      Promise<ModuleWithComponentFactories<T>> {
+    return this._compiler.compileModuleAndAllComponentsAsync(moduleType);
+  }
+
+  getNgContentSelectors(component: Type<any>): string[] {
+    return this._compiler.getNgContentSelectors(component);
+  }
+
+  getComponentFactory<T>(component: Type<T>): ComponentFactory<T> {
+    return this._compiler.getComponentFactory(component);
+  }
+
+  checkOverrideAllowed(type: Type<any>) {
+    if (this._compiler.hasAotSummary(type)) {
+      throw new Error(`${ɵstringify(type)} was AOT compiled, so its metadata cannot be changed.`);
+    }
+  }
+
+  overrideModule(ngModule: Type<any>, override: MetadataOverride<NgModule>): void {
+    this.checkOverrideAllowed(ngModule);
+    const oldMetadata = this._moduleResolver.resolve(ngModule, false);
+    this._moduleResolver.setNgModule(
+        ngModule, this._overrider.overrideMetadata(NgModule, oldMetadata, override));
+    this.clearCacheFor(ngModule);
+  }
+  overrideDirective(directive: Type<any>, override: MetadataOverride<Directive>): void {
+    this.checkOverrideAllowed(directive);
+    const oldMetadata = this._directiveResolver.resolve(directive, false);
+    this._directiveResolver.setDirective(
+        directive, this._overrider.overrideMetadata(Directive, oldMetadata !, override));
+    this.clearCacheFor(directive);
+  }
+  overrideComponent(component: Type<any>, override: MetadataOverride<Component>): void {
+    this.checkOverrideAllowed(component);
+    const oldMetadata = this._directiveResolver.resolve(component, false);
+    this._directiveResolver.setDirective(
+        component, this._overrider.overrideMetadata(Component, oldMetadata !, override));
+    this.clearCacheFor(component);
+  }
+  overridePipe(pipe: Type<any>, override: MetadataOverride<Pipe>): void {
+    this.checkOverrideAllowed(pipe);
+    const oldMetadata = this._pipeResolver.resolve(pipe, false);
+    this._pipeResolver.setPipe(pipe, this._overrider.overrideMetadata(Pipe, oldMetadata, override));
+    this.clearCacheFor(pipe);
+  }
+  loadAotSummaries(summaries: () => any[]) { this._compiler.loadAotSummaries(summaries); }
+  clearCache(): void { this._compiler.clearCache(); }
+  clearCacheFor(type: Type<any>) { this._compiler.clearCacheFor(type); }
+
+  getComponentFromError(error: Error) { return (error as any)[ERROR_COMPONENT_TYPE] || null; }
+}
diff --git a/packages/compiler/testing/src/metadata_overrider.ts b/packages/platform-browser-dynamic/testing/src/metadata_overrider.ts
similarity index 100%
rename from packages/compiler/testing/src/metadata_overrider.ts
rename to packages/platform-browser-dynamic/testing/src/metadata_overrider.ts
diff --git a/packages/platform-browser-dynamic/testing/src/platform_core_dynamic_testing.ts b/packages/platform-browser-dynamic/testing/src/platform_core_dynamic_testing.ts
new file mode 100644
index 0000000000..528770c750
--- /dev/null
+++ b/packages/platform-browser-dynamic/testing/src/platform_core_dynamic_testing.ts
@@ -0,0 +1,27 @@
+/**
+ * @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 {COMPILER_OPTIONS, CompilerFactory, Injector, PlatformRef, StaticProvider, createPlatformFactory} from '@angular/core';
+import {TestComponentRenderer, ɵTestingCompilerFactory as TestingCompilerFactory} from '@angular/core/testing';
+import {ɵplatformCoreDynamic as platformCoreDynamic} from '@angular/platform-browser-dynamic';
+
+import {COMPILER_PROVIDERS, TestingCompilerFactoryImpl} from './compiler_factory';
+
+/**
+ * Platform for dynamic tests
+ *
+ * @experimental
+ */
+export const platformCoreDynamicTesting: (extraProviders?: any[]) => PlatformRef =
+    createPlatformFactory(platformCoreDynamic, 'coreDynamicTesting', [
+      {provide: COMPILER_OPTIONS, useValue: {providers: COMPILER_PROVIDERS}, multi: true}, {
+        provide: TestingCompilerFactory,
+        useClass: TestingCompilerFactoryImpl,
+        deps: [Injector, CompilerFactory]
+      }
+    ]);
diff --git a/packages/platform-browser-dynamic/testing/src/private_export_testing.ts b/packages/platform-browser-dynamic/testing/src/private_export_testing.ts
index 56680f524a..5f61c707d1 100644
--- a/packages/platform-browser-dynamic/testing/src/private_export_testing.ts
+++ b/packages/platform-browser-dynamic/testing/src/private_export_testing.ts
@@ -7,3 +7,4 @@
  */
 
 export {DOMTestComponentRenderer as ɵDOMTestComponentRenderer} from './dom_test_component_renderer';
+export {platformCoreDynamicTesting as ɵplatformCoreDynamicTesting} from './platform_core_dynamic_testing';
diff --git a/packages/platform-browser-dynamic/testing/src/testing.ts b/packages/platform-browser-dynamic/testing/src/testing.ts
index f0b6dc26da..dc5297f581 100644
--- a/packages/platform-browser-dynamic/testing/src/testing.ts
+++ b/packages/platform-browser-dynamic/testing/src/testing.ts
@@ -6,13 +6,13 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {platformCoreDynamicTesting} from '@angular/compiler/testing';
 import {NgModule, PlatformRef, StaticProvider, createPlatformFactory} from '@angular/core';
 import {TestComponentRenderer} from '@angular/core/testing';
 import {ɵINTERNAL_BROWSER_DYNAMIC_PLATFORM_PROVIDERS as INTERNAL_BROWSER_DYNAMIC_PLATFORM_PROVIDERS} from '@angular/platform-browser-dynamic';
 import {BrowserTestingModule} from '@angular/platform-browser/testing';
 
 import {DOMTestComponentRenderer} from './dom_test_component_renderer';
+import {platformCoreDynamicTesting} from './platform_core_dynamic_testing';
 
 export * from './private_export_testing'
 
diff --git a/packages/platform-server/integrationtest/package.json b/packages/platform-server/integrationtest/package.json
index 0016512b7b..56e268c1f2 100644
--- a/packages/platform-server/integrationtest/package.json
+++ b/packages/platform-server/integrationtest/package.json
@@ -15,6 +15,7 @@
     "@angular/core": "file:../../../dist/packages-dist/core",
     "@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",
     "express": "^4.14.1",
     "rxjs": "file:../../../node_modules/rxjs",
diff --git a/packages/platform-server/package.json b/packages/platform-server/package.json
index d586c32b47..eb364efc01 100644
--- a/packages/platform-server/package.json
+++ b/packages/platform-server/package.json
@@ -13,7 +13,8 @@
     "@angular/core": "0.0.0-PLACEHOLDER",
     "@angular/common": "0.0.0-PLACEHOLDER",
     "@angular/compiler": "0.0.0-PLACEHOLDER",
-    "@angular/platform-browser": "0.0.0-PLACEHOLDER"
+    "@angular/platform-browser": "0.0.0-PLACEHOLDER",
+    "@angular/platform-browser-dynamic": "0.0.0-PLACEHOLDER"
   },
   "dependencies": {
     "tslib": "^1.7.1",
diff --git a/packages/platform-server/src/server.ts b/packages/platform-server/src/server.ts
index b109411804..25a150bd56 100644
--- a/packages/platform-server/src/server.ts
+++ b/packages/platform-server/src/server.ts
@@ -9,10 +9,10 @@
 import {ɵAnimationEngine} from '@angular/animations/browser';
 import {PlatformLocation, ɵPLATFORM_SERVER_ID as PLATFORM_SERVER_ID} from '@angular/common';
 import {HttpClientModule} from '@angular/common/http';
-import {platformCoreDynamic} from '@angular/compiler';
 import {Injectable, InjectionToken, Injector, NgModule, NgZone, Optional, PLATFORM_ID, PLATFORM_INITIALIZER, PlatformRef, Provider, RendererFactory2, RootRenderer, StaticProvider, Testability, createPlatformFactory, isDevMode, platformCore, ɵALLOW_MULTIPLE_PLATFORMS as ALLOW_MULTIPLE_PLATFORMS} from '@angular/core';
 import {HttpModule} from '@angular/http';
 import {BrowserModule, DOCUMENT, ɵSharedStylesHost as SharedStylesHost, ɵTRANSITION_ID, ɵgetDOM as getDOM} from '@angular/platform-browser';
+import {ɵplatformCoreDynamic as platformCoreDynamic} from '@angular/platform-browser-dynamic';
 import {NoopAnimationsModule, ɵAnimationRendererFactory} from '@angular/platform-browser/animations';
 
 import {SERVER_HTTP_PROVIDERS} from './http';
diff --git a/packages/platform-server/testing/src/server.ts b/packages/platform-server/testing/src/server.ts
index 6ea98413b6..974d74d8d8 100644
--- a/packages/platform-server/testing/src/server.ts
+++ b/packages/platform-server/testing/src/server.ts
@@ -6,9 +6,8 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {platformCoreDynamicTesting} from '@angular/compiler/testing';
 import {NgModule, PlatformRef, StaticProvider, createPlatformFactory} from '@angular/core';
-import {BrowserDynamicTestingModule} from '@angular/platform-browser-dynamic/testing';
+import {BrowserDynamicTestingModule, ɵplatformCoreDynamicTesting as platformCoreDynamicTesting} from '@angular/platform-browser-dynamic/testing';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 import {ɵINTERNAL_SERVER_PLATFORM_PROVIDERS as INTERNAL_SERVER_PLATFORM_PROVIDERS, ɵSERVER_RENDER_PROVIDERS as SERVER_RENDER_PROVIDERS} from '@angular/platform-server';
 
diff --git a/packages/platform-webworker-dynamic/src/platform-webworker-dynamic.ts b/packages/platform-webworker-dynamic/src/platform-webworker-dynamic.ts
index 57c2a2bedb..0e4feb530a 100644
--- a/packages/platform-webworker-dynamic/src/platform-webworker-dynamic.ts
+++ b/packages/platform-webworker-dynamic/src/platform-webworker-dynamic.ts
@@ -7,11 +7,13 @@
  */
 
 import {ɵPLATFORM_WORKER_UI_ID as PLATFORM_WORKER_UI_ID} from '@angular/common';
-import {ResourceLoader, platformCoreDynamic} from '@angular/compiler';
+import {ResourceLoader} from '@angular/compiler';
 import {COMPILER_OPTIONS, PLATFORM_ID, PlatformRef, StaticProvider, createPlatformFactory} from '@angular/core';
-import {ɵResourceLoaderImpl as ResourceLoaderImpl} from '@angular/platform-browser-dynamic';
+import {ɵResourceLoaderImpl as ResourceLoaderImpl, ɵplatformCoreDynamic as platformCoreDynamic} from '@angular/platform-browser-dynamic';
+
 export {VERSION} from './version';
 
+
 /**
  * @experimental API related to bootstrapping are still under review.
  */

From 56a5b02d047c4f490f2c2fc50af35b78ee30c0e2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mis=CC=8Cko=20Hevery?= <misko@hevery.com>
Date: Wed, 16 Aug 2017 13:00:00 -0700
Subject: [PATCH 54/83] test: add cli integration test (#18738)

This adds cli integration test which creates a hello-world and tests it.

PR Close #18738
---
 integration/.gitignore       |  5 ++-
 integration/ng-cli-create.sh | 70 ++++++++++++++++++++++++++++++++++++
 integration/run_tests.sh     | 11 ++++++
 3 files changed, 85 insertions(+), 1 deletion(-)
 create mode 100755 integration/ng-cli-create.sh

diff --git a/integration/.gitignore b/integration/.gitignore
index 297cd21083..f91b475b7e 100644
--- a/integration/.gitignore
+++ b/integration/.gitignore
@@ -1,10 +1,13 @@
 built/
 dist/
 vendor/
+yarn.lock
+.ng-cli/
+cli-*/**
 */src/*.d.ts
 */src/*.js
 **/*.ngfactory.ts
 **/*.ngsummary.json
 **/*.ngsummary.ts
 */yarn*
-*/.yarn_local_cache*
+**/.yarn_local_cache*
diff --git a/integration/ng-cli-create.sh b/integration/ng-cli-create.sh
new file mode 100755
index 0000000000..a7d1ce2a79
--- /dev/null
+++ b/integration/ng-cli-create.sh
@@ -0,0 +1,70 @@
+#!/usr/bin/env bash
+
+set -e -o pipefail
+
+if [ $# -eq 0 ]
+  then
+    echo "Angular cli integration create project"
+    echo
+    echo "./ng-cli-create.sh [project-name]"
+    echo
+else
+  TEMP=`dirname $0`
+  INTEGRATION_DIR=`(cd $TEMP; pwd)`
+  PROJECT=$1
+  PROJECT_DIR=$INTEGRATION_DIR/$PROJECT
+  NG=$INTEGRATION_DIR/.ng-cli/node_modules/.bin/ng
+  (
+    echo "==================="
+    echo Creating $PROJECT...
+    echo "==================="
+    cd $INTEGRATION_DIR
+    rm -rf $PROJECT
+    $NG set --global packageManager=yarn
+    $NG new $PROJECT --skip-install
+    echo "==================="
+    echo $PROJECT created
+    echo "==================="
+  )
+
+
+  # By default `ng new` creates a package.json which uses @angular/* from NPM.
+  # Instead we want to use them from the current build so we overwrite theme here.
+  (
+    echo "==================="
+    echo Updating $PROJECT bundles
+    echo "==================="
+    cd $PROJECT_DIR
+
+    sed -i -E 's/ng build/ng build --prod --build-optimizer/g' package.json
+    sed -i -E 's/ng test/ng test --single-run/g' package.json
+    # workaround for https://github.com/angular/angular-cli/issues/7401
+    sed -i -E 's/"@angular\/cli\"\: \".*\"/"@angular\/cli":  "https:\/\/github.com\/angular\/cli-builds"/g' package.json
+
+    yarn add \
+      file:../../dist/packages-dist/compiler-cli \
+      file:../../dist/packages-dist/language-service \
+      --save-dev --skip-integrity-check --emoji
+
+    yarn add \
+      file:../../dist/packages-dist/core \
+      file:../../dist/packages-dist/common \
+      file:../../dist/packages-dist/forms \
+      file:../../dist/packages-dist/http \
+      --save --skip-integrity-check --emoji
+
+    # yarn bug: can not install all of them in a single command and it has to be broken into separate invocations.
+    yarn add \
+      file:../../dist/packages-dist/animations \
+      file:../../dist/packages-dist/compiler \
+      file:../../dist/packages-dist/platform-browser \
+      file:../../dist/packages-dist/platform-browser-dynamic \
+      --save --skip-integrity-check --emoji
+
+    yarn install --emoji
+
+    echo "==================="
+    echo $PROJECT created succesfully
+    echo "==================="
+  )
+fi
diff --git a/integration/run_tests.sh b/integration/run_tests.sh
index 53a64ad566..74315b87fe 100755
--- a/integration/run_tests.sh
+++ b/integration/run_tests.sh
@@ -14,6 +14,17 @@ rm_cache
 mkdir $cache
 trap rm_cache EXIT
 
+# We need to install `ng` but don't want to do it globally so we plate it into `.ng-cli` folder.
+# This check prevents constant re-installing.
+if [ ! -d ".ng-cli" ]; then
+  (
+    mkdir -p .ng-cli
+    cd .ng-cli
+    yarn add https://github.com/angular/cli-builds --cache-folder ../$cache
+  )
+fi
+./ng-cli-create.sh cli-hello-world
+
 for testDir in $(ls | grep -v node_modules) ; do
   [[ -d "$testDir" ]] || continue
   echo "#################################"

From ffb15532828783e49436c3998a92009fb5bb0381 Mon Sep 17 00:00:00 2001
From: Tobias Bosch <tbosch1009@gmail.com>
Date: Wed, 16 Aug 2017 15:35:19 -0700
Subject: [PATCH 55/83] refactor(compiler): make the new ngc API independent of
 tsickle (#18739)

This changes `performCompile` / `program.emit` to not tsickle automatically,
but allows to pass in an `emitCallback` in which tsickle can be executed.
---
 packages/compiler-cli/src/main.ts             | 41 +++++++++-
 packages/compiler-cli/src/perform-compile.ts  | 18 +++--
 packages/compiler-cli/src/transformers/api.ts | 35 +++++----
 .../compiler-cli/src/transformers/program.ts  | 78 ++++++++++---------
 tools/ngc-wrapped/index.ts                    |  2 +-
 5 files changed, 116 insertions(+), 58 deletions(-)

diff --git a/packages/compiler-cli/src/main.ts b/packages/compiler-cli/src/main.ts
index 28d9d86ab9..60b989bb42 100644
--- a/packages/compiler-cli/src/main.ts
+++ b/packages/compiler-cli/src/main.ts
@@ -14,6 +14,7 @@ import * as ts from 'typescript';
 import * as tsc from '@angular/tsc-wrapped';
 import * as fs from 'fs';
 import * as path from 'path';
+import * as tsickle from 'tsickle';
 import * as api from './transformers/api';
 import * as ngc from './transformers/entry_points';
 import {performCompilation, readConfiguration, formatDiagnostics, Diagnostics, ParsedConfiguration} from './perform-compile';
@@ -31,7 +32,8 @@ export function main(
   if (options.disableTransformerPipeline) {
     return disabledTransformerPipelineNgcMain(parsedArgs, consoleError);
   }
-  const {diagnostics: compileDiags} = performCompilation(rootNames, options);
+  const {diagnostics: compileDiags} =
+      performCompilation({rootNames, options, emitCallback: createEmitCallback(options)});
   return Promise.resolve(reportErrorsAndExit(options, compileDiags, consoleError));
 }
 
@@ -42,10 +44,45 @@ export function mainSync(
   if (configErrors.length) {
     return reportErrorsAndExit(options, configErrors, consoleError);
   }
-  const {diagnostics: compileDiags} = performCompilation(rootNames, options);
+  const {diagnostics: compileDiags} =
+      performCompilation({rootNames, options, emitCallback: createEmitCallback(options)});
   return reportErrorsAndExit(options, compileDiags, consoleError);
 }
 
+function createEmitCallback(options: api.CompilerOptions): api.TsEmitCallback {
+  const tsickleOptions: tsickle.TransformerOptions = {
+    googmodule: false,
+    untyped: true,
+    convertIndexImportShorthand: true,
+    transformDecorators: options.annotationsAs !== 'decorators',
+    transformTypesToClosure: options.annotateForClosureCompiler,
+  };
+
+  const tsickleHost: tsickle.TransformerHost = {
+    shouldSkipTsickleProcessing: (fileName) => /\.d\.ts$/.test(fileName),
+    pathToModuleName: (context, importPath) => '',
+    shouldIgnoreWarningsForPath: (filePath) => false,
+    fileNameToModuleId: (fileName) => fileName,
+  };
+
+  return ({
+           program,
+           targetSourceFile,
+           writeFile,
+           cancellationToken,
+           emitOnlyDtsFiles,
+           customTransformers = {},
+           host,
+           options
+         }) =>
+             tsickle.emitWithTsickle(
+                 program, tsickleHost, tsickleOptions, host, options, targetSourceFile, writeFile,
+                 cancellationToken, emitOnlyDtsFiles, {
+                   beforeTs: customTransformers.before,
+                   afterTs: customTransformers.after,
+                 });
+}
+
 function readCommandLineAndConfiguration(args: any): ParsedConfiguration {
   const project = args.p || args.project || '.';
   const allDiagnostics: Diagnostics = [];
diff --git a/packages/compiler-cli/src/perform-compile.ts b/packages/compiler-cli/src/perform-compile.ts
index 821720a7ce..2a81339840 100644
--- a/packages/compiler-cli/src/perform-compile.ts
+++ b/packages/compiler-cli/src/perform-compile.ts
@@ -105,10 +105,16 @@ export function readConfiguration(
 }
 
 export function performCompilation(
-    rootNames: string[], options: api.CompilerOptions, host?: api.CompilerHost,
-    oldProgram?: api.Program): {
+    {rootNames, options, host, oldProgram, emitCallback, customTransformers}: {
+      rootNames: string[],
+      options: api.CompilerOptions,
+      host?: api.CompilerHost,
+      oldProgram?: api.Program,
+      emitCallback?: api.TsEmitCallback,
+      customTransformers?: api.CustomTransformers
+    }): {
   program?: api.Program,
-  emitResult?: api.EmitResult,
+  emitResult?: ts.EmitResult,
   diagnostics: Diagnostics,
 } {
   const [major, minor] = ts.version.split('.');
@@ -128,7 +134,7 @@ export function performCompilation(
   }
 
   let program: api.Program|undefined;
-  let emitResult: api.EmitResult|undefined;
+  let emitResult: ts.EmitResult|undefined;
   try {
     if (!host) {
       host = ng.createCompilerHost({options});
@@ -155,7 +161,9 @@ export function performCompilation(
     shouldEmit = shouldEmit && checkDiagnostics(program !.getNgSemanticDiagnostics());
 
     if (shouldEmit) {
-      const emitResult = program !.emit({
+      emitResult = program !.emit({
+        emitCallback,
+        customTransformers,
         emitFlags: api.EmitFlags.Default |
             ((options.skipMetadataEmit || options.flatModuleOutFile) ? 0 : api.EmitFlags.Metadata)
       });
diff --git a/packages/compiler-cli/src/transformers/api.ts b/packages/compiler-cli/src/transformers/api.ts
index 44fcd319f0..cc8860968c 100644
--- a/packages/compiler-cli/src/transformers/api.ts
+++ b/packages/compiler-cli/src/transformers/api.ts
@@ -167,17 +167,24 @@ export enum EmitFlags {
   All = DTS | JS | Metadata | I18nBundle | Summary
 }
 
-// TODO(chuckj): Support CustomTransformers once we require TypeScript 2.3+
-// export interface CustomTransformers {
-//   beforeTs?: ts.TransformerFactory<ts.SourceFile>[];
-//   afterTs?: ts.TransformerFactory<ts.SourceFile>[];
-// }
-
-export interface EmitResult extends ts.EmitResult {
-  modulesManifest: {modules: string[]; fileNames: string[];};
-  externs: {[fileName: string]: string;};
+export interface CustomTransformers {
+  beforeTs?: ts.TransformerFactory<ts.SourceFile>[];
+  afterTs?: ts.TransformerFactory<ts.SourceFile>[];
 }
 
+export interface TsEmitArguments {
+  program: ts.Program;
+  host: CompilerHost;
+  options: CompilerOptions;
+  targetSourceFile?: ts.SourceFile;
+  writeFile?: ts.WriteFileCallback;
+  cancellationToken?: ts.CancellationToken;
+  emitOnlyDtsFiles?: boolean;
+  customTransformers?: ts.CustomTransformers;
+}
+
+export interface TsEmitCallback { (args: TsEmitArguments): ts.EmitResult; }
+
 export interface Program {
   /**
    * Retrieve the TypeScript program used to produce semantic diagnostics and emit the sources.
@@ -254,10 +261,10 @@ export interface Program {
    *
    * Angular structural information is required to emit files.
    */
-  emit({// transformers,
-        emitFlags, cancellationToken}: {
-    emitFlags: EmitFlags,
-    // transformers?: CustomTransformers, // See TODO above
+  emit({emitFlags, cancellationToken, customTransformers, emitCallback}: {
+    emitFlags?: EmitFlags,
     cancellationToken?: ts.CancellationToken,
-  }): EmitResult;
+    customTransformers?: CustomTransformers,
+    emitCallback?: TsEmitCallback
+  }): ts.EmitResult;
 }
diff --git a/packages/compiler-cli/src/transformers/program.ts b/packages/compiler-cli/src/transformers/program.ts
index 3bab5f51c3..ee81730f98 100644
--- a/packages/compiler-cli/src/transformers/program.ts
+++ b/packages/compiler-cli/src/transformers/program.ts
@@ -10,13 +10,12 @@ import {AotCompiler, AotCompilerHost, AotCompilerOptions, GeneratedFile, NgAnaly
 import {createBundleIndexHost} from '@angular/tsc-wrapped';
 import * as fs from 'fs';
 import * as path from 'path';
-import * as tsickle from 'tsickle';
 import * as ts from 'typescript';
 
 import {BaseAotCompilerHost} from '../compiler_host';
 import {TypeChecker} from '../diagnostics/check_types';
 
-import {CompilerHost, CompilerOptions, Diagnostic, EmitFlags, EmitResult, Program} from './api';
+import {CompilerHost, CompilerOptions, CustomTransformers, Diagnostic, EmitFlags, Program, TsEmitArguments, TsEmitCallback} from './api';
 import {LowerMetadataCache, getExpressionLoweringTransformFactory} from './lower_expressions';
 import {getAngularEmitterTransformFactory} from './node_emitter_transform';
 
@@ -30,6 +29,13 @@ const emptyModules: NgAnalyzedModules = {
   files: []
 };
 
+const defaultEmitCallback: TsEmitCallback =
+    ({program, targetSourceFile, writeFile, cancellationToken, emitOnlyDtsFiles,
+      customTransformers}) =>
+        program.emit(
+            targetSourceFile, writeFile, cancellationToken, emitOnlyDtsFiles, customTransformers);
+
+
 class AngularCompilerProgram implements Program {
   private tsProgram: ts.Program;
   private aotCompilerHost: AotCompilerHost;
@@ -128,35 +134,35 @@ class AngularCompilerProgram implements Program {
 
   getLazyRoutes(cancellationToken?: ts.CancellationToken): {[route: string]: string} { return {}; }
 
-  emit({emitFlags = EmitFlags.Default, cancellationToken}:
-           {emitFlags?: EmitFlags, cancellationToken?: ts.CancellationToken}): EmitResult {
+  emit({emitFlags = EmitFlags.Default, cancellationToken, customTransformers,
+        emitCallback = defaultEmitCallback}: {
+    emitFlags?: EmitFlags,
+    cancellationToken?: ts.CancellationToken,
+    customTransformers?: CustomTransformers,
+    emitCallback?: TsEmitCallback
+  }): ts.EmitResult {
     const emitMap = new Map<string, string>();
 
-    const tsickleCompilerHostOptions: tsickle.TransformerOptions = {
-      googmodule: false,
-      untyped: true,
-      convertIndexImportShorthand: true,
-      transformDecorators: this.options.annotationsAs !== 'decorators',
-      transformTypesToClosure: this.options.annotateForClosureCompiler,
-    };
-
-    const tsickleHost: tsickle.TransformerHost = {
-      shouldSkipTsickleProcessing: (fileName) => /\.d\.ts$/.test(fileName),
-      pathToModuleName: (context, importPath) => '',
-      shouldIgnoreWarningsForPath: (filePath) => false,
-      fileNameToModuleId: (fileName) => fileName,
-    };
-
     const expectedOut = this.options.expectedOut ?
         this.options.expectedOut.map(f => path.resolve(process.cwd(), f)) :
         undefined;
 
-    const result = tsickle.emitWithTsickle(
-        this.programWithStubs, tsickleHost, tsickleCompilerHostOptions, this.host, this.options,
-        /* targetSourceFile */ undefined,
-        createWriteFileCallback(emitFlags, this.host, this.metadataCache, emitMap, expectedOut),
-        cancellationToken, (emitFlags & (EmitFlags.DTS | EmitFlags.JS)) == EmitFlags.DTS,
-        this.calculateTransforms());
+    // Ensure that expected output files exist.
+    for (const out of expectedOut || []) {
+      this.host.writeFile(out, '', false);
+    }
+
+    const emitResult = emitCallback({
+      program: this.programWithStubs,
+      host: this.host,
+      options: this.options,
+      targetSourceFile: undefined,
+      writeFile:
+          createWriteFileCallback(emitFlags, this.host, this.metadataCache, emitMap, expectedOut),
+      cancellationToken,
+      emitOnlyDtsFiles: (emitFlags & (EmitFlags.DTS | EmitFlags.JS)) == EmitFlags.DTS,
+      customTransformers: this.calculateTransforms(customTransformers)
+    });
 
     this.generatedFiles.forEach(file => {
       // In order not to replicate the TS calculation of the out folder for files
@@ -174,12 +180,7 @@ class AngularCompilerProgram implements Program {
       }
     });
 
-    // Ensure that expected output files exist.
-    for (const out of expectedOut || []) {
-      fs.appendFileSync(out, '', 'utf8');
-    }
-
-    return result;
+    return emitResult;
   }
 
   // Private members
@@ -228,7 +229,7 @@ class AngularCompilerProgram implements Program {
     return this.generatedFiles && this._generatedFileDiagnostics !;
   }
 
-  private calculateTransforms(): tsickle.EmitTransformers {
+  private calculateTransforms(customTransformers?: CustomTransformers): ts.CustomTransformers {
     const beforeTs: ts.TransformerFactory<ts.SourceFile>[] = [];
     if (!this.options.disableExpressionLowering) {
       beforeTs.push(getExpressionLoweringTransformFactory(this.metadataCache));
@@ -236,7 +237,11 @@ class AngularCompilerProgram implements Program {
     if (!this.options.skipTemplateCodegen) {
       beforeTs.push(getAngularEmitterTransformFactory(this.generatedFiles));
     }
-    return {beforeTs};
+    if (customTransformers && customTransformers.beforeTs) {
+      beforeTs.push(...customTransformers.beforeTs);
+    }
+    const afterTs = customTransformers ? customTransformers.afterTs : undefined;
+    return {before: beforeTs, after: afterTs};
   }
 
   private catchAnalysisError(e: any): NgAnalyzedModules {
@@ -370,7 +375,8 @@ function getAotCompilerOptions(options: CompilerOptions): AotCompilerOptions {
 }
 
 function writeMetadata(
-    emitFilePath: string, sourceFile: ts.SourceFile, metadataCache: LowerMetadataCache) {
+    host: ts.CompilerHost, emitFilePath: string, sourceFile: ts.SourceFile,
+    metadataCache: LowerMetadataCache) {
   if (/\.js$/.test(emitFilePath)) {
     const path = emitFilePath.replace(/\.js$/, '.metadata.json');
 
@@ -386,7 +392,7 @@ function writeMetadata(
     const metadata = metadataCache.getMetadata(collectableFile);
     if (metadata) {
       const metadataText = JSON.stringify([metadata]);
-      fs.writeFileSync(path, metadataText, {encoding: 'utf-8'});
+      host.writeFile(path, metadataText, false);
     }
   }
 }
@@ -412,7 +418,7 @@ function createWriteFileCallback(
       host.writeFile(fileName, data, writeByteOrderMark, onError, sourceFiles);
 
       if (srcFile && !generatedFile && (emitFlags & EmitFlags.Metadata) != 0) {
-        writeMetadata(fileName, srcFile, metadataCache);
+        writeMetadata(host, fileName, srcFile, metadataCache);
       }
     }
   };
diff --git a/tools/ngc-wrapped/index.ts b/tools/ngc-wrapped/index.ts
index 3a6c0fb37c..9fc36702a9 100644
--- a/tools/ngc-wrapped/index.ts
+++ b/tools/ngc-wrapped/index.ts
@@ -23,7 +23,7 @@ function main(args: string[]) {
   const {basePath} = calcProjectFileAndBasePath(project);
   const ngOptions = createNgCompilerOptions(basePath, config, tsOptions);
 
-  const {diagnostics} = performCompilation(files, ngOptions);
+  const {diagnostics} = performCompilation({rootNames: files, options: ngOptions});
   if (diagnostics.length) {
     console.error(formatDiagnostics(ngOptions, diagnostics));
   }

From 7bfd8504939f7e41d0bccd05052e6c6cef94c650 Mon Sep 17 00:00:00 2001
From: Tobias Bosch <tbosch1009@gmail.com>
Date: Thu, 17 Aug 2017 09:44:04 -0700
Subject: [PATCH 56/83] refactor(compiler): add missing test to compare core
 and compiler metadata (#18739)

PR Close #18739
---
 packages/compiler/src/core.ts       |   2 +-
 packages/compiler/test/core_spec.ts | 196 ++++++++++++++++++++++++++++
 2 files changed, 197 insertions(+), 1 deletion(-)
 create mode 100644 packages/compiler/test/core_spec.ts

diff --git a/packages/compiler/src/core.ts b/packages/compiler/src/core.ts
index 032bead530..71af0afaab 100644
--- a/packages/compiler/src/core.ts
+++ b/packages/compiler/src/core.ts
@@ -15,7 +15,7 @@
 export interface Inject { token: any; }
 export const createInject = makeMetadataFactory<Inject>('Inject', (token: any) => ({token}));
 export const createInjectionToken =
-    makeMetadataFactory<object>('InjectionToken', (token: any) => token);
+    makeMetadataFactory<object>('InjectionToken', (desc: string) => ({_desc: desc}));
 
 export interface Attribute { attributeName?: string; }
 export const createAttribute =
diff --git a/packages/compiler/test/core_spec.ts b/packages/compiler/test/core_spec.ts
new file mode 100644
index 0000000000..315cf073df
--- /dev/null
+++ b/packages/compiler/test/core_spec.ts
@@ -0,0 +1,196 @@
+/**
+ * @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 {core as compilerCore} from '@angular/compiler';
+import * as core from '@angular/core';
+
+export function main() {
+  describe('compiler core', () => {
+    it('Attribute should be equal', () => {
+      typeExtends<compilerCore.Attribute, core.Attribute>();
+      typeExtends<core.Attribute, compilerCore.Attribute>();
+      compareRuntimeShape(new core.Attribute('someName'), compilerCore.createAttribute('someName'));
+    });
+
+    it('Inject should be equal', () => {
+      typeExtends<compilerCore.Inject, core.Inject>();
+      typeExtends<core.Inject, compilerCore.Inject>();
+      compareRuntimeShape(new core.Inject('someName'), compilerCore.createInject('someName'));
+    });
+
+    it('Query should be equal', () => {
+      typeExtends<compilerCore.Query, core.Query>();
+      typeExtends<core.Query, compilerCore.Query>();
+      compareRuntimeShape(
+          new core.ContentChild('someSelector'), compilerCore.createContentChild('someSelector'));
+      compareRuntimeShape(
+          new core.ContentChild('someSelector', {read: 'someRead'}),
+          compilerCore.createContentChild('someSelector', {read: 'someRead'}));
+      compareRuntimeShape(
+          new core.ContentChildren('someSelector'),
+          compilerCore.createContentChildren('someSelector'));
+      compareRuntimeShape(
+          new core.ContentChildren('someSelector', {read: 'someRead', descendants: false}),
+          compilerCore.createContentChildren(
+              'someSelector', {read: 'someRead', descendants: false}));
+      compareRuntimeShape(
+          new core.ViewChild('someSelector'), compilerCore.createViewChild('someSelector'));
+      compareRuntimeShape(
+          new core.ViewChild('someSelector', {read: 'someRead'}),
+          compilerCore.createViewChild('someSelector', {read: 'someRead'}));
+      compareRuntimeShape(
+          new core.ViewChildren('someSelector'), compilerCore.createViewChildren('someSelector'));
+      compareRuntimeShape(
+          new core.ViewChildren('someSelector', {read: 'someRead'}),
+          compilerCore.createViewChildren('someSelector', {read: 'someRead'}));
+    });
+
+    it('Directive should be equal', () => {
+      typeExtends<compilerCore.Directive, core.Directive>();
+      typeExtends<core.Directive, compilerCore.Directive>();
+      compareRuntimeShape(new core.Directive({}), compilerCore.createDirective({}));
+    });
+
+    it('Component should be equal', () => {
+      typeExtends<compilerCore.Component, core.Component>();
+      typeExtends<core.Component, compilerCore.Component>();
+      compareRuntimeShape(new core.Component({}), compilerCore.createComponent({}));
+    });
+
+    it('Pipe should be equal', () => {
+      typeExtends<compilerCore.Pipe, core.Pipe>();
+      typeExtends<core.Pipe, compilerCore.Pipe>();
+      compareRuntimeShape(
+          new core.Pipe({name: 'someName'}), compilerCore.createPipe({name: 'someName'}));
+    });
+
+    it('NgModule should be equal', () => {
+      typeExtends<compilerCore.NgModule, core.NgModule>();
+      typeExtends<core.NgModule, compilerCore.NgModule>();
+      compareRuntimeShape(new core.NgModule({}), compilerCore.createNgModule({}));
+    });
+
+    it('marker metadata should be equal', () => {
+      compareRuntimeShape(new core.Injectable(), compilerCore.createInjectable());
+      compareRuntimeShape(new core.Optional(), compilerCore.createOptional());
+      compareRuntimeShape(new core.Self(), compilerCore.createSelf());
+      compareRuntimeShape(new core.SkipSelf(), compilerCore.createSkipSelf());
+      compareRuntimeShape(new core.Host(), compilerCore.createHost());
+    });
+
+    it('InjectionToken should be equal', () => {
+      compareRuntimeShape(
+          new core.InjectionToken('someName'), compilerCore.createInjectionToken('someName'));
+    });
+
+    it('non const enums should be equal', () => {
+      typeExtends<compilerCore.ViewEncapsulation, core.ViewEncapsulation>();
+      typeExtends<core.ViewEncapsulation, compilerCore.ViewEncapsulation>();
+
+      typeExtends<compilerCore.ChangeDetectionStrategy, core.ChangeDetectionStrategy>();
+      typeExtends<core.ChangeDetectionStrategy, compilerCore.ChangeDetectionStrategy>();
+
+      typeExtends<compilerCore.SecurityContext, core.SecurityContext>();
+      typeExtends<core.SecurityContext, compilerCore.SecurityContext>();
+
+      typeExtends<compilerCore.MissingTranslationStrategy, core.MissingTranslationStrategy>();
+      typeExtends<core.MissingTranslationStrategy, compilerCore.MissingTranslationStrategy>();
+    });
+
+    it('const enums should be equal', () => {
+      expect(compilerCore.NodeFlags.None).toBe(core.ɵNodeFlags.None);
+      expect(compilerCore.NodeFlags.TypeElement).toBe(core.ɵNodeFlags.TypeElement);
+      expect(compilerCore.NodeFlags.TypeText).toBe(core.ɵNodeFlags.TypeText);
+      expect(compilerCore.NodeFlags.ProjectedTemplate).toBe(core.ɵNodeFlags.ProjectedTemplate);
+      expect(compilerCore.NodeFlags.CatRenderNode).toBe(core.ɵNodeFlags.CatRenderNode);
+      expect(compilerCore.NodeFlags.TypeNgContent).toBe(core.ɵNodeFlags.TypeNgContent);
+      expect(compilerCore.NodeFlags.TypePipe).toBe(core.ɵNodeFlags.TypePipe);
+      expect(compilerCore.NodeFlags.TypePureArray).toBe(core.ɵNodeFlags.TypePureArray);
+      expect(compilerCore.NodeFlags.TypePureObject).toBe(core.ɵNodeFlags.TypePureObject);
+      expect(compilerCore.NodeFlags.TypePurePipe).toBe(core.ɵNodeFlags.TypePurePipe);
+      expect(compilerCore.NodeFlags.CatPureExpression).toBe(core.ɵNodeFlags.CatPureExpression);
+      expect(compilerCore.NodeFlags.TypeValueProvider).toBe(core.ɵNodeFlags.TypeValueProvider);
+      expect(compilerCore.NodeFlags.TypeClassProvider).toBe(core.ɵNodeFlags.TypeClassProvider);
+      expect(compilerCore.NodeFlags.TypeFactoryProvider).toBe(core.ɵNodeFlags.TypeFactoryProvider);
+      expect(compilerCore.NodeFlags.TypeUseExistingProvider)
+          .toBe(core.ɵNodeFlags.TypeUseExistingProvider);
+      expect(compilerCore.NodeFlags.LazyProvider).toBe(core.ɵNodeFlags.LazyProvider);
+      expect(compilerCore.NodeFlags.PrivateProvider).toBe(core.ɵNodeFlags.PrivateProvider);
+      expect(compilerCore.NodeFlags.TypeDirective).toBe(core.ɵNodeFlags.TypeDirective);
+      expect(compilerCore.NodeFlags.Component).toBe(core.ɵNodeFlags.Component);
+      expect(compilerCore.NodeFlags.CatProviderNoDirective)
+          .toBe(core.ɵNodeFlags.CatProviderNoDirective);
+      expect(compilerCore.NodeFlags.CatProvider).toBe(core.ɵNodeFlags.CatProvider);
+      expect(compilerCore.NodeFlags.OnInit).toBe(core.ɵNodeFlags.OnInit);
+      expect(compilerCore.NodeFlags.OnDestroy).toBe(core.ɵNodeFlags.OnDestroy);
+      expect(compilerCore.NodeFlags.DoCheck).toBe(core.ɵNodeFlags.DoCheck);
+      expect(compilerCore.NodeFlags.OnChanges).toBe(core.ɵNodeFlags.OnChanges);
+      expect(compilerCore.NodeFlags.AfterContentInit).toBe(core.ɵNodeFlags.AfterContentInit);
+      expect(compilerCore.NodeFlags.AfterContentChecked).toBe(core.ɵNodeFlags.AfterContentChecked);
+      expect(compilerCore.NodeFlags.AfterViewInit).toBe(core.ɵNodeFlags.AfterViewInit);
+      expect(compilerCore.NodeFlags.AfterViewChecked).toBe(core.ɵNodeFlags.AfterViewChecked);
+      expect(compilerCore.NodeFlags.EmbeddedViews).toBe(core.ɵNodeFlags.EmbeddedViews);
+      expect(compilerCore.NodeFlags.ComponentView).toBe(core.ɵNodeFlags.ComponentView);
+      expect(compilerCore.NodeFlags.TypeContentQuery).toBe(core.ɵNodeFlags.TypeContentQuery);
+      expect(compilerCore.NodeFlags.TypeViewQuery).toBe(core.ɵNodeFlags.TypeViewQuery);
+      expect(compilerCore.NodeFlags.StaticQuery).toBe(core.ɵNodeFlags.StaticQuery);
+      expect(compilerCore.NodeFlags.DynamicQuery).toBe(core.ɵNodeFlags.DynamicQuery);
+      expect(compilerCore.NodeFlags.CatQuery).toBe(core.ɵNodeFlags.CatQuery);
+      expect(compilerCore.NodeFlags.Types).toBe(core.ɵNodeFlags.Types);
+
+      expect(compilerCore.DepFlags.None).toBe(core.ɵDepFlags.None);
+      expect(compilerCore.DepFlags.SkipSelf).toBe(core.ɵDepFlags.SkipSelf);
+      expect(compilerCore.DepFlags.Optional).toBe(core.ɵDepFlags.Optional);
+      expect(compilerCore.DepFlags.Value).toBe(core.ɵDepFlags.Value);
+
+      expect(compilerCore.ArgumentType.Inline).toBe(core.ɵArgumentType.Inline);
+      expect(compilerCore.ArgumentType.Dynamic).toBe(core.ɵArgumentType.Dynamic);
+
+      expect(compilerCore.BindingFlags.TypeElementAttribute)
+          .toBe(core.ɵBindingFlags.TypeElementAttribute);
+      expect(compilerCore.BindingFlags.TypeElementClass).toBe(core.ɵBindingFlags.TypeElementClass);
+      expect(compilerCore.BindingFlags.TypeElementStyle).toBe(core.ɵBindingFlags.TypeElementStyle);
+      expect(compilerCore.BindingFlags.TypeProperty).toBe(core.ɵBindingFlags.TypeProperty);
+      expect(compilerCore.BindingFlags.SyntheticProperty)
+          .toBe(core.ɵBindingFlags.SyntheticProperty);
+      expect(compilerCore.BindingFlags.SyntheticHostProperty)
+          .toBe(core.ɵBindingFlags.SyntheticHostProperty);
+      expect(compilerCore.BindingFlags.CatSyntheticProperty)
+          .toBe(core.ɵBindingFlags.CatSyntheticProperty);
+      expect(compilerCore.BindingFlags.Types).toBe(core.ɵBindingFlags.Types);
+
+      expect(compilerCore.QueryBindingType.First).toBe(core.ɵQueryBindingType.First);
+      expect(compilerCore.QueryBindingType.All).toBe(core.ɵQueryBindingType.All);
+
+      expect(compilerCore.QueryValueType.ElementRef).toBe(core.ɵQueryValueType.ElementRef);
+      expect(compilerCore.QueryValueType.RenderElement).toBe(core.ɵQueryValueType.RenderElement);
+      expect(compilerCore.QueryValueType.TemplateRef).toBe(core.ɵQueryValueType.TemplateRef);
+      expect(compilerCore.QueryValueType.ViewContainerRef)
+          .toBe(core.ɵQueryValueType.ViewContainerRef);
+      expect(compilerCore.QueryValueType.Provider).toBe(core.ɵQueryValueType.Provider);
+
+      expect(compilerCore.ViewFlags.None).toBe(core.ɵViewFlags.None);
+      expect(compilerCore.ViewFlags.OnPush).toBe(core.ɵViewFlags.OnPush);
+    });
+  });
+}
+
+function compareRuntimeShape(a: any, b: any) {
+  const keys = metadataKeys(a);
+  expect(keys).toEqual(metadataKeys(b));
+  keys.forEach(key => { expect(a[key]).toBe(b[key]); });
+  // Need to check 'ngMetadataName' separately, as this is
+  // on the prototype in @angular/core, but a regular property in @angular/compiler.
+  expect(a.ngMetadataName).toBe(b.ngMetadataName);
+}
+
+function metadataKeys(a: any): string[] {
+  return Object.keys(a).filter(prop => prop !== 'ngMetadataName' && !prop.startsWith('_')).sort();
+}
+
+function typeExtends<T1 extends T2, T2>() {}

From 6e3498ca8e6752c0d59c19c89e3211744e80f6d8 Mon Sep 17 00:00:00 2001
From: Alan Agius <alan.agius4@gmail.com>
Date: Tue, 15 Aug 2017 16:39:54 +0200
Subject: [PATCH 57/83] fix(tsc-wrapped): add metadata for `type` declarations
 (#18704)

Closes #18675

test(tsc-wrapped): fix collector tests

refactor(tsc-wrapped): change `__symbolic` to `interface` for `TypeAliasDeclaration`

tsc-wrapped: reword test

PR Close #18704
---
 packages/tsc-wrapped/src/collector.ts       | 18 +++++++++++++++---
 packages/tsc-wrapped/test/collector_spec.ts | 15 +++++++++++++--
 2 files changed, 28 insertions(+), 5 deletions(-)

diff --git a/packages/tsc-wrapped/src/collector.ts b/packages/tsc-wrapped/src/collector.ts
index 3ad18800fc..b9b5f3a45b 100644
--- a/packages/tsc-wrapped/src/collector.ts
+++ b/packages/tsc-wrapped/src/collector.ts
@@ -287,13 +287,14 @@ export class MetadataCollector {
     const isExportedIdentifier = (identifier?: ts.Identifier) =>
         identifier && exportMap.has(identifier.text);
     const isExported =
-        (node: ts.FunctionDeclaration | ts.ClassDeclaration | ts.InterfaceDeclaration |
-         ts.EnumDeclaration) => isExport(node) || isExportedIdentifier(node.name);
+        (node: ts.FunctionDeclaration | ts.ClassDeclaration | ts.TypeAliasDeclaration |
+         ts.InterfaceDeclaration | ts.EnumDeclaration) =>
+            isExport(node) || isExportedIdentifier(node.name);
     const exportedIdentifierName = (identifier?: ts.Identifier) =>
         identifier && (exportMap.get(identifier.text) || identifier.text);
     const exportedName =
         (node: ts.FunctionDeclaration | ts.ClassDeclaration | ts.InterfaceDeclaration |
-         ts.EnumDeclaration) => exportedIdentifierName(node.name);
+         ts.TypeAliasDeclaration | ts.EnumDeclaration) => exportedIdentifierName(node.name);
 
 
     // Predeclare classes and functions
@@ -390,6 +391,17 @@ export class MetadataCollector {
           // Otherwise don't record metadata for the class.
           break;
 
+        case ts.SyntaxKind.TypeAliasDeclaration:
+          const typeDeclaration = <ts.TypeAliasDeclaration>node;
+          if (typeDeclaration.name && isExported(typeDeclaration)) {
+            const name = exportedName(typeDeclaration);
+            if (name) {
+              if (!metadata) metadata = {};
+              metadata[name] = {__symbolic: 'interface'};
+            }
+          }
+          break;
+
         case ts.SyntaxKind.InterfaceDeclaration:
           const interfaceDeclaration = <ts.InterfaceDeclaration>node;
           if (interfaceDeclaration.name && isExported(interfaceDeclaration)) {
diff --git a/packages/tsc-wrapped/test/collector_spec.ts b/packages/tsc-wrapped/test/collector_spec.ts
index 7f95df423c..9663b17a6a 100644
--- a/packages/tsc-wrapped/test/collector_spec.ts
+++ b/packages/tsc-wrapped/test/collector_spec.ts
@@ -34,6 +34,7 @@ describe('Collector', () => {
       'exported-classes.ts',
       'exported-functions.ts',
       'exported-enum.ts',
+      'exported-type.ts',
       'exported-consts.ts',
       'local-symbol-ref.ts',
       'local-function-ref.ts',
@@ -66,6 +67,13 @@ describe('Collector', () => {
     expect(metadata).toBeUndefined();
   });
 
+  it('should return an interface reference for types', () => {
+    const sourceFile = program.getSourceFile('/exported-type.ts');
+    const metadata = collector.getMetadata(sourceFile);
+    expect(metadata).toEqual(
+        {__symbolic: 'module', version: 3, metadata: {SomeType: {__symbolic: 'interface'}}});
+  });
+
   it('should return an interface reference for interfaces', () => {
     const sourceFile = program.getSourceFile('app/hero.ts');
     const metadata = collector.getMetadata(sourceFile);
@@ -945,7 +953,7 @@ describe('Collector', () => {
     it('should be able to substitute a lambda', () => {
       const source = createSource(`
         const b = 1;
-        export const a = () => b; 
+        export const a = () => b;
       `);
       const metadata = collector.getMetadata(source, /* strict */ false, (value, node) => {
         if (node.kind === ts.SyntaxKind.ArrowFunction) {
@@ -965,7 +973,7 @@ describe('Collector', () => {
       });
       const source = createSource(`
         const b = 1;
-        export const a = () => b; 
+        export const a = () => b;
       `);
       const metadata = collector.getMetadata(source, /* strict */ false, (value, node) => {
         if (node.kind === ts.SyntaxKind.ArrowFunction) {
@@ -1272,6 +1280,9 @@ const FILES: Directory = {
     }
     export declare function declaredFn();
   `,
+  'exported-type.ts': `
+    export type SomeType = 'a' | 'b';
+  `,
   'exported-enum.ts': `
     import {constValue} from './exported-consts';
 

From 5f5a8e1da6330e28e1524b590cd5e56e39d950ec Mon Sep 17 00:00:00 2001
From: cexbrayat <cedric@ninja-squad.com>
Date: Wed, 16 Aug 2017 15:08:39 +0200
Subject: [PATCH 58/83] docs(aio): typo in metadata guide (#18730)

PR Close #18730
---
 aio/content/guide/metadata.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/aio/content/guide/metadata.md b/aio/content/guide/metadata.md
index f7f42cdc8a..25608db86a 100644
--- a/aio/content/guide/metadata.md
+++ b/aio/content/guide/metadata.md
@@ -16,7 +16,7 @@ In the following example, the `@Component()` metadata object and the class const
 ```typescript
 @Component({
   selector: 'app-typical',
-  template: 'div>A typical component for {{data.name}}</div>
+  template: '<div>A typical component for {{data.name}}</div>'
 )}
 export class TypicalComponent {
   @Input() data: TypicalData;

From 2a62d9f0562a80d7d0589fab49ee71eadd7ca29f Mon Sep 17 00:00:00 2001
From: Olivier Combe <olivier.combe@gmail.com>
Date: Thu, 17 Aug 2017 21:53:29 +0200
Subject: [PATCH 59/83] build(packaging): increase node memory for tests
 (#18755)

PR Close #18755
---
 scripts/ci/test-js.sh | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/scripts/ci/test-js.sh b/scripts/ci/test-js.sh
index b3877a07df..fc826373fb 100755
--- a/scripts/ci/test-js.sh
+++ b/scripts/ci/test-js.sh
@@ -30,8 +30,8 @@ travisFoldEnd "test.unit.node"
 # rebuild to revert files in @angular/compiler/test
 # TODO(tbosch): remove this and teach karma to serve the right files
 travisFoldStart "test.unit.rebuildHack"
-  node dist/packages-dist/tsc-wrapped/src/main -p packages/tsconfig.json
-  node dist/packages-dist/tsc-wrapped/src/main -p modules/tsconfig.json
+  node --max-old-space-size=3000 dist/packages-dist/tsc-wrapped/src/main -p packages/tsconfig.json
+  node --max-old-space-size=3000 dist/packages-dist/tsc-wrapped/src/main -p modules/tsconfig.json
 travisFoldStart "test.unit.rebuildHack"
 
 

From 8f413268cff39cbdcc1b0c047e239c376bf3b02d Mon Sep 17 00:00:00 2001
From: Olivier Combe <olivier.combe@gmail.com>
Date: Thu, 17 Aug 2017 15:34:52 +0200
Subject: [PATCH 60/83] refactor(core): remove deprecated parameter for
 `ErrorHandler` (#18759)

BREAKING CHANGE: `ErrorHandler` no longer takes a parameter as it was not used and deprecated since v4.

PR Close #18759
---
 packages/core/src/error_handler.ts    | 7 -------
 tools/public_api_guard/core/core.d.ts | 2 --
 2 files changed, 9 deletions(-)

diff --git a/packages/core/src/error_handler.ts b/packages/core/src/error_handler.ts
index decb71692a..c1266d1c57 100644
--- a/packages/core/src/error_handler.ts
+++ b/packages/core/src/error_handler.ts
@@ -42,13 +42,6 @@ export class ErrorHandler {
    */
   _console: Console = console;
 
-  constructor(
-      /**
-       * @deprecated since v4.0 parameter no longer has an effect, as ErrorHandler will never
-       * rethrow.
-       */
-      deprecatedParameter?: boolean) {}
-
   handleError(error: any): void {
     const originalError = this._findOriginalError(error);
     const context = this._findContext(error);
diff --git a/tools/public_api_guard/core/core.d.ts b/tools/public_api_guard/core/core.d.ts
index a4547474ce..7363e596d3 100644
--- a/tools/public_api_guard/core/core.d.ts
+++ b/tools/public_api_guard/core/core.d.ts
@@ -381,8 +381,6 @@ export declare function enableProdMode(): void;
 
 /** @stable */
 export declare class ErrorHandler {
-    constructor(
-        deprecatedParameter?: boolean);
     handleError(error: any): void;
 }
 

From d7f42bfbe63c269293c3c19f182e86a529a09b7f Mon Sep 17 00:00:00 2001
From: Olivier Combe <olivier.combe@gmail.com>
Date: Thu, 17 Aug 2017 15:52:24 +0200
Subject: [PATCH 61/83] refactor(platform-browser): remove deprecated
 `NgProbeToken` (#18760)

BREAKING CHANGE: `NgProbeToken` has been removed from `@angular/platform-browser` as it was deprecated since v4. Import it from `@angular/core` instead.

PR Close #18760
---
 .../platform-browser/src/dom/debug/ng_probe.ts   | 16 +++-------------
 .../platform-browser/src/platform-browser.ts     |  1 -
 .../platform-browser/platform-browser.d.ts       |  7 -------
 3 files changed, 3 insertions(+), 21 deletions(-)

diff --git a/packages/platform-browser/src/dom/debug/ng_probe.ts b/packages/platform-browser/src/dom/debug/ng_probe.ts
index e74b9cb3d2..fff61b86ad 100644
--- a/packages/platform-browser/src/dom/debug/ng_probe.ts
+++ b/packages/platform-browser/src/dom/debug/ng_probe.ts
@@ -26,22 +26,13 @@ export function inspectNativeElement(element: any): core.DebugNode|null {
   return core.getDebugNode(element);
 }
 
-/**
- * Deprecated. Use the one from '@angular/core'.
- * @deprecated
- */
-export class NgProbeToken {
-  constructor(public name: string, public token: any) {}
-}
-
-export function _createNgProbe(extraTokens: NgProbeToken[], coreTokens: core.NgProbeToken[]): any {
-  const tokens = (extraTokens || []).concat(coreTokens || []);
+export function _createNgProbe(coreTokens: core.NgProbeToken[]): any {
   exportNgVar(INSPECT_GLOBAL_NAME, inspectNativeElement);
-  exportNgVar(CORE_TOKENS_GLOBAL_NAME, {...CORE_TOKENS, ..._ngProbeTokensToMap(tokens || [])});
+  exportNgVar(CORE_TOKENS_GLOBAL_NAME, {...CORE_TOKENS, ..._ngProbeTokensToMap(coreTokens || [])});
   return () => inspectNativeElement;
 }
 
-function _ngProbeTokensToMap(tokens: NgProbeToken[]): {[name: string]: any} {
+function _ngProbeTokensToMap(tokens: core.NgProbeToken[]): {[name: string]: any} {
   return tokens.reduce((prev: any, t: any) => (prev[t.name] = t.token, prev), {});
 }
 
@@ -53,7 +44,6 @@ export const ELEMENT_PROBE_PROVIDERS: core.Provider[] = [
     provide: core.APP_INITIALIZER,
     useFactory: _createNgProbe,
     deps: [
-      [NgProbeToken, new core.Optional()],
       [core.NgProbeToken, new core.Optional()],
     ],
     multi: true,
diff --git a/packages/platform-browser/src/platform-browser.ts b/packages/platform-browser/src/platform-browser.ts
index deb1df279f..1a8c9171c0 100644
--- a/packages/platform-browser/src/platform-browser.ts
+++ b/packages/platform-browser/src/platform-browser.ts
@@ -11,7 +11,6 @@ export {Meta, MetaDefinition} from './browser/meta';
 export {Title} from './browser/title';
 export {disableDebugTools, enableDebugTools} from './browser/tools/tools';
 export {By} from './dom/debug/by';
-export {NgProbeToken} from './dom/debug/ng_probe';
 export {DOCUMENT} from './dom/dom_tokens';
 export {EVENT_MANAGER_PLUGINS, EventManager} from './dom/events/event_manager';
 export {HAMMER_GESTURE_CONFIG, HammerGestureConfig} from './dom/events/hammer_gestures';
diff --git a/tools/public_api_guard/platform-browser/platform-browser.d.ts b/tools/public_api_guard/platform-browser/platform-browser.d.ts
index 45d0d2ef66..dcd7a2b1eb 100644
--- a/tools/public_api_guard/platform-browser/platform-browser.d.ts
+++ b/tools/public_api_guard/platform-browser/platform-browser.d.ts
@@ -82,13 +82,6 @@ export declare type MetaDefinition = {
     [prop: string]: string;
 };
 
-/** @deprecated */
-export declare class NgProbeToken {
-    name: string;
-    token: any;
-    constructor(name: string, token: any);
-}
-
 /** @stable */
 export declare const platformBrowser: (extraProviders?: StaticProvider[]) => PlatformRef;
 

From a56468cf2f4566f23abae262176ac36642033de4 Mon Sep 17 00:00:00 2001
From: Olivier Combe <olivier.combe@gmail.com>
Date: Thu, 17 Aug 2017 17:41:20 +0200
Subject: [PATCH 62/83] refactor(platform-webworker): remove deprecated
 `PRIMITIVE` (#18761)

BREAKING CHANGE: `PRIMITIVE` has been removed as it was deprecated since v4. Use `SerializerTypes.PRIMITIVE` instead.

PR Close #18761
---
 packages/platform-webworker/src/platform-webworker.ts     | 2 +-
 .../src/web_workers/shared/serializer.ts                  | 8 --------
 .../platform-webworker/platform-webworker.d.ts            | 3 ---
 3 files changed, 1 insertion(+), 12 deletions(-)

diff --git a/packages/platform-webworker/src/platform-webworker.ts b/packages/platform-webworker/src/platform-webworker.ts
index 8ecc2a4b57..37552b455a 100644
--- a/packages/platform-webworker/src/platform-webworker.ts
+++ b/packages/platform-webworker/src/platform-webworker.ts
@@ -13,7 +13,7 @@ import {WORKER_SCRIPT, platformWorkerUi} from './worker_render';
 export {VERSION} from './version';
 export {ClientMessageBroker, ClientMessageBrokerFactory, FnArg, UiArguments} from './web_workers/shared/client_message_broker';
 export {MessageBus, MessageBusSink, MessageBusSource} from './web_workers/shared/message_bus';
-export {PRIMITIVE, SerializerTypes} from './web_workers/shared/serializer';
+export {SerializerTypes} from './web_workers/shared/serializer';
 export {ReceivedMessage, ServiceMessageBroker, ServiceMessageBrokerFactory} from './web_workers/shared/service_message_broker';
 export {WORKER_UI_LOCATION_PROVIDERS} from './web_workers/ui/location_providers';
 export {WORKER_APP_LOCATION_PROVIDERS} from './web_workers/worker/location_providers';
diff --git a/packages/platform-webworker/src/web_workers/shared/serializer.ts b/packages/platform-webworker/src/web_workers/shared/serializer.ts
index 02eede18da..3ed371d047 100644
--- a/packages/platform-webworker/src/web_workers/shared/serializer.ts
+++ b/packages/platform-webworker/src/web_workers/shared/serializer.ts
@@ -22,14 +22,6 @@ export const enum SerializerTypes {
   RENDER_STORE_OBJECT,
 }
 
-/**
- * Any type that does not need to be serialized (string, number, boolean)
- *
- * @experimental WebWorker support in Angular is currently experimental.
- * @deprecated in v4. Use SerializerTypes.PRIMITIVE instead
- */
-export const PRIMITIVE = SerializerTypes.PRIMITIVE;
-
 export class LocationType {
   constructor(
       public href: string, public protocol: string, public host: string, public hostname: string,
diff --git a/tools/public_api_guard/platform-webworker/platform-webworker.d.ts b/tools/public_api_guard/platform-webworker/platform-webworker.d.ts
index 47f56568c5..68743d5461 100644
--- a/tools/public_api_guard/platform-webworker/platform-webworker.d.ts
+++ b/tools/public_api_guard/platform-webworker/platform-webworker.d.ts
@@ -46,9 +46,6 @@ export declare const platformWorkerApp: (extraProviders?: StaticProvider[] | und
 /** @experimental */
 export declare const platformWorkerUi: (extraProviders?: StaticProvider[] | undefined) => PlatformRef;
 
-/** @experimental */
-export declare const PRIMITIVE: SerializerTypes;
-
 /** @experimental */
 export interface ReceivedMessage {
     args: any[];

From 17b71ae382cbf4cde3c049e64530b5cfd13fed96 Mon Sep 17 00:00:00 2001
From: Georgios Kalpakas <kalpakas.g@gmail.com>
Date: Fri, 11 Aug 2017 16:40:25 +0300
Subject: [PATCH 63/83] docs(aio): move code snippet to appropriate location
 (#18650)

PR Close #18650
---
 aio/content/guide/aot-compiler.md | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/aio/content/guide/aot-compiler.md b/aio/content/guide/aot-compiler.md
index a5ddc8315f..9a3205e777 100644
--- a/aio/content/guide/aot-compiler.md
+++ b/aio/content/guide/aot-compiler.md
@@ -363,6 +363,10 @@ Those _npm_ commands are long and difficult to remember.
 
 Add the following _npm_ convenience script to the `package.json` so you can compile and rollup in one command.
 
+<code-example language="json">
+  "build:aot": "ngc -p tsconfig-aot.json && rollup -c rollup-config.js",
+</code-example>
+
 Open a terminal window and try it.
 
 <code-example language="none" class="code-shell">
@@ -526,10 +530,10 @@ Compiling with AOT presupposes certain supporting files, most of them discussed
   </code-pane>
 </code-tabs>
 
-Extend the `scripts` section of the `package.json` with these npm scripts:
+With the following npm script in the `scripts` section of the `package.json`, you can easily serve
+the AOT-compiled application:
 
 <code-example language="json">
-  "build:aot": "ngc -p tsconfig-aot.json && rollup -c rollup-config.js",
   "serve:aot": "lite-server -c bs-config.aot.json",
 </code-example>
 
@@ -545,7 +549,7 @@ Copy the AOT distribution files into the `/aot` folder with the node script:
 
 </div>
 
-Now AOT-compile the app and launch it with the `lite-server`:
+Now AOT-compile the app and launch:
 
 <code-example language="none" class="code-shell">
   npm run build:aot && npm run serve:aot

From 60c803649b868fc5ca89ef58aef5998dc7014012 Mon Sep 17 00:00:00 2001
From: Georgios Kalpakas <kalpakas.g@gmail.com>
Date: Sat, 12 Aug 2017 01:51:59 +0300
Subject: [PATCH 64/83] test(aio): fix error logged during tests (#18659)

The fixed test expected there to be a doc version without a URL. This used to be
the case but not any more. As a result, an error was logged in the test output
(but no failure).

This commit fixes it by ensuring that a version without a URL exists.

PR Close #18659
---
 aio/src/app/app.component.spec.ts | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/aio/src/app/app.component.spec.ts b/aio/src/app/app.component.spec.ts
index 1765cd85e1..23831fd3ee 100644
--- a/aio/src/app/app.component.spec.ts
+++ b/aio/src/app/app.component.spec.ts
@@ -310,13 +310,11 @@ describe('AppComponent', () => {
         expect(locationService.go).toHaveBeenCalledWith(versionWithUrl.url);
       });
 
-      // The current docs version should not have an href
-      // This may change when we perfect our docs versioning approach
       it('should not navigate when change to a version without a url', () => {
         setupSelectorForTesting();
-        const versionWithoutUrlIndex = component.docVersions.findIndex(v => !v.url);
-        const versionWithoutUrl = component.docVersions[versionWithoutUrlIndex];
-        selectElement.triggerEventHandler('change', { option: versionWithoutUrl, index: versionWithoutUrlIndex});
+        const versionWithoutUrlIndex = component.docVersions.length;
+        const versionWithoutUrl = component.docVersions[versionWithoutUrlIndex] = { title: 'foo', url: null };
+        selectElement.triggerEventHandler('change', { option: versionWithoutUrl, index: versionWithoutUrlIndex });
         expect(locationService.go).not.toHaveBeenCalled();
       });
     });

From da14391cff7bc08c061d4ee64be5bcc182e8ae1e Mon Sep 17 00:00:00 2001
From: mgechev <mgechev@gmail.com>
Date: Wed, 16 Aug 2017 21:58:37 -0700
Subject: [PATCH 65/83] docs(aio): update resource for codelyzer (#18742)

PR Close #18742
---
 aio/content/marketing/resources.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/aio/content/marketing/resources.json b/aio/content/marketing/resources.json
index e981f64820..5b024447e8 100644
--- a/aio/content/marketing/resources.json
+++ b/aio/content/marketing/resources.json
@@ -202,7 +202,7 @@
             "url": "https://cli.angular.io"
           },
           "d1": {
-            "desc": "A set of tslint rules for static code analysis of Angular TypeScript projects.",
+            "desc": "Static analysis for Angular projects.",
             "logo": "",
             "rev": true,
             "title": "Codelyzer",

From 596e9f4e04739852988304f546e19ce48132e364 Mon Sep 17 00:00:00 2001
From: Olivier Combe <olivier.combe@gmail.com>
Date: Thu, 17 Aug 2017 14:29:33 +0200
Subject: [PATCH 66/83] refactor(core): remove deprecated `TrackByFn` (#18757)

BREAKING CHANGE: `TrackByFn` has been removed because it was deprecated since v4. Use `TrackByFunction` instead.

PR Close #18757
---
 packages/core/src/change_detection.ts               |  2 +-
 .../core/src/change_detection/change_detection.ts   |  2 +-
 .../change_detection/differs/iterable_differs.ts    | 13 +++----------
 tools/public_api_guard/core/core.d.ts               |  5 -----
 4 files changed, 5 insertions(+), 17 deletions(-)

diff --git a/packages/core/src/change_detection.ts b/packages/core/src/change_detection.ts
index d543d0826f..8fd31eb47b 100644
--- a/packages/core/src/change_detection.ts
+++ b/packages/core/src/change_detection.ts
@@ -12,4 +12,4 @@
  * Change detection enables data binding in Angular.
  */
 
-export {ChangeDetectionStrategy, ChangeDetectorRef, CollectionChangeRecord, DefaultIterableDiffer, IterableChangeRecord, IterableChanges, IterableDiffer, IterableDifferFactory, IterableDiffers, KeyValueChangeRecord, KeyValueChanges, KeyValueDiffer, KeyValueDifferFactory, KeyValueDiffers, NgIterable, PipeTransform, SimpleChange, SimpleChanges, TrackByFn, TrackByFunction, WrappedValue} from './change_detection/change_detection';
+export {ChangeDetectionStrategy, ChangeDetectorRef, CollectionChangeRecord, DefaultIterableDiffer, IterableChangeRecord, IterableChanges, IterableDiffer, IterableDifferFactory, IterableDiffers, KeyValueChangeRecord, KeyValueChanges, KeyValueDiffer, KeyValueDifferFactory, KeyValueDiffers, NgIterable, PipeTransform, SimpleChange, SimpleChanges, TrackByFunction, WrappedValue} from './change_detection/change_detection';
diff --git a/packages/core/src/change_detection/change_detection.ts b/packages/core/src/change_detection/change_detection.ts
index db43f81e07..5ad5ce00ad 100644
--- a/packages/core/src/change_detection/change_detection.ts
+++ b/packages/core/src/change_detection/change_detection.ts
@@ -18,7 +18,7 @@ export {ChangeDetectionStrategy, ChangeDetectorStatus, isDefaultChangeDetectionS
 export {DefaultIterableDifferFactory} from './differs/default_iterable_differ';
 export {DefaultIterableDiffer} from './differs/default_iterable_differ';
 export {DefaultKeyValueDifferFactory} from './differs/default_keyvalue_differ';
-export {CollectionChangeRecord, IterableChangeRecord, IterableChanges, IterableDiffer, IterableDifferFactory, IterableDiffers, NgIterable, TrackByFn, TrackByFunction} from './differs/iterable_differs';
+export {CollectionChangeRecord, IterableChangeRecord, IterableChanges, IterableDiffer, IterableDifferFactory, IterableDiffers, NgIterable, TrackByFunction} from './differs/iterable_differs';
 export {KeyValueChangeRecord, KeyValueChanges, KeyValueDiffer, KeyValueDifferFactory, KeyValueDiffers} from './differs/keyvalue_differs';
 export {PipeTransform} from './pipe_transform';
 
diff --git a/packages/core/src/change_detection/differs/iterable_differs.ts b/packages/core/src/change_detection/differs/iterable_differs.ts
index d1daadc3b5..6769731856 100644
--- a/packages/core/src/change_detection/differs/iterable_differs.ts
+++ b/packages/core/src/change_detection/differs/iterable_differs.ts
@@ -82,7 +82,8 @@ export interface IterableChanges<V> {
   /** Iterate over all removed items. */
   forEachRemovedItem(fn: (record: IterableChangeRecord<V>) => void): void;
 
-  /** Iterate over all items which had their identity (as computed by the `trackByFn`) changed. */
+  /** Iterate over all items which had their identity (as computed by the `TrackByFunction`)
+   * changed. */
   forEachIdentityChange(fn: (record: IterableChangeRecord<V>) => void): void;
 }
 
@@ -101,7 +102,7 @@ export interface IterableChangeRecord<V> {
   /** The item. */
   readonly item: V;
 
-  /** Track by identity as computed by the `trackByFn`. */
+  /** Track by identity as computed by the `TrackByFunction`. */
   readonly trackById: any;
 }
 
@@ -110,14 +111,6 @@ export interface IterableChangeRecord<V> {
  */
 export interface CollectionChangeRecord<V> extends IterableChangeRecord<V> {}
 
-
-/**
- * Nolonger used.
- *
- * @deprecated v4.0.0 - Use TrackByFunction instead
- */
-export interface TrackByFn { (index: number, item: any): any; }
-
 /**
  * An optional function passed into {@link NgForOf} that defines how to track
  * items in an iterable (e.g. fby index or id)
diff --git a/tools/public_api_guard/core/core.d.ts b/tools/public_api_guard/core/core.d.ts
index 7363e596d3..21d92db227 100644
--- a/tools/public_api_guard/core/core.d.ts
+++ b/tools/public_api_guard/core/core.d.ts
@@ -989,11 +989,6 @@ export declare class TestabilityRegistry {
     registerApplication(token: any, testability: Testability): void;
 }
 
-/** @deprecated */
-export interface TrackByFn {
-    (index: number, item: any): any;
-}
-
 /** @stable */
 export interface TrackByFunction<T> {
     (index: number, item: T): any;

From be9713c6e241834e45041aed781736a57b9789e7 Mon Sep 17 00:00:00 2001
From: Olivier Combe <olivier.combe@gmail.com>
Date: Thu, 17 Aug 2017 15:01:32 +0200
Subject: [PATCH 67/83] refactor(core): remove deprecated `ChangeDetectionRef`
 argument in `DifferFactory#create` (#18757)

BREAKING CHANGE: `DifferFactory.create` no longer takes ChangeDetectionRef as a first argument as it was not used and deprecated since v4.

PR Close #18757
---
 .../differs/default_iterable_differ.ts               | 12 ++----------
 .../differs/default_keyvalue_differ.ts               | 10 +---------
 .../src/change_detection/differs/iterable_differs.ts |  7 -------
 .../src/change_detection/differs/keyvalue_differs.ts |  7 -------
 tools/public_api_guard/core/core.d.ts                |  2 --
 5 files changed, 3 insertions(+), 35 deletions(-)

diff --git a/packages/core/src/change_detection/differs/default_iterable_differ.ts b/packages/core/src/change_detection/differs/default_iterable_differ.ts
index 1c083a823a..b74c7a7a13 100644
--- a/packages/core/src/change_detection/differs/default_iterable_differ.ts
+++ b/packages/core/src/change_detection/differs/default_iterable_differ.ts
@@ -8,8 +8,6 @@
 
 import {looseIdentical, stringify} from '../../util';
 import {isListLikeIterable, iterateListLike} from '../change_detection_util';
-import {ChangeDetectorRef} from '../change_detector_ref';
-
 import {IterableChangeRecord, IterableChanges, IterableDiffer, IterableDifferFactory, NgIterable, TrackByFunction} from './iterable_differs';
 
 
@@ -17,14 +15,8 @@ export class DefaultIterableDifferFactory implements IterableDifferFactory {
   constructor() {}
   supports(obj: Object|null|undefined): boolean { return isListLikeIterable(obj); }
 
-  create<V>(trackByFn?: TrackByFunction<V>): DefaultIterableDiffer<V>;
-
-  /**
-   * @deprecated v4.0.0 - ChangeDetectorRef is not used and is no longer a parameter
-   */
-  create<V>(cdRefOrTrackBy?: ChangeDetectorRef|TrackByFunction<V>, trackByFn?: TrackByFunction<V>):
-      DefaultIterableDiffer<V> {
-    return new DefaultIterableDiffer<V>(trackByFn || <TrackByFunction<any>>cdRefOrTrackBy);
+  create<V>(trackByFn?: TrackByFunction<V>): DefaultIterableDiffer<V> {
+    return new DefaultIterableDiffer<V>(trackByFn);
   }
 }
 
diff --git a/packages/core/src/change_detection/differs/default_keyvalue_differ.ts b/packages/core/src/change_detection/differs/default_keyvalue_differ.ts
index c2f3e630d7..66731a5aa2 100644
--- a/packages/core/src/change_detection/differs/default_keyvalue_differ.ts
+++ b/packages/core/src/change_detection/differs/default_keyvalue_differ.ts
@@ -8,7 +8,6 @@
 
 import {looseIdentical, stringify} from '../../util';
 import {isJsObject} from '../change_detection_util';
-import {ChangeDetectorRef} from '../change_detector_ref';
 import {KeyValueChangeRecord, KeyValueChanges, KeyValueDiffer, KeyValueDifferFactory} from './keyvalue_differs';
 
 
@@ -16,14 +15,7 @@ export class DefaultKeyValueDifferFactory<K, V> implements KeyValueDifferFactory
   constructor() {}
   supports(obj: any): boolean { return obj instanceof Map || isJsObject(obj); }
 
-  create<K, V>(): DefaultKeyValueDiffer<K, V>;
-
-  /**
-   * @deprecated v4.0.0 - ChangeDetectorRef is not used and is no longer a parameter
-   */
-  create<K, V>(cd?: ChangeDetectorRef): KeyValueDiffer<K, V> {
-    return new DefaultKeyValueDiffer<K, V>();
-  }
+  create<K, V>(): KeyValueDiffer<K, V> { return new DefaultKeyValueDiffer<K, V>(); }
 }
 
 export class DefaultKeyValueDiffer<K, V> implements KeyValueDiffer<K, V>, KeyValueChanges<K, V> {
diff --git a/packages/core/src/change_detection/differs/iterable_differs.ts b/packages/core/src/change_detection/differs/iterable_differs.ts
index 6769731856..94bd9e4f80 100644
--- a/packages/core/src/change_detection/differs/iterable_differs.ts
+++ b/packages/core/src/change_detection/differs/iterable_differs.ts
@@ -7,7 +7,6 @@
  */
 
 import {Optional, SkipSelf, StaticProvider} from '../../di';
-import {ChangeDetectorRef} from '../change_detector_ref';
 
 
 /**
@@ -127,12 +126,6 @@ export interface TrackByFunction<T> { (index: number, item: T): any; }
 export interface IterableDifferFactory {
   supports(objects: any): boolean;
   create<V>(trackByFn?: TrackByFunction<V>): IterableDiffer<V>;
-
-  /**
-   * @deprecated v4.0.0 - ChangeDetectorRef is not used and is no longer a parameter
-   */
-  create<V>(_cdr?: ChangeDetectorRef|TrackByFunction<V>, trackByFn?: TrackByFunction<V>):
-      IterableDiffer<V>;
 }
 
 /**
diff --git a/packages/core/src/change_detection/differs/keyvalue_differs.ts b/packages/core/src/change_detection/differs/keyvalue_differs.ts
index c6637ecf9d..bcf3bff698 100644
--- a/packages/core/src/change_detection/differs/keyvalue_differs.ts
+++ b/packages/core/src/change_detection/differs/keyvalue_differs.ts
@@ -7,8 +7,6 @@
  */
 
 import {Optional, SkipSelf, StaticProvider} from '../../di';
-import {ChangeDetectorRef} from '../change_detector_ref';
-
 
 
 /**
@@ -110,11 +108,6 @@ export interface KeyValueDifferFactory {
    * Create a `KeyValueDiffer`.
    */
   create<K, V>(): KeyValueDiffer<K, V>;
-
-  /**
-   * @deprecated v4.0.0 - ChangeDetectorRef is not used and is no longer a parameter
-   */
-  create<K, V>(_cdr?: ChangeDetectorRef): KeyValueDiffer<K, V>;
 }
 
 /**
diff --git a/tools/public_api_guard/core/core.d.ts b/tools/public_api_guard/core/core.d.ts
index 21d92db227..54b90a4e97 100644
--- a/tools/public_api_guard/core/core.d.ts
+++ b/tools/public_api_guard/core/core.d.ts
@@ -514,7 +514,6 @@ export interface IterableDiffer<V> {
 /** @stable */
 export interface IterableDifferFactory {
     create<V>(trackByFn?: TrackByFunction<V>): IterableDiffer<V>;
-    /** @deprecated */ create<V>(_cdr?: ChangeDetectorRef | TrackByFunction<V>, trackByFn?: TrackByFunction<V>): IterableDiffer<V>;
     supports(objects: any): boolean;
 }
 
@@ -557,7 +556,6 @@ export interface KeyValueDiffer<K, V> {
 /** @stable */
 export interface KeyValueDifferFactory {
     create<K, V>(): KeyValueDiffer<K, V>;
-    /** @deprecated */ create<K, V>(_cdr?: ChangeDetectorRef): KeyValueDiffer<K, V>;
     supports(objects: any): boolean;
 }
 

From 7f4c964eef8a526aae5bbedd12a64b56bff82233 Mon Sep 17 00:00:00 2001
From: Tea <zhangwenlp@vip.qq.com>
Date: Fri, 18 Aug 2017 13:52:38 +0800
Subject: [PATCH 68/83] docs(aio): typo in template-syntax guide (#18765)

PR Close #18765
---
 aio/content/guide/template-syntax.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/aio/content/guide/template-syntax.md b/aio/content/guide/template-syntax.md
index c0c3933ec2..65e0b5c5b9 100644
--- a/aio/content/guide/template-syntax.md
+++ b/aio/content/guide/template-syntax.md
@@ -1155,7 +1155,7 @@ other HTML elements, attributes, properties, and components.
 They are usually applied to elements as if they were HTML attributes, hence the name.
 
 Many details are covered in the [_Attribute Directives_](guide/attribute-directives) guide.
-Many NgMdules such as the [`RouterModule`](guide/router "Routing and Navigation")
+Many NgModules such as the [`RouterModule`](guide/router "Routing and Navigation")
 and the [`FormsModule`](guide/forms "Forms") define their own attribute directives.
 This section is an introduction to the most commonly used attribute directives:
 

From 7d72d0eb9bbd4c197305dba0f0588fad3d592f59 Mon Sep 17 00:00:00 2001
From: Pawel Kozlowski <pkozlowski.opensource@gmail.com>
Date: Fri, 18 Aug 2017 15:00:12 +0200
Subject: [PATCH 69/83] refactor(compiler): align &ngsp; handling with Angular
 Dart implementation (#18774)

PR Close #18774
---
 .../src/ml_parser/html_whitespaces.ts         | 23 +++++++++++--------
 .../src/template_parser/template_parser.ts    |  7 +++---
 .../template_parser/template_parser_spec.ts   | 18 +++++++++++++++
 3 files changed, 35 insertions(+), 13 deletions(-)

diff --git a/packages/compiler/src/ml_parser/html_whitespaces.ts b/packages/compiler/src/ml_parser/html_whitespaces.ts
index f2cd01f7e3..73e5b48665 100644
--- a/packages/compiler/src/ml_parser/html_whitespaces.ts
+++ b/packages/compiler/src/ml_parser/html_whitespaces.ts
@@ -18,6 +18,17 @@ function hasPreserveWhitespacesAttr(attrs: html.Attribute[]): boolean {
   return attrs.some((attr: html.Attribute) => attr.name === PRESERVE_WS_ATTR_NAME);
 }
 
+/**
+ * Angular Dart introduced &ngsp; as a placeholder for non-removable space, see:
+ * https://github.com/dart-lang/angular/blob/0bb611387d29d65b5af7f9d2515ab571fd3fbee4/_tests/test/compiler/preserve_whitespace_test.dart#L25-L32
+ * In Angular Dart &ngsp; is converted to the 0xE500 PUA (Private Use Areas) unicode character
+ * and later on replaced by a space. We are re-implementing the same idea here.
+ */
+export function replaceNgsp(value: string): string {
+  // lexer is replacing the &ngsp; pseudo-entity with NGSP_UNICODE
+  return value.replace(new RegExp(NGSP_UNICODE, 'g'), ' ');
+}
+
 /**
  * This visitor can walk HTML parse tree and remove / trim text nodes using the following rules:
  * - consider spaces, tabs and new lines as whitespace characters;
@@ -25,15 +36,9 @@ function hasPreserveWhitespacesAttr(attrs: html.Attribute[]): boolean {
  * - for all other text nodes replace consecutive whitespace characters with one space;
  * - convert &ngsp; pseudo-entity to a single space;
  *
- * The idea of using &ngsp; as a placeholder for non-removable space was originally introduced in
- * Angular Dart, see:
- * https://github.com/dart-lang/angular/blob/0bb611387d29d65b5af7f9d2515ab571fd3fbee4/_tests/test/compiler/preserve_whitespace_test.dart#L25-L32
- * In Angular Dart &ngsp; is converted to the 0xE500 PUA (Private Use Areas) unicode character
- * and later on replaced by a space. We are re-implementing the same idea here.
- *
  * Removal and trimming of whitespaces have positive performance impact (less code to generate
  * while compiling templates, faster view creation). At the same time it can be "destructive"
- * in some cases (whitespaces can influence layout). Becouse of the potential of breaking layout
+ * in some cases (whitespaces can influence layout). Because of the potential of breaking layout
  * this visitor is not activated by default in Angular 5 and people need to explicitly opt-in for
  * whitespace removal. The default option for whitespace removal will be revisited in Angular 6
  * and might be changed to "on" by default.
@@ -61,9 +66,7 @@ class WhitespaceVisitor implements html.Visitor {
     const isBlank = text.value.trim().length === 0;
 
     if (!isBlank) {
-      // lexer is replacing the &ngsp; pseudo-entity with NGSP_UNICODE
-      return new html.Text(
-          text.value.replace(NGSP_UNICODE, ' ').replace(/\s\s+/g, ' '), text.sourceSpan);
+      return new html.Text(replaceNgsp(text.value).replace(/\s\s+/g, ' '), text.sourceSpan);
     }
 
     return null;
diff --git a/packages/compiler/src/template_parser/template_parser.ts b/packages/compiler/src/template_parser/template_parser.ts
index 255e048ca1..c3b53737e8 100644
--- a/packages/compiler/src/template_parser/template_parser.ts
+++ b/packages/compiler/src/template_parser/template_parser.ts
@@ -16,7 +16,7 @@ import {I18NHtmlParser} from '../i18n/i18n_html_parser';
 import {Identifiers, createTokenForExternalReference, createTokenForReference} from '../identifiers';
 import * as html from '../ml_parser/ast';
 import {ParseTreeResult} from '../ml_parser/html_parser';
-import {removeWhitespaces} from '../ml_parser/html_whitespaces';
+import {removeWhitespaces, replaceNgsp} from '../ml_parser/html_whitespaces';
 import {expandNodes} from '../ml_parser/icu_ast_expander';
 import {InterpolationConfig} from '../ml_parser/interpolation_config';
 import {isNgTemplate, splitNsName} from '../ml_parser/tags';
@@ -248,9 +248,10 @@ class TemplateParseVisitor implements html.Visitor {
 
   visitText(text: html.Text, parent: ElementContext): any {
     const ngContentIndex = parent.findNgContentIndex(TEXT_CSS_SELECTOR) !;
-    const expr = this._bindingParser.parseInterpolation(text.value, text.sourceSpan !);
+    const valueNoNgsp = replaceNgsp(text.value);
+    const expr = this._bindingParser.parseInterpolation(valueNoNgsp, text.sourceSpan !);
     return expr ? new BoundTextAst(expr, ngContentIndex, text.sourceSpan !) :
-                  new TextAst(text.value, ngContentIndex, text.sourceSpan !);
+                  new TextAst(valueNoNgsp, ngContentIndex, text.sourceSpan !);
   }
 
   visitAttribute(attribute: html.Attribute, context: any): any {
diff --git a/packages/compiler/test/template_parser/template_parser_spec.ts b/packages/compiler/test/template_parser/template_parser_spec.ts
index a6371c5b1f..f5142322e5 100644
--- a/packages/compiler/test/template_parser/template_parser_spec.ts
+++ b/packages/compiler/test/template_parser/template_parser_spec.ts
@@ -2071,6 +2071,12 @@ The pipe 'test' could not be found ("{{[ERROR ->]a | test}}"): TestComp@0:2`);
 
   describe('whitespaces removal', () => {
 
+    beforeEach(() => {
+      TestBed.configureCompiler({providers: [TEST_COMPILER_PROVIDERS, MOCK_SCHEMA_REGISTRY]});
+    });
+
+    commonBeforeEach();
+
     it('should not remove whitespaces by default', () => {
       expect(humanizeTplAst(parse(' <br>  <br>\t<br>\n<br> ', []))).toEqual([
         [TextAst, ' '],
@@ -2085,6 +2091,18 @@ The pipe 'test' could not be found ("{{[ERROR ->]a | test}}"): TestComp@0:2`);
       ]);
     });
 
+    it('should replace each &ngsp; with a space when preserveWhitespaces is true', () => {
+      expect(humanizeTplAst(parse('foo&ngsp;&ngsp;&ngsp;bar', [], [], [], true))).toEqual([
+        [TextAst, 'foo   bar'],
+      ]);
+    });
+
+    it('should replace every &ngsp; with a single space when preserveWhitespaces is false', () => {
+      expect(humanizeTplAst(parse('foo&ngsp;&ngsp;&ngsp;bar', [], [], [], false))).toEqual([
+        [TextAst, 'foo bar'],
+      ]);
+    });
+
     it('should remove whitespaces when explicitly requested', () => {
       expect(humanizeTplAst(parse(' <br>  <br>\t<br>\n<br> ', [], [], [], false))).toEqual([
         [ElementAst, 'br'],

From b8a37362755aae7f438936587beeb603dda8342e Mon Sep 17 00:00:00 2001
From: Peter Bacon Darwin <pete@bacondarwin.com>
Date: Fri, 18 Aug 2017 14:48:40 +0100
Subject: [PATCH 70/83] build(aio): do not auto-link code elements already
 inside a link (#18776)

Closes #18769

PR Close #18776
---
 aio/package.json                                           | 1 +
 .../angular-base-package/post-processors/auto-link-code.js | 6 +++---
 .../post-processors/auto-link-code.spec.js                 | 7 +++++++
 aio/yarn.lock                                              | 4 ++++
 4 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/aio/package.json b/aio/package.json
index 28c876991b..6019a1e2ea 100644
--- a/aio/package.json
+++ b/aio/package.json
@@ -124,6 +124,7 @@
     "unist-util-filter": "^0.2.1",
     "unist-util-source": "^1.0.1",
     "unist-util-visit": "^1.1.1",
+    "unist-util-visit-parents": "^1.1.1",
     "vrsource-tslint-rules": "^4.0.1",
     "watchr": "^3.0.1",
     "yargs": "^7.0.2"
diff --git a/aio/tools/transforms/angular-base-package/post-processors/auto-link-code.js b/aio/tools/transforms/angular-base-package/post-processors/auto-link-code.js
index cb6e115d04..79b5f31668 100644
--- a/aio/tools/transforms/angular-base-package/post-processors/auto-link-code.js
+++ b/aio/tools/transforms/angular-base-package/post-processors/auto-link-code.js
@@ -1,4 +1,4 @@
-const visit = require('unist-util-visit');
+const visit = require('unist-util-visit-parents');
 const is = require('hast-util-is-element');
 const textContent = require('hast-util-to-string');
 
@@ -17,8 +17,8 @@ module.exports = function autoLinkCode(getDocFromAlias) {
 
   function autoLinkCodeImpl()  {
     return (ast) => {
-      visit(ast, node => {
-        if (is(node, 'code')) {
+      visit(ast, (node, ancestors) => {
+        if (is(node, 'code') && ancestors.every(ancestor => !is(ancestor, 'a'))) {
           const docs = getDocFromAlias(textContent(node));
           if (docs.length === 1 && autoLinkCodeImpl.docTypes.indexOf(docs[0].docType) !== -1) {
             const link = {
diff --git a/aio/tools/transforms/angular-base-package/post-processors/auto-link-code.spec.js b/aio/tools/transforms/angular-base-package/post-processors/auto-link-code.spec.js
index 9ddd36a3e0..eec9b0a930 100644
--- a/aio/tools/transforms/angular-base-package/post-processors/auto-link-code.spec.js
+++ b/aio/tools/transforms/angular-base-package/post-processors/auto-link-code.spec.js
@@ -36,4 +36,11 @@ describe('autoLinkCode post-processor', () => {
     processor.$process([doc]);
     expect(doc.renderedContent).toEqual('<code>MyClass</code>');
   });
+
+  it('should ignore code items that are already inside a link', () => {
+    aliasMap.addDoc({ docType: 'class', id: 'MyClass', aliases: ['MyClass'], path: 'a/b/myclass' });
+    const doc = { docType: 'test-doc', renderedContent: '<a href="..."><div><code>MyClass</code></div></a>' };
+    processor.$process([doc]);
+    expect(doc.renderedContent).toEqual('<a href="..."><div><code>MyClass</code></div></a>');
+  });
 });
diff --git a/aio/yarn.lock b/aio/yarn.lock
index 6efafbcf82..cc67d12936 100644
--- a/aio/yarn.lock
+++ b/aio/yarn.lock
@@ -7789,6 +7789,10 @@ unist-util-stringify-position@^1.0.0:
   dependencies:
     has "^1.0.1"
 
+unist-util-visit-parents@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/unist-util-visit-parents/-/unist-util-visit-parents-1.1.1.tgz#7d3f56b5b039a3c6e2d16e51cc093f10e4755342"
+
 unist-util-visit@^1.0.0, unist-util-visit@^1.1.0, unist-util-visit@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/unist-util-visit/-/unist-util-visit-1.1.1.tgz#e917a3b137658b335cb4420c7da2e74d928e4e94"

From 499d05ddeedc3db797509e44405df5e77b10df13 Mon Sep 17 00:00:00 2001
From: Olivier Combe <olivier.combe@gmail.com>
Date: Fri, 18 Aug 2017 15:31:32 +0200
Subject: [PATCH 71/83] refactor(compiler): remove option `useDebug` (#18778)

BREAKING CHANGE: the option `useDebug` for the compiler has been removed as it had no effect and was deprecated since v4.

PR Close #18778
---
 packages/core/src/linker/compiler.ts                      | 4 ----
 packages/core/testing/src/test_bed.ts                     | 3 +--
 packages/platform-browser-dynamic/src/compiler_factory.ts | 1 -
 packages/tsc-wrapped/src/options.ts                       | 3 ---
 tools/public_api_guard/core/core.d.ts                     | 1 -
 5 files changed, 1 insertion(+), 11 deletions(-)

diff --git a/packages/core/src/linker/compiler.ts b/packages/core/src/linker/compiler.ts
index 5770e1f9f7..5149882e5d 100644
--- a/packages/core/src/linker/compiler.ts
+++ b/packages/core/src/linker/compiler.ts
@@ -96,10 +96,6 @@ export class Compiler {
  * @experimental
  */
 export type CompilerOptions = {
-  /**
-   * @deprecated since v4 this option has no effect anymore.
-   */
-  useDebug?: boolean,
   useJit?: boolean,
   defaultEncapsulation?: ViewEncapsulation,
   providers?: StaticProvider[],
diff --git a/packages/core/testing/src/test_bed.ts b/packages/core/testing/src/test_bed.ts
index f6bfb0ddbb..7368d95b03 100644
--- a/packages/core/testing/src/test_bed.ts
+++ b/packages/core/testing/src/test_bed.ts
@@ -330,8 +330,7 @@ export class TestBed implements Injector {
 
     const compilerFactory: TestingCompilerFactory =
         this.platform.injector.get(TestingCompilerFactory);
-    this._compiler =
-        compilerFactory.createTestingCompiler(this._compilerOptions.concat([{useDebug: true}]));
+    this._compiler = compilerFactory.createTestingCompiler(this._compilerOptions);
     this._compiler.loadAotSummaries(this._aotSummaries);
     this._moduleOverrides.forEach((entry) => this._compiler.overrideModule(entry[0], entry[1]));
     this._componentOverrides.forEach(
diff --git a/packages/platform-browser-dynamic/src/compiler_factory.ts b/packages/platform-browser-dynamic/src/compiler_factory.ts
index 1ffb7a839f..9581f26262 100644
--- a/packages/platform-browser-dynamic/src/compiler_factory.ts
+++ b/packages/platform-browser-dynamic/src/compiler_factory.ts
@@ -157,7 +157,6 @@ export class JitCompilerFactory implements CompilerFactory {
   private _defaultOptions: CompilerOptions[];
   constructor(defaultOptions: CompilerOptions[]) {
     const compilerOptions: CompilerOptions = {
-      useDebug: isDevMode(),
       useJit: true,
       defaultEncapsulation: ViewEncapsulation.Emulated,
       missingTranslation: MissingTranslationStrategy.Warning,
diff --git a/packages/tsc-wrapped/src/options.ts b/packages/tsc-wrapped/src/options.ts
index 8b1020105d..f58ee7d308 100644
--- a/packages/tsc-wrapped/src/options.ts
+++ b/packages/tsc-wrapped/src/options.ts
@@ -76,9 +76,6 @@ interface Options extends ts.CompilerOptions {
   // Print extra information while running the compiler
   trace?: boolean;
 
-  /** @deprecated since v4 this option has no effect anymore. */
-  debug?: boolean;
-
   // Whether to enable support for <template> and the template attribute (true by default)
   enableLegacyTemplate?: boolean;
 
diff --git a/tools/public_api_guard/core/core.d.ts b/tools/public_api_guard/core/core.d.ts
index 54b90a4e97..bfb1b2ba7d 100644
--- a/tools/public_api_guard/core/core.d.ts
+++ b/tools/public_api_guard/core/core.d.ts
@@ -195,7 +195,6 @@ export declare abstract class CompilerFactory {
 
 /** @experimental */
 export declare type CompilerOptions = {
-    /** @deprecated */ useDebug?: boolean;
     useJit?: boolean;
     defaultEncapsulation?: ViewEncapsulation;
     providers?: StaticProvider[];

From d61b9021e01ce5d9c2cc26dec6a45da53678d70e Mon Sep 17 00:00:00 2001
From: Olivier Combe <olivier.combe@gmail.com>
Date: Fri, 18 Aug 2017 16:25:48 +0200
Subject: [PATCH 72/83] refactor(core): remove deprecated `DebugNode#source`
 (#18779)

BREAKING CHANGE: `DebugNode#source` has been removed as it was deprecated since v4.

PR Close #18779
---
 packages/core/src/debug/debug_node.ts | 5 -----
 tools/public_api_guard/core/core.d.ts | 1 -
 2 files changed, 6 deletions(-)

diff --git a/packages/core/src/debug/debug_node.ts b/packages/core/src/debug/debug_node.ts
index 6c760209da..9be8743c55 100644
--- a/packages/core/src/debug/debug_node.ts
+++ b/packages/core/src/debug/debug_node.ts
@@ -38,11 +38,6 @@ export class DebugNode {
   get references(): {[key: string]: any} { return this._debugContext.references; }
 
   get providerTokens(): any[] { return this._debugContext.providerTokens; }
-
-  /**
-   * @deprecated since v4
-   */
-  get source(): string { return 'Deprecated since v4'; }
 }
 
 /**
diff --git a/tools/public_api_guard/core/core.d.ts b/tools/public_api_guard/core/core.d.ts
index bfb1b2ba7d..38837e4208 100644
--- a/tools/public_api_guard/core/core.d.ts
+++ b/tools/public_api_guard/core/core.d.ts
@@ -324,7 +324,6 @@ export declare class DebugNode {
     readonly references: {
         [key: string]: any;
     };
-    /** @deprecated */ readonly source: string;
     constructor(nativeNode: any, parent: DebugNode | null, _debugContext: DebugContext);
 }
 

From f2a2a6b478e8046c35c8cf8c3701a3a12fa14c17 Mon Sep 17 00:00:00 2001
From: Olivier Combe <olivier.combe@gmail.com>
Date: Fri, 18 Aug 2017 15:44:39 +0200
Subject: [PATCH 73/83] refactor(core): remove deprecated
 `Testability#findBindings` (#18782)

BREAKING CHANGE: `Testability#findBindings` has been removed as it was deprecated since v4. Use `Testability#findProviders` instead.

PR Close #18782
---
 packages/core/src/testability/testability.ts | 6 ------
 tools/public_api_guard/core/core.d.ts        | 1 -
 2 files changed, 7 deletions(-)

diff --git a/packages/core/src/testability/testability.ts b/packages/core/src/testability/testability.ts
index 3d5a22b0e4..d04abc69c3 100644
--- a/packages/core/src/testability/testability.ts
+++ b/packages/core/src/testability/testability.ts
@@ -109,12 +109,6 @@ export class Testability implements PublicTestability {
 
   getPendingRequestCount(): number { return this._pendingCount; }
 
-  /** @deprecated use findProviders */
-  findBindings(using: any, provider: string, exactMatch: boolean): any[] {
-    // TODO(juliemr): implement.
-    return [];
-  }
-
   findProviders(using: any, provider: string, exactMatch: boolean): any[] {
     // TODO(juliemr): implement.
     return [];
diff --git a/tools/public_api_guard/core/core.d.ts b/tools/public_api_guard/core/core.d.ts
index 38837e4208..083b0c51ff 100644
--- a/tools/public_api_guard/core/core.d.ts
+++ b/tools/public_api_guard/core/core.d.ts
@@ -967,7 +967,6 @@ export declare abstract class TemplateRef<C> {
 export declare class Testability implements PublicTestability {
     constructor(_ngZone: NgZone);
     decreasePendingRequestCount(): number;
-    /** @deprecated */ findBindings(using: any, provider: string, exactMatch: boolean): any[];
     findProviders(using: any, provider: string, exactMatch: boolean): any[];
     getPendingRequestCount(): number;
     increasePendingRequestCount(): number;

From f53f7241a0c0cb262eab184d3f63c8600d2ee41a Mon Sep 17 00:00:00 2001
From: Marc Laval <mlaval@amadeus.com>
Date: Tue, 25 Jul 2017 17:40:24 +0200
Subject: [PATCH 74/83] fix(core): correct order in ContentChildren query
 result (#18326)

Fixes #16568

PR Close #18326
---
 packages/core/src/view/query.ts               |  7 ++++++-
 .../test/linker/query_integration_spec.ts     | 20 +++++++++++++++++++
 2 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/packages/core/src/view/query.ts b/packages/core/src/view/query.ts
index 842216207e..b211b1f002 100644
--- a/packages/core/src/view/query.ts
+++ b/packages/core/src/view/query.ts
@@ -138,8 +138,13 @@ function calcQueryValues(
     if (nodeDef.flags & NodeFlags.TypeElement && nodeDef.element !.template &&
         (nodeDef.element !.template !.nodeMatchedQueries & queryDef.filterId) ===
             queryDef.filterId) {
-      // check embedded views that were attached at the place of their template.
       const elementData = asElementData(view, i);
+      // check embedded views that were attached at the place of their template,
+      // but process child nodes first if some match the query (see issue #16568)
+      if ((nodeDef.childMatchedQueries & queryDef.filterId) === queryDef.filterId) {
+        calcQueryValues(view, i + 1, i + nodeDef.childCount, queryDef, values);
+        i += nodeDef.childCount;
+      }
       if (nodeDef.flags & NodeFlags.EmbeddedViews) {
         const embeddedViews = elementData.viewContainer !._embeddedViews;
         for (let k = 0; k < embeddedViews.length; k++) {
diff --git a/packages/core/test/linker/query_integration_spec.ts b/packages/core/test/linker/query_integration_spec.ts
index 92b8fa0047..d3b5cc8b19 100644
--- a/packages/core/test/linker/query_integration_spec.ts
+++ b/packages/core/test/linker/query_integration_spec.ts
@@ -34,6 +34,7 @@ export function main() {
         NeedsViewChild,
         NeedsStaticContentAndViewChild,
         NeedsContentChild,
+        DirectiveNeedsContentChild,
         NeedsTpl,
         NeedsNamedTpl,
         TextDirective,
@@ -89,6 +90,20 @@ export function main() {
         ]);
       });
 
+      it('should contain the first content child when target is on <ng-template> with embedded view (issue #16568)',
+         () => {
+           const template =
+               '<div directive-needs-content-child><ng-template text="foo" [ngIf]="true"><div text="bar"></div></ng-template></div>' +
+               '<needs-content-child #q><ng-template text="foo" [ngIf]="true"><div text="bar"></div></ng-template></needs-content-child>';
+           const view = createTestCmp(MyComp0, template);
+           view.detectChanges();
+           const q: NeedsContentChild = view.debugElement.children[1].references !['q'];
+           expect(q.child.text).toEqual('foo');
+           const directive: DirectiveNeedsContentChild =
+               view.debugElement.children[0].injector.get(DirectiveNeedsContentChild);
+           expect(directive.child.text).toEqual('foo');
+         });
+
       it('should contain the first view child', () => {
         const template = '<needs-view-child #q></needs-view-child>';
         const view = createTestCmpAndDetectChanges(MyComp0, template);
@@ -650,6 +665,11 @@ class NeedsContentChild implements AfterContentInit, AfterContentChecked {
   ngAfterContentChecked() { this.logs.push(['check', this.child ? this.child.text : null]); }
 }
 
+@Directive({selector: '[directive-needs-content-child]'})
+class DirectiveNeedsContentChild {
+  @ContentChild(TextDirective) child: TextDirective;
+}
+
 @Component({selector: 'needs-view-child', template: `<div *ngIf="shouldShow" text="foo"></div>`})
 class NeedsViewChild implements AfterViewInit, AfterViewChecked {
   shouldShow: boolean = true;

From 4eb1f91bee3b2ba1eb884195053dc0ddfa83430c Mon Sep 17 00:00:00 2001
From: Yuan Gao <tinagao@google.com>
Date: Thu, 3 Aug 2017 15:18:55 -0700
Subject: [PATCH 75/83] ci(aio): Refactored payload size script, add script to
 track payload (#18517)

PR Close #18517
---
 aio/scripts/_payload-limits.sh |  16 +++--
 aio/scripts/payload.sh         |  75 +--------------------
 integration/_payload-limits.sh |  19 ++++++
 integration/run_tests.sh       |  14 ++++
 scripts/ci/payload-size.sh     | 120 +++++++++++++++++++++++++++++++++
 5 files changed, 166 insertions(+), 78 deletions(-)
 create mode 100644 integration/_payload-limits.sh
 create mode 100644 scripts/ci/payload-size.sh

diff --git a/aio/scripts/_payload-limits.sh b/aio/scripts/_payload-limits.sh
index 91548db0b7..8cbfd944cc 100755
--- a/aio/scripts/_payload-limits.sh
+++ b/aio/scripts/_payload-limits.sh
@@ -2,9 +2,13 @@
 
 set -u -e -o pipefail
 
-declare -A limitUncompressed
-limitUncompressed=(["inline"]=1600 ["main"]=525000 ["polyfills"]=38000)
-declare -A limitGzip7
-limitGzip7=(["inline"]=1000 ["main"]=127000 ["polyfills"]=12500)
-declare -A limitGzip9
-limitGzip9=(["inline"]=1000 ["main"]=127000 ["polyfills"]=12500)
+declare -A payloadLimits
+payloadLimits["aio", "uncompressed", "inline"]=1600
+payloadLimits["aio", "uncompressed", "main"]=525000
+payloadLimits["aio", "uncompressed", "polyfills"]=38000
+payloadLimits["aio", "gzip7", "inline"]=1000
+payloadLimits["aio", "gzip7", "main"]=127000
+payloadLimits["aio", "gzip7", "polyfills"]=12500
+payloadLimits["aio", "gzip9", "inline"]=1000
+payloadLimits["aio", "gzip9", "main"]=127000
+payloadLimits["aio", "gzip9", "polyfills"]=12500
diff --git a/aio/scripts/payload.sh b/aio/scripts/payload.sh
index aacd7c615e..292a01e482 100755
--- a/aio/scripts/payload.sh
+++ b/aio/scripts/payload.sh
@@ -4,79 +4,10 @@ set -eu -o pipefail
 
 readonly thisDir=$(cd $(dirname $0); pwd)
 readonly parentDir=$(dirname $thisDir)
-readonly PROJECT_NAME="angular-payload-size"
 
+# Track payload size functions
+source ../scripts/ci/payload-size.sh
 source ${thisDir}/_payload-limits.sh
 
-failed=false
-payloadData=""
-for filename in dist/*.bundle.js; do
-  size=$(stat -c%s "$filename")
-  label=$(echo "$filename" | sed "s/.*\///" | sed "s/\..*//")
-  payloadData="$payloadData\"uncompressed/$label\": $size, "
+trackPayloadSize "aio" "dist/*.bundle.js" true true
 
-
-  gzip -7 $filename -c >> "${filename}7.gz"
-  size7=$(stat -c%s "${filename}7.gz")
-  payloadData="$payloadData\"gzip7/$label\": $size7, "
-
-  gzip -9 $filename -c >> "${filename}9.gz"
-  size9=$(stat -c%s "${filename}9.gz")
-  payloadData="$payloadData\"gzip9/$label\": $size9, "
-
-  if [[ $size -gt ${limitUncompressed[$label]} ]]; then
-    failed=true
-    echo "Uncompressed $label size is $size which is greater than ${limitUncompressed[$label]}"
-  elif [[ $size7 -gt ${limitGzip7[$label]} ]]; then
-    failed=true
-    echo "Gzip7 $label size is $size7 which is greater than ${limitGzip7[$label]}"
-  elif [[ $size9 -gt ${limitGzip9[$label]} ]]; then
-    failed=true
-    echo "Gzip9 $label size is $size9 which is greater than ${limitGzip9[$label]}"
-  fi
-done
-
-# Add Timestamp
-timestamp=$(date +%s)
-payloadData="$payloadData\"timestamp\": $timestamp, "
-
-# Add change source: application, dependencies, or 'application+dependencies'
-applicationChanged=false
-dependenciesChanged=false
-if [[ $(git diff --name-only $TRAVIS_COMMIT_RANGE $parentDir | grep -v aio/yarn.lock | grep -v content) ]]; then
-  applicationChanged=true
-fi
-if [[ $(git diff --name-only $TRAVIS_COMMIT_RANGE $parentDir/yarn.lock) ]]; then
-  dependenciesChanged=true
-fi
-
-if $dependenciesChanged && $applicationChanged; then
-  change='application+dependencies'
-elif $dependenciesChanged; then
-  # only yarn.lock changed
-  change='dependencies'
-elif $applicationChanged; then
-  change='application'
-else
-  # Nothing changed in aio/
-  exit 0
-fi
-message=$(echo $TRAVIS_COMMIT_MESSAGE | sed 's/"/\\"/g' | sed 's/\\/\\\\/g')
-payloadData="$payloadData\"change\": \"$change\", \"message\": \"$message\""
-
-payloadData="{${payloadData}}"
-
-echo $payloadData
-
-if [[ "$TRAVIS_PULL_REQUEST" == "false" ]]; then
-  readonly safeBranchName=$(echo $TRAVIS_BRANCH | sed -e 's/\./_/g')
-  readonly dbPath=/payload/aio/$safeBranchName/$TRAVIS_COMMIT
-
-  # WARNING: FIREBASE_TOKEN should NOT be printed.
-  set +x
-  firebase database:update --data "$payloadData" --project $PROJECT_NAME --confirm --token "$ANGULAR_PAYLOAD_FIREBASE_TOKEN" $dbPath
-fi
-
-if [[ $failed = true ]]; then
-  exit 1
-fi
diff --git a/integration/_payload-limits.sh b/integration/_payload-limits.sh
new file mode 100644
index 0000000000..83b1b37910
--- /dev/null
+++ b/integration/_payload-limits.sh
@@ -0,0 +1,19 @@
+#!/bin/bash
+
+set -u -e -o pipefail
+
+declare -A payloadLimits
+payloadLimits["hello_world__closure", "uncompressed", "bundle"]=106000
+payloadLimits["hello_world__closure", "gzip7", "bundle"]=35000
+payloadLimits["hello_world__closure", "gzip9", "bundle"]=35000
+
+payloadLimits["cli-hello-world", "uncompressed", "inline"]=1500
+payloadLimits["cli-hello-world", "uncompressed", "main"]=183000
+payloadLimits["cli-hello-world", "uncompressed", "polyfills"]=63000
+payloadLimits["cli-hello-world", "gzip7", "inline"]=900
+payloadLimits["cli-hello-world", "gzip7", "main"]=48000
+payloadLimits["cli-hello-world", "gzip7", "polyfills"]=21000
+payloadLimits["cli-hello-world", "gzip9", "inline"]=900
+payloadLimits["cli-hello-world", "gzip9", "main"]=48000
+payloadLimits["cli-hello-world", "gzip9", "polyfills"]=21000
+
diff --git a/integration/run_tests.sh b/integration/run_tests.sh
index 74315b87fe..5603611f52 100755
--- a/integration/run_tests.sh
+++ b/integration/run_tests.sh
@@ -4,6 +4,10 @@ set -e -o pipefail
 
 cd `dirname $0`
 
+# Track payload size functions
+source ../scripts/ci/payload-size.sh
+source ./_payload-limits.sh
+
 # Workaround https://github.com/yarnpkg/yarn/issues/2165
 # Yarn will cache file://dist URIs and not update Angular code
 readonly cache=.yarn_local_cache
@@ -34,7 +38,17 @@ for testDir in $(ls | grep -v node_modules) ; do
     cd $testDir
     # Workaround for https://github.com/yarnpkg/yarn/issues/2256
     rm -f yarn.lock
+    rm -rf dist
     yarn install --cache-folder ../$cache
     yarn test || exit 1
+    # Track payload size for cli-hello-world and hello_world__closure
+    if [[ $testDir == cli-hello-world ]] || [[ $testDir == hello_world__closure ]]; then
+      if [[ $testDir == cli-hello-world ]]; then
+        yarn build
+      fi
+      trackPayloadSize "$testDir" "dist/*.js" true false
+    fi
   )
 done
+
+trackPayloadSize "umd" "../dist/packages-dist/*/bundles/*.umd.min.js" false false
diff --git a/scripts/ci/payload-size.sh b/scripts/ci/payload-size.sh
new file mode 100644
index 0000000000..dcc7890f7a
--- /dev/null
+++ b/scripts/ci/payload-size.sh
@@ -0,0 +1,120 @@
+#!/usr/bin/env bash
+
+readonly PROJECT_NAME="angular-payload-size"
+
+# Calculate the size of target file uncompressed size, gzip7 size, gzip9 size
+# Write to global variable $payloadData, $filename
+calculateSize() {
+  size["uncompressed"]=$(stat -c%s "$filename")
+  label=$(echo "$filename" | sed "s/.*\///" | sed "s/\..*//")
+  payloadData="$payloadData\"uncompressed/$label\": ${size["uncompressed"]}, "
+
+  gzip -7 $filename -c >> "${filename}7.gz"
+  size["gzip7"]=$(stat -c%s "${filename}7.gz")
+  payloadData="$payloadData\"gzip7/$label\": ${size["gzip7"]}, "
+
+  gzip -9 $filename -c >> "${filename}9.gz"
+  size["gzip9"]=$(stat -c%s "${filename}9.gz")
+  payloadData="$payloadData\"gzip9/$label\": ${size["gzip9"]}, "
+}
+
+# Check whether the file size is under limit
+# Write to global variable $failed
+# Read from global variables $size, $size7, $size9, $label, $limitUncompressed
+checkSize() {
+  for fileType in "uncompressed" "gzip7" "gzip9"; do
+    if [[ ${size[$fileType]} -gt ${payloadLimits[$name, $fileType, $label]} ]]; then
+      failed=true
+      echo "$fileType $label size is ${size[$fileType]} which is greater than ${payloadLimits[$name, $fileType, $label]}"
+    fi
+  done
+}
+
+# Write timestamp to global variable $payloadData
+addTimestamp() {
+  # Add Timestamp
+  timestamp=$(date +%s)
+  payloadData="$payloadData\"timestamp\": $timestamp, "
+}
+
+# Write travis commit message to global variable $payloadData
+addMessage() {
+  message=$(git log --oneline $TRAVIS_COMMIT_RANGE)
+  message=$(echo $message | sed 's/"/\\"/g' | sed 's/\\/\\\\/g')
+  payloadData="$payloadData\"message\": \"$message\""
+}
+
+# Add change source: application, dependencies, or 'application+dependencies'
+# Read from global variables $parentDir
+# Update the change source to global variable $payloadData
+addChange() {
+  yarnChanged=false
+  allChangedFiles=$(git diff --name-only $TRAVIS_COMMIT_RANGE $parentDir | wc -l)
+  allChangedFileNames=$(git diff --name-only $TRAVIS_COMMIT_RANGE $parentDir)
+
+  if [[ $allChangedFileNames == *"yarn.lock"* ]]; then
+    yarnChanged=true
+  fi
+
+  if [[ $allChangedFiles -eq 1 ]] && [[ "$yarnChanged" = true ]]; then
+    # only yarn.lock changed
+    change='dependencies'
+  elif [[ $allChangedFiles -gt 1 ]] && [[ "$yarnChanged" = true ]]; then
+    change='application+dependencies'
+  elif [[ $allChangedFiles -gt 0 ]]; then
+    change='application'
+  else
+    # Nothing changed in aio/
+    exit 0
+  fi
+  payloadData="$payloadData\"change\": \"$change\", "
+}
+
+# Upload data to firebase database if it's commit, print out data for pull
+# requests
+uploadData() {
+  name="$1"
+  payloadData="{${payloadData}}"
+
+  echo The data for $name is:
+  echo $payloadData
+
+  if [[ "$TRAVIS_PULL_REQUEST" == "false" ]]; then
+    readonly safeBranchName=$(echo $TRAVIS_BRANCH | sed -e 's/\./_/g')
+    readonly dbPath=/payload/$name/$safeBranchName/$TRAVIS_COMMIT
+
+    # WARNING: FIREBASE_TOKEN should NOT be printed.
+    set +x
+    firebase database:update --data "$payloadData" --project $PROJECT_NAME --confirm --token "$ANGULAR_PAYLOAD_FIREBASE_TOKEN" $dbPath
+  fi
+}
+
+# Track payload size, $1 is the name in database, $2 is the file path
+# $3 is whether we check the payload size and fail the test if the size exceeds
+# limit, $4 is whether record the type of changes: true | false
+trackPayloadSize() {
+  name="$1"
+  path="$2"
+  checkSize="$3"
+  trackChange=$4
+
+  payloadData=""
+  failed=false
+  for filename in $path; do
+    declare -A size
+    calculateSize
+    if [[ $checkSize = true ]]; then
+      checkSize
+    fi
+  done
+  addTimestamp
+  if [[ $trackChange = true ]]; then
+    addChange
+  fi
+  addMessage
+  uploadData $name
+  if [[ $failed = true ]]; then
+    echo exit 1
+    exit 1
+  fi
+}

From ff6a20d1382dcc260f2ccbb8d0efdb12a86c95ed Mon Sep 17 00:00:00 2001
From: Joe <joe.jordan.brown@gmail.com>
Date: Wed, 16 Aug 2017 11:32:09 +0100
Subject: [PATCH 76/83] docs(aio): fix card inconsistency (#18726)

PR Close #18726
---
 aio/content/marketing/docs.md | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/aio/content/marketing/docs.md b/aio/content/marketing/docs.md
index e6d900c3ab..240f92538b 100644
--- a/aio/content/marketing/docs.md
+++ b/aio/content/marketing/docs.md
@@ -10,13 +10,11 @@ Angular is a platform that makes it easy to build applications with the web. Ang
       <p class="card-footer">Angular in Action</p>
   </a>
 
-  <div class="docs-card">
+  <a href="guide/quickstart" class="docs-card" title="Angular Quickstart">
       <section>Get Going with Angular</section>
       <p>Get going on your own environment with the Quickstart.</p>
-      <p class="card-footer" >
-        <a href="guide/quickstart" title="Angular Quickstart">Quickstart</a>
-      </p>
-  </div>
+      <p class="card-footer">Quickstart</p>
+  </a>
 
   <a href="guide/architecture" class="docs-card" title="Angular Architecture">
       <section>Fundamentals</section>

From 7522987a511c13fb7265dce909b392a2040ec0fc Mon Sep 17 00:00:00 2001
From: Olivier Combe <olivier.combe@gmail.com>
Date: Fri, 18 Aug 2017 16:26:29 +0200
Subject: [PATCH 77/83] refactor(common): remove deprecated
 `NgTemplateOutlet#ngOutletContext` (#18780)

BREAKING CHANGE: `NgTemplateOutlet#ngOutletContext` has been removed as it was deprecated since v4. Use `NgTemplateOutlet#ngTemplateOutletContext` instead.

PR Close #18780
---
 packages/common/src/directives/ng_template_outlet.ts | 6 ------
 tools/public_api_guard/common/common.d.ts            | 1 -
 2 files changed, 7 deletions(-)

diff --git a/packages/common/src/directives/ng_template_outlet.ts b/packages/common/src/directives/ng_template_outlet.ts
index 5912f9caa7..860d8dce04 100644
--- a/packages/common/src/directives/ng_template_outlet.ts
+++ b/packages/common/src/directives/ng_template_outlet.ts
@@ -42,12 +42,6 @@ export class NgTemplateOutlet implements OnChanges {
 
   constructor(private _viewContainerRef: ViewContainerRef) {}
 
-  /**
-   * @deprecated v4.0.0 - Renamed to ngTemplateOutletContext.
-   */
-  @Input()
-  set ngOutletContext(context: Object) { this.ngTemplateOutletContext = context; }
-
   ngOnChanges(changes: SimpleChanges) {
     const recreateView = this._shouldRecreateView(changes);
 
diff --git a/tools/public_api_guard/common/common.d.ts b/tools/public_api_guard/common/common.d.ts
index cdefdf3d96..1c206638fc 100644
--- a/tools/public_api_guard/common/common.d.ts
+++ b/tools/public_api_guard/common/common.d.ts
@@ -246,7 +246,6 @@ export declare class NgSwitchDefault {
 
 /** @stable */
 export declare class NgTemplateOutlet implements OnChanges {
-    /** @deprecated */ ngOutletContext: Object;
     ngTemplateOutlet: TemplateRef<any>;
     ngTemplateOutletContext: Object;
     constructor(_viewContainerRef: ViewContainerRef);

From e228f2caa6c849afa8f139939711e52a601fa0aa Mon Sep 17 00:00:00 2001
From: Filipe Silva <filipematossilva@gmail.com>
Date: Fri, 18 Aug 2017 16:53:08 +0100
Subject: [PATCH 78/83] fix(compiler-cli): use forward slashes for
 ts.resolveModuleName (#18784)

Windows paths have back slashes, but TypeScript expects to always have forward slashes.

In other places where this call happens (like `src/compiler_host.ts`) the same fix is present.

PR Close #18784
---
 packages/compiler-cli/src/transformers/compiler_host.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/compiler-cli/src/transformers/compiler_host.ts b/packages/compiler-cli/src/transformers/compiler_host.ts
index 74b319838d..9d07cbfc4f 100644
--- a/packages/compiler-cli/src/transformers/compiler_host.ts
+++ b/packages/compiler-cli/src/transformers/compiler_host.ts
@@ -61,8 +61,8 @@ class CompilerHostMixin {
       containingFile = path.join(this.basePath, 'index.ts');
     }
     const resolved = ts.resolveModuleName(
-                           m, containingFile, this.options, this.moduleResolutionHost,
-                           this.moduleResolutionCache)
+                           m, containingFile.replace(/\\/g, '/'), this.options,
+                           this.moduleResolutionHost, this.moduleResolutionCache)
                          .resolvedModule;
     if (resolved) {
       if (this.options.traceResolution) {

From 21593420386257667519f9036852ccb79603e314 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matias=20Niemel=C3=A4?= <matias@yearofmoo.com>
Date: Tue, 15 Aug 2017 12:51:29 -0700
Subject: [PATCH 79/83] feat(animations): allow @.disabled property to work
 without an expression (#18713)

PR Close #18713
---
 .../src/template_parser/binding_parser.ts     |  2 +-
 .../animation/animation_integration_spec.ts   | 37 +++++++++++++++++++
 .../animations/src/animation_renderer.ts      |  3 +-
 3 files changed, 40 insertions(+), 2 deletions(-)

diff --git a/packages/compiler/src/template_parser/binding_parser.ts b/packages/compiler/src/template_parser/binding_parser.ts
index 1d57173d55..ba1dc77cb1 100644
--- a/packages/compiler/src/template_parser/binding_parser.ts
+++ b/packages/compiler/src/template_parser/binding_parser.ts
@@ -218,7 +218,7 @@ export class BindingParser {
     // This will occur when a @trigger is not paired with an expression.
     // For animations it is valid to not have an expression since */void
     // states will be applied by angular when the element is attached/detached
-    const ast = this._parseBinding(expression || 'null', false, sourceSpan);
+    const ast = this._parseBinding(expression || 'undefined', false, sourceSpan);
     targetMatchableAttrs.push([name, ast.source !]);
     targetProps.push(new BoundProperty(name, ast, BoundPropertyType.ANIMATION, sourceSpan));
   }
diff --git a/packages/core/test/animation/animation_integration_spec.ts b/packages/core/test/animation/animation_integration_spec.ts
index e7e5ee5186..e280c70d00 100644
--- a/packages/core/test/animation/animation_integration_spec.ts
+++ b/packages/core/test/animation/animation_integration_spec.ts
@@ -2691,6 +2691,43 @@ export function main() {
              fixture.detectChanges();
              expect(getLog().length).toEqual(1);
            });
+
+        it('should treat the property as true when the expression is missing', () => {
+          @Component({
+            selector: 'parent-cmp',
+            animations: [
+              trigger(
+                  'myAnimation',
+                  [
+                    transition(
+                        '* => go',
+                        [
+                          style({opacity: 0}),
+                          animate(500, style({opacity: 1})),
+                        ]),
+                  ]),
+            ],
+            template: `
+              <div @.disabled>
+                <div [@myAnimation]="exp"></div>
+              </div>
+                `
+          })
+          class Cmp {
+            exp = '';
+          }
+
+          TestBed.configureTestingModule({declarations: [Cmp]});
+
+          const fixture = TestBed.createComponent(Cmp);
+          const cmp = fixture.componentInstance;
+          fixture.detectChanges();
+          resetLog();
+
+          cmp.exp = 'go';
+          fixture.detectChanges();
+          expect(getLog().length).toEqual(0);
+        });
       });
     });
 
diff --git a/packages/platform-browser/animations/src/animation_renderer.ts b/packages/platform-browser/animations/src/animation_renderer.ts
index a1addaf351..9c360da927 100644
--- a/packages/platform-browser/animations/src/animation_renderer.ts
+++ b/packages/platform-browser/animations/src/animation_renderer.ts
@@ -206,7 +206,8 @@ export class AnimationRenderer extends BaseAnimationRenderer implements Renderer
   setProperty(el: any, name: string, value: any): void {
     if (name.charAt(0) == ANIMATION_PREFIX) {
       if (name.charAt(1) == '.' && name == DISABLE_ANIMATIONS_FLAG) {
-        this.disableAnimations(el, !!value);
+        value = value === undefined ? true : !!value;
+        this.disableAnimations(el, value as boolean);
       } else {
         this.engine.process(this.namespaceId, el, name.substr(1), value);
       }

From 791c7efe29b1d0eb8b1c0811f51d882cd1c1aa01 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matias=20Niemel=C3=A4?= <matias@yearofmoo.com>
Date: Tue, 15 Aug 2017 13:43:14 -0700
Subject: [PATCH 80/83] fix(animations): ensure animations are disabled on the
 element containing the @.disabled flag (#18714)

Prior to fix this fix, @.disabled would only work to disable child
animations. Now it will also disable animations for the element that has
the @.disabled flag (which makes more sense).

PR Close #18714
---
 .../browser/src/render/transition_animation_engine.ts |  1 +
 packages/animations/src/animation_metadata.ts         | 11 ++++++-----
 .../core/test/animation/animation_integration_spec.ts |  5 ++---
 3 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/packages/animations/browser/src/render/transition_animation_engine.ts b/packages/animations/browser/src/render/transition_animation_engine.ts
index 721f1bd75b..a72eba42a3 100644
--- a/packages/animations/browser/src/render/transition_animation_engine.ts
+++ b/packages/animations/browser/src/render/transition_animation_engine.ts
@@ -817,6 +817,7 @@ export class TransitionAnimationEngine {
 
     const disabledElementsSet = new Set<any>();
     this.disabledNodes.forEach(node => {
+      disabledElementsSet.add(node);
       const nodesThatAreDisabled = this.driver.query(node, QUEUED_SELECTOR, true);
       for (let i = 0; i < nodesThatAreDisabled.length; i++) {
         disabledElementsSet.add(nodesThatAreDisabled[i]);
diff --git a/packages/animations/src/animation_metadata.ts b/packages/animations/src/animation_metadata.ts
index d0f907508b..b353198fcc 100755
--- a/packages/animations/src/animation_metadata.ts
+++ b/packages/animations/src/animation_metadata.ts
@@ -282,11 +282,12 @@ export interface AnimationStaggerMetadata extends AnimationMetadata {
  * <div [@myAnimationTrigger]="myStatusExp">...</div>
  * ```
  *
- * ## Disable Child Animations
+ * ## Disable Animations
  * A special animation control binding called `@.disabled` can be placed on an element which will
- then disable animations for any inner animation triggers situated within the element.
+ then disable animations for any inner animation triggers situated within the element as well as
+ any animations on the element itself.
  *
- * When true, the `@.disabled` binding will prevent inner animations from rendering. The example
+ * When true, the `@.disabled` binding will prevent all animations from rendering. The example
  below shows how to use this feature:
  *
  * ```ts
@@ -312,8 +313,8 @@ export interface AnimationStaggerMetadata extends AnimationMetadata {
  * The `@childAnimation` trigger will not animate because `@.disabled` prevents it from happening
  (when true).
  *
- * Note that `@.disbled` will only disable inner animations (any animations running on the same
- element will not be disabled).
+ * Note that `@.disbled` will only disable all animations (this means any animations running on
+ * the same element will also be disabled).
  *
  * ### Disabling Animations Application-wide
  * When an area of the template is set to have animations disabled, **all** inner components will
diff --git a/packages/core/test/animation/animation_integration_spec.ts b/packages/core/test/animation/animation_integration_spec.ts
index e280c70d00..6f94ad690e 100644
--- a/packages/core/test/animation/animation_integration_spec.ts
+++ b/packages/core/test/animation/animation_integration_spec.ts
@@ -2441,7 +2441,7 @@ export function main() {
           expect(players[0].totalTime).toEqual(1234);
         });
 
-        it('should not disable animations for the element that they are disabled on', () => {
+        it('should disable animations for the element that they are disabled on', () => {
           @Component({
             selector: 'if-cmp',
             template: `
@@ -2476,8 +2476,7 @@ export function main() {
           fixture.detectChanges();
 
           let players = getLog();
-          expect(players.length).toEqual(1);
-          expect(players[0].totalTime).toEqual(1234);
+          expect(players.length).toEqual(0);
           resetLog();
 
           cmp.disableExp = false;

From e25f05ae7c9e8012ccfbd37d6ea49e126735b8a2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matias=20Niemel=C3=A4?= <matias@yearofmoo.com>
Date: Fri, 4 Aug 2017 15:10:47 -0700
Subject: [PATCH 81/83] fix(animations): make sure @.disabled respects disabled
 parent/sub animation sequences (#18715)

Prior to this fix if @parent and @child animations ran at the same
time within a disabled region then there was a chance that a @child
sub animation would never complete. This would cause *directives to
never close a removal when a @child trigger was placed on them. This
patch fixes this issue.

PR Close #18715
---
 .../src/render/transition_animation_engine.ts | 17 ++++-
 .../animation/animation_integration_spec.ts   | 70 +++++++++++++++++++
 2 files changed, 84 insertions(+), 3 deletions(-)

diff --git a/packages/animations/browser/src/render/transition_animation_engine.ts b/packages/animations/browser/src/render/transition_animation_engine.ts
index a72eba42a3..2b7a97e4f8 100644
--- a/packages/animations/browser/src/render/transition_animation_engine.ts
+++ b/packages/animations/browser/src/render/transition_animation_engine.ts
@@ -1016,11 +1016,20 @@ export class TransitionAnimationEngine {
       } else {
         eraseStyles(element, instruction.fromStyles);
         player.onDestroy(() => setStyles(element, instruction.toStyles));
+        // there still might be a ancestor player animating this
+        // element therefore we will still add it as a sub player
+        // even if its animation may be disabled
         subPlayers.push(player);
+        if (disabledElementsSet.has(element)) {
+          skippedPlayers.push(player);
+        }
       }
     });
 
+    // find all of the sub players' corresponding inner animation player
     subPlayers.forEach(player => {
+      // even if any players are not found for a sub animation then it
+      // will still complete itself after the next tick since it's Noop
       const playersForElement = skippedPlayersMap.get(player.element);
       if (playersForElement && playersForElement.length) {
         const innerPlayer = optimizeGroupPlayer(playersForElement);
@@ -1052,7 +1061,7 @@ export class TransitionAnimationEngine {
       // until that animation is over (or the parent queried animation)
       if (details && details.hasAnimation) continue;
 
-      let players: AnimationPlayer[] = [];
+      let players: TransitionAnimationPlayer[] = [];
 
       // if this element is queried or if it contains queried children
       // then we want for the element not to be removed from the page
@@ -1071,8 +1080,10 @@ export class TransitionAnimationEngine {
           }
         }
       }
-      if (players.length) {
-        removeNodesAfterAnimationDone(this, element, players);
+
+      const activePlayers = players.filter(p => !p.destroyed);
+      if (activePlayers.length) {
+        removeNodesAfterAnimationDone(this, element, activePlayers);
       } else {
         this.processLeaveNode(element);
       }
diff --git a/packages/core/test/animation/animation_integration_spec.ts b/packages/core/test/animation/animation_integration_spec.ts
index 6f94ad690e..9694c7fc59 100644
--- a/packages/core/test/animation/animation_integration_spec.ts
+++ b/packages/core/test/animation/animation_integration_spec.ts
@@ -2727,6 +2727,76 @@ export function main() {
           fixture.detectChanges();
           expect(getLog().length).toEqual(0);
         });
+        
+        it('should respect parent/sub animations when the respective area in the DOM is disabled',
+           fakeAsync(() => {
+             @Component({
+               selector: 'parent-cmp',
+               animations: [
+                 trigger(
+                     'parent',
+                     [
+                       transition(
+                           '* => empty',
+                           [
+                             style({opacity: 0}),
+                             query(
+                                 '@child',
+                                 [
+                                   animateChild(),
+                                 ]),
+                             animate('1s', style({opacity: 1})),
+                           ]),
+                     ]),
+                 trigger(
+                     'child',
+                     [
+                       transition(
+                           ':leave',
+                           [
+                             animate('1s', style({opacity: 0})),
+                           ]),
+                     ]),
+               ],
+               template: `
+              <div [@.disabled]="disableExp" #container>
+                <div [@parent]="exp" (@parent.done)="onDone($event)">
+                  <div class="item" *ngFor="let item of items" @child (@child.done)="onDone($event)"></div>
+                </div>
+              </div>
+                `
+             })
+             class Cmp {
+               @ViewChild('container') public container: any;
+
+               disableExp = false;
+               exp = '';
+               items: any[] = [];
+               doneLog: any[] = [];
+
+               onDone(event: any) { this.doneLog.push(event); }
+             }
+
+             TestBed.configureTestingModule({declarations: [Cmp]});
+             const engine = TestBed.get(ɵAnimationEngine);
+             const fixture = TestBed.createComponent(Cmp);
+             const cmp = fixture.componentInstance;
+             cmp.disableExp = true;
+             cmp.items = [0, 1, 2, 3, 4];
+             fixture.detectChanges();
+             flushMicrotasks();
+
+             cmp.exp = 'empty';
+             cmp.items = [];
+             cmp.doneLog = [];
+             fixture.detectChanges();
+             flushMicrotasks();
+
+             const elms = cmp.container.nativeElement.querySelectorAll('.item');
+             expect(elms.length).toEqual(0);
+
+             expect(cmp.doneLog.length).toEqual(6);
+           }));
       });
     });
 

From 29aa8b33dff29085c37fe75bb5222b51f401be72 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matias=20Niemel=C3=A4?= <matias@yearofmoo.com>
Date: Thu, 17 Aug 2017 16:35:55 -0700
Subject: [PATCH 82/83] fix(animations): make sure animation cancellations
 respect AUTO style values (#18787)

Closes #17450

PR Close #18787
---
 .../src/render/transition_animation_engine.ts   | 17 +++++++++--------
 .../web_animations/web_animations_player.ts     |  2 +-
 .../render/transition_animation_engine_spec.ts  |  8 +++++---
 3 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/packages/animations/browser/src/render/transition_animation_engine.ts b/packages/animations/browser/src/render/transition_animation_engine.ts
index 2b7a97e4f8..95b1081172 100644
--- a/packages/animations/browser/src/render/transition_animation_engine.ts
+++ b/packages/animations/browser/src/render/transition_animation_engine.ts
@@ -961,12 +961,12 @@ export class TransitionAnimationEngine {
       const element = player.element;
       const previousPlayers =
           this._getPreviousPlayers(element, false, player.namespaceId, player.triggerName, null);
-      previousPlayers.forEach(
-          prevPlayer => { getOrSetAsInMap(allPreviousPlayersMap, element, []).push(prevPlayer); });
+      previousPlayers.forEach(prevPlayer => {
+        getOrSetAsInMap(allPreviousPlayersMap, element, []).push(prevPlayer);
+        prevPlayer.destroy();
+      });
     });
 
-    allPreviousPlayersMap.forEach(players => players.forEach(player => player.destroy()));
-
     // PRE STAGE: fill the ! styles
     const preStylesMap = allPreStyleElements.size ?
         cloakAndComputeStyles(
@@ -1153,10 +1153,6 @@ export class TransitionAnimationEngine {
   private _beforeAnimationBuild(
       namespaceId: string, instruction: AnimationTransitionInstruction,
       allPreviousPlayersMap: Map<any, TransitionAnimationPlayer[]>) {
-    // it's important to do this step before destroying the players
-    // so that the onDone callback below won't fire before this
-    eraseStyles(instruction.element, instruction.fromStyles);
-
     const triggerName = instruction.triggerName;
     const rootElement = instruction.element;
 
@@ -1178,9 +1174,14 @@ export class TransitionAnimationEngine {
         if (realPlayer.beforeDestroy) {
           realPlayer.beforeDestroy();
         }
+        player.destroy();
         players.push(player);
       });
     });
+
+    // this needs to be done so that the PRE/POST styles can be
+    // computed properly without interfering with the previous animation
+    eraseStyles(rootElement, instruction.fromStyles);
   }
 
   private _buildAnimation(
diff --git a/packages/animations/browser/src/render/web_animations/web_animations_player.ts b/packages/animations/browser/src/render/web_animations/web_animations_player.ts
index 580ebb5042..37b2d626eb 100644
--- a/packages/animations/browser/src/render/web_animations/web_animations_player.ts
+++ b/packages/animations/browser/src/render/web_animations/web_animations_player.ts
@@ -158,9 +158,9 @@ export class WebAnimationsPlayer implements AnimationPlayer {
 
   destroy(): void {
     if (!this._destroyed) {
+      this._destroyed = true;
       this._resetDomPlayerState();
       this._onFinish();
-      this._destroyed = true;
       this._onDestroyFns.forEach(fn => fn());
       this._onDestroyFns = [];
     }
diff --git a/packages/animations/browser/test/render/transition_animation_engine_spec.ts b/packages/animations/browser/test/render/transition_animation_engine_spec.ts
index 3770fb8cd5..64bc1748db 100644
--- a/packages/animations/browser/test/render/transition_animation_engine_spec.ts
+++ b/packages/animations/browser/test/render/transition_animation_engine_spec.ts
@@ -411,8 +411,10 @@ export function main() {
          () => {
            const engine = makeEngine();
            const trig = trigger('something', [
-             state('x', style({opacity: 0})), state('y', style({opacity: .5})),
-             state('z', style({opacity: 1})), transition('* => *', animate(1000))
+             state('x', style({opacity: 0})),
+             state('y', style({opacity: .5})),
+             state('z', style({opacity: 1})),
+             transition('* => *', animate(1000)),
            ]);
 
            registerTrigger(element, engine, trig);
@@ -428,7 +430,7 @@ export function main() {
 
            const player2 = engine.players[0];
 
-           expect(parseFloat(element.style.opacity)).toEqual(.5);
+           expect(parseFloat(element.style.opacity)).not.toEqual(.5);
 
            player2.finish();
            expect(parseFloat(element.style.opacity)).toEqual(1);

From 70628112e85ceadd2e0aa243a659f871cbf29492 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matias=20Niemel=C3=A4?= <matias@yearofmoo.com>
Date: Thu, 17 Aug 2017 12:50:33 -0700
Subject: [PATCH 83/83] fix(animations): restore auto-style support for removed
 DOM nodes (#18787)

PR Close #18787
---
 .../src/render/transition_animation_engine.ts |  58 ++++++-
 .../animation/animation_integration_spec.ts   |  84 ++++-----
 ...ns_with_web_animations_integration_spec.ts | 163 +++++++++++++++++-
 3 files changed, 254 insertions(+), 51 deletions(-)

diff --git a/packages/animations/browser/src/render/transition_animation_engine.ts b/packages/animations/browser/src/render/transition_animation_engine.ts
index 95b1081172..5e2d6763d1 100644
--- a/packages/animations/browser/src/render/transition_animation_engine.ts
+++ b/packages/animations/browser/src/render/transition_animation_engine.ts
@@ -967,16 +967,39 @@ export class TransitionAnimationEngine {
       });
     });
 
-    // PRE STAGE: fill the ! styles
-    const preStylesMap = allPreStyleElements.size ?
-        cloakAndComputeStyles(
-            this.driver, enterNodesWithoutAnimations, allPreStyleElements, PRE_STYLE) :
-        new Map<any, ɵStyleData>();
+    // this is a special case for nodes that will be removed (either by)
+    // having their own leave animations or by being queried in a container
+    // that will be removed once a parent animation is complete. The idea
+    // here is that * styles must be identical to ! styles because of
+    // backwards compatibility (* is also filled in by default in many places).
+    // Otherwise * styles will return an empty value or auto since the element
+    // that is being getComputedStyle'd will not be visible (since * = destination)
+    const replaceNodes = allLeaveNodes.filter(node => {
+      return replacePostStylesAsPre(node, allPreStyleElements, allPostStyleElements);
+    });
 
     // POST STAGE: fill the * styles
-    const postStylesMap = cloakAndComputeStyles(
+    const [postStylesMap, allLeaveQueriedNodes] = cloakAndComputeStyles(
         this.driver, leaveNodesWithoutAnimations, allPostStyleElements, AUTO_STYLE);
 
+    allLeaveQueriedNodes.forEach(node => {
+      if (replacePostStylesAsPre(node, allPreStyleElements, allPostStyleElements)) {
+        replaceNodes.push(node);
+      }
+    });
+
+    // PRE STAGE: fill the ! styles
+    const [preStylesMap] = allPreStyleElements.size ?
+        cloakAndComputeStyles(
+            this.driver, enterNodesWithoutAnimations, allPreStyleElements, PRE_STYLE) :
+        [new Map<any, ɵStyleData>()];
+
+    replaceNodes.forEach(node => {
+      const post = postStylesMap.get(node);
+      const pre = preStylesMap.get(node);
+      postStylesMap.set(node, { ...post, ...pre } as any);
+    });
+
     const rootPlayers: TransitionAnimationPlayer[] = [];
     const subPlayers: TransitionAnimationPlayer[] = [];
     queuedInstructions.forEach(entry => {
@@ -1413,9 +1436,10 @@ function cloakElement(element: any, value?: string) {
 
 function cloakAndComputeStyles(
     driver: AnimationDriver, elements: any[], elementPropsMap: Map<any, Set<string>>,
-    defaultStyle: string): Map<any, ɵStyleData> {
+    defaultStyle: string): [Map<any, ɵStyleData>, any[]] {
   const cloakVals = elements.map(element => cloakElement(element));
   const valuesMap = new Map<any, ɵStyleData>();
+  const failedElements: any[] = [];
 
   elementPropsMap.forEach((props: Set<string>, element: any) => {
     const styles: ɵStyleData = {};
@@ -1426,13 +1450,14 @@ function cloakAndComputeStyles(
       // by a parent animation element being detached.
       if (!value || value.length == 0) {
         element[REMOVAL_FLAG] = NULL_REMOVED_QUERIED_STATE;
+        failedElements.push(element);
       }
     });
     valuesMap.set(element, styles);
   });
 
   elements.forEach((element, i) => cloakElement(element, cloakVals[i]));
-  return valuesMap;
+  return [valuesMap, failedElements];
 }
 
 /*
@@ -1539,3 +1564,20 @@ function objEquals(a: {[key: string]: any}, b: {[key: string]: any}): boolean {
   }
   return true;
 }
+
+function replacePostStylesAsPre(
+    element: any, allPreStyleElements: Map<any, Set<string>>,
+    allPostStyleElements: Map<any, Set<string>>): boolean {
+  const postEntry = allPostStyleElements.get(element);
+  if (!postEntry) return false;
+
+  let preEntry = allPreStyleElements.get(element);
+  if (preEntry) {
+    postEntry.forEach(data => preEntry !.add(data));
+  } else {
+    allPreStyleElements.set(element, postEntry);
+  }
+
+  allPostStyleElements.delete(element);
+  return true;
+}
diff --git a/packages/core/test/animation/animation_integration_spec.ts b/packages/core/test/animation/animation_integration_spec.ts
index 9694c7fc59..b2a6643956 100644
--- a/packages/core/test/animation/animation_integration_spec.ts
+++ b/packages/core/test/animation/animation_integration_spec.ts
@@ -1087,59 +1087,61 @@ export function main() {
             .toBeTruthy();
       });
 
-      it('should animate removals of nodes to the `void` state for each animation trigger', () => {
-        @Component({
-          selector: 'ani-cmp',
-          template: `
+      it('should animate removals of nodes to the `void` state for each animation trigger, but treat all auto styles as pre styles',
+         () => {
+           @Component({
+             selector: 'ani-cmp',
+             template: `
             <div *ngIf="exp" class="ng-if" [@trig1]="exp2" @trig2></div>
           `,
-          animations: [
-            trigger('trig1', [transition('state => void', [animate(1000, style({opacity: 0}))])]),
-            trigger('trig2', [transition(':leave', [animate(1000, style({width: '0px'}))])])
-          ]
-        })
-        class Cmp {
-          public exp = true;
-          public exp2 = 'state';
-        }
+             animations: [
+               trigger(
+                   'trig1', [transition('state => void', [animate(1000, style({opacity: 0}))])]),
+               trigger('trig2', [transition(':leave', [animate(1000, style({width: '0px'}))])])
+             ]
+           })
+           class Cmp {
+             public exp = true;
+             public exp2 = 'state';
+           }
 
-        TestBed.configureTestingModule({declarations: [Cmp]});
+           TestBed.configureTestingModule({declarations: [Cmp]});
 
-        const engine = TestBed.get(ɵAnimationEngine);
-        const fixture = TestBed.createComponent(Cmp);
-        const cmp = fixture.componentInstance;
-        cmp.exp = true;
-        fixture.detectChanges();
-        engine.flush();
-        resetLog();
+           const engine = TestBed.get(ɵAnimationEngine);
+           const fixture = TestBed.createComponent(Cmp);
+           const cmp = fixture.componentInstance;
+           cmp.exp = true;
+           fixture.detectChanges();
+           engine.flush();
+           resetLog();
 
-        const element = getDOM().querySelector(fixture.nativeElement, '.ng-if');
-        assertHasParent(element, true);
+           const element = getDOM().querySelector(fixture.nativeElement, '.ng-if');
+           assertHasParent(element, true);
 
-        cmp.exp = false;
-        fixture.detectChanges();
-        engine.flush();
+           cmp.exp = false;
+           fixture.detectChanges();
+           engine.flush();
 
-        assertHasParent(element, true);
+           assertHasParent(element, true);
 
-        expect(getLog().length).toEqual(2);
+           expect(getLog().length).toEqual(2);
 
-        const player2 = getLog().pop() !;
-        const player1 = getLog().pop() !;
+           const player2 = getLog().pop() !;
+           const player1 = getLog().pop() !;
 
-        expect(player2.keyframes).toEqual([
-          {width: AUTO_STYLE, offset: 0},
-          {width: '0px', offset: 1},
-        ]);
+           expect(player2.keyframes).toEqual([
+             {width: PRE_STYLE, offset: 0},
+             {width: '0px', offset: 1},
+           ]);
 
-        expect(player1.keyframes).toEqual([
-          {opacity: AUTO_STYLE, offset: 0}, {opacity: '0', offset: 1}
-        ]);
+           expect(player1.keyframes).toEqual([
+             {opacity: PRE_STYLE, offset: 0}, {opacity: '0', offset: 1}
+           ]);
 
-        player2.finish();
-        player1.finish();
-        assertHasParent(element, false);
-      });
+           player2.finish();
+           player1.finish();
+           assertHasParent(element, false);
+         });
 
       it('should properly cancel all existing animations when a removal occurs', () => {
         @Component({
diff --git a/packages/core/test/animation/animations_with_web_animations_integration_spec.ts b/packages/core/test/animation/animations_with_web_animations_integration_spec.ts
index e257209fe0..aab246ed8e 100644
--- a/packages/core/test/animation/animations_with_web_animations_integration_spec.ts
+++ b/packages/core/test/animation/animations_with_web_animations_integration_spec.ts
@@ -5,8 +5,9 @@
  * 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 {animate, query, state, style, transition, trigger} from '@angular/animations';
+import {animate, group, query, state, style, transition, trigger} from '@angular/animations';
 import {AnimationDriver, ɵAnimationEngine, ɵWebAnimationsDriver, ɵWebAnimationsPlayer, ɵsupportsWebAnimations} from '@angular/animations/browser';
+import {TransitionAnimationPlayer} from '@angular/animations/browser/src/render/transition_animation_engine';
 import {AnimationGroupPlayer} from '@angular/animations/src/players/animation_group_player';
 import {Component} from '@angular/core';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
@@ -127,7 +128,7 @@ export function main() {
         template: `
             <div [@myAnimation]="exp" #parent>
               <div *ngFor="let item of items" class="child" style="line-height:20px">
-                - {{ item }} 
+                - {{ item }}
               </div>
             </div>
           `,
@@ -177,6 +178,164 @@ export function main() {
       ]);
     });
 
+    it('should treat * styles as ! when a removal animation is being rendered', () => {
+      @Component({
+        selector: 'ani-cmp',
+        styles: [`
+            .box {
+              width: 500px;
+              overflow:hidden;
+              background:orange;
+              line-height:300px;
+              font-size:100px;
+              text-align:center;
+            }
+          `],
+        template: `
+            <button (click)="toggle()">Open / Close</button>
+            <hr />
+            <div *ngIf="exp" @slide class="box">
+            ...
+            </div>
+          `,
+        animations: [trigger(
+            'slide',
+            [
+              state('void', style({height: '0px'})),
+              state('*', style({height: '*'})),
+              transition('* => *', animate('500ms')),
+            ])]
+      })
+      class Cmp {
+        exp = false;
+
+        toggle() { this.exp = !this.exp; }
+      }
+
+      TestBed.configureTestingModule({declarations: [Cmp]});
+
+      const engine = TestBed.get(ɵAnimationEngine);
+      const fixture = TestBed.createComponent(Cmp);
+      const cmp = fixture.componentInstance;
+
+      cmp.exp = true;
+      fixture.detectChanges();
+
+      let player = engine.players[0] !;
+      let webPlayer = player.getRealPlayer() as ɵWebAnimationsPlayer;
+      expect(webPlayer.keyframes).toEqual([
+        {height: '0px', offset: 0},
+        {height: '300px', offset: 1},
+      ]);
+      player.finish();
+
+      cmp.exp = false;
+      fixture.detectChanges();
+
+      player = engine.players[0] !;
+      webPlayer = player.getRealPlayer() as ɵWebAnimationsPlayer;
+      expect(webPlayer.keyframes).toEqual([
+        {height: '300px', offset: 0},
+        {height: '0px', offset: 1},
+      ]);
+    });
+
+    it('should treat * styles as ! for queried items that are collected in a container that is being removed',
+       () => {
+         @Component({
+            selector: 'my-app',
+            styles: [`
+              .list .outer {
+                overflow:hidden;
+              }
+              .list .inner {
+                line-height:50px;
+              }
+            `],
+            template: `
+              <button (click)="empty()">Empty</button>
+              <button (click)="middle()">Middle</button>
+              <button (click)="full()">Full</button>
+              <hr />
+              <div [@list]="exp" class="list">
+                <div *ngFor="let item of items" class="outer">
+                  <div class="inner">
+                    {{ item }}
+                  </div>
+                </div>
+              </div>
+            `,
+            animations: [
+              trigger('list', [
+                transition(':enter', []),
+                transition('* => empty', [
+                  query(':leave', [
+                    animate(500, style({ height: '0px' }))
+                  ])
+                ]),
+                transition('* => full', [
+                  query(':enter', [
+                    style({ height: '0px' }),
+                    animate(500, style({ height: '*' }))
+                  ])
+                ]),
+              ])
+            ]
+        })
+        class Cmp {
+           items: any[] = [];
+
+           get exp() { return this.items.length ? 'full' : 'empty'; }
+
+           empty() { this.items = []; }
+
+           full() { this.items = [0, 1, 2, 3, 4]; }
+         }
+
+         TestBed.configureTestingModule({declarations: [Cmp]});
+
+         const engine = TestBed.get(ɵAnimationEngine);
+         const fixture = TestBed.createComponent(Cmp);
+         const cmp = fixture.componentInstance;
+
+         cmp.empty();
+         fixture.detectChanges();
+         let player = engine.players[0] !as TransitionAnimationPlayer;
+         player.finish();
+
+         cmp.full();
+         fixture.detectChanges();
+
+         player = engine.players[0] !as TransitionAnimationPlayer;
+         let queriedPlayers = (player.getRealPlayer() as AnimationGroupPlayer).players;
+         expect(queriedPlayers.length).toEqual(5);
+
+         let i = 0;
+         for (i = 0; i < queriedPlayers.length; i++) {
+           let player = queriedPlayers[i] as ɵWebAnimationsPlayer;
+           expect(player.keyframes).toEqual([
+             {height: '0px', offset: 0},
+             {height: '50px', offset: 1},
+           ]);
+           player.finish();
+         }
+
+         cmp.empty();
+         fixture.detectChanges();
+
+         player = engine.players[0] !as TransitionAnimationPlayer;
+         queriedPlayers = (player.getRealPlayer() as AnimationGroupPlayer).players;
+         expect(queriedPlayers.length).toEqual(5);
+
+         for (i = 0; i < queriedPlayers.length; i++) {
+           let player = queriedPlayers[i] as ɵWebAnimationsPlayer;
+           expect(player.keyframes).toEqual([
+             {height: '50px', offset: 0},
+             {height: '0px', offset: 1},
+           ]);
+         }
+       });
+
     it('should compute intermediate styles properly when an animation is cancelled', () => {
       @Component({
         selector: 'ani-cmp',