Question

关注官方5 min QuickStart我有一个简单的Angular 2应用程序。

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

要将应用程序切换到混合模式，我们必须先安装 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});

我的问题是在哪里放置？

听起来像是做我的工作＆＃39;问题，但事实并非如此。我想在main.ts，但我尝试了许多事情但没有成功。该文档对此并不十分清楚，1个月的一些教程已经过时了。

---更新：

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

Answer 1

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

如果要将Angular1和Angular2内容混合到同一个应用程序中，则只需要调用boostrap的{{1}}方法。

UpgradeAdapter上boostrap功能的调用及其创建可以在UpgradeAdapter文件中完成：

boot.ts

您可以将其导入HTML文件，如下所示：

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

混合Angular2和Angular1的东西

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

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

如果您希望 Angular1应用程序使用Angular2内容，则需要提供document.element作为// Providers for Angular1 elements upgrade.upgradeNg1Provider('customService'); upgrade.upgradeNg1Provider('customFactory'); // Providers for Angular2 elements upgrade.addProvider(HTTP_PROVIDERS); // Bootstrap Angular2 application upgrade.bootstrap(AppComponent);方法的第一个参数：

bootstrap

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

Bootstrapping Hybrid Angular 1 + 2应用程序

1 个答案: