fix(upgrade): allow deeper nesting of ng2 components/directives (#8949)

* fix(upgrade): add test for upgrade adapter bug

* fix(upgrade): allow deeper nesting of ng2 components/directives

allow a nesting sequence of ng2 > ng1 > ng2 directives

modules/@angular/upgrade/src/upgrade_adapter.ts

@@ -547,8 +547,6 @@ function ng1ComponentDirective(info: ComponentInfo, idPrefix: string): Function
   function directiveFactory(ng1Injector: angular.IInjectorService,
                             componentFactoryRefMap: ComponentFactoryRefMap,
                             parse: angular.IParseService): angular.IDirective {
-    var componentFactory: ComponentFactory<any> = componentFactoryRefMap[info.selector];
-    if (!componentFactory) throw new Error('Expecting ComponentFactory for: ' + info.selector);
     var idCount = 0;
     return {
       restrict: 'E',
@@ -556,6 +554,9 @@ function ng1ComponentDirective(info: ComponentInfo, idPrefix: string): Function
       link: {
         post: (scope: angular.IScope, element: angular.IAugmentedJQuery, attrs: angular.IAttributes,
                parentInjector: any, transclude: angular.ITranscludeFunction): void => {
+          var componentFactory: ComponentFactory<any> = componentFactoryRefMap[info.selector];
+          if (!componentFactory) throw new Error('Expecting ComponentFactory for: ' + info.selector);
+
           var domElement = <any>element[0];
           if (parentInjector === null) {
             parentInjector = ng1Injector.get(NG2_INJECTOR);

modules/@angular/upgrade/test/upgrade_spec.ts

@@ -709,6 +709,45 @@ export function main() {
                  async.done();
                });
          }));
+
+       it('should support ng2 > ng1 > ng2', inject([AsyncTestCompleter], (async) => {
+           var adapter = new UpgradeAdapter();
+           var ng1Module = angular.module('ng1', []);
+
+           var ng1 = {
+             template: 'ng1(<ng2b></ng2b>)',
+           };
+           ng1Module.component('ng1', ng1);
+
+           var Ng2a =
+             Component({
+               selector: 'ng2a',
+               template: 'ng2a(<ng1></ng1>)',
+               directives: [adapter.upgradeNg1Component('ng1')]
+             })
+                 .Class({
+                   constructor: function() {}
+                 });
+           ng1Module.directive('ng2a', adapter.downgradeNg2Component(Ng2a));
+
+           var Ng2b =
+             Component({
+               selector: 'ng2b',
+               template: 'ng2b',
+               directives: []
+             })
+                 .Class({
+                   constructor: function() {}
+                 });
+           ng1Module.directive('ng2b', adapter.downgradeNg2Component(Ng2b));
+
+           var element = html(`<div><ng2a></ng2a></div>`);
+           adapter.bootstrap(element, ['ng1'])
+               .ready((ref) => {
+                 expect(multiTrim(document.body.textContent)).toEqual('ng2a(ng1(ng2b))');
+                 async.done();
+               });
+         }));
     });
 
     describe('injection', () => {