Bootstrapped Angular 2 + Angular 1 Hybrid App not loading when using downgradeComponent
<p>I have an Angular 1 app that I've followed the instructions from the official Angular tutorial (<a href="https://angular.io/docs/ts/latest/guide/upgrade.html" rel="nofollow noreferrer">https://angular.io/docs/ts/latest/guide/upgrade.html</a>) for Bootstrapping a hybrid 1+2 app. I have all the code in place and run the app and absolutely nothing happens. It just goes to the root URL and I only get the styling and view of whatever is in <code>index.html</code>. However the main <code>&lt;div ng-view&gt;</code> never gets updated via <code>$routeProvider</code> and <code>app.ts</code>. At least that appears to be what's happening. There are <strong>zero</strong> errors. Here is what I have so far:</p>

<p><strong>main.ts</strong> (loaded via SystemJS)</p>

<pre><code>import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { UpgradeModule } from '@angular/upgrade/static';
import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef =&gt; {
    const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
    upgrade.bootstrap(document.body, ['MyA1App']);
});
</code></pre>

<p>One note for the above hybrid bootstrap code - it <em>is</em> working as far as I can tell. If I change the Angular1 app name to <code>blahblah</code>, I get a whole bunch of errors in the browser. This code <em>can</em> find the <code>MyA1App</code> Angular1 module defined in <code>app.ts</code> and is able to bootstrap it.</p>

<p><strong>index.html</strong>:</p>

<pre><code>&lt;div class="main-content" ng-view=""&gt;&lt;/div&gt;

&lt;!-- Configure SystemJS (bootstrap Angular 2 app) --&gt;
&lt;script src="systemjs.config.js"&gt;&lt;/script&gt;
&lt;script&gt;
    System.import('app').catch(function(err){ console.error(err); });
&lt;/script&gt;

&lt;!-- Old Angular 1 bootstrap method --&gt;
&lt;!--&lt;script&gt;
    angular.bootstrap(document.body, ['MyA1App']);
&lt;/script&gt;--&gt;   
</code></pre>

<p><strong>app.module.ts</strong></p>

<pre><code>import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { UpgradeModule } from '@angular/upgrade/static'; //To bootstrap a hybrid application, we  need to import UpgradeModule in our AppModule, and override it's bootstrap method:

@NgModule({
    imports: [BrowserModule, UpgradeModule ],
})

export class AppModule {
    ngDoBootstrap() {}
}

import { downgradeComponent } from '@angular/upgrade/static';
angular.module('MyA1App', [])
    .directive(
    'contactList',
    downgradeComponent({ component: ContactListComponent }) as angular.IDirectiveFactory
    );
</code></pre>

<p><strong>app.ts</strong> (from Angular 1, which defines the module and routing - this should still be in play and used)</p>

<pre><code>module MyApp {
    'use strict';

export var App: ng.IModule = angular.module('MyA1App', ['ngRoute', 'ngResource', 'highcharts-ng', 'ui.bootstrap']);

    //  register work which needs to be performed on module loading
    App.config([
        '$routeProvider', '$httpProvider',
        ($routeProvider: ng.route.IRouteProvider, $httpProvider: ng.IHttpProvider) =&gt; {

            $routeProvider
                .when('/landing',
                {
                    controller: MyApp.Controllers.LandingCtrl,
                    templateUrl: '/app/angular1x/partials/landing.html'
                })
                .when('/registration',
                {
                    controller: MyApp.Controllers.RegistrationCtrl,
                    controllerAs: 'vm',
                    templateUrl: '/app/angular1x/partials/registration.html'
                })               
                .otherwise({
                    redirectTo: '/landing'
                });
        }
    ]);   
}
</code></pre>

<p>So here's the overview of the issue:</p>

<ul>
<li>Bootstraping to Angular2 <code>main.ts</code> via <code>systemjs</code> called in <code>index.html</code> (appears successful - no errors)</li>
<li>I can place breakpoints in Angular1 controllers, Landing, etc. and see the controllers being defined and loaded being hit. But nothing else happens! No errors or anything.</li>
<li>The <code>ng-view</code> directive is never updated via routing. Upon inspecting on the main page it just looks like: <code>&lt;div class="main-content" ng-view=""&gt;&lt;/div&gt;</code></li>
<li>No JS errors anywhere</li>
<li>If I go back and use the original A1 bootstrap in <code>index.html</code> it works as opposed to using <code>systemjs</code> to load A2 and bootstrap A1 as a hybrid.</li>
</ul>

<p>What am I doing incorrectly here so that the original <code>Angular1</code> app appears to load and bootstrap just fine, but isn't actually doing anything?</p>

<hr>

<p><strong>UPDATE:</strong></p>

<p>I have tracked down the offending code to be the following in <code>app.module.ts</code>:</p>

<pre><code>import { downgradeComponent } from '@angular/upgrade/static';
angular.module('MyA1App', [])
    .directive(
    'contactList',
    downgradeComponent({ component: ContactListComponent }) as angular.IDirectiveFactory
    );
</code></pre>

<p>It was not the routing (that was a red herring). The entire <code>Angular1</code> app will bootstrap and load if I remove the code above. What am I doing in the code above that could cause everything to halt loading, yet not create any <code>JavaScript</code> errors?</p>