final touches

src/app.ts

@@ -1,66 +1,44 @@
-// angular1 imports
-import * as angular from 'angular'
-import 'angular-route'
-
-// angular2 imports
-import {NgModule, Component} from '@angular/core';
+import {NgModule} from '@angular/core';
 import {Router, RouterModule, UrlHandlingStrategy} from '@angular/router';
 import {BrowserModule} from '@angular/platform-browser';
 import {UpgradeAdapter} from '@angular/upgrade';
 
 // modules
 import {MessagesModule, MessagesNgModule} from './messages';
-import {MenuModule} from './menu';
+import {MenuModule, MenuNgModule} from './menu';
 import {SettingsNgModule} from './settings';
+import {Ng2RouterRoot, createRootModule} from './upgrade_utils';
 
-import {Repository} from './repository';
-
-
-
-@Component({selector : 'ng2-router-root', template : `<router-outlet></router-outlet>`})
-export class Ng2RouterRoot {
-}
-
-
-
+// This URL handling strategy is custom and application-specific.
 class Ng1Ng2UrlHandlingStrategy implements UrlHandlingStrategy {
   shouldProcessUrl(url) { return url.toString().startsWith("/settings"); }
   extract(url) { return url; }
   merge(url, whole) { return url; }
 }
 
-// // angular2 setup
 @NgModule({
-  imports: [BrowserModule, MessagesNgModule, SettingsNgModule, RouterModule.forRoot([], {useHash: true})],
+  imports: [
+    BrowserModule,
+    MessagesNgModule,
+    SettingsNgModule,
+    RouterModule.forRoot([], {useHash: true})
+  ],
   providers: [
     { provide: UrlHandlingStrategy, useClass: Ng1Ng2UrlHandlingStrategy }
   ],
   declarations: [Ng2RouterRoot]
 })
 class AppModule {}
 const adapter = new UpgradeAdapter(AppModule);
-
+MenuNgModule.setAdapter(adapter);
 MessagesNgModule.setAdapter(adapter);
 
-
-
-
-// angular1 setup
-const RootModule = angular.module('rootModule', ['ngRoute', MessagesModule.name, MenuModule.name]);
-RootModule.component('rootCmp', {template : '<div class="ng-view"></div>'});
-RootModule.directive('ng2RouterRoot', <any>adapter.downgradeNg2Component(Ng2RouterRoot));
-RootModule.config(($routeProvider) => {
-  $routeProvider
-    .otherwise({template : '<ng2-router-root></ng2-router-root>', reloadOnSearch: false});
-});
-
-RootModule.service('repository', Repository);
-adapter.upgradeNg1Provider("repository", {asToken: Repository});
-
+createRootModule(adapter, ['ngRoute', MessagesModule.name, MenuModule.name]);
 
 export function bootstrap(el) {
-  const ref = adapter.bootstrap(el, [ 'rootModule' ]);
+  const ref = adapter.bootstrap(el, ['rootModule']);
 
+  // this is required because of a bug in NgUpgrade
   setTimeout(() => {
     ref.ng2Injector.get(Router).initialNavigation();
   }, 0);

src/menu/index.ts

@@ -1,20 +1,18 @@
+// 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']);
-
 MenuModule.component('menu', MenuCmp);
-
 MenuModule.config(($routeProvider) => {
   $routeProvider.when('/', {template : '<menu></menu>'});
 });
 
+// techncially, this is not required, but it is nice to have it for consistency
 @NgModule({})
 export class MenuNgModule {
-  static setAdapter(adapter: UpgradeAdapter) {
-    //no components are migrated to angular2
-  }
+  static setAdapter(adapter: UpgradeAdapter) {}
 }

src/menu/menu_cmp.ts

@@ -3,6 +3,7 @@ export const MenuCmp = {
     <h1>Messages</h1>
     <ul>
       <li><a href="#/messages/inbox">Inbox</a></li>
+      <li><a href="#/messages/draft">Drafts</a></li>
       <li><a href="#/settings">Settings</a></li>
     </ul>
   `

src/messages/index.ts

@@ -1,7 +1,10 @@
+// This module is in the midst of transitiong from Angular 1 to Angular 2.
+// We migrated MessageTextCmp to Angular2.
 import * as angular from 'angular';
 import {NgModule} from '@angular/core';
 import {UpgradeAdapter} from '@angular/upgrade';
 
+import {Repository} from './repository';
 import {MessageTextCmp} from './message_text_cmp';
 import {MessagesCmp} from './messages_cmp';
 import {MessageCmp} from './message_cmp';
@@ -10,7 +13,7 @@ export const MessagesModule = angular.module('MessagesModule', ['ngRoute']);
 
 MessagesModule.component('messages', MessagesCmp);
 MessagesModule.component('message', MessageCmp);
-
+MessagesModule.service('repository', Repository);
 MessagesModule.config(($routeProvider) => {
   $routeProvider
     .when('/messages/:folder',     {template : '<messages></messages>'})
@@ -22,5 +25,6 @@ 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});
   }
 }

src/messages/message_cmp.ts

@@ -1,4 +1,4 @@
-import {Message, Repository} from '../repository';
+import {Message, Repository} from './repository';
 
 export class MessageController {
   folder: string;

src/messages/messages_cmp.ts

@@ -1,4 +1,4 @@
-import {Message, Repository} from '../repository';
+import {Message, Repository} from './repository';
 
 export class MessagesController {
   folder: string;

src/settings/index.ts

@@ -1,3 +1,4 @@
+// This module was fully migrated to Angular 2
 import {NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {RouterModule} from '@angular/router';

src/settings/page_size_cmp.ts

@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {Repository} from '../repository'
+import {Repository} from '../messages/repository'
 
 @Component({
   selector: 'page-settings',

src/upgrade_utils.ts

@@ -0,0 +1,31 @@
+// angular1 imports
+import * as angular from 'angular'
+import 'angular-route'
+
+// angular2 imports
+import {NgModule, Component} from '@angular/core';
+import {Router, RouterModule, UrlHandlingStrategy} from '@angular/router';
+import {BrowserModule} from '@angular/platform-browser';
+import {UpgradeAdapter} from '@angular/upgrade';
+
+// modules
+import {MessagesModule, MessagesNgModule} from './messages';
+import {MenuModule, MenuNgModule} from './menu';
+import {SettingsNgModule} from './settings';
+
+
+@Component({selector : 'ng2-router-root', template: `<router-outlet></router-outlet>`})
+export class Ng2RouterRoot {}
+
+export function createRootModule(adapter: UpgradeAdapter, 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.config(($routeProvider) => {
+    $routeProvider
+      .otherwise({template : '<ng2-router-root></ng2-router-root>', reloadOnSearch: false});
+  });
+
+  return RootModule;
+}