Visual StudioのAngular 1コンポーネント内にAngular 2コンポーネントを実行できません2015

Question

Visual StudioプロジェクトでAngular 1アプリケーション内で実行したいAngular 2コンポーネントがありますが、取得できないようですそれは働いている。このアプリケーションは、アングルWebサイト（PhoneCat）のアップグレードチュートリアルのものです。それ以外の場合、アプリケーションは完全に機能します。

私は、アプリケーションがmain.tsファイルで、起動時にインスタンスを取得しますupgradeAdapter.ts

と呼ばれる別のファイルに私のupgradeAdapterを持っているGitHubのhere.

上でアプリケーションを入れています。

Iはmain.tsファイルとapp.module.ng1.tsファイルにダウングレードコンポーネントを追加しようとした（元の角度1つのアプリケーションがロードされた場所である。）

しかし、私は追加する場合ディレクティブ、サイトが壊れて何もレンダリングされません。

以下は、my-appというテンプレートの上部に角度2のコンポーネントを追加するテンプレートです。そう、

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

これは動作しませんでした：私は、ブートストラップが呼び出される直前にコンポーネントをダウングレードしようとしてい

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

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

：

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

私のアプリは、単純な角度2の成分であります私はそれを取り出して、モジュールが宣言されているapp.module.ng1.tsファイルに追加しました：

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

しかし、これらのどれも動作しません。角1と角2の両方をお互いに働かせる必要があります。角度2の成分を角度1に入れます。

私は間違っていますか？この行で

Answer 1

：

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

あなたがしなければならないすべては、, []を削除しています。角モジュールはすでに宣言されており、再度実行するとアプリケーションが中断されます。