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/playground/src/upgrade/index.ts

@@ -6,7 +6,8 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Component, EventEmitter, Input, NgModule, Output} from '@angular/core';
+import {Component, EventEmitter, Input, NgModule, Output, forwardRef} from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
 import {UpgradeAdapter} from '@angular/upgrade';
 
 declare var angular: any;
@@ -26,13 +27,12 @@ var styles = [`
     }
   `];
 
-var adapter: UpgradeAdapter = new UpgradeAdapter(Ng2AppModule);
-
+var adapter = new UpgradeAdapter(forwardRef(() => Ng2AppModule));
 var ng1module = angular.module('myExample', []);
 
 ng1module.controller('Index', function($scope: any /** TODO #9100 */) { $scope.name = 'World'; });
 
-ng1module.directive('user', function() {
+ng1module.directive('ng1User', function() {
   return {
     scope: {handle: '@', reset: '&'},
     template: `
@@ -62,13 +62,12 @@ class Pane {
         <table cellpadding="3">
           <tr>
             <td><ng-content></ng-content></td>
-            <td><user [handle]="user" (reset)="reset.emit()"></user></td>
+            <td><ng1-user [handle]="user" (reset)="reset.emit()"></ng1-user></td>
           </tr>
         </table>
       </pane>
     </div>`,
-  styles: styles,
-  directives: [Pane, adapter.upgradeNg1Component('user')]
+  styles: styles
 })
 class UpgradeApp {
   @Input() user: string;
@@ -77,10 +76,12 @@ class UpgradeApp {
 }
 
 @NgModule({
-  declarations: [Pane, UpgradeApp],
-  entryComponents: [UpgradeApp]
+  declarations: [Pane, UpgradeApp, adapter.upgradeNg1Component('ng1User')],
+  imports: [BrowserModule]
 })
-class Ng2AppModule {}
+class Ng2AppModule {
+}
+
 
 ng1module.directive('upgradeApp', adapter.downgradeNg2Component(UpgradeApp));