Can't run an Angular 2 component inside an Angular 1 component in Visual Studio 2015

Question

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.

I have put the application up on GitHub here.

I have my upgradeAdapter in a separate file, called upgradeAdapter.ts

That gets instantiated when the application starts up, in the main.ts file.

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.)

But when I add the directive, the site breaks and nothing is rendered.

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

<my-app>Loading...</my-app>

<div class="container-fluid">
  <div class="row">
    <div class="col-md-2">
      <!--Sidebar content-->

      <p>
        Search:
        <input ng-model="$ctrl.query" />
      </p>

      <p>
        Sort by:
        <select ng-model="$ctrl.orderProp">
          <option value="name">Alphabetical</option>
          <option value="age">Newest</option>
        </select>
      </p>

    </div>
    <div class="col-md-10">
      <!--Body content-->

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

    </div>
  </div>
</div>

My app is a simple Angular 2 component:

import { Component } from '@angular/core';

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

I have tried to downgrade the component just before bootstrap is called:

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", <angular.IDirectiveFactory>upgradeAdapter.downgradeNg2Component(AppComponent));

upgradeAdapter.bootstrap(document.body, ["phonecatApp"]);

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:

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));

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.

What could I be doing wrong?

RobS RobS · Accepted Answer · 2016-11-05T06:46:41

In this line:

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

all you have to do is remove the , []. The angular module has already been declared and doing it again will break the app.

Can't run an Angular 2 component inside an Angular 1 component in Visual Studio 2015

1 Answers