Bootstrapping混合角1 + 2应用程序

Question

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

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

继official upgrade guide他们说：

为了再切换应用程序进入混合动力模式，我们必须先安装 角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，但我尝试了很多事情没有成功。该文档对此并不十分清楚，一些月份的一些教程已经过时。

---更新：

在我来说，我忘了装载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应用程序中使用工厂/服务/指令。

// 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东西，您需要提供的文件。元素作为bootstrap方法的第一个参数：

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

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

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