Bootstrapping Hybrid Angular 1 + 2应用程序

Question

继官方5分钟QuickStart后，我有一个简单的Angular 2应用程序。

我设置了Angular 1并且现在他们都独立工作，看到这个plunker 。

按照官方升级指南，他们说：

要将应用程序切换到混合模式，我们必须首先将Angular 2安装到项目中。 按照快速入门中的说明进行操作，以获得一些指示。 当我们安装了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

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

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

的的呼叫boostrap功能上UpgradeAdapter和它的创建可以在完成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应用程序。

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