update upgrade-phonecat-2-hybrid

public/docs/_examples/protractor-helpers.ts

@@ -32,17 +32,4 @@ export function setProtractorToNg1Mode(): void {
 export function setProtractorToHybridMode() {
   setProtractorToNg1Mode();
   browser.ng12Hybrid = true;
-  // remove once waitForNg1AsyncBootstrap() is removed as well
-  browser.ignoreSynchronization = false;
-}
-
-// TODO remove once all update adapter tests are moved to setProtractorToHybridMode
-// Protractor doesn't support the UpgradeAdapter's asynchronous
-// bootstrap with Angular 1 at the moment. Get around it by
-// waiting for an element to get `ng-scope` class.
-export function waitForNg1AsyncBootstrap() {
-  browser.ignoreSynchronization = true;
-  browser.driver.wait(function() {
-    return element(by.css('.ng-scope')).isPresent();
-  }, 5000);
 }

public/docs/_examples/upgrade-phonecat-2-hybrid/e2e-spec.ts

@@ -1,17 +1,19 @@
 'use strict'; // necessary for es6 output in node
 
 import { browser, element, by } from 'protractor';
-import { setProtractorToNg1Mode, waitForNg1AsyncBootstrap } from '../protractor-helpers';
+import { setProtractorToHybridMode } from '../protractor-helpers';
 
 // Angular E2E Testing Guide:
 // https://docs.angularjs.org/guide/e2e-testing
 
 describe('PhoneCat Application', function() {
 
+  beforeAll(function () {
+    setProtractorToHybridMode();
+  });
+
   it('should redirect `index.html` to `index.html#!/phones', function() {
     browser.get('index.html');
-    setProtractorToNg1Mode();
-    waitForNg1AsyncBootstrap();
     expect(browser.getLocationAbsUrl()).toBe('/phones');
   });
 
@@ -19,8 +21,6 @@ describe('PhoneCat Application', function() {
 
     beforeEach(function() {
       browser.get('index.html#!/phones');
-      setProtractorToNg1Mode();
-      waitForNg1AsyncBootstrap();
     });
 
     it('should filter the phone list as a user types into the search box', function() {
@@ -64,12 +64,12 @@ describe('PhoneCat Application', function() {
       ]);
     });
 
-    fit('should render phone specific links', function() {
+    it('should render phone specific links', function() {
       let query = element(by.css('input'));
       query.sendKeys('nexus');
 
       element.all(by.css('.phones li a')).first().click();
-      waitForNg1AsyncBootstrap(); // Not sure why this is needed but it is. The route change works fine.
+      browser.sleep(200); // Not sure why this is needed but it is. The route change works fine.
       expect(browser.getLocationAbsUrl()).toBe('/phones/nexus-s');
     });
 
@@ -79,8 +79,6 @@ describe('PhoneCat Application', function() {
 
     beforeEach(function() {
       browser.get('index.html#!/phones/nexus-s');
-      setProtractorToNg1Mode();
-      waitForNg1AsyncBootstrap();
     });
 
     it('should display the `nexus-s` page', function() {

public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/app.module.ts

@@ -1,6 +1,7 @@
 // #docplaster
 // #docregion bare
 import { NgModule } from '@angular/core';
+import { UpgradeModule } from '@angular/upgrade/static';
 import { BrowserModule } from '@angular/platform-browser';
 // #enddocregion bare
 // #docregion httpmodule
@@ -27,6 +28,7 @@ import { PhoneDetailComponent } from './phone-detail/phone-detail.component';
 @NgModule({
   imports: [
     BrowserModule,
+    UpgradeModule,
     // #enddocregion bare
     HttpModule,
     // #enddocregion httpmodule, phone
@@ -42,10 +44,27 @@ import { PhoneDetailComponent } from './phone-detail/phone-detail.component';
     CheckmarkPipe
     // #docregion phonelist, phonedetail
   ],
+  entryComponents: [
+    PhoneListComponent,
+    // #enddocregion phonelist
+    PhoneDetailComponent
+    // #enddocregion phonedetail
+  ],
   // #docregion phone
-  providers: [ Phone ]
+  providers: [
+    Phone,
+    // #docregion routeparams
+    {
+      provide: '$routeParams',
+      useFactory: (i: any) => i.get('$routeParams'),
+      deps: ['$injector']
+    }
+    // #enddocregion routeparams
+  ]
 // #docregion bare, httpmodule, phonelist
 })
-export class AppModule {}
+export class AppModule {
+  ngDoBootstrap() {}
+}
 // #enddocregion httpmodule, phone, phonelist, phonedetail, checkmarkpipe
 // #enddocregion bare

public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/main.ts

@@ -1,6 +1,7 @@
 // #docregion import-adapter
-import { UpgradeAdapter } from '@angular/upgrade';
 declare var angular: any;
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { UpgradeModule, downgradeComponent, downgradeInjectable } from '@angular/upgrade/static';
 
 import { AppModule } from './app.module';
 // #enddocregion import-adapter
@@ -17,24 +18,24 @@ import { PhoneDetailComponent } from './phone-detail/phone-detail.component';
 
 // #enddocregion phone-detail
 // #docregion init-adapter
-let upgradeAdapter = new UpgradeAdapter(AppModule);
+// let upgradeAdapter = new UpgradeAdapter(AppModule);
 // #enddocregion init-adapter
 
 // #docregion routeparams
-upgradeAdapter.upgradeNg1Provider('$routeParams');
+// upgradeAdapter.upgradeNg1Provider('$routeParams');
 // #enddocregion routeparams
 
 // #docregion phone-service
 
 angular.module('core.phone')
-  .factory('phone', upgradeAdapter.downgradeNg2Provider(Phone));
+  .factory('phone', downgradeInjectable(Phone));
 // #enddocregion phone-service
 // #docregion phone-list
 
 angular.module('phoneList')
   .directive(
     'phoneList',
-    upgradeAdapter.downgradeNg2Component(PhoneListComponent) as angular.IDirectiveFactory
+    downgradeComponent({component: PhoneListComponent}) as angular.IDirectiveFactory
   );
 // #enddocregion phone-list
 // #docregion phone-detail
@@ -42,10 +43,14 @@ angular.module('phoneList')
 angular.module('phoneDetail')
   .directive(
     'phoneDetail',
-    upgradeAdapter.downgradeNg2Component(PhoneDetailComponent) as angular.IDirectiveFactory
+    downgradeComponent({component: PhoneDetailComponent}) as angular.IDirectiveFactory
   );
 // #enddocregion phone-detail
 
 // #docregion bootstrap
-upgradeAdapter.bootstrap(document.documentElement, ['phonecatApp']);
+// upgradeAdapter.bootstrap(document.documentElement, ['phonecatApp']);
+platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => {
+  let upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
+  upgrade.bootstrap(document.body, ['phonecatApp'], {strictDi: true});
+});
 // #enddocregion bootstrap

public/docs/_examples/upgrade-phonecat-2-hybrid/ts/index.html

@@ -32,6 +32,7 @@
     <script src="/node_modules/systemjs/dist/system.src.js"></script>
     <!-- #enddocregion ng2 -->
     <script src="/systemjs.config.1.js"></script>
+    <script src="/systemjs.config.extras.js"></script>
     <!-- #docregion ng2
     <script src="/systemjs.config.js"></script>
     <script>

public/docs/_examples/upgrade-phonecat-2-hybrid/ts/systemjs.config.extras.js

@@ -0,0 +1,7 @@
+// #docregion
+/** App specific SystemJS configuration */
+System.config({
+  map: {
+    '@angular/upgrade/static': 'npm:@angular/upgrade/bundles/upgrade-static.umd.js',
+  }
+});