不能运行 Angular 2 组件在 Angular 1 组件内 Visual Studio 2015

Question

我有一个 Angular 2 组件，我想运行在我的 Visual Studio 项目的 Angular 1 应用程序中，但我似乎无法获得它工作。该应用程序来自 angular 网站 (PhoneCat) 上的升级教程。该应用程序在其他方面功能齐全。

我已将申请放在 GitHub here.

我的 upgradeAdapter 在一个单独的文件中，名为 upgradeAdapter.ts

应用程序启动时在 main.ts 文件中实例化。

我已尝试将降级的组件添加到 main.ts 文件和 app.module.ng1.ts 文件（原始 angular 1 应用程序的加载位置.)

但是当我添加指令时，站点中断并且没有呈现任何内容。

下面是我在模板顶部添加名为 my-app 的 angular 2 组件的模板。

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

我的应用程序是一个简单的 Angular 2 组件：

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

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

我试图在调用 bootstrap 之前降级组件：

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

但是 none 这些工作。我需要能够让 Angular 1 和 Angular 2 相互协作，将 Angular 2 组件引入 Angular 1.

我可能做错了什么？

Answer 1

这一行：

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

您只需删除 , []。 angular 模块已经声明，再次声明会破坏应用程序。

不能运行 Angular 2 组件在 Angular 1 组件内 Visual Studio 2015

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

visual-studio-2015

angular2-directives

angular

不能 运行 Angular 2 组件在 Angular 1 组件内 Visual Studio 2015

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

visual-studio-2015

angular2-directives

angular

不能运行 Angular 2 组件在 Angular 1 组件内 Visual Studio 2015