Can't run an Angular 2 component inside an Angular 1 component in Visual Studio 2015
<p>I have an Angular 2 component that I want to run inside an Angular 1 application in my Visual Studio project, but I can't seem to get it working. The application is from the upgrade tutorial on the angular web site (PhoneCat). The application is otherwise fully functional.</p>

<p>I have put the application up on GitHub <a href="https://github.com/tonywr71/Combine-Angular2-with-Angular-1-in-VS2015" rel="nofollow">here.</a></p>

<p>I have my upgradeAdapter in a separate file, called upgradeAdapter.ts</p>

<p>That gets instantiated when the application starts up, in the main.ts file.</p>

<p>I have tried to add the downgraded component to the main.ts file and the app.module.ng1.ts file (which is where the original angular 1 application was loaded.)</p>

<p>But when I add the directive, the site breaks and nothing is rendered.</p>

<p>Below is the template where I am adding the angular 2 component at the top of the template, called my-app.</p>

<pre><code>&lt;my-app&gt;Loading...&lt;/my-app&gt;

&lt;div class="container-fluid"&gt;
  &lt;div class="row"&gt;
    &lt;div class="col-md-2"&gt;
      &lt;!--Sidebar content--&gt;

      &lt;p&gt;
        Search:
        &lt;input ng-model="$ctrl.query" /&gt;
      &lt;/p&gt;

      &lt;p&gt;
        Sort by:
        &lt;select ng-model="$ctrl.orderProp"&gt;
          &lt;option value="name"&gt;Alphabetical&lt;/option&gt;
          &lt;option value="age"&gt;Newest&lt;/option&gt;
        &lt;/select&gt;
      &lt;/p&gt;

    &lt;/div&gt;
    &lt;div class="col-md-10"&gt;
      &lt;!--Body content--&gt;

      &lt;ul class="phones"&gt;
        &lt;li ng-repeat="phone in $ctrl.phones | filter:$ctrl.query | orderBy:$ctrl.orderProp"
            class="thumbnail phone-list-item"&gt;
          &lt;a href="#!/phones/{{phone.id}}" class="thumb"&gt;
            &lt;img ng-src="{{phone.imageUrl}}" alt="{{phone.name}}" /&gt;
          &lt;/a&gt;
          &lt;a href="#!/phones/{{phone.id}}"&gt;{{phone.name}}&lt;/a&gt;
          &lt;p&gt;{{phone.snippet}}&lt;/p&gt;
        &lt;/li&gt;
      &lt;/ul&gt;

    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>My app is a simple Angular 2 component:</p>

<pre><code>import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `&lt;h1&gt;My First Angular App&lt;/h1&gt;`
})
export class AppComponent { }
</code></pre>

<p>I have tried to downgrade the component just before bootstrap is called:</p>

<pre><code>import { upgradeAdapter } from './upgradeAdapter';
import { AppModule } from './app.module';

//import components that need to be downgraded
import { AppComponent } from './app.component';

declare var angular: any;
angular.module("phonecatApp", [])
  .directive("myApp", &lt;angular.IDirectiveFactory&gt;upgradeAdapter.downgradeNg2Component(AppComponent));

upgradeAdapter.bootstrap(document.body, ["phonecatApp"]);
</code></pre>

<p>This didn't work, so I took it out and added it into the app.module.ng1.ts file, which is where the module is declared:</p>

<pre><code>import { upgradeAdapter } from './upgradeAdapter';
import { AppComponent } from './app.component';
declare var angular: any;

'use strict';

// Define the `phonecatApp` module
angular.module('phonecatApp', [
  'ngAnimate',
  'ngRoute',
  'core',
  'phoneDetail',
  'phoneList'
]); 

angular.module("phonecatApp", [])
  .directive("myApp", upgradeAdapter.downgradeNg2Component(AppComponent));
</code></pre>

<p>But none of these work. I need to be able to get both the Angular 1 and the Angular 2 working with each other, with Angular 2 components introduced into Angular 1.</p>

<p>What could I be doing wrong?</p>