refactor(compiler): introduce directive wrappers to generate less code

- for now only wraps the `@Input` properties and calls to `ngOnInit`, `ngDoCheck` and `ngOnChanges` of directives. - also groups eval sources by NgModule. Part of #11683
2016-10-13 16:34:37 -07:00
parent c951822c35
commit b0a03fcab3
23 changed files with 606 additions and 278 deletions
--- a/modules/@angular/compiler/src/view_compiler/compile_element.ts
+++ b/modules/@angular/compiler/src/view_compiler/compile_element.ts
@ -8,6 +8,7 @@


 import {CompileDiDependencyMetadata, CompileDirectiveMetadata, CompileIdentifierMetadata, CompileProviderMetadata, CompileQueryMetadata, CompileTokenMetadata} from '../compile_metadata';
+import {DirectiveWrapperCompiler} from '../directive_wrapper_compiler';
 import {ListWrapper, MapWrapper} from '../facade/collection';
 import {isPresent} from '../facade/lang';
 import {Identifiers, identifierToken, resolveIdentifier, resolveIdentifierToken} from '../identifiers';
@ -19,7 +20,8 @@ import {createDiTokenExpression} from '../util';
 import {CompileMethod} from './compile_method';
 import {CompileQuery, addQueryToTokenMap, createQueryList} from './compile_query';
 import {CompileView} from './compile_view';
-import {InjectMethodVars} from './constants';
+import {InjectMethodVars, ViewProperties} from './constants';
+import {ComponentFactoryDependency, DirectiveWrapperDependency, ViewFactoryDependency} from './deps';
 import {getPropertyInView, injectFromViewParentInjector} from './util';

 export class CompileNode {
@ -34,7 +36,7 @@ export class CompileNode {

 export class CompileElement extends CompileNode {
  static createNull(): CompileElement {
-    return new CompileElement(null, null, null, null, null, null, [], [], false, false, []);
+    return new CompileElement(null, null, null, null, null, null, [], [], false, false, [], []);
  }

  private _compViewExpr: o.Expression = null;
@ -42,6 +44,7 @@ export class CompileElement extends CompileNode {
  public elementRef: o.Expression;
  public injector: o.Expression;
  public instances = new Map<any, o.Expression>();
+  public directiveWrapperInstance = new Map<any, o.Expression>();
  private _resolvedProviders: Map<any, ProviderAst>;

  private _queryCount = 0;
@ -57,7 +60,9 @@ export class CompileElement extends CompileNode {
      sourceAst: TemplateAst, public component: CompileDirectiveMetadata,
      private _directives: CompileDirectiveMetadata[],
      private _resolvedProvidersArray: ProviderAst[], public hasViewContainer: boolean,
-      public hasEmbeddedView: boolean, references: ReferenceAst[]) {
+      public hasEmbeddedView: boolean, references: ReferenceAst[],
+      private _targetDependencies:
+          Array<ViewFactoryDependency|ComponentFactoryDependency|DirectiveWrapperDependency>) {
    super(parent, view, nodeIndex, renderNode, sourceAst);
    this.referenceTokens = {};
    references.forEach(ref => this.referenceTokens[ref.name] = ref.value);
@ -72,6 +77,9 @@ export class CompileElement extends CompileNode {
    if (this.hasViewContainer || this.hasEmbeddedView || isPresent(this.component)) {
      this._createAppElement();
    }
+    if (this.component) {
+      this._createComponentFactoryResolver();
+    }
  }

  private _createAppElement() {
@ -92,7 +100,13 @@ export class CompileElement extends CompileNode {
    this.instances.set(resolveIdentifierToken(Identifiers.AppElement).reference, this.appElement);
  }

-  public createComponentFactoryResolver(entryComponents: CompileIdentifierMetadata[]) {
+  private _createComponentFactoryResolver() {
+    let entryComponents =
+        this.component.entryComponents.map((entryComponent: CompileIdentifierMetadata) => {
+          var id = new CompileIdentifierMetadata({name: entryComponent.name});
+          this._targetDependencies.push(new ComponentFactoryDependency(entryComponent, id));
+          return id;
+        });
    if (!entryComponents || entryComponents.length === 0) {
      return;
    }
@ -155,6 +169,8 @@ export class CompileElement extends CompileNode {
    // create all the provider instances, some in the view constructor,
    // some as getters. We rely on the fact that they are already sorted topologically.
    MapWrapper.values(this._resolvedProviders).forEach((resolvedProvider) => {
+      const isDirectiveWrapper = resolvedProvider.providerType === ProviderAstType.Component ||
+          resolvedProvider.providerType === ProviderAstType.Directive;
      var providerValueExpressions = resolvedProvider.providers.map((provider) => {
        if (isPresent(provider.useExisting)) {
          return this._getDependency(
@ -167,8 +183,17 @@ export class CompileElement extends CompileNode {
        } else if (isPresent(provider.useClass)) {
          var deps = provider.deps || provider.useClass.diDeps;
          var depsExpr = deps.map((dep) => this._getDependency(resolvedProvider.providerType, dep));
-          return o.importExpr(provider.useClass)
-              .instantiate(depsExpr, o.importType(provider.useClass));
+          if (isDirectiveWrapper) {
+            const directiveWrapperIdentifier = new CompileIdentifierMetadata(
+                {name: DirectiveWrapperCompiler.dirWrapperClassName(provider.useClass)});
+            this._targetDependencies.push(
+                new DirectiveWrapperDependency(provider.useClass, directiveWrapperIdentifier));
+            return o.importExpr(directiveWrapperIdentifier)
+                .instantiate(depsExpr, o.importType(directiveWrapperIdentifier));
+          } else {
+            return o.importExpr(provider.useClass)
+                .instantiate(depsExpr, o.importType(provider.useClass));
+          }
        } else {
          return convertValueToOutputAst(provider.useValue);
        }
@ -177,7 +202,12 @@ export class CompileElement extends CompileNode {
      var instance = createProviderProperty(
          propName, resolvedProvider, providerValueExpressions, resolvedProvider.multiProvider,
          resolvedProvider.eager, this);
-      this.instances.set(resolvedProvider.token.reference, instance);
+      if (isDirectiveWrapper) {
+        this.directiveWrapperInstance.set(resolvedProvider.token.reference, instance);
+        this.instances.set(resolvedProvider.token.reference, instance.prop('context'));
+      } else {
+        this.instances.set(resolvedProvider.token.reference, instance);
+      }
    });

    for (var i = 0; i < this._directives.length; i++) {
--- a/modules/@angular/compiler/src/view_compiler/deps.ts
+++ b/modules/@angular/compiler/src/view_compiler/deps.ts
@ -0,0 +1,24 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {CompileIdentifierMetadata} from '../compile_metadata';
+
+export class ViewFactoryDependency {
+  constructor(
+      public comp: CompileIdentifierMetadata, public placeholder: CompileIdentifierMetadata) {}
+}
+
+export class ComponentFactoryDependency {
+  constructor(
+      public comp: CompileIdentifierMetadata, public placeholder: CompileIdentifierMetadata) {}
+}
+
+export class DirectiveWrapperDependency {
+  constructor(
+      public dir: CompileIdentifierMetadata, public placeholder: CompileIdentifierMetadata) {}
+}
--- a/modules/@angular/compiler/src/view_compiler/lifecycle_binder.ts
+++ b/modules/@angular/compiler/src/view_compiler/lifecycle_binder.ts
@ -20,27 +20,6 @@ import {DetectChangesVars} from './constants';
 var STATE_IS_NEVER_CHECKED = o.THIS_EXPR.prop('numberOfChecks').identical(new o.LiteralExpr(0));
 var NOT_THROW_ON_CHANGES = o.not(DetectChangesVars.throwOnChange);

-export function bindDirectiveDetectChangesLifecycleCallbacks(
-    directiveAst: DirectiveAst, directiveInstance: o.Expression, compileElement: CompileElement) {
-  var view = compileElement.view;
-  var detectChangesInInputsMethod = view.detectChangesInInputsMethod;
-  var lifecycleHooks = directiveAst.directive.type.lifecycleHooks;
-  if (lifecycleHooks.indexOf(LifecycleHooks.OnChanges) !== -1 && directiveAst.inputs.length > 0) {
-    detectChangesInInputsMethod.addStmt(new o.IfStmt(
-        DetectChangesVars.changes.notIdentical(o.NULL_EXPR),
-        [directiveInstance.callMethod('ngOnChanges', [DetectChangesVars.changes]).toStmt()]));
-  }
-  if (lifecycleHooks.indexOf(LifecycleHooks.OnInit) !== -1) {
-    detectChangesInInputsMethod.addStmt(new o.IfStmt(
-        STATE_IS_NEVER_CHECKED.and(NOT_THROW_ON_CHANGES),
-        [directiveInstance.callMethod('ngOnInit', []).toStmt()]));
-  }
-  if (lifecycleHooks.indexOf(LifecycleHooks.DoCheck) !== -1) {
-    detectChangesInInputsMethod.addStmt(new o.IfStmt(
-        NOT_THROW_ON_CHANGES, [directiveInstance.callMethod('ngDoCheck', []).toStmt()]));
-  }
-}
-
 export function bindDirectiveAfterContentLifecycleCallbacks(
    directiveMeta: CompileDirectiveMetadata, directiveInstance: o.Expression,
    compileElement: CompileElement) {
--- a/modules/@angular/compiler/src/view_compiler/property_binder.ts
+++ b/modules/@angular/compiler/src/view_compiler/property_binder.ts
@ -32,15 +32,18 @@ function createCurrValueExpr(exprIndex: number): o.ReadVarExpr {
  return o.variable(`currVal_${exprIndex}`);  // fix syntax highlighting: `
 }

-function bind(
-    view: CompileView, currValExpr: o.ReadVarExpr, fieldExpr: o.ReadPropExpr,
-    parsedExpression: cdAst.AST, context: o.Expression, actions: o.Statement[],
-    method: CompileMethod, bindingIndex: number) {
+class EvalResult {
+  constructor(public forceUpdate: o.Expression) {}
+}
+
+function evalCdAst(
+    view: CompileView, currValExpr: o.ReadVarExpr, parsedExpression: cdAst.AST,
+    context: o.Expression, method: CompileMethod, bindingIndex: number): EvalResult {
  var checkExpression = convertCdExpressionToIr(
      view, context, parsedExpression, DetectChangesVars.valUnwrapper, bindingIndex);
  if (!checkExpression.expression) {
    // e.g. an empty expression was given
-    return;
+    return null;
  }

  if (checkExpression.temporaryCount) {
@ -49,24 +52,39 @@ function bind(
    }
  }

-  // private is fine here as no child view will reference the cached value...
-  view.fields.push(new o.ClassField(fieldExpr.name, null, [o.StmtModifier.Private]));
-  view.createMethod.addStmt(o.THIS_EXPR.prop(fieldExpr.name)
-                                .set(o.importExpr(resolveIdentifier(Identifiers.UNINITIALIZED)))
-                                .toStmt());
-
  if (checkExpression.needsValueUnwrapper) {
    var initValueUnwrapperStmt = DetectChangesVars.valUnwrapper.callMethod('reset', []).toStmt();
    method.addStmt(initValueUnwrapperStmt);
  }
  method.addStmt(
      currValExpr.set(checkExpression.expression).toDeclStmt(null, [o.StmtModifier.Final]));
+  if (checkExpression.needsValueUnwrapper) {
+    return new EvalResult(DetectChangesVars.valUnwrapper.prop('hasWrappedValue'));
+  } else {
+    return new EvalResult(null);
+  }
+}
+
+function bind(
+    view: CompileView, currValExpr: o.ReadVarExpr, fieldExpr: o.ReadPropExpr,
+    parsedExpression: cdAst.AST, context: o.Expression, actions: o.Statement[],
+    method: CompileMethod, bindingIndex: number) {
+  const evalResult = evalCdAst(view, currValExpr, parsedExpression, context, method, bindingIndex);
+  if (!evalResult) {
+    return;
+  }
+
+  // private is fine here as no child view will reference the cached value...
+  view.fields.push(new o.ClassField(fieldExpr.name, null, [o.StmtModifier.Private]));
+  view.createMethod.addStmt(o.THIS_EXPR.prop(fieldExpr.name)
+                                .set(o.importExpr(resolveIdentifier(Identifiers.UNINITIALIZED)))
+                                .toStmt());

  var condition: o.Expression = o.importExpr(resolveIdentifier(Identifiers.checkBinding)).callFn([
    DetectChangesVars.throwOnChange, fieldExpr, currValExpr
  ]);
-  if (checkExpression.needsValueUnwrapper) {
-    condition = DetectChangesVars.valUnwrapper.prop('hasWrappedValue').or(condition);
+  if (evalResult.forceUpdate) {
+    condition = evalResult.forceUpdate.or(condition);
  }
  method.addStmt(new o.IfStmt(
      condition,
@ -237,82 +255,48 @@ export function bindDirectiveHostProps(
 }

 export function bindDirectiveInputs(
-    directiveAst: DirectiveAst, directiveInstance: o.Expression, compileElement: CompileElement) {
-  if (directiveAst.inputs.length === 0) {
-    return;
-  }
+    directiveAst: DirectiveAst, directiveWrapperInstance: o.Expression,
+    compileElement: CompileElement) {
  var view = compileElement.view;
  var detectChangesInInputsMethod = view.detectChangesInInputsMethod;
  detectChangesInInputsMethod.resetDebugInfo(compileElement.nodeIndex, compileElement.sourceAst);

-  var lifecycleHooks = directiveAst.directive.type.lifecycleHooks;
-  var calcChangesMap = lifecycleHooks.indexOf(LifecycleHooks.OnChanges) !== -1;
-  var isOnPushComp = directiveAst.directive.isComponent &&
-      !isDefaultChangeDetectionStrategy(directiveAst.directive.changeDetection);
-  if (calcChangesMap) {
-    detectChangesInInputsMethod.addStmt(DetectChangesVars.changes.set(o.NULL_EXPR).toStmt());
-  }
-  if (isOnPushComp) {
-    detectChangesInInputsMethod.addStmt(DetectChangesVars.changed.set(o.literal(false)).toStmt());
-  }
  directiveAst.inputs.forEach((input) => {
    var bindingIndex = view.bindings.length;
    view.bindings.push(new CompileBinding(compileElement, input));
    detectChangesInInputsMethod.resetDebugInfo(compileElement.nodeIndex, input);
-    var fieldExpr = createBindFieldExpr(bindingIndex);
    var currValExpr = createCurrValueExpr(bindingIndex);
-    var statements: o.Statement[] =
-        [directiveInstance.prop(input.directiveName).set(currValExpr).toStmt()];
-    if (calcChangesMap) {
-      statements.push(new o.IfStmt(
-          DetectChangesVars.changes.identical(o.NULL_EXPR),
-          [DetectChangesVars.changes
-               .set(o.literalMap(
-                   [], new o.MapType(o.importType(resolveIdentifier(Identifiers.SimpleChange)))))
-               .toStmt()]));
-      statements.push(DetectChangesVars.changes.key(o.literal(input.directiveName))
-                          .set(o.importExpr(resolveIdentifier(Identifiers.SimpleChange))
-                                   .instantiate([fieldExpr, currValExpr]))
-                          .toStmt());
+    const evalResult = evalCdAst(
+        view, currValExpr, input.value, view.componentContext, detectChangesInInputsMethod,
+        bindingIndex);
+    if (!evalResult) {
+      return;
    }
-    if (isOnPushComp) {
-      statements.push(DetectChangesVars.changed.set(o.literal(true)).toStmt());
-    }
-    if (view.genConfig.logBindingUpdate) {
-      statements.push(
-          logBindingUpdateStmt(compileElement.renderNode, input.directiveName, currValExpr));
-    }
-    bind(
-        view, currValExpr, fieldExpr, input.value, view.componentContext, statements,
-        detectChangesInInputsMethod, bindingIndex);
+    detectChangesInInputsMethod.addStmt(directiveWrapperInstance
+                                            .callMethod(
+                                                `check_${input.directiveName}`,
+                                                [
+                                                  currValExpr, DetectChangesVars.throwOnChange,
+                                                  evalResult.forceUpdate || o.literal(false)
+                                                ])
+                                            .toStmt());
  });
-  if (isOnPushComp) {
-    detectChangesInInputsMethod.addStmt(new o.IfStmt(DetectChangesVars.changed, [
-      compileElement.appElement.prop('componentView').callMethod('markAsCheckOnce', []).toStmt()
-    ]));
-  }
+  var isOnPushComp = directiveAst.directive.isComponent &&
+      !isDefaultChangeDetectionStrategy(directiveAst.directive.changeDetection);
+  let directiveDetectChangesExpr = directiveWrapperInstance.callMethod(
+      'detectChangesInternal',
+      [o.THIS_EXPR, compileElement.renderNode, DetectChangesVars.throwOnChange]);
+  const directiveDetectChangesStmt = isOnPushComp ?
+      new o.IfStmt(directiveDetectChangesExpr, [compileElement.appElement.prop('componentView')
+                                                    .callMethod('markAsCheckOnce', [])
+                                                    .toStmt()]) :
+      directiveDetectChangesExpr.toStmt();
+  detectChangesInInputsMethod.addStmt(directiveDetectChangesStmt);
 }

 function logBindingUpdateStmt(
    renderNode: o.Expression, propName: string, value: o.Expression): o.Statement {
-  const tryStmt =
-      o.THIS_EXPR.prop('renderer')
-          .callMethod(
-              'setBindingDebugInfo',
-              [
-                renderNode, o.literal(`ng-reflect-${camelCaseToDashCase(propName)}`),
-                value.isBlank().conditional(o.NULL_EXPR, value.callMethod('toString', []))
-              ])
-          .toStmt();
-
-  const catchStmt = o.THIS_EXPR.prop('renderer')
-                        .callMethod(
-                            'setBindingDebugInfo',
-                            [
-                              renderNode, o.literal(`ng-reflect-${camelCaseToDashCase(propName)}`),
-                              o.literal('[ERROR] Exception while trying to serialize the value')
-                            ])
-                        .toStmt();
-
-  return new o.TryCatchStmt([tryStmt], [catchStmt]);
+  return o.importExpr(resolveIdentifier(Identifiers.setBindingDebugInfo))
+      .callFn([o.THIS_EXPR.prop('renderer'), renderNode, o.literal(propName), value])
+      .toStmt();
 }
--- a/modules/@angular/compiler/src/view_compiler/util.ts
+++ b/modules/@angular/compiler/src/view_compiler/util.ts
@ -7,7 +7,7 @@
 */


-import {CompileDirectiveMetadata, CompileTokenMetadata} from '../compile_metadata';
+import {CompileDirectiveMetadata, CompileIdentifierMetadata, CompileTokenMetadata} from '../compile_metadata';
 import {isPresent} from '../facade/lang';
 import {Identifiers, resolveIdentifier} from '../identifiers';
 import * as o from '../output/output_ast';
@ -30,15 +30,28 @@ export function getPropertyInView(
      throw new Error(
          `Internal error: Could not calculate a property in a parent view: ${property}`);
    }
-    if (property instanceof o.ReadPropExpr) {
-      let readPropExpr: o.ReadPropExpr = property;
+    return property.visitExpression(new _ReplaceViewTransformer(viewProp, definedView), null);
+  }
+}
+
+class _ReplaceViewTransformer extends o.ExpressionTransformer {
+  constructor(private _viewExpr: o.Expression, private _view: CompileView) { super(); }
+  private _isThis(expr: o.Expression): boolean {
+    return expr instanceof o.ReadVarExpr && expr.builtin === o.BuiltinVar.This;
+  }
+
+  visitReadVarExpr(ast: o.ReadVarExpr, context: any): any {
+    return this._isThis(ast) ? this._viewExpr : ast;
+  }
+  visitReadPropExpr(ast: o.ReadPropExpr, context: any): any {
+    if (this._isThis(ast.receiver)) {
      // Note: Don't cast for members of the AppView base class...
-      if (definedView.fields.some((field) => field.name == readPropExpr.name) ||
-          definedView.getters.some((field) => field.name == readPropExpr.name)) {
-        viewProp = viewProp.cast(definedView.classType);
+      if (this._view.fields.some((field) => field.name == ast.name) ||
+          this._view.getters.some((field) => field.name == ast.name)) {
+        return this._viewExpr.cast(this._view.classType).prop(ast.name);
      }
    }
-    return o.replaceVarInExpression(o.THIS_EXPR.name, viewProp, property);
+    return super.visitReadPropExpr(ast, context);
  }
 }

--- a/modules/@angular/compiler/src/view_compiler/view_binder.ts
+++ b/modules/@angular/compiler/src/view_compiler/view_binder.ts
@ -11,7 +11,7 @@ import {AttrAst, BoundDirectivePropertyAst, BoundElementPropertyAst, BoundEventA
 import {CompileElement} from './compile_element';
 import {CompileView} from './compile_view';
 import {CompileEventListener, bindDirectiveOutputs, bindRenderOutputs, collectEventListeners} from './event_binder';
-import {bindDirectiveAfterContentLifecycleCallbacks, bindDirectiveAfterViewLifecycleCallbacks, bindDirectiveDetectChangesLifecycleCallbacks, bindInjectableDestroyLifecycleCallbacks, bindPipeDestroyLifecycleCallbacks} from './lifecycle_binder';
+import {bindDirectiveAfterContentLifecycleCallbacks, bindDirectiveAfterViewLifecycleCallbacks, bindInjectableDestroyLifecycleCallbacks, bindPipeDestroyLifecycleCallbacks} from './lifecycle_binder';
 import {bindDirectiveHostProps, bindDirectiveInputs, bindRenderInputs, bindRenderText} from './property_binder';

 export function bindView(view: CompileView, parsedTemplate: TemplateAst[]): void {
@ -48,8 +48,9 @@ class ViewBinderVisitor implements TemplateAstVisitor {
    bindRenderOutputs(eventListeners);
    ast.directives.forEach((directiveAst) => {
      var directiveInstance = compileElement.instances.get(directiveAst.directive.type.reference);
-      bindDirectiveInputs(directiveAst, directiveInstance, compileElement);
-      bindDirectiveDetectChangesLifecycleCallbacks(directiveAst, directiveInstance, compileElement);
+      var directiveWrapperInstance =
+          compileElement.directiveWrapperInstance.get(directiveAst.directive.type.reference);
+      bindDirectiveInputs(directiveAst, directiveWrapperInstance, compileElement);

      bindDirectiveHostProps(directiveAst, directiveInstance, compileElement, eventListeners);
      bindDirectiveOutputs(directiveAst, directiveInstance, eventListeners);
@ -76,8 +77,10 @@ class ViewBinderVisitor implements TemplateAstVisitor {
    var eventListeners = collectEventListeners(ast.outputs, ast.directives, compileElement);
    ast.directives.forEach((directiveAst) => {
      var directiveInstance = compileElement.instances.get(directiveAst.directive.type.reference);
-      bindDirectiveInputs(directiveAst, directiveInstance, compileElement);
-      bindDirectiveDetectChangesLifecycleCallbacks(directiveAst, directiveInstance, compileElement);
+      var directiveWrapperInstance =
+          compileElement.directiveWrapperInstance.get(directiveAst.directive.type.reference);
+      bindDirectiveInputs(directiveAst, directiveWrapperInstance, compileElement);
+
      bindDirectiveOutputs(directiveAst, directiveInstance, eventListeners);
      bindDirectiveAfterContentLifecycleCallbacks(
          directiveAst.directive, directiveInstance, compileElement);
--- a/modules/@angular/compiler/src/view_compiler/view_builder.ts
+++ b/modules/@angular/compiler/src/view_compiler/view_builder.ts
@ -20,6 +20,7 @@ import {createDiTokenExpression} from '../util';
 import {CompileElement, CompileNode} from './compile_element';
 import {CompileView} from './compile_view';
 import {ChangeDetectorStatusEnum, DetectChangesVars, InjectMethodVars, ViewConstructorVars, ViewEncapsulationEnum, ViewProperties, ViewTypeEnum} from './constants';
+import {ComponentFactoryDependency, DirectiveWrapperDependency, ViewFactoryDependency} from './deps';
 import {createFlatArray, getViewFactoryName} from './util';

 const IMPLICIT_TEMPLATE_VAR = '\$implicit';
@ -30,20 +31,11 @@ const NG_CONTAINER_TAG = 'ng-container';
 var parentRenderNodeVar = o.variable('parentRenderNode');
 var rootSelectorVar = o.variable('rootSelector');

-export class ViewFactoryDependency {
-  constructor(
-      public comp: CompileIdentifierMetadata, public placeholder: CompileIdentifierMetadata) {}
-}
-
-export class ComponentFactoryDependency {
-  constructor(
-      public comp: CompileIdentifierMetadata, public placeholder: CompileIdentifierMetadata) {}
-}
-
-
 export function buildView(
    view: CompileView, template: TemplateAst[],
-    targetDependencies: Array<ViewFactoryDependency|ComponentFactoryDependency>): number {
+    targetDependencies:
+        Array<ViewFactoryDependency|ComponentFactoryDependency|DirectiveWrapperDependency>):
+    number {
  var builderVisitor = new ViewBuilderVisitor(view, targetDependencies);
  templateVisitAll(
      builderVisitor, template,
@ -66,7 +58,8 @@ class ViewBuilderVisitor implements TemplateAstVisitor {

  constructor(
      public view: CompileView,
-      public targetDependencies: Array<ViewFactoryDependency|ComponentFactoryDependency>) {}
+      public targetDependencies:
+          Array<ViewFactoryDependency|ComponentFactoryDependency|DirectiveWrapperDependency>) {}

  private _isRootNode(parent: CompileElement): boolean { return parent.view !== this.view; }

@ -204,7 +197,7 @@ class ViewBuilderVisitor implements TemplateAstVisitor {
    }
    var compileElement = new CompileElement(
        parent, this.view, nodeIndex, renderNode, ast, component, directives, ast.providers,
-        ast.hasViewContainer, false, ast.references);
+        ast.hasViewContainer, false, ast.references, this.targetDependencies);
    this.view.nodes.push(compileElement);
    var compViewExpr: o.ReadVarExpr = null;
    if (isPresent(component)) {
@ -212,13 +205,6 @@ class ViewBuilderVisitor implements TemplateAstVisitor {
          new CompileIdentifierMetadata({name: getViewFactoryName(component, 0)});
      this.targetDependencies.push(
          new ViewFactoryDependency(component.type, nestedComponentIdentifier));
-      let entryComponentIdentifiers =
-          component.entryComponents.map((entryComponent: CompileIdentifierMetadata) => {
-            var id = new CompileIdentifierMetadata({name: entryComponent.name});
-            this.targetDependencies.push(new ComponentFactoryDependency(entryComponent, id));
-            return id;
-          });
-      compileElement.createComponentFactoryResolver(entryComponentIdentifiers);

      compViewExpr = o.variable(`compView_${nodeIndex}`);  // fix highlighting: `
      compileElement.setComponentView(compViewExpr);
@ -273,7 +259,7 @@ class ViewBuilderVisitor implements TemplateAstVisitor {
    var directives = ast.directives.map(directiveAst => directiveAst.directive);
    var compileElement = new CompileElement(
        parent, this.view, nodeIndex, renderNode, ast, null, directives, ast.providers,
-        ast.hasViewContainer, true, ast.references);
+        ast.hasViewContainer, true, ast.references, this.targetDependencies);
    this.view.nodes.push(compileElement);

    this.nestedViewCount++;
--- a/modules/@angular/compiler/src/view_compiler/view_compiler.ts
+++ b/modules/@angular/compiler/src/view_compiler/view_compiler.ts
@ -16,15 +16,17 @@ import {TemplateAst} from '../template_parser/template_ast';

 import {CompileElement} from './compile_element';
 import {CompileView} from './compile_view';
+import {ComponentFactoryDependency, DirectiveWrapperDependency, ViewFactoryDependency} from './deps';
 import {bindView} from './view_binder';
-import {ComponentFactoryDependency, ViewFactoryDependency, buildView, finishView} from './view_builder';
+import {buildView, finishView} from './view_builder';

-export {ComponentFactoryDependency, ViewFactoryDependency} from './view_builder';
+export {ComponentFactoryDependency, DirectiveWrapperDependency, ViewFactoryDependency} from './deps';

 export class ViewCompileResult {
  constructor(
      public statements: o.Statement[], public viewFactoryVar: string,
-      public dependencies: Array<ViewFactoryDependency|ComponentFactoryDependency>) {}
+      public dependencies:
+          Array<ViewFactoryDependency|ComponentFactoryDependency|DirectiveWrapperDependency>) {}
 }

@Injectable()
@ -35,7 +37,8 @@ export class ViewCompiler {
      component: CompileDirectiveMetadata, template: TemplateAst[], styles: o.Expression,
      pipes: CompilePipeMetadata[],
      compiledAnimations: AnimationEntryCompileResult[]): ViewCompileResult {
-    const dependencies: Array<ViewFactoryDependency|ComponentFactoryDependency> = [];
+    const dependencies:
+        Array<ViewFactoryDependency|ComponentFactoryDependency|DirectiveWrapperDependency> = [];
    const view = new CompileView(
        component, this._genConfig, pipes, styles, compiledAnimations, 0,
        CompileElement.createNull(), []);