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。