Bootstrapping混合角1 + 2應用程序

官方5 min QuickStart我有一個簡單的Angular 2應用程序工作。Bootstrapping混合角1 + 2應用程序

我設置了Angular 1，現在它們都可以獨立工作，請參閱this plunker。

爲了再切換應用程序進入混合動力模式，我們必須先安裝角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，我認爲已經包含

來源

2016-02-12 Sebastien Horin

我看看你的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。

來源

2016-02-12 12:37:55

感謝您的詳細和明確的幫助！我想你會提出問題：文件upgrade.dev.js丟失。聽起來很瘋狂的是，官方文檔沒有提到它，就像upgrade.js默認使用angular2加載一樣。 –

不客氣！很明顯，需要upgrade.dev.js ;-)文檔應該強調這一點... –

Bootstrapping混合角1 + 2應用程序

回答

相關問題