fix(ngUpgrade): to work with @NgModule

We changed the bootstrap order:
1. create NgZone
2. bootstrap ng1 inside NgZone and upgrade ng1 components to ng2 components.
3. bootstrap ng2 with NgZone

Note: Previous footgun behavior was: bootstrap ng2 first to extract NgZone, so that ng1 bootstrap can happen in NgZone. This meant that if ng2 bootstrap eagerly compiled a component which contained ng1 components, then we did not have complete metadata.

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

@@ -6,8 +6,10 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Class, Component, EventEmitter, Testability, disposePlatform, provide} from '@angular/core';
+import {Class, Component, EventEmitter, Inject, NgModule, OpaqueToken, Testability, disposePlatform} from '@angular/core';
+import {async} from '@angular/core/testing';
 import {AsyncTestCompleter, ddescribe, describe, expect, iit, inject, it} from '@angular/core/testing/testing_internal';
+import {BrowserModule} from '@angular/platform-browser';
 import {UpgradeAdapter} from '@angular/upgrade';
 import * as angular from '@angular/upgrade/src/angular_js';
 
@@ -60,7 +62,6 @@ export function main() {
            async.done();
          });
        }));
-
     describe('scope/component change-detection', () => {
       it('should interleave scope and component expressions',
          inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
@@ -269,6 +270,41 @@ export function main() {
              async.done();
            });
          }));
+
+
+      // this test should be removed ones the deprecated @Components.directives prop is removed
+      // we should rewrite all of the tests in this file to use modules instead.
+      it('should downgrade ng2 component that is part of a module', async(() => {
+           const ng1Module = angular.module('ng1', []);
+
+           ng1Module.component('ng1Component', {template: '<ng2-component></ng2-component>'});
+
+           const SpecialValue = new OpaqueToken('special test value');
+
+           const Ng2Component = Component({
+                                  selector: 'ng2-component',
+                                  template: '<span>test: {{value}}</span>'
+                                }).Class({
+             constructor: [
+               Inject(SpecialValue), function Ng2Component(value: number) { this.value = value; }
+             ]
+           });
+           const Ng2AppModule =
+               NgModule({
+                 declarations: [Ng2Component],
+                 imports: [BrowserModule],
+                 providers: [{provide: SpecialValue, useValue: 23}]
+               }).Class({constructor: function Ng2AppModule() {}, ngDoBootstrap: function() {}});
+
+           const adapter = new UpgradeAdapter(Ng2AppModule);
+           ng1Module.directive('ng2Component', adapter.downgradeNg2Component(Ng2Component));
+           var element = html('<ng1-component></ng1-component>');
+           adapter.bootstrap(element, ['ng1']).ready((ref) => {
+             expect(multiTrim(document.body.getElementsByTagName('ng2-component')[0].innerHTML))
+                 .toEqual('<span>test: 23</span>');
+             ref.dispose();
+           });
+         }));
     });
 
     describe('upgrade ng1 component', () => {