switch to using @angular/upgrade/static

README.md

@@ -4,8 +4,6 @@
 
 - clone this repo
 - `npm install`
-- `rm node_modules/@angular/router`
-- `npm install angular-router-3.1.0.tgz`
 - `npm start`
 - open `localhost:8080`
 
@@ -34,7 +32,7 @@ Every module defintes components, services, and routes. In addition every module
 
 These are the routes the application supports:
 
-* /id
+* /
 * /messages/:folder
 * /messages/:folder/:id
 * /settings

package.json

@@ -11,14 +11,14 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@angular/common": "2.1.0",
-    "@angular/compiler": "2.1.0",
-    "@angular/core": "2.1.0",
-    "@angular/forms": "2.1.0",
-    "@angular/platform-browser": "2.1.0",
-    "@angular/platform-browser-dynamic": "2.1.0",
-    "@angular/upgrade": "2.1.0",
-    "@angular/router": "3.1.0",
+    "@angular/common": "2.2.0-rc.0",
+    "@angular/compiler": "2.2.0-rc.0",
+    "@angular/core": "2.2.0-rc.0",
+    "@angular/forms": "2.2.0-rc.0",
+    "@angular/platform-browser": "2.2.0-rc.0",
+    "@angular/platform-browser-dynamic": "2.2.0-rc.0",
+    "@angular/upgrade": "2.2.0-rc.0",
+    "@angular/router": "3.2.0-rc.0",
     "angular": "^1.5.8",
     "angular-route": "1.5.8",
     "core-js": "^2.4.1",

src/app.ts

@@ -1,7 +1,9 @@
 import {NgModule} from '@angular/core';
 import {Router, RouterModule, UrlHandlingStrategy} from '@angular/router';
 import {BrowserModule} from '@angular/platform-browser';
-import {UpgradeAdapter} from '@angular/upgrade';
+import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
+import {UpgradeModule} from '@angular/upgrade/static';
+
 
 // modules
 import {MessagesModule, MessagesNgModule} from './messages';
@@ -19,6 +21,7 @@ class Ng1Ng2UrlHandlingStrategy implements UrlHandlingStrategy {
 
 @NgModule({
   imports: [
+    UpgradeModule,
     BrowserModule,
 
     // import all modules
@@ -38,20 +41,13 @@ class Ng1Ng2UrlHandlingStrategy implements UrlHandlingStrategy {
 })
 class AppModule {}
 
-// Creating an adapter passing it to all the modules
-const adapter = new UpgradeAdapter(AppModule);
-MenuNgModule.setAdapter(adapter);
-MessagesNgModule.setAdapter(adapter);
-SettingsNgModule.setAdapter(adapter);
-
 // create Angular1 root module
-createAngular1RootModule(adapter, ['ngRoute', MessagesModule.name, MenuModule.name]);
+const rootModule = createAngular1RootModule(['ngRoute', MessagesModule.name, MenuModule.name]);
 
 export function bootstrap(el) {
-  const ref = adapter.bootstrap(el, ['rootModule']);
-
-  // this is required because of a bug in NgUpgrade
-  setTimeout(() => {
-    ref.ng2Injector.get(Router).initialNavigation();
-  }, 0);
+  platformBrowserDynamic().bootstrapModule(AppModule).then(ref => {
+    const upgrade = ref.injector.get(UpgradeModule) as UpgradeModule;
+    upgrade.bootstrap(el, [rootModule.name]);
+    upgrade.injector.get(Router).initialNavigation();
+  });
 }

src/menu/index.ts

@@ -1,8 +1,6 @@
 // This module is purely written in Angular 1.
 import * as angular from 'angular';
 import {NgModule} from '@angular/core';
-import {UpgradeAdapter} from '@angular/upgrade';
-
 import {MenuCmp} from './menu_cmp';
 
 export const MenuModule = angular.module('MenuModule', ['ngRoute']);
@@ -14,5 +12,4 @@ MenuModule.config(($routeProvider) => {
 // techncially, this is not required, but it is nice to have it for consistency
 @NgModule({})
 export class MenuNgModule {
-  static setAdapter(adapter: UpgradeAdapter) {}
 }

src/messages/index.ts

@@ -2,7 +2,7 @@
 // We migrated MessageTextCmp to Angular2.
 import * as angular from 'angular';
 import {NgModule} from '@angular/core';
-import {UpgradeAdapter} from '@angular/upgrade';
+import {UpgradeModule, downgradeComponent} from '@angular/upgrade/static';
 
 import {Repository} from './repository';
 import {MessageTextCmp} from './message_text_cmp';
@@ -20,11 +20,16 @@ MessagesModule.config(($routeProvider) => {
     .when('/messages/:folder/:id', {template : '<message></message>'});
 });
 
-@NgModule({declarations: [MessageTextCmp]})
-export class MessagesNgModule {
-  static setAdapter(adapter: UpgradeAdapter) {
-    // all components migrated to angular 2 can be downgraded here
-    MessagesModule.directive('messageText', <any>adapter.downgradeNg2Component(MessageTextCmp));
-    adapter.upgradeNg1Provider("repository", {asToken: Repository});
-  }
-}
+@NgModule({
+  declarations: [MessageTextCmp],
+  providers: [
+    {provide: Repository, useFactory: (m) => m.$injector.get('repository'), deps: [UpgradeModule]}
+  ]
+})
+export class MessagesNgModule {}
+
+// all components migrated to angular 2 can be downgraded here
+MessagesModule.directive('messageText', <any>downgradeComponent({
+  component: MessageTextCmp,
+  inputs: ['text']
+}));

src/settings/index.ts

@@ -1,6 +1,5 @@
 // This module was fully migrated to Angular 2
 import {NgModule} from '@angular/core';
-import {UpgradeAdapter} from '@angular/upgrade';
 import {CommonModule} from '@angular/common';
 import {RouterModule} from '@angular/router';
 import {FormsModule} from '@angular/forms';
@@ -21,5 +20,4 @@ import {PageSizeCmp} from './page_size_cmp';
   declarations: [SettingsCmp, PageSizeCmp]
 })
 export class SettingsNgModule {
-  static setAdapter(adapter: UpgradeAdapter) {}
 }

src/upgrade_utils.ts

@@ -6,7 +6,7 @@ import 'angular-route'
 import {NgModule, Component} from '@angular/core';
 import {Router, RouterModule, UrlHandlingStrategy} from '@angular/router';
 import {BrowserModule} from '@angular/platform-browser';
-import {UpgradeAdapter} from '@angular/upgrade';
+import {downgradeComponent} from '@angular/upgrade/static';
 
 // modules
 import {MessagesModule, MessagesNgModule} from './messages';
@@ -17,13 +17,14 @@ import {SettingsNgModule} from './settings';
 @Component({selector : 'ng2-router-root', template: `<router-outlet></router-outlet>`})
 export class Ng2RouterRoot {}
 
-export function createAngular1RootModule(adapter: UpgradeAdapter, moduleNames: string[]) {
+export function createAngular1RootModule(moduleNames: string[]) {
   const RootModule = angular.module('rootModule', moduleNames);
 
   RootModule.component('rootCmp', {template : '<div class="ng-view"></div>'});
-  RootModule.directive('ng2RouterRoot', <any>adapter.downgradeNg2Component(Ng2RouterRoot));
+  RootModule.directive('ng2RouterRoot', <any>downgradeComponent({
+    component: Ng2RouterRoot
+  }));
   RootModule.config(($routeProvider) => {
-
     // telling the Angular 1 router to render the placeholder
     $routeProvider
       .otherwise({template : '<ng2-router-root></ng2-router-root>', reloadOnSearch: false});