diff --git a/public/docs/_examples/upgrade-adapter/e2e-spec.ts b/public/docs/_examples/upgrade-adapter/e2e-spec.ts
index c0325bc4b3..11766a35d3 100644
--- a/public/docs/_examples/upgrade-adapter/e2e-spec.ts
+++ b/public/docs/_examples/upgrade-adapter/e2e-spec.ts
@@ -117,9 +117,8 @@ describe('Upgrade Tests', function () {
   describe('Downgraded component with content projection', function() {
 
     beforeAll(function () {
+      setProtractorToHybridMode();
       browser.get('/index-1-to-2-projection.html');
-      setProtractorToNg1Mode();
-      waitForNg1AsyncBootstrap();
     });
 
     it('can be transcluded into', function () {
diff --git a/public/docs/_examples/upgrade-adapter/ts/app/1-to-2-projection/app.module.ts b/public/docs/_examples/upgrade-adapter/ts/app/1-to-2-projection/app.module.ts
index 5daeb671e3..a820ac438c 100644
--- a/public/docs/_examples/upgrade-adapter/ts/app/1-to-2-projection/app.module.ts
+++ b/public/docs/_examples/upgrade-adapter/ts/app/1-to-2-projection/app.module.ts
@@ -1,25 +1,36 @@
+declare var angular: any;
 import { NgModule } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 import { BrowserModule } from '@angular/platform-browser';
-import { UpgradeAdapter } from '@angular/upgrade';
+import { UpgradeModule, downgradeComponent } from '@angular/upgrade/static';
 
-import { MainController } from './main.controller';
+import { MainController } from './main.controller';
 import { HeroDetailComponent } from './hero-detail.component';
 
 @NgModule({
-  imports: [ BrowserModule ],
-  declarations: [ HeroDetailComponent ]
+  imports: [
+    BrowserModule,
+    UpgradeModule
+  ],
+  declarations: [
+    HeroDetailComponent
+  ],
+  entryComponents: [
+    HeroDetailComponent
+  ]
 })
-export class AppModule {}
-
-declare var angular: any;
-const upgradeAdapter = new UpgradeAdapter(AppModule);
+export class AppModule {
+  ngDoBootstrap() {}
+}
 
 angular.module('heroApp', [])
   .controller('MainController', MainController)
-  .directive('heroDetail', upgradeAdapter.downgradeNg2Component(HeroDetailComponent));
+  .directive('heroDetail', downgradeComponent({
+    component: HeroDetailComponent,
+    inputs: ['hero']
+  }));
 
-upgradeAdapter.bootstrap(
-  document.querySelector('hero-app'),
-  ['heroApp'],
-  {strictDi: true}
-);
+platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => {
+  let upgrade = platformRef.injector.get(UpgradeModule);
+  upgrade.bootstrap(document.body, ['heroApp'], {strictDi: true});
+});
diff --git a/public/docs/_examples/upgrade-adapter/ts/app/downgrade-io/app.module.ts b/public/docs/_examples/upgrade-adapter/ts/app/downgrade-io/app.module.ts
index 5c2b8699e9..bcdcb80cab 100644
--- a/public/docs/_examples/upgrade-adapter/ts/app/downgrade-io/app.module.ts
+++ b/public/docs/_examples/upgrade-adapter/ts/app/downgrade-io/app.module.ts
@@ -1,38 +1,3 @@
-// import { NgModule } from '@angular/core';
-// import { BrowserModule } from '@angular/platform-browser';
-
-// import { MainController } from './main.controller';
-// #docregion downgradecomponent
-// import { HeroDetailComponent } from './hero-detail.component';
-
-// #enddocregion downgradecomponent
-
-// @NgModule({
-//   imports: [ BrowserModule ],
-//   declarations: [ HeroDetailComponent ]
-// })
-// export class AppModule {}
-
-// import { UpgradeAdapter } from '@angular/upgrade';
-
-// const upgradeAdapter = new UpgradeAdapter(AppModule);
-
-// #docregion downgradecomponent
-
-// angular.module('heroApp', [])
-//   .controller('MainController', MainController)
-//   .directive('heroDetail', upgradeAdapter.downgradeNg2Component(HeroDetailComponent));
-
-// #enddocregion downgradecomponent
-
-// upgradeAdapter.bootstrap(
-//   document.querySelector('hero-app'),
-//   ['heroApp'],
-//   {strictDi: true}
-// );
-// // #enddocregion bootstrap
-
-
 declare var angular: any;
 import { NgModule } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';