fix(clientSideScripts): change protractor to support waiting for hybrid app (#4512)

Change protractor to wait for both angular1 hook and angular2 hook so
that it can wait for hybrid app correctly.
Add an aot hybrid app and testcase to test new change

Author: qiyigg

lib/clientsidescripts.js

@@ -86,7 +86,7 @@ function getNg1Hooks(selector, injectorPlease) {
           return {$injector: $injector};
         }
       }
-    } catch(err) {} 
+    } catch(err) {}
   }
   function trySelector(selector) {
     var els = document.querySelectorAll(selector);
@@ -133,54 +133,96 @@ function getNg1Hooks(selector, injectorPlease) {
  *     be passed as a parameter.
  */
 functions.waitForAngular = function(rootSelector, callback) {
+
   try {
-    if (window.angular && !(window.angular.version &&
-          window.angular.version.major > 1)) {
-      /* ng1 */
-      var hooks = getNg1Hooks(rootSelector);
-      if (hooks.$$testability) {
-        hooks.$$testability.whenStable(callback);
-      } else if (hooks.$injector) {
-        hooks.$injector.get('$browser').
-            notifyWhenNoOutstandingRequests(callback);
-      } else if (!!rootSelector) {
-        throw new Error('Could not automatically find injector on page: "' +
-            window.location.toString() + '".  Consider using config.rootEl');
-      } else {
-        throw new Error('root element (' + rootSelector + ') has no injector.' +
-           ' this may mean it is not inside ng-app.');
+    // Wait for both angular1 testability and angular2 testability.
+
+    var testCallback = callback;
+
+    // Wait for angular1 testability first and run waitForAngular2 as a callback
+    var waitForAngular1 = function(callback) {
+
+      if (window.angular) {
+        var hooks = getNg1Hooks(rootSelector);
+        if (!hooks){
+          callback();  // not an angular1 app
+        }
+        else{
+          if (hooks.$$testability) {
+            hooks.$$testability.whenStable(callback);
+          } else if (hooks.$injector) {
+            hooks.$injector.get('$browser')
+                .notifyWhenNoOutstandingRequests(callback);
+          } else if (!!rootSelector) {
+            throw new Error(
+                'Could not automatically find injector on page: "' +
+                window.location.toString() + '".  Consider using config.rootEl');
+          } else {
+            throw new Error(
+                'root element (' + rootSelector + ') has no injector.' +
+                ' this may mean it is not inside ng-app.');
+          }
+        }
       }
-    } else if (rootSelector && window.getAngularTestability) {
-      var el = document.querySelector(rootSelector);
-      window.getAngularTestability(el).whenStable(callback);
-    } else if (window.getAllAngularTestabilities) {
-      var testabilities = window.getAllAngularTestabilities();
-      var count = testabilities.length;
-      var decrement = function() {
-        count--;
+      else {callback();}  // not an angular1 app
+    };
+
+    // Wait for Angular2 testability and then run test callback
+    var waitForAngular2 = function() {
+      if (window.getAngularTestability) {
+        if (rootSelector) {
+          var testability = null;
+          var el = document.querySelector(rootSelector);
+          try{
+            testability = window.getAngularTestability(el);
+          }
+          catch(e){}
+          if (testability) {
+            return testability.whenStable(testCallback);
+          }
+        }
+
+        // Didn't specify root element or testability could not be found
+        // by rootSelector. This may happen in a hybrid app, which could have
+        // more than one root.
+        var testabilities = window.getAllAngularTestabilities();
+        var count = testabilities.length;
+
+        // No angular2 testability, this happens when
+        // going to a hybrid page and going back to a pure angular1 page
         if (count === 0) {
-          callback();
+          return testCallback();
         }
-      };
-      testabilities.forEach(function(testability) {
-        testability.whenStable(decrement);
-      });
-    } else if (!window.angular) {
-      throw new Error('window.angular is undefined.  This could be either ' +
+
+        var decrement = function() {
+          count--;
+          if (count === 0) {
+            testCallback();
+          }
+        };
+        testabilities.forEach(function(testability) {
+          testability.whenStable(decrement);
+        });
+
+      }
+      else {testCallback();}  // not an angular2 app
+    };
+
+    if (!(window.angular) && !(window.getAngularTestability)) {
+      // no testability hook
+      throw new Error(
+          'both angularJS testability and angular testability are undefined.' +
+          '  This could be either ' +
           'because this is a non-angular page or because your test involves ' +
           'client-side navigation, which can interfere with Protractor\'s ' +
           'bootstrapping.  See http://git.io/v4gXM for details');
-    } else if (window.angular.version >= 2) {
-      throw new Error('You appear to be using angular, but window.' +
-          'getAngularTestability was never set.  This may be due to bad ' +
-          'obfuscation.');
-    } else {
-      throw new Error('Cannot get testability API for unknown angular ' +
-          'version "' + window.angular.version + '"');
-    }
+    } else {waitForAngular1(waitForAngular2);}  // Wait for angular1 and angular2
+                                                // Testability hooks sequentially
+
   } catch (err) {
     callback(err.message);
   }
+
 };
 
 /**
@@ -277,7 +319,7 @@ function findRepeaterRows(repeater, exact, index, using) {
   var row = rows[index] || [], multiRow = multiRows[index] || [];
   return [].concat(row, multiRow);
 }
-functions.findRepeaterRows = wrapWithHelpers(findRepeaterRows, repeaterMatch); 
+functions.findRepeaterRows = wrapWithHelpers(findRepeaterRows, repeaterMatch);
 
  /**
  * Find all rows of an ng-repeat.
@@ -697,7 +739,7 @@ functions.testForAngular = function(attempts, ng12Hybrid, asyncCallback) {
       if (n < 1) {
         if (definitelyNg1 && window.angular) {
           callback({message: 'angular never provided resumeBootstrap'});
-        } else if (ng12Hybrid && !window.angular) { 
+        } else if (ng12Hybrid && !window.angular) {
           callback({message: 'angular 1 never loaded' +
               window.getAllAngularTestabilities ? ' (are you sure this app ' +
               'uses ngUpgrade?  Try un-setting ng12Hybrid)' : ''});

spec/hybrid/async_spec.js

@@ -54,3 +54,18 @@ describe('async angular1/2 hybrid using ngUpgrade application', function() {
     });
   });
 });
+describe('async angular1/2 hybrid using downgrade application', function() {
+  it('should be able to click buttons and wait for $timeout', function() {
+      browser.get('/upgrade?downgrade');
+
+      var rootBtn = $$('my-app button').first();
+      expect(rootBtn.getText()).toEqual('Click Count: 0');
+      rootBtn.click();
+      expect(rootBtn.getText()).toEqual('Click Count: 1');
+
+      var ng2Btn = $$('ng2 button').first();
+      expect(ng2Btn.getText()).toEqual('Click Count: 0');
+      ng2Btn.click();
+      expect(ng2Btn.getText()).toEqual('Click Count: 1');
+  });
+});

testapp/app.css

@@ -24,16 +24,21 @@ li {
 
 li.left {
   left: 0;
-} 
+}
 
 li.left.mid {
-  left: 25%;
+  left: 20%;
 }
 
-li.right {
-  right: 0;
+li.mid{
+  left : 40%;
 }
 
 li.right.mid {
-  right: 25%;
+  left: 60%;
+}
+
+li.right {
+  left: 80%;
 }
+

testapp/index.html

@@ -14,9 +14,12 @@ <h1>Choose Version</h1>
       <li class='mid left'>
         <a href='upgrade?no_static'>Hybrid (JIT)</a>
       </li>
-      <li class='mid right'>
+      <li class='mid'>
         <a href='upgrade'>Hybrid (AOT)</a>
       </li>
+      <li class='mid right'>
+          <a href='upgrade?downgrade'>Hybrid (Downgrade)</a>
+      </li>
       <li class="right">
         <a href="ng2">Angular 2</a>
       </li>

testapp/package.json

@@ -6,22 +6,23 @@
     "tsc": "tsc"
   },
   "dependencies": {
-    "@angular/common": "2.2.1",
-    "@angular/compiler": "2.2.1",
-    "@angular/core": "2.2.1",
-    "@angular/http": "2.2.1",
-    "@angular/platform-browser": "2.2.1",
-    "@angular/platform-browser-dynamic": "2.2.1",
-    "@angular/router": "3.0.0",
-    "@angular/upgrade": "2.2.1",
+    "@angular/common": "5.0.0-beta.7",
+    "@angular/compiler": "5.0.0-beta.7",
+    "@angular/core": "5.0.0-beta.7",
+    "@angular/http": "5.0.0-beta.7",
+    "@angular/platform-browser": "5.0.0-beta.7",
+    "@angular/animations": "5.0.0-beta.7",
+    "@angular/platform-browser-dynamic": "5.0.0-beta.7",
+    "@angular/router": "5.0.0-beta.7",
+    "@angular/upgrade": "5.0.0-beta.7",
     "@types/angular": "^1.5.20",
     "@types/core-js": "^0.9.34",
     "@types/node": "^6.0.48",
     "core-js": "2.4.1",
     "reflect-metadata": "0.1.3",
-    "rxjs": "5.0.0-beta.12",
+    "rxjs": "5.4.3",
     "systemjs": "0.19.27",
-    "zone.js": "0.6.25"
+    "zone.js": "0.8.18"
   },
   "devDependencies": {
     "concurrently": "2.2.0",

testapp/tsconfig-aot.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "sourceMap": true,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "lib": ["es2015", "dom"],
+    "noImplicitAny": true,
+    "suppressImplicitAnyIndexErrors": true,
+    "typeRoots": [
+      "./node_modules/@types/"
+    ]
+  },
+
+  "files": [
+    "upgrade/app/downgrade/main.ts",
+    "upgrade/app/downgrade/ng1.ts",
+    "upgrade/app/downgrade/ng2.ts"
+  ]
+
+}

testapp/upgrade/app/downgrade/main.js

@@ -0,0 +1,10 @@
+import {downgradeModule} from '@angular/upgrade/static';
+declare var angular: angular.IAngularStatic;
+
+import {ng1module} from './ng1';
+import {AppModuleNgFactory} from './ng2.ngfactory';
+
+// Bootstrap Ng1 app as usual, but add a downgradedModule for the Angular (2+)
+// part of the application.
+angular.bootstrap(
+    document.body, [ng1module.name, downgradeModule(AppModuleNgFactory)]);

testapp/upgrade/app/downgrade/main.ts

@@ -0,0 +1 @@
+[{"__symbolic":"module","version":3,"metadata":{"ng1module":{"__symbolic":"error","message":"Reference to a local symbol","line":0,"character":12,"context":{"name":"angular"}}}},{"__symbolic":"module","version":1,"metadata":{"ng1module":{"__symbolic":"error","message":"Reference to a local symbol","line":0,"character":12,"context":{"name":"angular"}}}}]

testapp/upgrade/app/downgrade/ng1.js

@@ -0,0 +1,21 @@
+declare var angular: angular.IAngularStatic;
+
+function ctrl($scope: any, $timeout: any) {
+  $scope.callCount = 0;
+
+  $scope.clickButton = function() {
+    $timeout(() => {
+      $scope.callCount++;
+    }, 1000);
+  };
+}
+ctrl.$inject = ['$scope', '$timeout'];
+
+export const ng1module = angular.module('hybrid', []);
+
+ng1module.component('myApp', {
+  template: `<h3>ng1</h3><button ng-click="clickButton()">Click Count: {{callCount}}</button>
+             <ng2></ng2>
+            `,
+  controller: ctrl
+});

testapp/upgrade/app/downgrade/ng1.metadata.json

@@ -0,0 +1 @@
+[{"__symbolic":"module","version":3,"metadata":{"Ng2Component":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ng2","template":"\n    <h2>ng2</h2>\n    <button (click)='clickButton()'>Click Count: {{callCount}}</button>\n  "}]}]},"AppModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/platform-browser/animations","name":"BrowserAnimationsModule"}],"declarations":[{"__symbolic":"reference","name":"Ng2Component"}],"entryComponents":[{"__symbolic":"reference","name":"Ng2Component"}]}]}],"members":{"ngDoBootstrap":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"Ng2Component":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ng2","template":"\n    <h2>ng2</h2>\n    <button (click)='clickButton()'>Click Count: {{callCount}}</button>\n  "}]}]},"AppModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/platform-browser/animations","name":"BrowserAnimationsModule"}],"declarations":[{"__symbolic":"reference","name":"Ng2Component"}],"entryComponents":[{"__symbolic":"reference","name":"Ng2Component"}]}]}],"members":{"ngDoBootstrap":[{"__symbolic":"method"}]}}}}]

testapp/upgrade/app/downgrade/ng1.ts

@@ -0,0 +1,86 @@
+/**
+ * @fileoverview This file is generated by the Angular template compiler.
+ * Do not edit.
+ * @suppress {suspiciousCode,uselessCode,missingProperties,missingOverride}
+ */
+ /* tslint:disable */
+
+
+import * as i0 from '@angular/core';
+import * as i1 from './ng2';
+import * as i2 from '@angular/common';
+import * as i3 from '@angular/platform-browser';
+import * as i4 from '@angular/animations/browser';
+import * as i5 from '@angular/platform-browser/animations';
+import * as i6 from '@angular/animations';
+export const AppModuleNgFactory:i0.NgModuleFactory<i1.AppModule> = i0.ɵcmf(i1.AppModule,
+    ([] as any[]),(_l:any) => {
+      return i0.ɵmod([i0.ɵmpd(512,i0.ComponentFactoryResolver,i0.ɵCodegenComponentFactoryResolver,
+          [[8,[Ng2ComponentNgFactory]],[3,i0.ComponentFactoryResolver],i0.NgModuleRef]),
+          i0.ɵmpd(5120,i0.LOCALE_ID,i0.ɵo,[[3,i0.LOCALE_ID]]),i0.ɵmpd(4608,i2.NgLocalization,
+              i2.NgLocaleLocalization,[i0.LOCALE_ID,[2,i2.ɵa]]),i0.ɵmpd(4608,i0.Compiler,
+              i0.Compiler,([] as any[])),i0.ɵmpd(5120,i0.APP_ID,i0.ɵh,([] as any[])),
+          i0.ɵmpd(5120,i0.IterableDiffers,i0.ɵm,([] as any[])),i0.ɵmpd(5120,i0.KeyValueDiffers,
+              i0.ɵn,([] as any[])),i0.ɵmpd(4608,i3.DomSanitizer,i3.ɵd,[i2.DOCUMENT]),
+          i0.ɵmpd(6144,i0.Sanitizer,(null as any),[i3.DomSanitizer]),i0.ɵmpd(4608,
+              i3.HAMMER_GESTURE_CONFIG,i3.HammerGestureConfig,([] as any[])),i0.ɵmpd(5120,
+              i3.EVENT_MANAGER_PLUGINS,(p0_0:any,p0_1:any,p1_0:any,p2_0:any,p2_1:any) => {
+                return [new i3.ɵDomEventsPlugin(p0_0,p0_1),new i3.ɵKeyEventsPlugin(p1_0),
+                    new i3.ɵHammerGesturesPlugin(p2_0,p2_1)];
+              },[i2.DOCUMENT,i0.NgZone,i2.DOCUMENT,i2.DOCUMENT,i3.HAMMER_GESTURE_CONFIG]),
+          i0.ɵmpd(4608,i3.EventManager,i3.EventManager,[i3.EVENT_MANAGER_PLUGINS,i0.NgZone]),
+          i0.ɵmpd(135680,i3.ɵDomSharedStylesHost,i3.ɵDomSharedStylesHost,[i2.DOCUMENT]),
+          i0.ɵmpd(4608,i3.ɵDomRendererFactory2,i3.ɵDomRendererFactory2,[i3.EventManager,
+              i3.ɵDomSharedStylesHost]),i0.ɵmpd(5120,i4.AnimationDriver,i5.ɵc,([] as any[])),
+          i0.ɵmpd(5120,i4.ɵAnimationStyleNormalizer,i5.ɵd,([] as any[])),i0.ɵmpd(4608,
+              i4.ɵAnimationEngine,i5.ɵb,[i4.AnimationDriver,i4.ɵAnimationStyleNormalizer]),
+          i0.ɵmpd(5120,i0.RendererFactory2,i5.ɵe,[i3.ɵDomRendererFactory2,i4.ɵAnimationEngine,
+              i0.NgZone]),i0.ɵmpd(6144,i3.ɵSharedStylesHost,(null as any),[i3.ɵDomSharedStylesHost]),
+          i0.ɵmpd(4608,i0.Testability,i0.Testability,[i0.NgZone]),i0.ɵmpd(4608,i3.Meta,
+              i3.Meta,[i2.DOCUMENT]),i0.ɵmpd(4608,i3.Title,i3.Title,[i2.DOCUMENT]),
+          i0.ɵmpd(4608,i6.AnimationBuilder,i5.ɵBrowserAnimationBuilder,[i0.RendererFactory2,
+              i3.DOCUMENT]),i0.ɵmpd(512,i2.CommonModule,i2.CommonModule,([] as any[])),
+          i0.ɵmpd(1024,i0.ErrorHandler,i3.ɵa,([] as any[])),i0.ɵmpd(1024,i0.APP_INITIALIZER,
+              (p0_0:any) => {
+                return [i3.ɵg(p0_0)];
+              },[[2,i0.NgProbeToken]]),i0.ɵmpd(512,i0.ApplicationInitStatus,i0.ApplicationInitStatus,
+              [[2,i0.APP_INITIALIZER]]),i0.ɵmpd(131584,i0.ɵg,i0.ɵg,[i0.NgZone,i0.ɵConsole,
+              i0.Injector,i0.ErrorHandler,i0.ComponentFactoryResolver,i0.ApplicationInitStatus]),
+          i0.ɵmpd(2048,i0.ApplicationRef,(null as any),[i0.ɵg]),i0.ɵmpd(512,i0.ApplicationModule,
+              i0.ApplicationModule,[i0.ApplicationRef]),i0.ɵmpd(512,i3.BrowserModule,
+              i3.BrowserModule,[[3,i3.BrowserModule]]),i0.ɵmpd(512,i5.BrowserAnimationsModule,
+              i5.BrowserAnimationsModule,([] as any[])),i0.ɵmpd(512,i1.AppModule,i1.AppModule,
+              ([] as any[]))]);
+    });
+const styles_Ng2Component:any[] = ([] as any[]);
+export const RenderType_Ng2Component:i0.RendererType2 = i0.ɵcrt({encapsulation:2,styles:styles_Ng2Component,
+    data:{}});
+export function View_Ng2Component_0(_l:any):i0.ɵViewDefinition {
+  return i0.ɵvid(0,[(_l()(),i0.ɵted((null as any),['\n    '])),(_l()(),i0.ɵeld(0,(null as any),
+      (null as any),1,'h2',([] as any[]),(null as any),(null as any),(null as any),
+      (null as any),(null as any))),(_l()(),i0.ɵted((null as any),['ng2'])),(_l()(),
+      i0.ɵted((null as any),['\n    '])),(_l()(),i0.ɵeld(0,(null as any),(null as any),
+      1,'button',([] as any[]),(null as any),[[(null as any),'click']],(_v,en,$event) => {
+        var ad:boolean = true;
+        var _co:i1.Ng2Component = _v.component;
+        if (('click' === en)) {
+          const pd_0:any = ((<any>_co.clickButton()) !== false);
+          ad = (pd_0 && ad);
+        }
+        return ad;
+      },(null as any),(null as any))),(_l()(),i0.ɵted((null as any),['Click Count: ',
+      ''])),(_l()(),i0.ɵted((null as any),['\n  ']))],(null as any),(_ck,_v) => {
+    var _co:i1.Ng2Component = _v.component;
+    const currVal_0:any = _co.callCount;
+    _ck(_v,5,0,currVal_0);
+  });
+}
+export function View_Ng2Component_Host_0(_l:any):i0.ɵViewDefinition {
+  return i0.ɵvid(0,[(_l()(),i0.ɵeld(0,(null as any),(null as any),1,'ng2',([] as any[]),
+      (null as any),(null as any),(null as any),View_Ng2Component_0,RenderType_Ng2Component)),
+      i0.ɵdid(49152,(null as any),0,i1.Ng2Component,([] as any[]),(null as any),(null as any))],
+      (null as any),(null as any));
+}
+export const Ng2ComponentNgFactory:i0.ComponentFactory<i1.Ng2Component> = i0.ɵccf('ng2',
+    i1.Ng2Component,View_Ng2Component_Host_0,{},{},([] as any[]));
+//# sourceMappingURL=data:application/json;base64,eyJmaWxlIjoiL3Vzci9sb2NhbC9nb29nbGUvaG9tZS9xaXlpL3Byb3RyYWN0b3IvdGVzdGFwcC91cGdyYWRlL2FwcC9kb3duZ3JhZGUvbmcyLm5nZmFjdG9yeS50cyIsInZlcnNpb24iOjMsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIm5nOi8vL3Vzci9sb2NhbC9nb29nbGUvaG9tZS9xaXlpL3Byb3RyYWN0b3IvdGVzdGFwcC91cGdyYWRlL2FwcC9kb3duZ3JhZGUvbmcyLnRzIiwibmc6Ly8vdXNyL2xvY2FsL2dvb2dsZS9ob21lL3FpeWkvcHJvdHJhY3Rvci90ZXN0YXBwL3VwZ3JhZGUvYXBwL2Rvd25ncmFkZS9uZzIudHMuTmcyQ29tcG9uZW50Lmh0bWwiLCJuZzovLy91c3IvbG9jYWwvZ29vZ2xlL2hvbWUvcWl5aS9wcm90cmFjdG9yL3Rlc3RhcHAvdXBncmFkZS9hcHAvZG93bmdyYWRlL25nMi50cy5OZzJDb21wb25lbnRfSG9zdC5odG1sIl0sInNvdXJjZXNDb250ZW50IjpbIiAiLCJcbiAgICA8aDI+bmcyPC9oMj5cbiAgICA8YnV0dG9uIChjbGljayk9J2NsaWNrQnV0dG9uKCknPkNsaWNrIENvdW50OiB7e2NhbGxDb3VudH19PC9idXR0b24+XG4gICIsIjxuZzI+PC9uZzI+Il0sIm1hcHBpbmdzIjoiQUFBQTs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztvQkNBQSwyQ0FDSTtNQUFBO01BQUEsOEJBQUksd0NBQVE7YUFBQSw0QkFDWjtNQUFBO1FBQUE7UUFBQTtRQUFRO1VBQUE7VUFBQTtRQUFBO1FBQVI7TUFBQSxnQ0FBZ0M7TUFBQSxNQUFtQzs7SUFBbkM7SUFBQTs7OztvQkNGcEM7TUFBQTthQUFBOzs7OyJ9

testapp/upgrade/app/downgrade/ng2.js

@@ -0,0 +1,47 @@
+import * as angular from 'angular';
+import { NgModule , Component } from '@angular/core';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { downgradeComponent } from '@angular/upgrade/static';
+
+import { ng1module } from './ng1';
+
+@Component({
+  selector: 'ng2',
+  template: `
+    <h2>ng2</h2>
+    <button (click)='clickButton()'>Click Count: {{callCount}}</button>
+  `
+})
+export class Ng2Component {
+  callCount: number = 0;
+  clickButton = () => {
+    setTimeout(() => {
+      this.callCount++;
+    }, 1000);
+  };
+}
+
+@NgModule({
+  imports: [
+    BrowserAnimationsModule,
+  ],
+  declarations: [
+    Ng2Component,
+  ],
+  entryComponents: [
+    Ng2Component
+  ]
+})
+export class AppModule {
+  ngDoBootstrap() {}
+}
+
+
+
+  // Register the Angular 2 component with the Angular 1 module.
+ng1module.directive(
+  'ng2',  // lowerCamel when registering.
+  // propagateDigest: false will detach the digest cycle from AngularJS from
+  // propagating into the Angular (2+) CD.
+  downgradeComponent({component: Ng2Component, propagateDigest: false}));
+

testapp/upgrade/app/downgrade/ng2.metadata.json

@@ -22,7 +22,11 @@
       System.import('systemjs.config.js').then(function () {
         if (window.location.search.indexOf('no_static') != -1) {
           System.import('app/no_static/main');
-        } else {
+        }
+        else if (window.location.search.indexOf('downgrade') != -1) {
+          System.import('app/downgrade/main');
+        }
+        else {
           System.import('app/main');
         }
       }).catch(function(err) {

testapp/upgrade/app/downgrade/ng2.ngfactory.js

@@ -18,6 +18,9 @@
       '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
       '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
       '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
+      '@angular/animations': 'npm:@angular/animations/bundles/animations.umd.js',
+      '@angular/animations/browser': 'npm:@angular/animations/bundles/animations-browser.umd.js',
+      '@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js',
       '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
       '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
       '@angular/router': 'npm:@angular/router/bundles/router.umd.js',