switch to aoi

package.json

@@ -16,24 +16,28 @@
     "@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",
-    "rxjs": "^5.0.0-beta.12",
+    "rxjs": "5.0.0-rc.1",
     "zone.js": "^0.6.12"
   },
   "devDependencies": {
     "@types/angular": "^1.5.8",
     "@types/angular-route": "*",
+
     "clang-format": "^1.0.32",
-    "ts-loader": "1.0.0",
+
     "typescript": "2.0.7",
     "webpack": "2.1.0-beta.25",
-    "@ngtools/webpack": "1.1.4",
     "webpack-dev-server": "2.1.0-beta.10",
-    "webpack-livereload-plugin": "^0.8.1"
+
+    "@angular/platform-server": "2.2.0-rc.0",
+    "@angular/compiler-cli": "2.2.0-rc.0",
+    "@ngtools/webpack": "1.1.4"
   }
 }

src/main.ts

@@ -1,8 +1,25 @@
 // import polyfills
 import 'core-js/es7/reflect'
 import 'zone.js/dist/zone'
-import 'angular'
-import 'angular-route'
-import {bootstrap} from './app'
 
-bootstrap(document.body);
+// import angular2 dpes
+import {platformBrowser} from '@angular/platform-browser';
+import {Router} from '@angular/router';
+
+import {Ng1AppModule} from './ng1_app';
+import {Ng2AppModuleNgFactory} from './ngfactory/src/ng2_app.ngfactory';
+
+/**
+ * We bootstrap the Angular 2 module first, and then, once it's done,
+ * bootstrap the Angular 1 module.
+ */
+platformBrowser().bootstrapModuleFactory(Ng2AppModuleNgFactory).then(ref => {
+  // bootstrap angular1
+  (<any>ref.instance).upgrade.bootstrap(document.body, [Ng1AppModule.name]);
+
+  // setTimeout is necessary because upgrade.bootstrap is async.
+  // This should be fixed.
+  setTimeout(() => {
+    ref.injector.get(Router).initialNavigation();
+  }, 0);
+});

src/messages/index.ts

@@ -20,13 +20,17 @@ MessagesModule.config(($routeProvider) => {
     .when('/messages/:folder/:id', {template : '<message></message>'});
 });
 
+export function exportRepository(m: UpgradeModule): Repository {
+  return m.$injector.get('repository');
+}
+
 @NgModule({
   // components migrated to Angular 2 should be registered here
   declarations: [MessageTextCmp],
   entryComponents: [MessageTextCmp],
 
   providers: [
-    {provide: Repository, useFactory: (m) => m.$injector.get('repository'), deps: [UpgradeModule]}
+    {provide: Repository, useFactory: exportRepository, deps: [UpgradeModule]}
   ]
 })
 export class MessagesNgModule {}

src/ng1_app.ts

@@ -0,0 +1,13 @@
+/**
+ * This file defines the root module of the Angular 1 of the application.
+ */
+
+// import angular1
+import * as angular from 'angular'
+import 'angular-route'
+
+// import app modules
+import {MessagesModule} from './messages';
+import {MenuModule} from './menu';
+
+export const Ng1AppModule = angular.module('Ng1AppModule', ['ngRoute', MessagesModule.name, MenuModule.name]);

src/app.ts → src/ng2_app.ts

@@ -1,27 +1,39 @@
-import {NgModule} from '@angular/core';
+/**
+ * This file defines the root module of the Angular 2 of the application.
+ */
+
+// import angular2
+import {NgModule, Component} from '@angular/core';
 import {Router, RouterModule, UrlHandlingStrategy} from '@angular/router';
 import {BrowserModule} from '@angular/platform-browser';
-import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
 import {UpgradeModule} from '@angular/upgrade/static';
 
-// modules
-import {MessagesModule, MessagesNgModule} from './messages';
-import {MenuModule, MenuNgModule} from './menu';
+// import app modules
+import {MessagesNgModule} from './messages';
+import {MenuNgModule} from './menu';
 import {SettingsNgModule} from './settings';
-import {RootCmp, createAngular1RootModule} from './upgrade_utils';
 
 // This URL handling strategy is custom and application-specific.
 // Using it we can tell the Angular 2 router to handle only URL starting with settings.
-class Ng1Ng2UrlHandlingStrategy implements UrlHandlingStrategy {
+export class Ng1Ng2UrlHandlingStrategy implements UrlHandlingStrategy {
   shouldProcessUrl(url) { return url.toString().startsWith("/settings"); }
   extract(url) { return url; }
   merge(url, whole) { return url; }
 }
 
+@Component({
+  selector: 'root-cmp',
+  template: `
+    <router-outlet></router-outlet>
+    <div class="ng-view"></div>
+  `,
+})
+export class RootCmp {}
+
 @NgModule({
   imports: [
-    UpgradeModule,
     BrowserModule,
+    UpgradeModule,
 
     // import all modules
     MenuNgModule,
@@ -33,30 +45,15 @@ class Ng1Ng2UrlHandlingStrategy implements UrlHandlingStrategy {
     RouterModule.forRoot([], {
       useHash: true,
       initialNavigation: false // we went to trigger navigation outselves after ng1 is done bootstrapping
-    })
+    }),
   ],
-
   providers: [
     { provide: UrlHandlingStrategy, useClass: Ng1Ng2UrlHandlingStrategy }
   ],
 
   bootstrap: [RootCmp],
-  declarations: [RootCmp] // required
+  declarations: [RootCmp]
 })
-class AppModule {}
-
-// create Angular1 root module
-const rootModule = createAngular1RootModule(['ngRoute', MessagesModule.name, MenuModule.name]);
-
-export function bootstrap(el) {
-  platformBrowserDynamic().bootstrapModule(AppModule).then(ref => {
-    const upgrade = ref.injector.get(UpgradeModule) as UpgradeModule;
-    upgrade.bootstrap(el, [rootModule.name]);
-
-    // setTimeout is necessary because upgrade.bootstrap is async.
-    // This should be fixed.
-    setTimeout(() => {
-      upgrade.injector.get(Router).initialNavigation();
-    }, 0);
-  });
+export class Ng2AppModule {
+  constructor(public upgrade: UpgradeModule){}
 }

src/settings/page_size_cmp.ts

@@ -14,5 +14,5 @@ import {Repository} from '../messages/repository'
   `
 })
 export class PageSizeCmp {
-  constructor(private repository: Repository) {}
+  constructor(public repository: Repository) {}
 }

tsconfig.json

@@ -1,19 +1,23 @@
 {
   "compilerOptions": {
-    "emitDecoratorMetadata": true,
-    "experimentalDecorators": true,
-    "module": "commonjs",
+    "module": "es2015",
+    "moduleResolution": "node",
     "target": "es5",
     "noImplicitAny": false,
-    "sourceMap": false,
+    "sourceMap": true,
+    "mapRoot": "",
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
     "lib": [
       "es2015",
       "dom"
-    ]
+    ],
+    "outDir": "lib",
+    "skipLibCheck": true,
+    "rootDir": "."
   },
-  "files": [
-    "src/main.ts",
-    "node_modules/@types/angular/index.d.ts",
-    "node_modules/@types/angular-route/index.d.ts"
-  ]
-}
+  "angularCompilerOptions": {
+    "genDir": "./src/ngfactory",
+    "entryModule": "src/ng2_app#Ng2AppModule"
+  }
+}

webpack.config.js

@@ -1,35 +1,29 @@
-var LiveReloadPlugin = require('webpack-livereload-plugin');
-var webpack = require('webpack');
-var path = require('path');
+const path = require('path');
+const ngtools = require('@ngtools/webpack');
 
 module.exports = {
   resolve: {
-    extensions: ['.scss', '.ts', '.js'],
+    extensions: ['.ts', '.js'],
     alias: {
       "@angular/upgrade/static": "@angular/upgrade/bundles/upgrade-static.umd.js"
     }
   },
-
-  plugins: [
-    new LiveReloadPlugin({
-      appendScriptTag: true
-    })
-  ],
-
   entry: './src/main.ts',
   output: {
     path: path.join(process.cwd(), 'dist'),
     publicPath: 'dist/',
     filename: "bundle.js"
   },
-
-  devtool: 'source-map',
-
+  plugins: [
+    new ngtools.AotPlugin({
+      tsConfigPath: './tsconfig.json'
+    })
+  ],
   module: {
     loaders: [
 		{
         test: /\.ts$/,
-        loader: 'ts-loader'
+        loader: '@ngtools/webpack'
       },
 	  {
         test: /\.css$/,