引导混合 Angular 1+2 应用程序

Question

按照官方5 min QuickStart，我有一个简单的 Angular 2 应用程序正在运行。

我设置了 Angular 1，现在它们都独立工作了，请参阅 this plunker。

按照他们所说的official upgrade guide：

若要将应用程序切换到混合模式，我们必须先安装 Angular 2 到项目。按照QuickStart 中的说明进行操作 关于这方面的一些指示。当我们安装了 Angular 2 后，我们可以 导入并实例化UpgradeAdapter，然后调用它的bootstrap 方法。它旨在采用与 angular.bootstrap 以便于进行切换：

import {UpgradeAdapter} from 'angular2/upgrade';

/* . . . */

const upgradeAdapter = new UpgradeAdapter();

upgradeAdapter.bootstrap(document.body, ['heroApp'], {strictDi: true});

我的问题是放在哪里？

这听起来像是一个“做我的工作”的问题，但事实并非如此。我猜在main.ts，但我尝试了很多东西都没有成功。该文档对此并不十分清楚，并且一些 1 个月大的教程已经过时了。

---更新：

在我的情况下，我忘记加载我认为已经包含的 upgrade.js

Answer 1

我看了你的 plunkr。事实上，您可以多次使用bootstrap，但这意味着您在 HTML 页面中使用了两个不同的应用程序。

如果你想将 Angular1 和 Angular2 的东西混合到同一个应用程序中，你只需要调用 UpgradeAdapter 的 boostrap 方法。

UpgradeAdapter 上的boostrap 函数的调用及其创建可以在boot.ts 文件中完成：

import {UpgradeAdapter} from 'angular2/upgrade';

var upgrade = new UpgradeAdapter();

// Configure the upgrade adapter
(...)

export function main() {
  try {
    upgrade.bootstrap(document.body, ['heroApp']);
  } catch (e) {
    console.error(e);
  }
}

您可以像这样将它导入到您的 HTML 文件中：

<script>
  System.import('app/main').then(function(src) {
    src.main();
  });
</script>

混合 Angular2 和 Angular1 的东西

如果您想引导 Angular2 应用程序，请提供主要组件作为第一个参数，并为 Angular1 应用程序提供提供程序，以便能够在 Angular2 应用程序中使用工厂/服务/指令。 p>

// Providers for Angular1 elements
upgrade.upgradeNg1Provider('customService');
upgrade.upgradeNg1Provider('customFactory');

// Providers for Angular2 elements
upgrade.addProvider(HTTP_PROVIDERS);

// Bootstrap Angular2 application
upgrade.bootstrap(AppComponent);

如果您希望 Angular1 应用程序使用 Angular2 的东西，您需要提供 document.element 作为bootstrap 方法的第一个参数：

// Providers for Angular2 elements
upgrade.downgradeNg2Provider(HTTP_PROVIDERS);

upgrade.bootstrap(document.body, ['heroApp']);

这个 plunkr 也可能对你有用：http://plnkr.co/edit/yMjghOFhFWuY8G1fVIEg?p=preview。