Converted the bootstrapper to bootstrap as an angular 2 module with UpgradeModule as a dependency

This is the new way of bootstrapping an ngUpgrade module, and it will allow for AoT compilation and potentially lazy-loading.

Author: KorinaGraber

bootstrapper/app.ng2.ts

@@ -7,6 +7,6 @@ import { Router } from '@angular/router';
 })
 export class App {
 	constructor(router: Router) {
-		router['initialNavigation']();
+		// router['initialNavigation']();
 	}
 }

bootstrapper/app.ts

@@ -5,6 +5,7 @@ import * as angular from 'angular';
 import { NgModule, forwardRef, ApplicationRef } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { UpgradeAdapter } from '@angular/upgrade';
+import { UpgradeModule } from '@angular/upgrade/static';
 
 import { downgrade as utilitiesDowngrade, UtilitiesModule } from 'typescript-angular-utilities';
 
@@ -52,10 +53,10 @@ import { appRoutingProviders, routing } from './app.routing';
 import { ComponentsModule } from'../source/ui.module';
 
 const upgradeAdapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => ComponentsBootstrapperModule));
-utilitiesDowngrade.downgradeUtilitiesToAngular1(upgradeAdapter);
+// utilitiesDowngrade.downgradeUtilitiesToAngular1(upgradeAdapter);
 componentsDowngrade.downgradeComponentsToAngular1(upgradeAdapter);
 
-const moduleName: string = 'bootstrapper-app';
+export const moduleName: string = 'bootstrapper-app';
 
 angular.module(moduleName, [
 	componentsModule,
@@ -71,7 +72,7 @@ angular.module(moduleName, [
 	miscModuleName,
 	textModuleName,
 ])
-	.directive('tsApp', <any>upgradeAdapter.downgradeNg2Component(App))
+	// .directive('tsApp', <any>upgradeAdapter.downgradeNg2Component(App))
 	.directive('tsMiscNgContext', <any>upgradeAdapter.downgradeNg2Component(MiscNgContextBootstrapper));
 
 @NgModule({
@@ -80,6 +81,7 @@ angular.module(moduleName, [
 		routing,
 		UtilitiesModule,
 		ComponentsModule,
+		UpgradeModule,
 	],
 	declarations: [
 		InputsBootstrapper,
@@ -129,16 +131,19 @@ angular.module(moduleName, [
 		WelcomeComponent,
 		App,
 	],
+	bootstrap: [App],
 	providers: [
-		{
-			provide: ApplicationRef,
-			useValue: {
-				componentTypes: [App],
-				registerDisposeListener: () => {},
-			},
-		},
+		// {
+		// 	provide: ApplicationRef,
+		// 	useValue: {
+		// 		componentTypes: [App],
+		// 		registerDisposeListener: () => {},
+		// 	},
+		// },
 	],
 })
-class ComponentsBootstrapperModule {}
+export class ComponentsBootstrapperModule {
+	// ngDoBootstrap() {}
+}
 
-upgradeAdapter.bootstrap(document.body, [moduleName], { strictDI: true });
+// upgradeAdapter.bootstrap(document.body, [moduleName], { strictDI: true });

bootstrapper/main.ts

@@ -0,0 +1,9 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { UpgradeModule } from '@angular/upgrade/static';
+
+import { ComponentsBootstrapperModule, moduleName } from './app';
+
+platformBrowserDynamic().bootstrapModule(ComponentsBootstrapperModule).then(platformRef => {
+	const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
+	upgrade.bootstrap(document.documentElement, [moduleName]);
+});

index.html

@@ -23,6 +23,7 @@
 		<script src="/node_modules/traceur/bin/traceur-runtime.js"></script>
 
 		<script src="/node_modules/systemjs/dist/system.js"></script>
+		<script src="/node_modules/angular/angular.js"></script>
 
 		<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
 		<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.3/angular.js"></script>-->
@@ -39,7 +40,7 @@
 		<script src="/bootstrapper/app.bundle.js"></script>
 
 		<script>
-			System.import('bootstrapper/app');
+			System.import('app');
 		</script>
 	</body>
 </html>

package.json

@@ -75,15 +75,15 @@
     "typescript": "~2.0.3"
   },
   "dependencies": {
-    "@angular/common": "~2.1.0",
-    "@angular/compiler": "~2.1.0",
-    "@angular/core": "~2.1.0",
-    "@angular/forms": "~2.1.0",
-    "@angular/http": "~2.1.0",
-    "@angular/platform-browser": "~2.1.0",
-    "@angular/platform-browser-dynamic": "~2.1.0",
-    "@angular/router": "~3.1.0",
-    "@angular/upgrade": "~2.1.0",
+    "@angular/common": "~2.3.0",
+    "@angular/compiler": "~2.3.0",
+    "@angular/core": "~2.3.0",
+    "@angular/forms": "~2.3.0",
+    "@angular/http": "~2.3.0",
+    "@angular/platform-browser": "~2.3.0",
+    "@angular/platform-browser-dynamic": "~2.3.0",
+    "@angular/router": "~3.3.0",
+    "@angular/upgrade": "~2.3.0",
     "@types/angular": "1.5.16",
     "@types/angular-ui-bootstrap": "^0.13.35",
     "@types/bootstrap": "^3.3.32",

system.config.js

@@ -2,6 +2,7 @@
 
 const map = {
 	'@angular': 'node_modules/@angular',
+	'app': 'bootstrapper',
 	'angular': 'node_modules/angular',
 	'angular-mocks': 'node_modules/angular-mocks/angular-mocks',
 	'angular-animate': 'node_modules/angular-animate/angular-animate.js',
@@ -21,6 +22,7 @@ const map = {
 	'typescript-angular-utilities': 'node_modules/typescript-angular-utilities/source/main',
 	'ui-select': 'node_modules/ui-select/index',
 	'ui-select/dist': 'node_modules/ui-select/dist',
+	'@angular/upgrade': 'node_modules/@angular/upgrade',
 };
 
 var angularPackageNames = [
@@ -31,7 +33,7 @@ var angularPackageNames = [
 	'platform-browser-dynamic',
 	'http',
 	'forms',
-	'upgrade',
+	// 'upgrade',
 ];
 
 var defaultPackages = [
@@ -49,6 +51,9 @@ const meta = {
 };
 
 var packages = {
+	'app': {
+		main: 'main.js',
+	},
 	'libraries': {
 		defaultExtension: 'js',
 	},
@@ -61,9 +66,12 @@ var packages = {
 	'node_modules': {
 		defaultExtension: 'js',
 	},
-		'@angular/router': {
-			main: 'index.js',
-		},
+	'@angular/router': {
+		main: 'index.js',
+	},
+	'@angular/upgrade': {
+		main: 'bundles/upgrade.umd.js',
+	},
 	'angular2-uuid': {
 		main: 'index.js',
 	},
@@ -96,3 +104,5 @@ System.config({
 	map,
 	packages: packages,
 });
+
+System.registerDynamic('node_modules/angular/index.js', [], true, function() { return window.angular });