diff --git a/packages/compiler/src/aot/compiler.ts b/packages/compiler/src/aot/compiler.ts
index 4bfc4004b6..775b8d5d8b 100644
--- a/packages/compiler/src/aot/compiler.ts
+++ b/packages/compiler/src/aot/compiler.ts
@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {CompileDirectiveMetadata, CompileDirectiveSummary, CompileIdentifierMetadata, CompileInjectableMetadata, CompileNgModuleMetadata, CompileNgModuleSummary, CompilePipeMetadata, CompilePipeSummary, CompileProviderMetadata, CompileShallowModuleMetadata, CompileStylesheetMetadata, CompileSummaryKind, CompileTypeMetadata, CompileTypeSummary, componentFactoryName, flatten, identifierName, templateSourceUrl, tokenReference} from '../compile_metadata';
+import {CompileDirectiveMetadata, CompileIdentifierMetadata, CompileInjectableMetadata, CompileNgModuleMetadata, CompilePipeMetadata, CompilePipeSummary, CompileProviderMetadata, CompileShallowModuleMetadata, CompileStylesheetMetadata, CompileTypeMetadata, CompileTypeSummary, componentFactoryName, flatten, identifierName, templateSourceUrl} from '../compile_metadata';
 import {CompilerConfig} from '../config';
 import {ConstantPool} from '../constant_pool';
 import {ViewEncapsulation} from '../core';
@@ -14,7 +14,9 @@ import {MessageBundle} from '../i18n/message_bundle';
 import {Identifiers, createTokenForExternalReference} from '../identifiers';
 import {InjectableCompiler} from '../injectable_compiler';
 import {CompileMetadataResolver} from '../metadata_resolver';
+import * as html from '../ml_parser/ast';
 import {HtmlParser} from '../ml_parser/html_parser';
+import {removeWhitespaces} from '../ml_parser/html_whitespaces';
 import {DEFAULT_INTERPOLATION_CONFIG, InterpolationConfig} from '../ml_parser/interpolation_config';
 import {NgModuleCompiler} from '../ng_module_compiler';
 import {OutputEmitter} from '../output/abstract_emitter';
@@ -22,7 +24,9 @@ import * as o from '../output/output_ast';
 import {ParseError} from '../parse_util';
 import {compileNgModule as compileIvyModule} from '../render3/r3_module_compiler';
 import {compilePipe as compileIvyPipe} from '../render3/r3_pipe_compiler';
-import {compileComponent as compileIvyComponent, compileDirective as compileIvyDirective} from '../render3/r3_view_compiler';
+import {HtmlToTemplateTransform} from '../render3/r3_template_transform';
+import {compileComponent as compileIvyComponent, compileDirective as compileIvyDirective} from '../render3/r3_view_compiler_local';
+import {DomElementSchemaRegistry} from '../schema/dom_element_schema_registry';
 import {CompiledStylesheet, StyleCompiler} from '../style_compiler';
 import {SummaryResolver} from '../summary_resolver';
 import {BindingParser} from '../template_parser/binding_parser';
@@ -39,15 +43,11 @@ import {LazyRoute, listLazyRoutes, parseLazyRoute} from './lazy_routes';
 import {PartialModule} from './partial_module';
 import {StaticReflector} from './static_reflector';
 import {StaticSymbol} from './static_symbol';
-import {ResolvedStaticSymbol, StaticSymbolResolver} from './static_symbol_resolver';
+import {StaticSymbolResolver} from './static_symbol_resolver';
 import {createForJitStub, serializeSummaries} from './summary_serializer';
-import {ngfactoryFilePath, normalizeGenFileSuffix, splitTypescriptSuffix, summaryFileName, summaryForJitFileName, summaryForJitName} from './util';
+import {ngfactoryFilePath, normalizeGenFileSuffix, splitTypescriptSuffix, summaryFileName, summaryForJitFileName} from './util';
 
-enum StubEmitFlags {
-  Basic = 1 << 0,
-  TypeCheck = 1 << 1,
-  All = TypeCheck | Basic
-}
+const enum StubEmitFlags { Basic = 1 << 0, TypeCheck = 1 << 1, All = TypeCheck | Basic }
 
 export class AotCompiler {
   private _templateAstCache =
@@ -369,11 +369,12 @@ export class AotCompiler {
       fileName: string, ngModuleByPipeOrDirective: Map<StaticSymbol, CompileNgModuleMetadata>,
       directives: StaticSymbol[], pipes: StaticSymbol[], ngModules: CompileNgModuleMetadata[],
       injectables: CompileInjectableMetadata[], context: OutputContext): void {
-    const classes: o.ClassStmt[] = [];
     const errors: ParseError[] = [];
 
+    const schemaRegistry = new DomElementSchemaRegistry();
     const hostBindingParser = new BindingParser(
-        this._templateParser.expressionParser, DEFAULT_INTERPOLATION_CONFIG, null !, [], errors);
+        this._templateParser.expressionParser, DEFAULT_INTERPOLATION_CONFIG, schemaRegistry, [],
+        errors);
 
     // Process all components and directives
     directives.forEach(directiveType => {
@@ -384,11 +385,40 @@ export class AotCompiler {
             error(
                 `Cannot determine the module for component '${identifierName(directiveMetadata.type)}'`);
 
-        const {template: parsedTemplate, pipes: parsedPipes} =
-            this._parseTemplate(directiveMetadata, module, module.transitiveModule.directives);
+        let htmlAst = directiveMetadata.template !.htmlAst !;
+        const preserveWhitespaces = directiveMetadata !.template !.preserveWhitespaces;
+
+        if (!preserveWhitespaces) {
+          htmlAst = removeWhitespaces(htmlAst);
+        }
+        const transform = new HtmlToTemplateTransform(hostBindingParser);
+        const nodes = html.visitAll(transform, htmlAst.rootNodes, null);
+        const hasNgContent = transform.hasNgContent;
+        const ngContentSelectors = transform.ngContentSelectors;
+
+        // Map of StaticType by directive selectors
+        const directiveTypeBySel = new Map<string, any>();
+
+        const directives = module.transitiveModule.directives.map(
+            dir => this._metadataResolver.getDirectiveSummary(dir.reference));
+
+        directives.forEach(directive => {
+          if (directive.selector) {
+            directiveTypeBySel.set(directive.selector, directive.type.reference);
+          }
+        });
+
+        // Map of StaticType by pipe names
+        const pipeTypeByName = new Map<string, any>();
+
+        const pipes = module.transitiveModule.pipes.map(
+            pipe => this._metadataResolver.getPipeSummary(pipe.reference));
+
+        pipes.forEach(pipe => { pipeTypeByName.set(pipe.name, pipe.type.reference); });
+
         compileIvyComponent(
-            context, directiveMetadata, parsedPipes, parsedTemplate, this.reflector,
-            hostBindingParser);
+            context, directiveMetadata, nodes, hasNgContent, ngContentSelectors, this.reflector,
+            hostBindingParser, directiveTypeBySel, pipeTypeByName);
       } else {
         compileIvyDirective(context, directiveMetadata, this.reflector, hostBindingParser);
       }
@@ -891,16 +921,13 @@ export function analyzeFileForInjectables(
       if (!symbolMeta || symbolMeta.__symbolic === 'error') {
         return;
       }
-      let isNgSymbol = false;
       if (symbolMeta.__symbolic === 'class') {
         if (metadataResolver.isInjectable(symbol)) {
-          isNgSymbol = true;
           const injectable = metadataResolver.getInjectableMetadata(symbol, null, false);
           if (injectable) {
             injectables.push(injectable);
           }
         } else if (metadataResolver.isNgModule(symbol)) {
-          isNgSymbol = true;
           const module = metadataResolver.getShallowModuleMetadata(symbol);
           if (module) {
             shallowModules.push(module);
diff --git a/packages/compiler/src/render3/r3_ast.ts b/packages/compiler/src/render3/r3_ast.ts
new file mode 100644
index 0000000000..c35a78dd53
--- /dev/null
+++ b/packages/compiler/src/render3/r3_ast.ts
@@ -0,0 +1,241 @@
+/**
+ * @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 {SecurityContext} from '../core';
+import {AST} from '../expression_parser/ast';
+import {ParseSourceSpan} from '../parse_util';
+
+export interface Node {
+  sourceSpan: ParseSourceSpan;
+  visit<Result>(visitor: Visitor<Result>): Result;
+}
+
+export class Text implements Node {
+  constructor(public value: string, public sourceSpan: ParseSourceSpan) {}
+  visit<Result>(visitor: Visitor<Result>): Result { return visitor.visitText(this); }
+}
+
+export class BoundText implements Node {
+  constructor(public value: AST, public sourceSpan: ParseSourceSpan) {}
+  visit<Result>(visitor: Visitor<Result>): Result { return visitor.visitBoundText(this); }
+}
+
+export class TextAttribute implements Node {
+  constructor(
+      public name: string, public value: string, public sourceSpan: ParseSourceSpan,
+      public valueSpan?: ParseSourceSpan) {}
+  visit<Result>(visitor: Visitor<Result>): Result { return visitor.visitAttribute(this); }
+}
+
+/**
+ * Enumeration of types of property bindings.
+ */
+export enum PropertyBindingType {
+
+  /**
+   * A normal binding to a property (e.g. `[property]="expression"`).
+   */
+  Property,
+
+  /**
+   * A binding to an element attribute (e.g. `[attr.name]="expression"`).
+   */
+  Attribute,
+
+  /**
+   * A binding to a CSS class (e.g. `[class.name]="condition"`).
+   */
+  Class,
+
+  /**
+   * A binding to a style rule (e.g. `[style.rule]="expression"`).
+   */
+  Style,
+
+  /**
+   * A binding to an animation reference (e.g. `[animate.key]="expression"`).
+   */
+  Animation
+}
+
+export class BoundAttribute implements Node {
+  constructor(
+      public name: string, public type: PropertyBindingType,
+      public securityContext: SecurityContext, public value: AST, public unit: string|null,
+      public sourceSpan: ParseSourceSpan) {}
+  visit<Result>(visitor: Visitor<Result>): Result { return visitor.visitBoundAttribute(this); }
+}
+
+export class BoundEvent implements Node {
+  constructor(
+      public name: string, public handler: AST, public target: string|null,
+      public phase: string|null, public sourceSpan: ParseSourceSpan) {}
+  visit<Result>(visitor: Visitor<Result>): Result { return visitor.visitBoundEvent(this); }
+}
+
+export class Element implements Node {
+  constructor(
+      public name: string, public attributes: TextAttribute[], public inputs: BoundAttribute[],
+      public outputs: BoundEvent[], public children: Node[], public references: Reference[],
+      public sourceSpan: ParseSourceSpan, public startSourceSpan: ParseSourceSpan|null,
+      public endSourceSpan: ParseSourceSpan|null) {}
+  visit<Result>(visitor: Visitor<Result>): Result { return visitor.visitElement(this); }
+}
+
+export class Template implements Node {
+  constructor(
+      public attributes: TextAttribute[], public inputs: BoundAttribute[], public children: Node[],
+      public references: Reference[], public variables: Variable[],
+      public sourceSpan: ParseSourceSpan, public startSourceSpan: ParseSourceSpan|null,
+      public endSourceSpan: ParseSourceSpan|null) {}
+  visit<Result>(visitor: Visitor<Result>): Result { return visitor.visitTemplate(this); }
+}
+
+export class Content implements Node {
+  constructor(
+      public selectorIndex: number, public attributes: TextAttribute[],
+      public sourceSpan: ParseSourceSpan) {}
+  visit<Result>(visitor: Visitor<Result>): Result { return visitor.visitContent(this); }
+}
+
+export class Variable implements Node {
+  constructor(public name: string, public value: string, public sourceSpan: ParseSourceSpan) {}
+  visit<Result>(visitor: Visitor<Result>): Result { return visitor.visitVariable(this); }
+}
+
+export class Reference implements Node {
+  constructor(public name: string, public value: string, public sourceSpan: ParseSourceSpan) {}
+  visit<Result>(visitor: Visitor<Result>): Result { return visitor.visitReference(this); }
+}
+
+export interface Visitor<Result = any> {
+  // Returning a truthy value from `visit()` will prevent `visitAll()` from the call to the typed
+  // method and result returned will become the result included in `visitAll()`s result array.
+  visit?(node: Node): Result;
+
+  visitElement(element: Element): Result;
+  visitTemplate(template: Template): Result;
+  visitContent(content: Content): Result;
+  visitVariable(variable: Variable): Result;
+  visitReference(reference: Reference): Result;
+  visitAttribute(attribute: TextAttribute): Result;
+  visitBoundAttribute(attribute: BoundAttribute): Result;
+  visitBoundEvent(attribute: BoundEvent): Result;
+  visitText(text: Text): Result;
+  visitBoundText(text: BoundText): Result;
+}
+
+export class NullVisitor implements Visitor<void> {
+  visitElement(element: Element): void {}
+  visitTemplate(template: Template): void {}
+  visitContent(content: Content): void {}
+  visitVariable(variable: Variable): void {}
+  visitReference(reference: Reference): void {}
+  visitAttribute(attribute: TextAttribute): void {}
+  visitBoundAttribute(attribute: BoundAttribute): void {}
+  visitBoundEvent(attribute: BoundEvent): void {}
+  visitText(text: Text): void {}
+  visitBoundText(text: BoundText): void {}
+}
+
+export class RecursiveVisitor implements Visitor<void> {
+  visitElement(element: Element): void {
+    visitAll(this, element.attributes);
+    visitAll(this, element.children);
+    visitAll(this, element.references);
+  }
+  visitTemplate(template: Template): void {
+    visitAll(this, template.attributes);
+    visitAll(this, template.children);
+    visitAll(this, template.references);
+    visitAll(this, template.variables);
+  }
+  visitContent(content: Content): void {}
+  visitVariable(variable: Variable): void {}
+  visitReference(reference: Reference): void {}
+  visitAttribute(attribute: TextAttribute): void {}
+  visitBoundAttribute(attribute: BoundAttribute): void {}
+  visitBoundEvent(attribute: BoundEvent): void {}
+  visitText(text: Text): void {}
+  visitBoundText(text: BoundText): void {}
+}
+
+export class TransformVisitor implements Visitor<Node> {
+  visitElement(element: Element): Node {
+    const newAttributes = transformAll(this, element.attributes);
+    const newInputs = transformAll(this, element.inputs);
+    const newOutputs = transformAll(this, element.outputs);
+    const newChildren = transformAll(this, element.children);
+    const newReferences = transformAll(this, element.references);
+    if (newAttributes != element.attributes || newInputs != element.inputs ||
+        newOutputs != element.outputs || newChildren != element.children ||
+        newReferences != element.references) {
+      return new Element(
+          element.name, newAttributes, newInputs, newOutputs, newChildren, newReferences,
+          element.sourceSpan, element.startSourceSpan, element.endSourceSpan);
+    }
+    return element;
+  }
+
+  visitTemplate(template: Template): Node {
+    const newAttributes = transformAll(this, template.attributes);
+    const newInputs = transformAll(this, template.inputs);
+    const newChildren = transformAll(this, template.children);
+    const newReferences = transformAll(this, template.references);
+    const newVariables = transformAll(this, template.variables);
+    if (newAttributes != template.attributes || newInputs != template.inputs ||
+        newChildren != template.children || newVariables != template.variables ||
+        newReferences != template.references) {
+      return new Template(
+          newAttributes, newInputs, newChildren, newReferences, newVariables, template.sourceSpan,
+          template.startSourceSpan, template.endSourceSpan);
+    }
+    return template;
+  }
+
+  visitContent(content: Content): Node { return content; }
+
+  visitVariable(variable: Variable): Node { return variable; }
+  visitReference(reference: Reference): Node { return reference; }
+  visitAttribute(attribute: TextAttribute): Node { return attribute; }
+  visitBoundAttribute(attribute: BoundAttribute): Node { return attribute; }
+  visitBoundEvent(attribute: BoundEvent): Node { return attribute; }
+  visitText(text: Text): Node { return text; }
+  visitBoundText(text: BoundText): Node { return text; }
+}
+
+export function visitAll<Result>(visitor: Visitor<Result>, nodes: Node[]): Result[] {
+  const result: Result[] = [];
+  if (visitor.visit) {
+    for (const node of nodes) {
+      const newNode = visitor.visit(node) || node.visit(visitor);
+    }
+  } else {
+    for (const node of nodes) {
+      const newNode = node.visit(visitor);
+      if (newNode) {
+        result.push(newNode);
+      }
+    }
+  }
+  return result;
+}
+
+export function transformAll<Result extends Node>(
+    visitor: Visitor<Node>, nodes: Result[]): Result[] {
+  const result: Result[] = [];
+  let changed = false;
+  for (const node of nodes) {
+    const newNode = node.visit(visitor);
+    if (newNode) {
+      result.push(newNode as Result);
+    }
+    changed = changed || newNode != node;
+  }
+  return changed ? result : nodes;
+}
\ No newline at end of file
diff --git a/packages/compiler/src/render3/r3_identifiers.ts b/packages/compiler/src/render3/r3_identifiers.ts
index dff47eb6f9..c18542fbe2 100644
--- a/packages/compiler/src/render3/r3_identifiers.ts
+++ b/packages/compiler/src/render3/r3_identifiers.ts
@@ -31,14 +31,8 @@ export class Identifiers {
 
   static containerCreate: o.ExternalReference = {name: 'ɵC', moduleName: CORE};
 
-  static containerEnd: o.ExternalReference = {name: 'ɵc', moduleName: CORE};
-
-  static directiveCreate: o.ExternalReference = {name: 'ɵD', moduleName: CORE};
-
   static text: o.ExternalReference = {name: 'ɵT', moduleName: CORE};
 
-  static directiveInput: o.ExternalReference = {name: 'ɵi', moduleName: CORE};
-
   static textCreateBound: o.ExternalReference = {name: 'ɵt', moduleName: CORE};
 
   static bind: o.ExternalReference = {name: 'ɵb', moduleName: CORE};
@@ -77,10 +71,6 @@ export class Identifiers {
   static projection: o.ExternalReference = {name: 'ɵP', moduleName: CORE};
   static projectionDef: o.ExternalReference = {name: 'ɵpD', moduleName: CORE};
 
-  static refreshComponent: o.ExternalReference = {name: 'ɵr', moduleName: CORE};
-
-  static directiveLifeCycle: o.ExternalReference = {name: 'ɵl', moduleName: CORE};
-
   static injectAttribute: o.ExternalReference = {name: 'ɵinjectAttribute', moduleName: CORE};
 
   static injectElementRef: o.ExternalReference = {name: 'ɵinjectElementRef', moduleName: CORE};
diff --git a/packages/compiler/src/render3/r3_module_compiler.ts b/packages/compiler/src/render3/r3_module_compiler.ts
index 547ed95fcc..f0d2c93a83 100644
--- a/packages/compiler/src/render3/r3_module_compiler.ts
+++ b/packages/compiler/src/render3/r3_module_compiler.ts
@@ -15,18 +15,18 @@ import {OutputContext} from '../util';
 
 import {Identifiers as R3} from './r3_identifiers';
 
-const EMPTY_ARRAY = o.literalArr([]);
-
 function convertMetaToOutput(meta: any, ctx: OutputContext): o.Expression {
   if (Array.isArray(meta)) {
     return o.literalArr(meta.map(entry => convertMetaToOutput(entry, ctx)));
-  } else if (meta instanceof StaticSymbol) {
-    return ctx.importExpr(meta);
-  } else if (meta == null) {
-    return o.literal(meta);
-  } else {
-    throw new Error(`Internal error: Unsupported or unknown metadata: ${meta}`);
   }
+  if (meta instanceof StaticSymbol) {
+    return ctx.importExpr(meta);
+  }
+  if (meta == null) {
+    return o.literal(meta);
+  }
+
+  throw new Error(`Internal error: Unsupported or unknown metadata: ${meta}`);
 }
 
 export function compileNgModule(
diff --git a/packages/compiler/src/render3/r3_module_factory_compiler.ts b/packages/compiler/src/render3/r3_module_factory_compiler.ts
index 36aae89480..a6e64a7455 100644
--- a/packages/compiler/src/render3/r3_module_factory_compiler.ts
+++ b/packages/compiler/src/render3/r3_module_factory_compiler.ts
@@ -6,8 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {StaticReflector} from '../aot/static_reflector';
-import {CompileDirectiveMetadata, CompileIdentifierMetadata, CompileNgModuleMetadata, CompilePipeSummary, CompileTypeMetadata, identifierName} from '../compile_metadata';
+import {CompileNgModuleMetadata, CompileTypeMetadata, identifierName} from '../compile_metadata';
 import {CompileMetadataResolver} from '../metadata_resolver';
 import * as o from '../output/output_ast';
 import {OutputContext} from '../util';
diff --git a/packages/compiler/src/render3/r3_pipe_compiler.ts b/packages/compiler/src/render3/r3_pipe_compiler.ts
index 6f60723caa..f1a849c33c 100644
--- a/packages/compiler/src/render3/r3_pipe_compiler.ts
+++ b/packages/compiler/src/render3/r3_pipe_compiler.ts
@@ -6,15 +6,14 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {CompileDirectiveMetadata, CompilePipeMetadata, identifierName} from '../compile_metadata';
+import {CompilePipeMetadata, identifierName} from '../compile_metadata';
 import {CompileReflector} from '../compile_reflector';
 import {DefinitionKind} from '../constant_pool';
 import * as o from '../output/output_ast';
 import {OutputContext, error} from '../util';
 
 import {Identifiers as R3} from './r3_identifiers';
-import {BUILD_OPTIMIZER_COLOCATE} from './r3_types';
-import {createFactory} from './r3_view_compiler';
+import {createFactory} from './r3_view_compiler_local';
 
 /**
  * Write a pipe definition to the output context.
@@ -30,11 +29,11 @@ export function compilePipe(
   definitionMapValues.push(
       {key: 'type', value: outputCtx.importExpr(pipe.type.reference), quoted: false});
 
-  // e.g. factory: function MyPipe_Factory() { return new MyPipe(); },
+  // e.g. `factory: function MyPipe_Factory() { return new MyPipe(); }`
   const templateFactory = createFactory(pipe.type, outputCtx, reflector, []);
   definitionMapValues.push({key: 'factory', value: templateFactory, quoted: false});
 
-  // e.g. pure: true
+  // e.g. `pure: true`
   if (pipe.pure) {
     definitionMapValues.push({key: 'pure', value: o.literal(true), quoted: false});
   }
diff --git a/packages/compiler/src/render3/r3_template_transform.ts b/packages/compiler/src/render3/r3_template_transform.ts
new file mode 100644
index 0000000000..7fce7119c6
--- /dev/null
+++ b/packages/compiler/src/render3/r3_template_transform.ts
@@ -0,0 +1,366 @@
+/**
+ * @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 '../ml_parser/ast';
+import {replaceNgsp} from '../ml_parser/html_whitespaces';
+import {isNgTemplate} from '../ml_parser/tags';
+import {ParseError, ParseErrorLevel, ParseSourceSpan} from '../parse_util';
+import {isStyleUrlResolvable} from '../style_url_resolver';
+import {BindingParser, BoundProperty} from '../template_parser/binding_parser';
+// TODO(chuckj): Refactor binding parser to not have a dependency on template_ast.
+import {BoundEventAst, VariableAst} from '../template_parser/template_ast';
+import {PreparsedElementType, preparseElement} from '../template_parser/template_preparser';
+
+import * as t from './r3_ast';
+
+const BIND_NAME_REGEXP =
+    /^(?:(?:(?:(bind-)|(let-)|(ref-|#)|(on-)|(bindon-)|(@))(.+))|\[\(([^\)]+)\)\]|\[([^\]]+)\]|\(([^\)]+)\))$/;
+
+// Group 1 = "bind-"
+const KW_BIND_IDX = 1;
+// Group 2 = "let-"
+const KW_LET_IDX = 2;
+// Group 3 = "ref-/#"
+const KW_REF_IDX = 3;
+// Group 4 = "on-"
+const KW_ON_IDX = 4;
+// Group 5 = "bindon-"
+const KW_BINDON_IDX = 5;
+// Group 6 = "@"
+const KW_AT_IDX = 6;
+// Group 7 = the identifier after "bind-", "let-", "ref-/#", "on-", "bindon-" or "@"
+const IDENT_KW_IDX = 7;
+// Group 8 = identifier inside [()]
+const IDENT_BANANA_BOX_IDX = 8;
+// Group 9 = identifier inside []
+const IDENT_PROPERTY_IDX = 9;
+// Group 10 = identifier inside ()
+const IDENT_EVENT_IDX = 10;
+
+const TEMPLATE_ATTR_PREFIX = '*';
+const CLASS_ATTR = 'class';
+// Default selector used by `<ng-content>` if none specified
+const DEFAULT_CONTENT_SELECTOR = '*';
+
+export class HtmlToTemplateTransform implements html.Visitor {
+  errors: ParseError[];
+
+  // Selectors for the `ng-content` tags. Only non `*` selectors are recorded here
+  ngContentSelectors: string[] = [];
+  // Any `<ng-content>` in the template ?
+  hasNgContent = false;
+
+  constructor(private bindingParser: BindingParser) {}
+
+  // HTML visitor
+  visitElement(element: html.Element): t.Node|null {
+    const preparsedElement = preparseElement(element);
+    if (preparsedElement.type === PreparsedElementType.SCRIPT ||
+        preparsedElement.type === PreparsedElementType.STYLE) {
+      // Skipping <script> for security reasons
+      // Skipping <style> as we already processed them
+      // in the StyleCompiler
+      return null;
+    }
+    if (preparsedElement.type === PreparsedElementType.STYLESHEET &&
+        isStyleUrlResolvable(preparsedElement.hrefAttr)) {
+      // Skipping stylesheets with either relative urls or package scheme as we already processed
+      // them in the StyleCompiler
+      return null;
+    }
+
+    // Whether the element is a `<ng-template>`
+    const isTemplateElement = isNgTemplate(element.name);
+
+    const matchableAttributes: [string, string][] = [];
+    const boundProperties: BoundProperty[] = [];
+    const boundEvents: t.BoundEvent[] = [];
+    const variables: t.Variable[] = [];
+    const references: t.Reference[] = [];
+    const attributes: t.TextAttribute[] = [];
+
+    const templateMatchableAttributes: [string, string][] = [];
+    let inlineTemplateSourceSpan: ParseSourceSpan;
+    const templateBoundProperties: BoundProperty[] = [];
+    const templateVariables: t.Variable[] = [];
+
+    // Whether the element has any *-attribute
+    let elementHasInlineTemplate = false;
+
+    for (const attribute of element.attrs) {
+      let hasBinding = false;
+      const normalizedName = normalizeAttributeName(attribute.name);
+
+      // `*attr` defines template bindings
+      let isTemplateBinding = false;
+
+      if (normalizedName.startsWith(TEMPLATE_ATTR_PREFIX)) {
+        if (elementHasInlineTemplate) {
+          this.reportError(
+              `Can't have multiple template bindings on one element. Use only one attribute prefixed with *`,
+              attribute.sourceSpan);
+        }
+        isTemplateBinding = true;
+        elementHasInlineTemplate = true;
+        const templateBindingsSource = attribute.value;
+        const prefixToken = normalizedName.substring(TEMPLATE_ATTR_PREFIX.length) + ':';
+
+        const oldVariables: VariableAst[] = [];
+
+        inlineTemplateSourceSpan = attribute.valueSpan || attribute.sourceSpan;
+
+        this.bindingParser.parseInlineTemplateBinding(
+            prefixToken !, templateBindingsSource !, attribute.sourceSpan,
+            templateMatchableAttributes, templateBoundProperties, oldVariables);
+
+        templateVariables.push(
+            ...oldVariables.map(v => new t.Variable(v.name, v.value, v.sourceSpan)));
+      } else {
+        // Check for variables, events, property bindings, interpolation
+        hasBinding = this.parseAttribute(
+            isTemplateElement, attribute, matchableAttributes, boundProperties, boundEvents,
+            variables, references);
+      }
+
+      if (!hasBinding && !isTemplateBinding) {
+        // don't include the bindings as attributes as well in the AST
+        attributes.push(this.visitAttribute(attribute) as t.TextAttribute);
+        matchableAttributes.push([attribute.name, attribute.value]);
+      }
+    }
+
+    const children: t.Node[] =
+        html.visitAll(preparsedElement.nonBindable ? NON_BINDABLE_VISITOR : this, element.children);
+
+    let parsedElement: t.Node|undefined;
+    if (preparsedElement.type === PreparsedElementType.NG_CONTENT) {
+      // `<ng-content>`
+      this.hasNgContent = true;
+
+      if (element.children && !element.children.every(isEmptyTextNode)) {
+        this.reportError(`<ng-content> element cannot have content.`, element.sourceSpan);
+      }
+
+      const selector = preparsedElement.selectAttr;
+
+      let attributes: t.TextAttribute[] = element.attrs.map(attribute => {
+        return new t.TextAttribute(
+            attribute.name, attribute.value, attribute.sourceSpan, attribute.valueSpan);
+      });
+
+      const selectorIndex =
+          selector === DEFAULT_CONTENT_SELECTOR ? 0 : this.ngContentSelectors.push(selector);
+      parsedElement = new t.Content(selectorIndex, attributes, element.sourceSpan);
+    } else if (isTemplateElement) {
+      // `<ng-template>`
+      const boundAttributes = this.createBoundAttributes(element.name, boundProperties);
+      parsedElement = new t.Template(
+          attributes, boundAttributes, children, references, variables, element.sourceSpan,
+          element.startSourceSpan, element.endSourceSpan);
+    } else {
+      const boundAttributes = this.createBoundAttributes(element.name, boundProperties);
+
+      parsedElement = new t.Element(
+          element.name, attributes, boundAttributes, boundEvents, children, references,
+          element.sourceSpan, element.startSourceSpan, element.endSourceSpan);
+    }
+
+    if (elementHasInlineTemplate) {
+      const attributes: t.TextAttribute[] = [];
+
+      templateMatchableAttributes.forEach(
+          ([name, value]) =>
+              attributes.push(new t.TextAttribute(name, value, inlineTemplateSourceSpan)));
+
+      const boundAttributes = this.createBoundAttributes('ng-template', templateBoundProperties);
+      parsedElement = new t.Template(
+          attributes, boundAttributes, [parsedElement], [], templateVariables, element.sourceSpan,
+          element.startSourceSpan, element.endSourceSpan);
+    }
+    return parsedElement;
+  }
+
+  visitAttribute(attribute: html.Attribute): t.Node {
+    return new t.TextAttribute(
+        attribute.name, attribute.value, attribute.sourceSpan, attribute.valueSpan);
+  }
+
+  visitText(text: html.Text): t.Node {
+    const valueNoNgsp = replaceNgsp(text.value);
+    const expr = this.bindingParser.parseInterpolation(valueNoNgsp, text.sourceSpan);
+    return expr ? new t.BoundText(expr, text.sourceSpan) : new t.Text(valueNoNgsp, text.sourceSpan);
+  }
+
+  visitComment(comment: html.Comment): null { return null; }
+
+  visitExpansion(expansion: html.Expansion): null { return null; }
+
+  visitExpansionCase(expansionCase: html.ExpansionCase): null { return null; }
+
+  private createBoundAttributes(elementName: string, boundProperties: BoundProperty[]):
+      t.BoundAttribute[] {
+    const literalProperties = boundProperties.filter(prop => !prop.isLiteral);
+
+    return literalProperties.map(property => {
+      // TODO(vicb): get ride of the boundProperty (from TemplateAst)
+      const boundProp = this.bindingParser.createElementPropertyAst(elementName, property);
+      return new t.BoundAttribute(
+          boundProp.name, boundProp.type as any as t.PropertyBindingType, boundProp.securityContext,
+          boundProp.value, boundProp.unit, boundProp.sourceSpan);
+    });
+  }
+
+  private parseAttribute(
+      isTemplateElement: boolean, attribute: html.Attribute, matchableAttributes: string[][],
+      boundProperties: BoundProperty[], boundEvents: t.BoundEvent[], variables: t.Variable[],
+      references: t.Reference[]) {
+    const name = normalizeAttributeName(attribute.name);
+    const value = attribute.value;
+    const srcSpan = attribute.sourceSpan;
+
+    const bindParts = name.match(BIND_NAME_REGEXP);
+    let hasBinding = false;
+
+    if (bindParts) {
+      hasBinding = true;
+      if (bindParts[KW_BIND_IDX] != null) {
+        this.bindingParser.parsePropertyBinding(
+            bindParts[IDENT_KW_IDX], value, false, srcSpan, matchableAttributes, boundProperties);
+
+      } else if (bindParts[KW_LET_IDX]) {
+        if (isTemplateElement) {
+          const identifier = bindParts[IDENT_KW_IDX];
+          this.parseVariable(identifier, value, srcSpan, variables);
+        } else {
+          this.reportError(`"let-" is only supported on ng-template elements.`, srcSpan);
+        }
+
+      } else if (bindParts[KW_REF_IDX]) {
+        const identifier = bindParts[IDENT_KW_IDX];
+        this.parseReference(identifier, value, srcSpan, references);
+
+      } else if (bindParts[KW_ON_IDX]) {
+        const events: BoundEventAst[] = [];
+        this.bindingParser.parseEvent(
+            bindParts[IDENT_KW_IDX], value, srcSpan, matchableAttributes, events);
+        addEvents(events, boundEvents);
+      } else if (bindParts[KW_BINDON_IDX]) {
+        this.bindingParser.parsePropertyBinding(
+            bindParts[IDENT_KW_IDX], value, false, srcSpan, matchableAttributes, boundProperties);
+        this.parseAssignmentEvent(
+            bindParts[IDENT_KW_IDX], value, srcSpan, matchableAttributes, boundEvents);
+      } else if (bindParts[KW_AT_IDX]) {
+        this.bindingParser.parseLiteralAttr(
+            name, value, srcSpan, matchableAttributes, boundProperties);
+
+      } else if (bindParts[IDENT_BANANA_BOX_IDX]) {
+        this.bindingParser.parsePropertyBinding(
+            bindParts[IDENT_BANANA_BOX_IDX], value, false, srcSpan, matchableAttributes,
+            boundProperties);
+        this.parseAssignmentEvent(
+            bindParts[IDENT_BANANA_BOX_IDX], value, srcSpan, matchableAttributes, boundEvents);
+
+      } else if (bindParts[IDENT_PROPERTY_IDX]) {
+        this.bindingParser.parsePropertyBinding(
+            bindParts[IDENT_PROPERTY_IDX], value, false, srcSpan, matchableAttributes,
+            boundProperties);
+
+      } else if (bindParts[IDENT_EVENT_IDX]) {
+        const events: BoundEventAst[] = [];
+        this.bindingParser.parseEvent(
+            bindParts[IDENT_EVENT_IDX], value, srcSpan, matchableAttributes, events);
+        addEvents(events, boundEvents);
+      }
+    } else {
+      hasBinding = this.bindingParser.parsePropertyInterpolation(
+          name, value, srcSpan, matchableAttributes, boundProperties);
+    }
+
+    return hasBinding;
+  }
+
+
+  private parseVariable(
+      identifier: string, value: string, sourceSpan: ParseSourceSpan, variables: t.Variable[]) {
+    if (identifier.indexOf('-') > -1) {
+      this.reportError(`"-" is not allowed in variable names`, sourceSpan);
+    }
+    variables.push(new t.Variable(identifier, value, sourceSpan));
+  }
+
+  private parseReference(
+      identifier: string, value: string, sourceSpan: ParseSourceSpan, references: t.Reference[]) {
+    if (identifier.indexOf('-') > -1) {
+      this.reportError(`"-" is not allowed in reference names`, sourceSpan);
+    }
+
+    references.push(new t.Reference(identifier, value, sourceSpan));
+  }
+
+  private parseAssignmentEvent(
+      name: string, expression: string, sourceSpan: ParseSourceSpan,
+      targetMatchableAttrs: string[][], boundEvents: t.BoundEvent[]) {
+    const events: BoundEventAst[] = [];
+    this.bindingParser.parseEvent(
+        `${name}Change`, `${expression}=$event`, sourceSpan, targetMatchableAttrs, events);
+    addEvents(events, boundEvents);
+  }
+
+  private reportError(
+      message: string, sourceSpan: ParseSourceSpan,
+      level: ParseErrorLevel = ParseErrorLevel.ERROR) {
+    this.errors.push(new ParseError(sourceSpan, message, level));
+  }
+}
+
+class NonBindableVisitor implements html.Visitor {
+  visitElement(ast: html.Element): t.Element|null {
+    const preparsedElement = preparseElement(ast);
+    if (preparsedElement.type === PreparsedElementType.SCRIPT ||
+        preparsedElement.type === PreparsedElementType.STYLE ||
+        preparsedElement.type === PreparsedElementType.STYLESHEET) {
+      // Skipping <script> for security reasons
+      // Skipping <style> and stylesheets as we already processed them
+      // in the StyleCompiler
+      return null;
+    }
+
+    const children: t.Node[] = html.visitAll(this, ast.children, null);
+    return new t.Element(
+        ast.name, html.visitAll(this, ast.attrs) as t.TextAttribute[],
+        /* inputs */[], /* outputs */[], children,  /* references */[], ast.sourceSpan,
+        ast.startSourceSpan, ast.endSourceSpan);
+  }
+
+  visitComment(comment: html.Comment): any { return null; }
+
+  visitAttribute(attribute: html.Attribute): t.TextAttribute {
+    return new t.TextAttribute(attribute.name, attribute.value, attribute.sourceSpan);
+  }
+
+  visitText(text: html.Text): t.Text { return new t.Text(text.value, text.sourceSpan); }
+
+  visitExpansion(expansion: html.Expansion): any { return null; }
+
+  visitExpansionCase(expansionCase: html.ExpansionCase): any { return null; }
+}
+
+const NON_BINDABLE_VISITOR = new NonBindableVisitor();
+
+function normalizeAttributeName(attrName: string): string {
+  return /^data-/i.test(attrName) ? attrName.substring(5) : attrName;
+}
+
+function addEvents(events: BoundEventAst[], boundEvents: t.BoundEvent[]) {
+  boundEvents.push(
+      ...events.map(e => new t.BoundEvent(e.name, e.handler, e.target, e.phase, e.sourceSpan)));
+}
+
+function isEmptyTextNode(node: html.Node): boolean {
+  return node instanceof html.Text && node.value.trim().length == 0;
+}
diff --git a/packages/compiler/src/render3/r3_view_compiler.ts b/packages/compiler/src/render3/r3_view_compiler_local.ts
similarity index 69%
rename from packages/compiler/src/render3/r3_view_compiler.ts
rename to packages/compiler/src/render3/r3_view_compiler_local.ts
index fdbf069097..a3c9d78d72 100644
--- a/packages/compiler/src/render3/r3_view_compiler.ts
+++ b/packages/compiler/src/render3/r3_view_compiler_local.ts
@@ -6,23 +6,22 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {CompileDiDependencyMetadata, CompileDirectiveMetadata, CompileDirectiveSummary, CompilePipeSummary, CompileQueryMetadata, CompileTokenMetadata, CompileTypeMetadata, CompileTypeSummary, flatten, identifierName, rendererTypeName, sanitizeIdentifier, tokenReference, viewClassName} from '../compile_metadata';
+import {CompileDiDependencyMetadata, CompileDirectiveMetadata, CompileQueryMetadata, CompileTypeMetadata, flatten, identifierName, sanitizeIdentifier, tokenReference} from '../compile_metadata';
 import {CompileReflector} from '../compile_reflector';
-import {BindingForm, BuiltinConverter, BuiltinFunctionCall, ConvertPropertyBindingResult, EventHandlerVars, LocalResolver, convertActionBinding, convertPropertyBinding, convertPropertyBindingBuiltins} from '../compiler_util/expression_converter';
+import {BindingForm, BuiltinFunctionCall, LocalResolver, convertActionBinding, convertPropertyBinding} from '../compiler_util/expression_converter';
 import {ConstantPool, DefinitionKind} from '../constant_pool';
 import {InjectFlags} from '../core';
-import {AST, AstMemoryEfficientTransformer, AstTransformer, BindingPipe, FunctionCall, ImplicitReceiver, LiteralArray, LiteralMap, LiteralPrimitive, MethodCall, ParseSpan, PropertyRead} from '../expression_parser/ast';
+import {AST, AstMemoryEfficientTransformer, BindingPipe, FunctionCall, ImplicitReceiver, LiteralArray, LiteralMap, LiteralPrimitive, PropertyRead} from '../expression_parser/ast';
 import {Identifiers} from '../identifiers';
 import {LifecycleHooks} from '../lifecycle_reflector';
 import * as o from '../output/output_ast';
 import {ParseSourceSpan, typeSourceSpan} from '../parse_util';
-import {CssSelector} from '../selector';
+import {CssSelector, SelectorMatcher} from '../selector';
 import {BindingParser} from '../template_parser/binding_parser';
-import {AttrAst, BoundDirectivePropertyAst, BoundElementPropertyAst, BoundEventAst, BoundTextAst, DirectiveAst, ElementAst, EmbeddedTemplateAst, NgContentAst, PropertyBindingType, ProviderAst, QueryMatch, RecursiveTemplateAstVisitor, ReferenceAst, TemplateAst, TemplateAstVisitor, TextAst, VariableAst, templateVisitAll} from '../template_parser/template_ast';
 import {OutputContext, error} from '../util';
 
+import * as t from './r3_ast';
 import {Identifiers as R3} from './r3_identifiers';
-import {BUILD_OPTIMIZER_COLOCATE} from './r3_types';
 
 
 /** Name of the context parameter passed into a template function */
@@ -59,7 +58,7 @@ export function compileDirective(
     }
   };
 
-  // e.g. 'type: MyDirective`
+  // e.g. `type: MyDirective`
   field('type', outputCtx.importExpr(directive.type.reference));
 
   // e.g. `selectors: [['', 'someDir', '']]`
@@ -75,10 +74,10 @@ export function compileDirective(
   field('attributes', createHostAttributesArray(directive, outputCtx));
 
   // e.g 'inputs: {a: 'a'}`
-  field('inputs', conditionallyCreateMapObjectLiteral(directive.inputs, outputCtx));
+  field('inputs', conditionallyCreateMapObjectLiteral(directive.inputs));
 
   // e.g 'outputs: {a: 'a'}`
-  field('outputs', conditionallyCreateMapObjectLiteral(directive.outputs, outputCtx));
+  field('outputs', conditionallyCreateMapObjectLiteral(directive.outputs));
 
   const className = identifierName(directive.type) !;
   className || error(`Cannot resolver the name of ${directive.type}`);
@@ -89,34 +88,40 @@ export function compileDirective(
 
   // Create the partial class to be merged with the actual class.
   outputCtx.statements.push(new o.ClassStmt(
-      /* name */ className,
-      /* parent */ null,
-      /* fields */[new o.ClassField(
-          /* name */ definitionField,
-          /* type */ o.INFERRED_TYPE,
-          /* modifiers */[o.StmtModifier.Static],
-          /* initializer */ definitionFunction)],
-      /* getters */[],
-      /* constructorMethod */ new o.ClassMethod(null, [], []),
-      /* methods */[]));
+      className, null,
+      [new o.ClassField(
+          definitionField, o.INFERRED_TYPE, [o.StmtModifier.Static], definitionFunction)],
+      [], new o.ClassMethod(null, [], []), []));
 }
 
 export function compileComponent(
-    outputCtx: OutputContext, component: CompileDirectiveMetadata,
-    pipeSummaries: CompilePipeSummary[], template: TemplateAst[], reflector: CompileReflector,
-    bindingParser: BindingParser) {
+    outputCtx: OutputContext, component: CompileDirectiveMetadata, nodes: t.Node[],
+    hasNgContent: boolean, ngContentSelectors: string[], reflector: CompileReflector,
+    bindingParser: BindingParser, directiveTypeBySel: Map<string, any>,
+    pipeTypeByName: Map<string, any>) {
   const definitionMapValues: {key: string, quoted: boolean, value: o.Expression}[] = [];
 
-  // Pipes and Directives found in the template
-  const pipes = new Set<any>();
-  const directives = new Set<any>();
-
   const field = (key: string, value: o.Expression | null) => {
     if (value) {
       definitionMapValues.push({key, value, quoted: false});
     }
   };
 
+  // Generate the CSS matcher that recognize directive
+  let directiveMatcher: SelectorMatcher|null = null;
+
+  if (directiveTypeBySel.size) {
+    const matcher = new SelectorMatcher();
+    directiveTypeBySel.forEach((staticType: any, selector: string) => {
+      matcher.addSelectables(CssSelector.parse(selector), staticType);
+    });
+    directiveMatcher = matcher;
+  }
+
+  // Directives and Pipes used from the template
+  const directives = new Set<any>();
+  const pipes = new Set<any>();
+
   // e.g. `type: MyApp`
   field('type', outputCtx.importExpr(component.type.reference));
 
@@ -126,7 +131,7 @@ export function compileComponent(
   const selector = component.selector && CssSelector.parse(component.selector);
   const firstSelector = selector && selector[0];
 
-  // e.g. `attr: ["class", ".my.app"]
+  // e.g. `attr: ["class", ".my.app"]`
   // This is optional an only included if the first selector of a component specifies attributes.
   if (firstSelector) {
     const selectorAttributes = firstSelector.getAttrs();
@@ -148,14 +153,13 @@ export function compileComponent(
   // e.g. `template: function MyComponent_Template(_ctx, _cm) {...}`
   const templateTypeName = component.type.reference.name;
   const templateName = templateTypeName ? `${templateTypeName}_Template` : null;
-  const pipeMap =
-      new Map(pipeSummaries.map<[string, CompilePipeSummary]>(pipe => [pipe.name, pipe]));
+
   const templateFunctionExpression =
       new TemplateDefinitionBuilder(
           outputCtx, outputCtx.constantPool, reflector, CONTEXT_NAME, BindingScope.ROOT_SCOPE, 0,
-          component.template !.ngContentSelectors, templateTypeName, templateName, pipeMap,
-          component.viewQueries, directives, pipes)
-          .buildTemplateFunction(template, []);
+          templateTypeName, templateName, component.viewQueries, directiveMatcher, directives,
+          pipeTypeByName, pipes)
+          .buildTemplateFunction(nodes, [], hasNgContent, ngContentSelectors);
 
   field('template', templateFunctionExpression);
 
@@ -167,15 +171,15 @@ export function compileComponent(
 
   // e.g. `pipes: [MyPipe]`
   if (pipes.size) {
-    const expressions = Array.from(pipes).map(p => outputCtx.importExpr(p));
+    const expressions = Array.from(pipes).map(d => outputCtx.importExpr(d));
     field('pipes', o.literalArr(expressions));
   }
 
   // e.g `inputs: {a: 'a'}`
-  field('inputs', conditionallyCreateMapObjectLiteral(component.inputs, outputCtx));
+  field('inputs', conditionallyCreateMapObjectLiteral(component.inputs));
 
   // e.g 'outputs: {a: 'a'}`
-  field('outputs', conditionallyCreateMapObjectLiteral(component.outputs, outputCtx));
+  field('outputs', conditionallyCreateMapObjectLiteral(component.outputs));
 
   // e.g. `features: [NgOnChangesFeature(MyComponent)]`
   const features: o.Expression[] = [];
@@ -195,22 +199,10 @@ export function compileComponent(
 
   // Create the partial class to be merged with the actual class.
   outputCtx.statements.push(new o.ClassStmt(
-      /* name */ className,
-      /* parent */ null,
-      /* fields */[new o.ClassField(
-          /* name */ definitionField,
-          /* type */ o.INFERRED_TYPE,
-          /* modifiers */[o.StmtModifier.Static],
-          /* initializer */ definitionFunction)],
-      /* getters */[],
-      /* constructorMethod */ new o.ClassMethod(null, [], []),
-      /* methods */[]));
-}
-
-// TODO: Remove these when the things are fully supported
-function unknown<T>(arg: o.Expression | o.Statement | TemplateAst): never {
-  throw new Error(
-      `Builder ${this.constructor.name} is unable to handle ${arg.constructor.name} yet`);
+      className, null,
+      [new o.ClassField(
+          definitionField, o.INFERRED_TYPE, [o.StmtModifier.Static], definitionFunction)],
+      [], new o.ClassMethod(null, [], []), []));
 }
 
 function unsupported(feature: string): never {
@@ -220,11 +212,11 @@ function unsupported(feature: string): never {
   throw new Error(`Feature ${feature} is not supported yet`);
 }
 
-const BINDING_INSTRUCTION_MAP: {[index: number]: o.ExternalReference | undefined} = {
-  [PropertyBindingType.Property]: R3.elementProperty,
-  [PropertyBindingType.Attribute]: R3.elementAttribute,
-  [PropertyBindingType.Class]: R3.elementClassNamed,
-  [PropertyBindingType.Style]: R3.elementStyleNamed
+const BINDING_INSTRUCTION_MAP: {[type: number]: o.ExternalReference} = {
+  [t.PropertyBindingType.Property]: R3.elementProperty,
+  [t.PropertyBindingType.Attribute]: R3.elementAttribute,
+  [t.PropertyBindingType.Class]: R3.elementClassNamed,
+  [t.PropertyBindingType.Style]: R3.elementStyleNamed,
 };
 
 function interpolate(args: o.Expression[]): o.Expression {
@@ -252,20 +244,11 @@ function interpolate(args: o.Expression[]): o.Expression {
   return o.importExpr(R3.interpolationV).callFn([o.literalArr(args)]);
 }
 
+// Pipes always have at least one parameter, the value they operate on
+const pipeBindingIdentifiers = [R3.pipeBind1, R3.pipeBind2, R3.pipeBind3, R3.pipeBind4];
+
 function pipeBinding(args: o.Expression[]): o.ExternalReference {
-  switch (args.length) {
-    case 0:
-      // The first parameter to pipeBind is always the value to be transformed followed
-      // by arg.length arguments so the total number of arguments to pipeBind are
-      // arg.length + 1.
-      return R3.pipeBind1;
-    case 1:
-      return R3.pipeBind2;
-    case 2:
-      return R3.pipeBind3;
-    default:
-      return R3.pipeBindV;
-  }
+  return pipeBindingIdentifiers[args.length] || R3.pipeBindV;
 }
 
 const pureFunctionIdentifiers = [
@@ -384,6 +367,7 @@ class BindingScope implements LocalResolver {
  * subsequent runs only execute the update block. However, dynamically created views require that
  * the creation block be executed separately from the update block (for backwards compat).
  */
+// TODO(vicb): move to ../core
 export const enum RenderFlags {
   /* Whether to run the creation block (e.g. create elements and directives) */
   Create = 0b01,
@@ -392,21 +376,19 @@ export const enum RenderFlags {
   Update = 0b10
 }
 
-class TemplateDefinitionBuilder implements TemplateAstVisitor, LocalResolver {
+class TemplateDefinitionBuilder implements t.Visitor<void>, LocalResolver {
   private _dataIndex = 0;
   private _bindingContext = 0;
-  private _temporaryAllocated = false;
-  private _prefix: o.Statement[] = [];
-  private _creationMode: o.Statement[] = [];
-  private _variableMode: o.Statement[] = [];
-  private _bindingMode: o.Statement[] = [];
-  private _postfix: o.Statement[] = [];
-  private _contentProjections: Map<NgContentAst, NgContentInfo>;
-  private _projectionDefinitionIndex = 0;
+  private _prefixCode: o.Statement[] = [];
+  private _creationCode: o.Statement[] = [];
+  private _variableCode: o.Statement[] = [];
+  private _bindingCode: o.Statement[] = [];
+  private _postfixCode: o.Statement[] = [];
+  private _temporary = temporaryAllocator(this._prefixCode, TEMPORARY_NAME);
+  private _projectionDefinitionIndex = -1;
   private _valueConverter: ValueConverter;
-  private unsupported = unsupported;
-  private invalid = invalid;
-  private bindingScope: BindingScope;
+  private _unsupported = unsupported;
+  private _bindingScope: BindingScope;
 
   // Whether we are inside a translatable element (`<p i18n>... somewhere here ... </p>)
   private _inI18nSection: boolean = false;
@@ -417,68 +399,56 @@ class TemplateDefinitionBuilder implements TemplateAstVisitor, LocalResolver {
   constructor(
       private outputCtx: OutputContext, private constantPool: ConstantPool,
       private reflector: CompileReflector, private contextParameter: string,
-      parentBindingScope: BindingScope, private level = 0, private ngContentSelectors: string[],
-      private contextName: string|null, private templateName: string|null,
-      private pipeMap: Map<string, CompilePipeSummary>, private viewQueries: CompileQueryMetadata[],
-      private directives: Set<any>, private pipes: Set<any>) {
-    this.bindingScope =
+      parentBindingScope: BindingScope, private level = 0, private contextName: string|null,
+      private templateName: string|null, private viewQueries: CompileQueryMetadata[],
+      private directiveMatcher: SelectorMatcher|null, private directives: Set<any>,
+      private pipeTypeByName: Map<string, any>, private pipes: Set<any>) {
+    this._bindingScope =
         parentBindingScope.nestedScope((lhsVar: o.ReadVarExpr, expression: o.Expression) => {
-          this._bindingMode.push(
+          this._bindingCode.push(
               lhsVar.set(expression).toDeclStmt(o.INFERRED_TYPE, [o.StmtModifier.Final]));
         });
     this._valueConverter = new ValueConverter(
         outputCtx, () => this.allocateDataSlot(), (name, localName, slot, value: o.ReadVarExpr) => {
-          this.bindingScope.set(localName, value);
-          const pipe = pipeMap.get(name) !;
-          pipe || error(`Could not find pipe ${name}`);
-          this.pipes.add(pipe.type.reference);
-          this._creationMode.push(
+          const pipeType = pipeTypeByName.get(name);
+          if (pipeType) {
+            this.pipes.add(pipeType);
+          }
+          this._bindingScope.set(localName, value);
+          this._creationCode.push(
               o.importExpr(R3.pipe).callFn([o.literal(slot), o.literal(name)]).toStmt());
         });
   }
 
-  buildTemplateFunction(nodes: TemplateAst[], variables: VariableAst[]): o.FunctionExpr {
+  buildTemplateFunction(
+      nodes: t.Node[], variables: t.Variable[], hasNgContent: boolean = false,
+      ngContentSelectors: string[] = []): o.FunctionExpr {
     // Create variable bindings
     for (const variable of variables) {
       const variableName = variable.name;
       const expression =
           o.variable(this.contextParameter).prop(variable.value || IMPLICIT_REFERENCE);
-      const scopedName = this.bindingScope.freshReferenceName();
+      const scopedName = this._bindingScope.freshReferenceName();
       // Add the reference to the local scope.
-      this.bindingScope.set(variableName, o.variable(variableName + scopedName), expression);
+      this._bindingScope.set(variableName, o.variable(variableName + scopedName), expression);
     }
 
-    // Collect content projections
-    if (this.ngContentSelectors && this.ngContentSelectors.length > 0) {
-      const contentProjections = getContentProjection(nodes, this.ngContentSelectors);
-      this._contentProjections = contentProjections;
+    // Output a `ProjectionDef` instruction when some `<ng-content>` are present
+    if (hasNgContent) {
+      this._projectionDefinitionIndex = this.allocateDataSlot();
+      const parameters: o.Expression[] = [o.literal(this._projectionDefinitionIndex)];
 
-      if (contentProjections.size > 0) {
-        const selectors: string[] = [];
-
-        Array.from(contentProjections.values()).forEach(info => {
-          if (info.selector) {
-            selectors[info.index - 1] = info.selector;
-          }
-        });
-
-        const projectionIndex = this._projectionDefinitionIndex = this.allocateDataSlot();
-        const parameters: o.Expression[] = [o.literal(projectionIndex)];
-
-        if (selectors.some(value => !value)) {
-          error(`content project information skipped an index`);
-        }
-
-        if (selectors.length > 1) {
-          const r3Selectors = selectors.map(s => parseSelectorToR3Selector(s));
-          // `projectionDef` needs both the parsed and raw value of the selectors
-          const parsed = this.outputCtx.constantPool.getConstLiteral(asLiteral(r3Selectors), true);
-          const unParsed = this.outputCtx.constantPool.getConstLiteral(asLiteral(selectors), true);
-          parameters.push(parsed, unParsed);
-        }
-
-        this.instruction(this._creationMode, null, R3.projectionDef, ...parameters);
+      // Only selectors with a non-default value are generated
+      if (ngContentSelectors.length > 1) {
+        const r3Selectors = ngContentSelectors.map(s => parseSelectorToR3Selector(s));
+        // `projectionDef` needs both the parsed and raw value of the selectors
+        const parsed = this.outputCtx.constantPool.getConstLiteral(asLiteral(r3Selectors), true);
+        const unParsed =
+            this.outputCtx.constantPool.getConstLiteral(asLiteral(ngContentSelectors), true);
+        parameters.push(parsed, unParsed);
       }
+
+      this.instruction(this._creationCode, null, R3.projectionDef, ...parameters);
     }
 
     // Define and update any view queries
@@ -487,50 +457,50 @@ class TemplateDefinitionBuilder implements TemplateAstVisitor, LocalResolver {
       const querySlot = this.allocateDataSlot();
       const predicate = getQueryPredicate(query, this.outputCtx);
       const args = [
-        /* memoryIndex */ o.literal(querySlot, o.INFERRED_TYPE),
-        /* predicate */ predicate,
-        /* descend */ o.literal(query.descendants, o.INFERRED_TYPE)
+        o.literal(querySlot, o.INFERRED_TYPE),
+        predicate,
+        o.literal(query.descendants, o.INFERRED_TYPE),
       ];
 
       if (query.read) {
         args.push(this.outputCtx.importExpr(query.read.identifier !.reference));
       }
-      this.instruction(this._creationMode, null, R3.query, ...args);
+      this.instruction(this._creationCode, null, R3.query, ...args);
 
       // (r3.qR(tmp = r3.ɵld(0)) && (ctx.someDir = tmp));
-      const temporary = this.temp();
+      const temporary = this._temporary();
       const getQueryList = o.importExpr(R3.load).callFn([o.literal(querySlot)]);
       const refresh = o.importExpr(R3.queryRefresh).callFn([temporary.set(getQueryList)]);
       const updateDirective = o.variable(CONTEXT_NAME)
                                   .prop(query.propertyName)
                                   .set(query.first ? temporary.prop('first') : temporary);
-      this._bindingMode.push(refresh.and(updateDirective).toStmt());
+      this._bindingCode.push(refresh.and(updateDirective).toStmt());
     }
 
-    templateVisitAll(this, nodes);
+    t.visitAll(this, nodes);
 
-    const creationMode = this._creationMode.length > 0 ?
+    const creationCode = this._creationCode.length > 0 ?
         [o.ifStmt(
             o.variable(RENDER_FLAGS).bitwiseAnd(o.literal(RenderFlags.Create), null, false),
-            this._creationMode)] :
+            this._creationCode)] :
         [];
 
-    const updateMode = this._bindingMode.length > 0 ?
+    const updateCode = this._bindingCode.length > 0 ?
         [o.ifStmt(
             o.variable(RENDER_FLAGS).bitwiseAnd(o.literal(RenderFlags.Update), null, false),
-            this._bindingMode)] :
+            this._bindingCode)] :
         [];
 
     // Generate maps of placeholder name to node indexes
     // TODO(vicb): This is a WIP, not fully supported yet
     for (const phToNodeIdx of this._phToNodeIdxes) {
       if (Object.keys(phToNodeIdx).length > 0) {
-        const scopedName = this.bindingScope.freshReferenceName();
+        const scopedName = this._bindingScope.freshReferenceName();
         const phMap = o.variable(scopedName)
                           .set(mapToExpression(phToNodeIdx, true))
                           .toDeclStmt(o.INFERRED_TYPE, [o.StmtModifier.Final]);
 
-        this._prefix.push(phMap);
+        this._prefixCode.push(phMap);
       }
     }
 
@@ -538,42 +508,49 @@ class TemplateDefinitionBuilder implements TemplateAstVisitor, LocalResolver {
         [new o.FnParam(RENDER_FLAGS, o.NUMBER_TYPE), new o.FnParam(this.contextParameter, null)],
         [
           // Temporary variable declarations for query refresh (i.e. let _t: any;)
-          ...this._prefix,
+          ...this._prefixCode,
           // Creating mode (i.e. if (rf & RenderFlags.Create) { ... })
-          ...creationMode,
+          ...creationCode,
           // Temporary variable declarations for local refs (i.e. const tmp = ld(1) as any)
-          ...this._variableMode,
+          ...this._variableCode,
           // Binding and refresh mode (i.e. if (rf & RenderFlags.Update) {...})
-          ...updateMode,
+          ...updateCode,
           // Nested templates (i.e. function CompTemplate() {})
-          ...this._postfix
+          ...this._postfixCode
         ],
         o.INFERRED_TYPE, null, this.templateName);
   }
 
   // LocalResolver
-  getLocal(name: string): o.Expression|null { return this.bindingScope.get(name); }
+  getLocal(name: string): o.Expression|null { return this._bindingScope.get(name); }
 
-  // TemplateAstVisitor
-  visitNgContent(ngContent: NgContentAst) {
-    const info = this._contentProjections.get(ngContent);
-    if (!info) {
-      error(`Expected ${ngContent.sourceSpan} to be included in content projection collection`);
-    } else {
-      const slot = this.allocateDataSlot();
-      const parameters = [
-        o.literal(slot),
-        o.literal(this._projectionDefinitionIndex),
-      ];
-      if (info.index !== 0) {
-        parameters.push(o.literal(info.index));
+  visitContent(ngContent: t.Content) {
+    const slot = this.allocateDataSlot();
+    const selectorIndex = ngContent.selectorIndex;
+    const parameters: o.Expression[] = [
+      o.literal(slot),
+      o.literal(this._projectionDefinitionIndex),
+    ];
+
+    const attributeAsList: string[] = [];
+
+    ngContent.attributes.forEach((attribute) => {
+      const name = attribute.name;
+      if (name !== 'select') {
+        attributeAsList.push(name, attribute.value);
       }
-      this.instruction(this._creationMode, ngContent.sourceSpan, R3.projection, ...parameters);
+    });
+
+    if (attributeAsList.length > 0) {
+      parameters.push(o.literal(selectorIndex), asLiteral(attributeAsList));
+    } else if (selectorIndex !== 0) {
+      parameters.push(o.literal(selectorIndex));
     }
+
+    this.instruction(this._creationCode, ngContent.sourceSpan, R3.projection, ...parameters);
   }
 
-  // TemplateAstVisitor
-  visitElement(element: ElementAst) {
+  visitElement(element: t.Element) {
     const elementIndex = this.allocateDataSlot();
     const referenceDataSlots = new Map<string, number>();
     const wasInI18nSection = this._inI18nSection;
@@ -593,7 +570,7 @@ class TemplateDefinitionBuilder implements TemplateAstVisitor, LocalResolver {
     }
 
     // Handle i18n attributes
-    for (const attr of element.attrs) {
+    for (const attr of element.attributes) {
       const name = attr.name;
       const value = attr.value;
       if (name === I18N_ATTR) {
@@ -612,15 +589,19 @@ class TemplateDefinitionBuilder implements TemplateAstVisitor, LocalResolver {
       }
     }
 
+    // Match directives on non i18n attributes
+    if (this.directiveMatcher) {
+      const selector = createCssSelector(element.name, outputAttrs);
+      this.directiveMatcher.match(
+          selector, (sel: CssSelector, staticType: any) => { this.directives.add(staticType); });
+    }
+
     // Element creation mode
     const parameters: o.Expression[] = [
       o.literal(elementIndex),
       o.literal(element.name),
     ];
 
-    element.directives.forEach(
-        directive => this.directives.add(directive.directive.type.reference));
-
     // Add the attributes
     const i18nMessages: o.Statement[] = [];
     const attributes: o.Expression[] = [];
@@ -649,194 +630,173 @@ class TemplateDefinitionBuilder implements TemplateAstVisitor, LocalResolver {
     parameters.push(attrArg);
 
     if (element.references && element.references.length > 0) {
-      const references =
-          flatten(element.references.map(reference => {
-            const slot = this.allocateDataSlot();
-            referenceDataSlots.set(reference.name, slot);
-            // Generate the update temporary.
-            const variableName = this.bindingScope.freshReferenceName();
-            this._variableMode.push(o.variable(variableName, o.INFERRED_TYPE)
-                                        .set(o.importExpr(R3.load).callFn([o.literal(slot)]))
-                                        .toDeclStmt(o.INFERRED_TYPE, [o.StmtModifier.Final]));
-            this.bindingScope.set(reference.name, o.variable(variableName));
-            return [reference.name, reference.originalValue];
-          })).map(value => o.literal(value));
-      parameters.push(
-          this.constantPool.getConstLiteral(o.literalArr(references), /* forceShared */ true));
+      const references = flatten(element.references.map(reference => {
+        const slot = this.allocateDataSlot();
+        referenceDataSlots.set(reference.name, slot);
+        // Generate the update temporary.
+        const variableName = this._bindingScope.freshReferenceName();
+        this._variableCode.push(o.variable(variableName, o.INFERRED_TYPE)
+                                    .set(o.importExpr(R3.load).callFn([o.literal(slot)]))
+                                    .toDeclStmt(o.INFERRED_TYPE, [o.StmtModifier.Final]));
+        this._bindingScope.set(reference.name, o.variable(variableName));
+        return [reference.name, reference.value];
+      }));
+      parameters.push(this.constantPool.getConstLiteral(asLiteral(references), true));
     } else {
       parameters.push(o.TYPED_NULL_EXPR);
     }
 
     // Generate the instruction create element instruction
     if (i18nMessages.length > 0) {
-      this._creationMode.push(...i18nMessages);
+      this._creationCode.push(...i18nMessages);
     }
     this.instruction(
-        this._creationMode, element.sourceSpan, R3.createElement, ...trimTrailingNulls(parameters));
+        this._creationCode, element.sourceSpan, R3.createElement, ...trimTrailingNulls(parameters));
 
     const implicit = o.variable(CONTEXT_NAME);
 
     // Generate Listeners (outputs)
-    element.outputs.forEach((outputAst: BoundEventAst) => {
-      const functionName = `${this.templateName}_${element.name}_${outputAst.name}_listener`;
+    element.outputs.forEach((outputAst: t.BoundEvent) => {
+      const elName = sanitizeIdentifier(element.name);
+      const evName = sanitizeIdentifier(outputAst.name);
+      const functionName = `${this.templateName}_${elName}_${evName}_listener`;
       const localVars: o.Statement[] = [];
       const bindingScope =
-          this.bindingScope.nestedScope((lhsVar: o.ReadVarExpr, rhsExpression: o.Expression) => {
+          this._bindingScope.nestedScope((lhsVar: o.ReadVarExpr, rhsExpression: o.Expression) => {
             localVars.push(
                 lhsVar.set(rhsExpression).toDeclStmt(o.INFERRED_TYPE, [o.StmtModifier.Final]));
           });
       const bindingExpr = convertActionBinding(
-          bindingScope, o.variable(CONTEXT_NAME), outputAst.handler, 'b',
-          () => error('Unexpected interpolation'));
+          bindingScope, implicit, outputAst.handler, 'b', () => error('Unexpected interpolation'));
       const handler = o.fn(
           [new o.FnParam('$event', o.DYNAMIC_TYPE)], [...localVars, ...bindingExpr.render3Stmts],
           o.INFERRED_TYPE, null, functionName);
       this.instruction(
-          this._creationMode, outputAst.sourceSpan, R3.listener, o.literal(outputAst.name),
+          this._creationCode, outputAst.sourceSpan, R3.listener, o.literal(outputAst.name),
           handler);
     });
 
 
     // Generate element input bindings
-    for (let input of element.inputs) {
-      if (input.isAnimation) {
-        this.unsupported('animations');
+    element.inputs.forEach((input: t.BoundAttribute) => {
+      if (input.type === t.PropertyBindingType.Animation) {
+        this._unsupported('animations');
       }
       const convertedBinding = this.convertPropertyBinding(implicit, input.value);
       const instruction = BINDING_INSTRUCTION_MAP[input.type];
       if (instruction) {
         // TODO(chuckj): runtime: security context?
+        const value = o.importExpr(R3.bind).callFn([convertedBinding]);
         this.instruction(
-            this._bindingMode, input.sourceSpan, instruction, o.literal(elementIndex),
-            o.literal(input.name), o.importExpr(R3.bind).callFn([convertedBinding]));
+            this._bindingCode, input.sourceSpan, instruction, o.literal(elementIndex),
+            o.literal(input.name), value);
       } else {
-        this.unsupported(`binding ${PropertyBindingType[input.type]}`);
+        this._unsupported(`binding ${t.PropertyBindingType[input.type]}`);
       }
-    }
-
-    // Generate directives input bindings
-    this._visitDirectives(element.directives, implicit, elementIndex);
+    });
 
     // Traverse element child nodes
     if (this._inI18nSection && element.children.length == 1 &&
-        element.children[0] instanceof TextAst) {
-      const text = element.children[0] as TextAst;
+        element.children[0] instanceof t.Text) {
+      const text = element.children[0] as t.Text;
       this.visitSingleI18nTextChild(text, i18nMeta);
     } else {
-      templateVisitAll(this, element.children);
+      t.visitAll(this, element.children);
     }
 
     // Finish element construction mode.
     this.instruction(
-        this._creationMode, element.endSourceSpan || element.sourceSpan, R3.elementEnd);
+        this._creationCode, element.endSourceSpan || element.sourceSpan, R3.elementEnd);
 
     // Restore the state before exiting this node
     this._inI18nSection = wasInI18nSection;
   }
 
-  private _visitDirectives(directives: DirectiveAst[], implicit: o.Expression, nodeIndex: number) {
-    for (let directive of directives) {
-      // Creation mode
-      // e.g. D(0, TodoComponentDef.n(), TodoComponentDef);
-      const directiveType = directive.directive.type.reference;
-      const kind =
-          directive.directive.isComponent ? DefinitionKind.Component : DefinitionKind.Directive;
-
-      // Note: *do not cache* calls to this.directiveOf() as the constant pool needs to know if the
-      // node is referenced multiple times to know that it must generate the reference into a
-      // temporary.
-
-      // Bindings
-      for (const input of directive.inputs) {
-        const convertedBinding = this.convertPropertyBinding(implicit, input.value);
-        this.instruction(
-            this._bindingMode, directive.sourceSpan, R3.elementProperty, o.literal(nodeIndex),
-            o.literal(input.templateName), o.importExpr(R3.bind).callFn([convertedBinding]));
-      }
-    }
-  }
-
-  // TemplateAstVisitor
-  visitEmbeddedTemplate(template: EmbeddedTemplateAst) {
+  visitTemplate(template: t.Template) {
     const templateIndex = this.allocateDataSlot();
 
-    const templateRef = this.reflector.resolveExternalReference(Identifiers.TemplateRef);
-    const templateDirective = template.directives.find(
-        directive => directive.directive.type.diDeps.some(
-            dependency =>
-                dependency.token != null && (tokenReference(dependency.token) == templateRef)));
-    const contextName =
-        this.contextName && templateDirective && templateDirective.directive.type.reference.name ?
-        `${this.contextName}_${templateDirective.directive.type.reference.name}` :
-        null;
+    let elName = '';
+    if (template.children.length === 1 && template.children[0] instanceof t.Element) {
+      // When the template as a single child, derive the context name from the tag
+      elName = sanitizeIdentifier((template.children[0] as t.Element).name);
+    }
+
+    const contextName = elName ? `${this.contextName}_${elName}` : '';
+
     const templateName =
         contextName ? `${contextName}_Template_${templateIndex}` : `Template_${templateIndex}`;
+
     const templateContext = `ctx${this.level}`;
 
-    const parameters: o.Expression[] = [o.variable(templateName), o.literal(null, o.INFERRED_TYPE)];
-    const attributeNames: o.Expression[] = [];
-    template.directives.forEach((directiveAst: DirectiveAst) => {
-      this.directives.add(directiveAst.directive.type.reference);
-      CssSelector.parse(directiveAst.directive.selector !).forEach(selector => {
-        selector.attrs.forEach((value) => {
-          // Convert '' (falsy) strings into `null`. This is needed because we want
-          // to communicate to runtime that these attributes are present for
-          // selector matching, but should not actually be added to the DOM.
-          // attributeNames.push(o.literal(value ? value : null));
+    const parameters: o.Expression[] = [
+      o.literal(templateIndex),
+      o.variable(templateName),
+      o.TYPED_NULL_EXPR,
+    ];
 
-          // TODO(misko): make the above comment true, for now just write to DOM because
-          // the runtime selectors have not been updated.
-          attributeNames.push(o.literal(value));
-        });
-      });
+    const attributeNames: o.Expression[] = [];
+    const attributeMap: {[name: string]: string} = {};
+
+    template.attributes.forEach(a => {
+      attributeNames.push(asLiteral(a.name), asLiteral(''));
+      attributeMap[a.name] = a.value;
     });
+
+    // Match directives on template attributes
+    if (this.directiveMatcher) {
+      const selector = createCssSelector('ng-template', attributeMap);
+      this.directiveMatcher.match(
+          selector, (cssSelector, staticType) => { this.directives.add(staticType); });
+    }
+
     if (attributeNames.length) {
-      parameters.push(
-          this.constantPool.getConstLiteral(o.literalArr(attributeNames), /* forcedShared */ true));
+      parameters.push(this.constantPool.getConstLiteral(o.literalArr(attributeNames), true));
     }
 
     // e.g. C(1, C1Template)
     this.instruction(
-        this._creationMode, template.sourceSpan, R3.containerCreate, o.literal(templateIndex),
+        this._creationCode, template.sourceSpan, R3.containerCreate,
         ...trimTrailingNulls(parameters));
 
-    // Generate directives
-    this._visitDirectives(template.directives, o.variable(CONTEXT_NAME), templateIndex);
+    // e.g. p(1, 'forOf', ɵb(ctx.items));
+    const context = o.variable(CONTEXT_NAME);
+    template.inputs.forEach(input => {
+      const convertedBinding = this.convertPropertyBinding(context, input.value);
+      this.instruction(
+          this._bindingCode, template.sourceSpan, R3.elementProperty, o.literal(templateIndex),
+          o.literal(input.name), o.importExpr(R3.bind).callFn([convertedBinding]));
+    });
 
     // Create the template function
     const templateVisitor = new TemplateDefinitionBuilder(
-        this.outputCtx, this.constantPool, this.reflector, templateContext, this.bindingScope,
-        this.level + 1, this.ngContentSelectors, contextName, templateName, this.pipeMap, [],
-        this.directives, this.pipes);
+        this.outputCtx, this.constantPool, this.reflector, templateContext, this._bindingScope,
+        this.level + 1, contextName, templateName, [], this.directiveMatcher, this.directives,
+        this.pipeTypeByName, this.pipes);
     const templateFunctionExpr =
         templateVisitor.buildTemplateFunction(template.children, template.variables);
-    this._postfix.push(templateFunctionExpr.toDeclStmt(templateName, null));
+    this._postfixCode.push(templateFunctionExpr.toDeclStmt(templateName, null));
   }
 
   // These should be handled in the template or element directly.
   readonly visitReference = invalid;
   readonly visitVariable = invalid;
-  readonly visitEvent = invalid;
-  readonly visitElementProperty = invalid;
-  readonly visitAttr = invalid;
+  readonly visitAttribute = invalid;
+  readonly visitBoundAttribute = invalid;
+  readonly visitBoundEvent = invalid;
 
-  // TemplateAstVisitor
-  visitBoundText(text: BoundTextAst) {
+  visitBoundText(text: t.BoundText) {
     const nodeIndex = this.allocateDataSlot();
 
-    // Creation mode
-    this.instruction(this._creationMode, text.sourceSpan, R3.text, o.literal(nodeIndex));
+    this.instruction(this._creationCode, text.sourceSpan, R3.text, o.literal(nodeIndex));
 
     this.instruction(
-        this._bindingMode, text.sourceSpan, R3.textCreateBound, o.literal(nodeIndex),
+        this._bindingCode, text.sourceSpan, R3.textCreateBound, o.literal(nodeIndex),
         this.convertPropertyBinding(o.variable(CONTEXT_NAME), text.value));
   }
 
-  // TemplateAstVisitor
-  visitText(text: TextAst) {
-    // Text is defined in creation mode only.
+  visitText(text: t.Text) {
     this.instruction(
-        this._creationMode, text.sourceSpan, R3.text, o.literal(this.allocateDataSlot()),
+        this._creationCode, text.sourceSpan, R3.text, o.literal(this.allocateDataSlot()),
         o.literal(text.value));
   }
 
@@ -852,17 +812,13 @@ class TemplateDefinitionBuilder implements TemplateAstVisitor, LocalResolver {
   // const MSG_XYZ = goog.getMsg('some content');
   // i0.ɵT(1, MSG_XYZ);
   // ```
-  visitSingleI18nTextChild(text: TextAst, i18nMeta: string) {
+  visitSingleI18nTextChild(text: t.Text, i18nMeta: string) {
     const meta = parseI18nMeta(i18nMeta);
     const variable = this.constantPool.getTranslation(text.value, meta);
     this.instruction(
-        this._creationMode, text.sourceSpan, R3.text, o.literal(this.allocateDataSlot()), variable);
+        this._creationCode, text.sourceSpan, R3.text, o.literal(this.allocateDataSlot()), variable);
   }
 
-  // These should be handled in the template or element directly
-  readonly visitDirective = invalid;
-  readonly visitDirectiveProperty = invalid;
-
   private allocateDataSlot() { return this._dataIndex++; }
   private bindingContext() { return `${this._bindingContext++}`; }
 
@@ -872,24 +828,12 @@ class TemplateDefinitionBuilder implements TemplateAstVisitor, LocalResolver {
     statements.push(o.importExpr(reference, null, span).callFn(params, span).toStmt());
   }
 
-  private definitionOf(type: any, kind: DefinitionKind): o.Expression {
-    return this.constantPool.getDefinition(type, kind, this.outputCtx);
-  }
-
-  private temp(): o.ReadVarExpr {
-    if (!this._temporaryAllocated) {
-      this._prefix.push(new o.DeclareVarStmt(TEMPORARY_NAME, undefined, o.DYNAMIC_TYPE));
-      this._temporaryAllocated = true;
-    }
-    return o.variable(TEMPORARY_NAME);
-  }
-
   private convertPropertyBinding(implicit: o.Expression, value: AST): o.Expression {
     const pipesConvertedValue = value.visit(this._valueConverter);
     const convertedPropertyBinding = convertPropertyBinding(
         this, implicit, pipesConvertedValue, this.bindingContext(), BindingForm.TrySimple,
         interpolate);
-    this._bindingMode.push(...convertedPropertyBinding.stmts);
+    this._bindingCode.push(...convertedPropertyBinding.stmts);
     return convertedPropertyBinding.currValExpr;
   }
 }
@@ -956,9 +900,9 @@ export function createFactory(
 
     // e.g. r3.Q(null, somePredicate, false) or r3.Q(null, ['div'], false)
     const parameters = [
-      /* memoryIndex */ o.literal(null, o.INFERRED_TYPE),
-      /* predicate */ predicate,
-      /* descend */ o.literal(query.descendants)
+      o.literal(null, o.INFERRED_TYPE),
+      predicate,
+      o.literal(query.descendants),
     ];
 
     if (query.read) {
@@ -1007,10 +951,6 @@ function trimTrailingNulls(parameters: o.Expression[]): o.Expression[] {
   return parameters;
 }
 
-type HostBindings = {
-  [key: string]: string
-};
-
 // Turn a directive selector into an R3-compatible selector for directive def
 function createDirectiveSelector(selector: string): o.Expression {
   return asLiteral(parseSelectorToR3Selector(selector));
@@ -1036,16 +976,7 @@ function createHostBindingsFunction(
     bindingParser: BindingParser): o.Expression|null {
   const statements: o.Statement[] = [];
 
-  const temporary = function() {
-    let declared = false;
-    return () => {
-      if (!declared) {
-        statements.push(new o.DeclareVarStmt(TEMPORARY_NAME, undefined, o.DYNAMIC_TYPE));
-        declared = true;
-      }
-      return o.variable(TEMPORARY_NAME);
-    };
-  }();
+  const temporary = temporaryAllocator(statements, TEMPORARY_NAME);
 
   const hostBindingSourceSpan = typeSourceSpan(
       directiveMetadata.isComponent ? 'Component' : 'Directive', directiveMetadata.type);
@@ -1080,8 +1011,9 @@ function createHostBindingsFunction(
       statements.push(...bindingExpr.stmts);
       statements.push(o.importExpr(R3.elementProperty)
                           .callFn([
-                            o.variable('elIndex'), o.literal(binding.name),
-                            o.importExpr(R3.bind).callFn([bindingExpr.currValExpr])
+                            o.variable('elIndex'),
+                            o.literal(binding.name),
+                            o.importExpr(R3.bind).callFn([bindingExpr.currValExpr]),
                           ])
                           .toStmt());
     }
@@ -1107,27 +1039,20 @@ function createHostBindingsFunction(
     }
   }
 
-
   if (statements.length > 0) {
     const typeName = directiveMetadata.type.reference.name;
     return o.fn(
-        [new o.FnParam('dirIndex', o.NUMBER_TYPE), new o.FnParam('elIndex', o.NUMBER_TYPE)],
+        [
+          new o.FnParam('dirIndex', o.NUMBER_TYPE),
+          new o.FnParam('elIndex', o.NUMBER_TYPE),
+        ],
         statements, o.INFERRED_TYPE, null, typeName ? `${typeName}_HostBindings` : null);
   }
 
   return null;
 }
 
-function conditionallyCreateMapObjectLiteral(
-    keys: {[key: string]: string}, outputCtx: OutputContext): o.Expression|null {
-  if (Object.getOwnPropertyNames(keys).length > 0) {
-    return mapToExpression(keys);
-  }
-  return null;
-}
-
 class ValueConverter extends AstMemoryEfficientTransformer {
-  private pipeSlots = new Map<string, number>();
   constructor(
       private outputCtx: OutputContext, private allocateSlot: () => number,
       private definePipe:
@@ -1176,50 +1101,16 @@ class ValueConverter extends AstMemoryEfficientTransformer {
   }
 }
 
-function invalid<T>(arg: o.Expression | o.Statement | TemplateAst): never {
+function invalid<T>(arg: o.Expression | o.Statement | t.Node): never {
   throw new Error(
       `Invalid state: Visitor ${this.constructor.name} doesn't handle ${o.constructor.name}`);
 }
 
-interface NgContentInfo {
-  index: number;
-  selector?: string;
-}
-
-class ContentProjectionVisitor extends RecursiveTemplateAstVisitor {
-  private index = 1;
-  constructor(
-      private projectionMap: Map<NgContentAst, NgContentInfo>,
-      private ngContentSelectors: string[]) {
-    super();
-  }
-
-  visitNgContent(ngContent: NgContentAst) {
-    const selector = this.ngContentSelectors[ngContent.index];
-    if (selector == null) {
-      error(`could not find selector for index ${ngContent.index} in ${ngContent}`);
-    }
-
-    if (!selector || selector === '*') {
-      this.projectionMap.set(ngContent, {index: 0});
-    } else {
-      this.projectionMap.set(ngContent, {index: this.index++, selector});
-    }
-  }
-}
-
-function getContentProjection(nodes: TemplateAst[], ngContentSelectors: string[]) {
-  const projectIndexMap = new Map<NgContentAst, NgContentInfo>();
-  const visitor = new ContentProjectionVisitor(projectIndexMap, ngContentSelectors);
-  templateVisitAll(visitor, nodes);
-  return projectIndexMap;
-}
-
-
 /**
  * Flags used to generate R3-style CSS Selectors. They are pasted from
  * core/src/render3/projection.ts because they cannot be referenced directly.
  */
+// TODO(vicb): move to ../core
 const enum SelectorFlags {
   /** Indicates this is the beginning of a new negative selector */
   NOT = 0b0001,
@@ -1236,6 +1127,7 @@ const enum SelectorFlags {
 
 // These are a copy the CSS types from core/src/render3/interfaces/projection.ts
 // They are duplicated here as they cannot be directly referenced from core.
+// TODO(vicb): move to ../core
 type R3CssSelector = (string | SelectorFlags)[];
 type R3CssSelectorList = R3CssSelector[];
 
@@ -1287,11 +1179,34 @@ function asLiteral(value: any): o.Expression {
   return o.literal(value, o.INFERRED_TYPE);
 }
 
+function conditionallyCreateMapObjectLiteral(keys: {[key: string]: string}): o.Expression|null {
+  if (Object.getOwnPropertyNames(keys).length > 0) {
+    return mapToExpression(keys);
+  }
+  return null;
+}
+
 function mapToExpression(map: {[key: string]: any}, quoted = false): o.Expression {
   return o.literalMap(
       Object.getOwnPropertyNames(map).map(key => ({key, quoted, value: asLiteral(map[key])})));
 }
 
+/**
+ * Creates an allocator for a temporary variable.
+ *
+ * A variable declaration is added to the statements the first time the allocator is invoked.
+ */
+function temporaryAllocator(statements: o.Statement[], name: string): () => o.ReadVarExpr {
+  let temp: o.ReadVarExpr|null = null;
+  return () => {
+    if (!temp) {
+      statements.push(new o.DeclareVarStmt(TEMPORARY_NAME, undefined, o.DYNAMIC_TYPE));
+      temp = o.variable(name);
+    }
+    return temp;
+  };
+}
+
 // Parse i18n metas like:
 // - "@@id",
 // - "description[@@id]",
@@ -1316,3 +1231,24 @@ function parseI18nMeta(i18n?: string): {description?: string, id?: string, meani
 
   return {description, id, meaning};
 }
+
+/**
+ * Creates a `CssSelector` given a tag name and a map of attributes
+ */
+function createCssSelector(tag: string, attributes: {[name: string]: string}): CssSelector {
+  const cssSelector = new CssSelector();
+
+  cssSelector.setElement(tag);
+
+  Object.getOwnPropertyNames(attributes).forEach((name) => {
+    const value = attributes[name];
+
+    cssSelector.addAttribute(name, value);
+    if (name.toLowerCase() === 'class') {
+      const classes = value.trim().split(/\s+/g);
+      classes.forEach(className => cssSelector.addClassName(className));
+    }
+  });
+
+  return cssSelector;
+}
diff --git a/packages/compiler/src/template_parser/binding_parser.ts b/packages/compiler/src/template_parser/binding_parser.ts
index a69acdd355..3e71c4f5f5 100644
--- a/packages/compiler/src/template_parser/binding_parser.ts
+++ b/packages/compiler/src/template_parser/binding_parser.ts
@@ -51,14 +51,20 @@ export class BoundProperty {
  * Parses bindings in templates and in the directive host area.
  */
 export class BindingParser {
-  pipesByName: Map<string, CompilePipeSummary> = new Map();
+  pipesByName: Map<string, CompilePipeSummary>|null = null;
   private _usedPipes: Map<string, CompilePipeSummary> = new Map();
 
   constructor(
       private _exprParser: Parser, private _interpolationConfig: InterpolationConfig,
-      private _schemaRegistry: ElementSchemaRegistry, pipes: CompilePipeSummary[],
+      private _schemaRegistry: ElementSchemaRegistry, pipes: CompilePipeSummary[]|null,
       private _targetErrors: ParseError[]) {
-    pipes.forEach(pipe => this.pipesByName.set(pipe.name, pipe));
+    // When the `pipes` parameter is `null`, do not check for used pipes
+    // This is used in IVY when we might not know the available pipes at compile time
+    if (pipes) {
+      const pipesByName: Map<string, CompilePipeSummary> = new Map();
+      pipes.forEach(pipe => pipesByName.set(pipe.name, pipe));
+      this.pipesByName = pipesByName;
+    }
   }
 
   getUsedPipes(): CompilePipeSummary[] { return Array.from(this._usedPipes.values()); }
@@ -390,11 +396,11 @@ export class BindingParser {
 
   // Make sure all the used pipes are known in `this.pipesByName`
   private _checkPipes(ast: ASTWithSource, sourceSpan: ParseSourceSpan): void {
-    if (ast) {
+    if (ast && this.pipesByName) {
       const collector = new PipeCollector();
       ast.visit(collector);
       collector.pipes.forEach((ast, pipeName) => {
-        const pipeMeta = this.pipesByName.get(pipeName);
+        const pipeMeta = this.pipesByName !.get(pipeName);
         if (!pipeMeta) {
           this._reportError(
               `The pipe '${pipeName}' could not be found`,
diff --git a/packages/compiler/test/render3/mock_compile.ts b/packages/compiler/test/render3/mock_compile.ts
index b911d87e97..58c570b377 100644
--- a/packages/compiler/test/render3/mock_compile.ts
+++ b/packages/compiler/test/render3/mock_compile.ts
@@ -22,6 +22,7 @@ import {BindingParser} from '../../src/template_parser/binding_parser';
 import {OutputContext, escapeRegExp} from '../../src/util';
 import {MockAotCompilerHost, MockCompilerHost, MockData, MockDirectory, arrayToMockDir, expectNoDiagnostics, settings, toMockFileArray} from '../aot/test_util';
 
+
 const IDENTIFIER = /[A-Za-z_$ɵ][A-Za-z0-9_$]*/;
 const OPERATOR =
     /!|%|\*|\/|\^|&&?|\|\|?|\(|\)|\{|\}|\[|\]|:|;|<=?|>=?|={1,3}|!==?|=>|\+\+?|--?|@|,|\.|\.\.\./;
@@ -235,7 +236,7 @@ function doCompile(
   const errors: ParseError[] = [];
 
   const hostBindingParser = new BindingParser(
-      expressionParser, DEFAULT_INTERPOLATION_CONFIG, elementSchemaRegistry, [], errors);
+      expressionParser, DEFAULT_INTERPOLATION_CONFIG, elementSchemaRegistry, null, errors);
 
   // Load all directives and pipes
   for (const pipeOrDirective of pipesOrDirectives) {
@@ -278,22 +279,45 @@ export function compile(
             continue;
           }
           if (resolver.isDirective(pipeOrDirective)) {
-            const metadata = resolver.getDirectiveMetadata(pipeOrDirective);
-            if (metadata.isComponent) {
+            const directive = resolver.getDirectiveMetadata(pipeOrDirective);
+            if (directive.isComponent) {
               const fakeUrl = 'ng://fake-template-url.html';
-              const htmlAst = htmlParser.parse(metadata.template !.template !, fakeUrl);
+              let htmlAst = htmlParser.parse(directive.template !.template !, fakeUrl);
+
+              // Map of StaticType by directive selectors
+              const directiveTypeBySel = new Map<string, any>();
 
               const directives = module.transitiveModule.directives.map(
                   dir => resolver.getDirectiveSummary(dir.reference));
+
+              directives.forEach(directive => {
+                if (directive.selector) {
+                  directiveTypeBySel.set(directive.selector, directive.type.reference);
+                }
+              });
+
+              // Map of StaticType by pipe names
+              const pipeTypeByName = new Map<string, any>();
+
               const pipes = module.transitiveModule.pipes.map(
                   pipe => resolver.getPipeSummary(pipe.reference));
-              const parsedTemplate = templateParser.parse(
-                  metadata, htmlAst, directives, pipes, module.schemas, fakeUrl, false);
+
+              pipes.forEach(pipe => { pipeTypeByName.set(pipe.name, pipe.type.reference); });
+
+              const preserveWhitespaces = directive.template !.preserveWhitespaces;
+              if (!preserveWhitespaces) {
+                htmlAst = removeWhitespaces(htmlAst);
+              }
+              const transform = new HtmlToTemplateTransform(hostBindingParser);
+              const nodes = html.visitAll(transform, htmlAst.rootNodes, null);
+              const hasNgContent = transform.hasNgContent;
+              const ngContentSelectors = transform.ngContentSelectors;
+
               compileComponent(
-                  outputCtx, metadata, pipes, parsedTemplate.template, reflector, hostBindingParser);
+                  outputCtx, directive, nodes, hasNgContent, ngContentSelectors, reflector,
+                  hostBindingParser, directiveTypeBySel, pipeTypeByName);
             } else {
-              compileDirective(
-                  outputCtx, metadata, reflector, hostBindingParser);
+              compileDirective(outputCtx, directive, reflector, hostBindingParser);
             }
           } else if (resolver.isPipe(pipeOrDirective)) {
             const metadata = resolver.getPipeMetadata(pipeOrDirective);
diff --git a/packages/compiler/test/render3/r3_compiler_compliance_spec.ts b/packages/compiler/test/render3/r3_compiler_compliance_spec.ts
index b70388795d..41c19bc162 100644
--- a/packages/compiler/test/render3/r3_compiler_compliance_spec.ts
+++ b/packages/compiler/test/render3/r3_compiler_compliance_spec.ts
@@ -344,11 +344,11 @@ describe('compiler compliance', () => {
           template: function MyComponent_Template(rf: IDENT, ctx: IDENT) {
             if (rf & 1) {
               $r3$.ɵE(0, 'ul', null, $c1$);
-              $r3$.ɵC(2, MyComponent_IfDirective_Template_2, null, $c2$);
+              $r3$.ɵC(2, MyComponent_li_Template_2, null, $c2$);
               $r3$.ɵe();
             }
             const $foo$ = $r3$.ɵld(1);
-            function MyComponent_IfDirective_Template_2(rf: IDENT, ctx0: IDENT) {
+            function MyComponent_li_Template_2(rf: IDENT, ctx0: IDENT) {
               if (rf & 1) {
                 $r3$.ɵE(0, 'li');
                 $r3$.ɵT(1);
@@ -359,7 +359,7 @@ describe('compiler compliance', () => {
               }
             }
           },
-          directives: [IfDirective]
+          directives:[IfDirective]
         });`;
 
       const result = compile(files, angularFiles);
@@ -420,7 +420,7 @@ describe('compiler compliance', () => {
                 $r3$.ɵp(0, 'names', $r3$.ɵb($r3$.ɵf1($e0_ff$, ctx.customName)));
               }
             },
-            directives: [MyComp]
+           directives: [MyComp]
           });
         `;
 
@@ -1147,7 +1147,7 @@ describe('compiler compliance', () => {
         `;
 
         const MyComponentDefinition = `
-          const $_c0$ = ['forOf',''];
+          const $_c0$ = ['for','','forOf',''];
           …
           static ngComponentDef = $r3$.ɵdefineComponent({
             type: MyComponent,
@@ -1156,14 +1156,14 @@ describe('compiler compliance', () => {
             template: function MyComponent_Template(rf: IDENT, ctx: IDENT) {
               if (rf & 1) {
                 $r3$.ɵE(0, 'ul');
-                $r3$.ɵC(1, MyComponent_ForOfDirective_Template_1, null, $_c0$);
+                $r3$.ɵC(1, MyComponent_li_Template_1, null, $_c0$);
                 $r3$.ɵe();
               }
               if (rf & 2) {
                 $r3$.ɵp(1, 'forOf', $r3$.ɵb(ctx.items));
               }
 
-              function MyComponent_ForOfDirective_Template_1(rf: IDENT, ctx0: IDENT) {
+              function MyComponent_li_Template_1(rf: IDENT, ctx0: IDENT) {
                 if (rf & 1) {
                   $r3$.ɵE(0, 'li');
                   $r3$.ɵT(1);
@@ -1225,7 +1225,7 @@ describe('compiler compliance', () => {
         };
 
         const MyComponentDefinition = `
-          const $c1$ = ['forOf', ''];
+          const $c1$ = ['for', '', 'forOf', ''];
           …
           static ngComponentDef = $r3$.ɵdefineComponent({
             type: MyComponent,
@@ -1234,21 +1234,21 @@ describe('compiler compliance', () => {
             template: function MyComponent_Template(rf: IDENT, ctx: IDENT) {
               if (rf & 1) {
                 $r3$.ɵE(0, 'ul');
-                $r3$.ɵC(1, MyComponent_ForOfDirective_Template_1, null, $c1$);
+                $r3$.ɵC(1, MyComponent_li_Template_1, null, $c1$);
                 $r3$.ɵe();
               }
               if (rf & 2) {
                 $r3$.ɵp(1, 'forOf', $r3$.ɵb(ctx.items));
               }
 
-              function MyComponent_ForOfDirective_Template_1(rf: IDENT, ctx0: IDENT) {
+              function MyComponent_li_Template_1(rf: IDENT, ctx0: IDENT) {
                 if (rf & 1) {
                   $r3$.ɵE(0, 'li');
                   $r3$.ɵE(1, 'div');
                   $r3$.ɵT(2);
                   $r3$.ɵe();
                   $r3$.ɵE(3, 'ul');
-                  $r3$.ɵC(4, MyComponent_ForOfDirective_ForOfDirective_Template_4, null, $c1$);
+                  $r3$.ɵC(4, MyComponent_li_li_Template_4, null, $c1$);
                   $r3$.ɵe();
                   $r3$.ɵe();
                 }
@@ -1258,8 +1258,7 @@ describe('compiler compliance', () => {
                   $r3$.ɵp(4, 'forOf', $r3$.ɵb(IDENT.infos));
                 }
 
-                function MyComponent_ForOfDirective_ForOfDirective_Template_4(
-                    rf: IDENT, ctx1: IDENT) {
+                function MyComponent_li_li_Template_4(rf: IDENT, ctx1: IDENT) {
                   if (rf & 1) {
                     $r3$.ɵE(0, 'li');
                     $r3$.ɵT(1);
diff --git a/packages/compiler/test/render3/r3_view_compiler_input_outputs_spec.ts b/packages/compiler/test/render3/r3_view_compiler_input_outputs_spec.ts
index 0f613fd963..ad101293d3 100644
--- a/packages/compiler/test/render3/r3_view_compiler_input_outputs_spec.ts
+++ b/packages/compiler/test/render3/r3_view_compiler_input_outputs_spec.ts
@@ -51,8 +51,7 @@ describe('compiler compliance: listen()', () => {
       }
     };
 
-    // The template should look like this (where IDENT is a wild card for an identifier):
-    const template = `
+    const componentDef = `
       static ngComponentDef = IDENT.ɵdefineComponent({
           …
           inputs:{
@@ -63,9 +62,10 @@ describe('compiler compliance: listen()', () => {
             componentOutput: 'componentOutput',
             originalComponentOutput: 'renamedComponentOutput'
           }
-        });
-        …
-        static ngDirectiveDef = IDENT.ɵdefineDirective({
+        });`;
+
+    const directiveDef = `
+      static ngDirectiveDef = IDENT.ɵdefineDirective({
         …
         inputs:{
           directiveInput: 'directiveInput',
@@ -80,7 +80,8 @@ describe('compiler compliance: listen()', () => {
 
     const result = compile(files, angularFiles);
 
-    expectEmit(result.source, template, 'Incorrect template');
+    expectEmit(result.source, componentDef, 'Incorrect component definition');
+    expectEmit(result.source, directiveDef, 'Incorrect directive definition');
   });
 
 });
\ No newline at end of file
diff --git a/packages/compiler/test/render3/r3_view_compiler_listener_spec.ts b/packages/compiler/test/render3/r3_view_compiler_listener_spec.ts
index a45f7a58b3..7dbf578df2 100644
--- a/packages/compiler/test/render3/r3_view_compiler_listener_spec.ts
+++ b/packages/compiler/test/render3/r3_view_compiler_listener_spec.ts
@@ -44,7 +44,7 @@ describe('compiler compliance: listen()', () => {
         template: function MyComponent_Template(rf: $RenderFlags$, ctx: $MyComponent$) {
           if (rf & 1) {
             $r3$.ɵE(0, 'div');
-            $r3$.ɵL('click', function MyComponent_Template_div_click_listener($event: $any$) { 
+            $r3$.ɵL('click', function MyComponent_Template_div_click_listener($event: $any$) {
               ctx.onClick($event);
               return (1 == 2);
             });
@@ -53,7 +53,6 @@ describe('compiler compliance: listen()', () => {
         }
         `;
 
-
     const result = compile(files, angularFiles);
 
     expectEmit(result.source, template, 'Incorrect template');
diff --git a/packages/compiler/test/render3/r3_view_compiler_template_spec.ts b/packages/compiler/test/render3/r3_view_compiler_template_spec.ts
index bd09e7ef27..12041faec4 100644
--- a/packages/compiler/test/render3/r3_view_compiler_template_spec.ts
+++ b/packages/compiler/test/render3/r3_view_compiler_template_spec.ts
@@ -28,7 +28,7 @@ describe('compiler compliance: template', () => {
                 template: \`
                   <ul *ngFor="let outer of items">
                     <li *ngFor="let middle of outer.items">
-                      <div *ngFor="let inner of items" 
+                      <div *ngFor="let inner of items"
                            (click)="onClick(outer, middle, inner)"
                            [title]="format(outer, middle, inner, component)"
                            >
@@ -51,58 +51,59 @@ describe('compiler compliance: template', () => {
 
     // The template should look like this (where IDENT is a wild card for an identifier):
     const template = `
-      template:function MyComponent_Template(rf: IDENT, ctx: IDENT){
-        if (rf & 1) { 
-          $i0$.ɵC(0, MyComponent_NgForOf_Template_0, null, _c0); 
+      const $c0$ = ['ngFor','','ngForOf',''];
+      // ...
+      template:function MyComponent_Template(rf: IDENT, $ctx$: IDENT){
+        if (rf & 1) {
+          $i0$.ɵC(0, MyComponent_ul_Template_0, null, _c0);
         }
         if (rf & 2) {
-          $i0$.ɵp(0, 'ngForOf', $i0$.ɵb(ctx.items));
+          $i0$.ɵp(0, 'ngForOf', $i0$.ɵb($ctx$.items));
         }
-        
-        function MyComponent_NgForOf_Template_0(rf: IDENT, ctx0: IDENT) {
+
+        function MyComponent_ul_Template_0(rf: IDENT, $ctx0$: IDENT) {
           if (rf & 1) {
             $i0$.ɵE(0, 'ul');
-            $i0$.ɵC(1, MyComponent_NgForOf_NgForOf_Template_1, null, _c0);
+            $i0$.ɵC(1, MyComponent_ul_li_Template_1, null, _c0);
             $i0$.ɵe();
           }
           if (rf & 2) {
-            const $outer$ = ctx0.$implicit;
+            const $outer$ = $ctx0$.$implicit;
             $i0$.ɵp(1, 'ngForOf', $i0$.ɵb($outer$.items));
           }
-          function MyComponent_NgForOf_NgForOf_Template_1(rf: IDENT, ctx1: IDENT) {
+          function MyComponent_ul_li_Template_1(rf: IDENT, $ctx1$: IDENT) {
             if (rf & 1) {
               $i0$.ɵE(0, 'li');
-              $i0$.ɵC(1, MyComponent_NgForOf_NgForOf_NgForOf_Template_1, null, _c0);
+              $i0$.ɵC(1, MyComponent_ul_li_div_Template_1, null, _c0);
               $i0$.ɵe();
             }
             if (rf & 2) {
-              $i0$.ɵp(1, 'ngForOf', $i0$.ɵb(ctx.items));
+              $i0$.ɵp(1, 'ngForOf', $i0$.ɵb($ctx$.items));
             }
-            function MyComponent_NgForOf_NgForOf_NgForOf_Template_1(rf: IDENT, ctx2: IDENT) {
+            function MyComponent_ul_li_div_Template_1(rf: IDENT, $ctx2$: IDENT) {
               if (rf & 1) {
                 $i0$.ɵE(0, 'div');
-                $i0$.ɵL('click', function MyComponent_NgForOf_NgForOf_NgForOf_Template_1_div_click_listener($event:any){
-                  const $outer$ = ctx0.$implicit;
-                  const $middle$ = ctx1.$implicit;
-                  const $inner$ = ctx2.$implicit;
+                $i0$.ɵL('click', function MyComponent_ul_li_div_Template_1_div_click_listener($event:any){
+                  const $outer$ = $ctx0$.$implicit;
+                  const $middle$ = $ctx1$.$implicit;
+                  const $inner$ = $ctx2$.$implicit;
                   return ctx.onClick($outer$, $middle$, $inner$);
                 });
                 $i0$.ɵT(1);
                 $i0$.ɵe();
               }
               if (rf & 2) {
-                const $outer$ = ctx0.$implicit;
-                const $middle$ = ctx1.$implicit;
-                const $inner$ = ctx2.$implicit;
-                $i0$.ɵp(0, 'title', $i0$.ɵb(ctx.format($outer$, $middle$, $inner$, ctx.component)));
-                $i0$.ɵt(1, $i0$.ɵi1(' ', ctx.format($outer$, $middle$, $inner$, ctx.component), ' '));
+                const $outer$ = $ctx0$.$implicit;
+                const $middle$ = $ctx1$.$implicit;
+                const $inner$ = $ctx2$.$implicit;
+                $i0$.ɵp(0, 'title', $i0$.ɵb(ctx.format($outer$, $middle$, $inner$, $ctx$.component)));
+                $i0$.ɵt(1, $i0$.ɵi1(' ', ctx.format($outer$, $middle$, $inner$, $ctx$.component), ' '));
               }
             }
           }
         }
       }`;
 
-
     const result = compile(files, angularFiles);
 
     expectEmit(result.source, template, 'Incorrect template');
diff --git a/packages/core/src/render3/instructions.ts b/packages/core/src/render3/instructions.ts
index a32f34badd..1c6d4a06e0 100644
--- a/packages/core/src/render3/instructions.ts
+++ b/packages/core/src/render3/instructions.ts
@@ -17,10 +17,10 @@ import {CurrentMatchesList, LView, LViewFlags, LifecycleStage, RootContext, TDat
 
 import {LContainerNode, LElementNode, LNode, LNodeType, TNodeFlags, LProjectionNode, LTextNode, LViewNode, TNode, TContainerNode, InitialInputData, InitialInputs, PropertyAliases, PropertyAliasValue,} from './interfaces/node';
 import {assertNodeType} from './node_assert';
-import {appendChild, insertChild, insertView, appendProjectedNode, removeView, canInsertNativeNode, createTextNode} from './node_manipulation';
+import {appendChild, insertView, appendProjectedNode, removeView, canInsertNativeNode, createTextNode} from './node_manipulation';
 import {isNodeMatchingSelectorList, matchingSelectorIndex} from './node_selector_matcher';
-import {ComponentDef, ComponentTemplate, ComponentType, DirectiveDef, DirectiveDefList, DirectiveDefListOrFactory, DirectiveType, PipeDef, PipeDefList, PipeDefListOrFactory, RenderFlags} from './interfaces/definition';
-import {RElement, RText, Renderer3, RendererFactory3, ProceduralRenderer3, ObjectOrientedRenderer3, RendererStyleFlags3, isProceduralRenderer} from './interfaces/renderer';
+import {ComponentDef, ComponentTemplate, DirectiveDef, DirectiveDefList, DirectiveDefListOrFactory, PipeDefList, PipeDefListOrFactory, RenderFlags} from './interfaces/definition';
+import {RElement, RText, Renderer3, RendererFactory3, ProceduralRenderer3, RendererStyleFlags3, isProceduralRenderer} from './interfaces/renderer';
 import {isDifferent, stringify} from './util';
 import {executeHooks, queueLifecycleHooks, queueInitHooks, executeInitHooks} from './hooks';
 import {ViewRef} from './view_ref';
@@ -1721,11 +1721,18 @@ function appendToProjectionNode(
  *
  * @param nodeIndex
  * @param localIndex - index under which distribution of projected nodes was memorized
- * @param selectorIndex - 0 means <ng-content> without any selector
+ * @param selectorIndex:
+ *        - 0 when the selector is `*` (or unspecified as this is the default value),
+ *        - 1 based index of the selector from the {@link projectionDef}
  */
-export function projection(nodeIndex: number, localIndex: number, selectorIndex: number = 0): void {
+export function projection(
+    nodeIndex: number, localIndex: number, selectorIndex: number = 0, attrs?: string[]): void {
   const node = createLNode(nodeIndex, LNodeType.Projection, null, {head: null, tail: null});
 
+  if (node.tNode == null) {
+    node.tNode = createTNode(null, attrs || null, null);
+  }
+
   // `<ng-content>` has no content
   isParent = false;
   const currentParent = node.parent;
diff --git a/packages/core/test/bundling/hello_world_r2/bundle.golden_symbols.json b/packages/core/test/bundling/hello_world_r2/bundle.golden_symbols.json
index ddf748c827..a46e9008de 100644
--- a/packages/core/test/bundling/hello_world_r2/bundle.golden_symbols.json
+++ b/packages/core/test/bundling/hello_world_r2/bundle.golden_symbols.json
@@ -1334,9 +1334,6 @@
   {
     "name": "RecursiveAstVisitor$1"
   },
-  {
-    "name": "RecursiveTemplateAstVisitor"
-  },
   {
     "name": "RefCountOperator$1"
   },
@@ -3593,6 +3590,9 @@
   {
     "name": "pipeBinding"
   },
+  {
+    "name": "pipeBindingIdentifiers"
+  },
   {
     "name": "pipeDef"
   },
diff --git a/packages/core/test/bundling/todo/index.ts b/packages/core/test/bundling/todo/index.ts
index cbaf6b8caa..86e355f953 100644
--- a/packages/core/test/bundling/todo/index.ts
+++ b/packages/core/test/bundling/todo/index.ts
@@ -7,8 +7,7 @@
  */
 
 import {CommonModule, NgForOf, NgIf} from '@angular/common';
-import {ChangeDetectionStrategy, Component, EventEmitter, InjectFlags, Injectable, Input, IterableDiffers, NgModule, Output, createInjector, defineInjector, inject, ɵComponentDef as ComponentDef, ɵComponentType as ComponentType, ɵDirectiveDef as DirectiveDef, ɵDirectiveType as DirectiveType, ɵNgOnChangesFeature as NgOnChangesFeature, ɵdefaultIterableDiffers as defaultIterableDiffers, ɵdefineDirective as defineDirective, ɵdirectiveInject as directiveInject, ɵinjectTemplateRef as injectTemplateRef, ɵinjectViewContainerRef as injectViewContainerRef, ɵmarkDirty as markDirty, ɵrenderComponent as renderComponent} from '@angular/core';
-
+import {Component, Injectable, IterableDiffers, NgModule, defineInjector, ɵNgOnChangesFeature as NgOnChangesFeature, ɵdefineDirective as defineDirective, ɵdirectiveInject as directiveInject, ɵinjectTemplateRef as injectTemplateRef, ɵinjectViewContainerRef as injectViewContainerRef, ɵrenderComponent as renderComponent} from '@angular/core';
 
 export class Todo {
   editing: boolean;