Не удается запустить компонент Angular 2 внутри компонента Angular 1 в Visual Studio 2015

Question

У меня есть компонент Angular 2, который я хочу запустить внутри приложения Angular 1 в моем проекте Visual Studio, но я не могу получить он работает. Приложение из учебника обновления на угловом веб-сайте (PhoneCat). В противном случае приложение полностью функционально.

я поставил заявку на GitHub here.

у меня upgradeAdapter в отдельный файл, называемый upgradeAdapter.ts

Это получает экземпляр при запуске приложения, в файле main.ts.

Я пытался добавить понижен компонента в файл main.ts и файл app.module.ng1.ts (который где оригинальная угловая 1 заявка была загружена.)

Но когда я добавляю директива, сайт разбивается и ничего не отображается.

Ниже приведен шаблон, в котором я добавляю угловой компонент 2 в верхней части шаблона, называемый 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> 

Мое приложение представляет собой простой Угловой 2 компонент:

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

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

Я попытался понизить компонент непосредственно перед бутстраповским называются:

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

Это не сработало, так Я вынул его и добавил в файл 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 работали друг с другом, с компонентами Angular 2, введенными в угловой 1.

Что я могу делать неправильно?

Answer 1

В этой строке:

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

все, что вам нужно сделать, это удалить , []. Угловой модуль уже объявлен, и его выполнение снова нарушит приложение.