ハイブリッド角型1 + 2アプリケーション

Question

公式に続き、5 min QuickStart私は簡単な角型2のアプリケーションを動作させています。

角度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だと思いますが、私は成功なしで多くのことを試しました。ドキュメントはこれについて実際にはっきりしておらず、1ヶ月の一部のチュートリアルはすでに古くなっています。

---アップデート：私の場合は

私はすでに私はあなたのplunkrを見ていた

Answer 1

を含ま思っていることupgrade.jsロードすることを忘れていました。実際には複数回使用することができますbootstrapこれは、HTMLページに2つの異なるアプリケーションを使用することを意味します。

Angular1とAngular2を同じアプリケーションに混在させる場合は、UpgradeAdapterのメソッドだけを呼び出す必要があります。

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> 

角度2と角度1のものを混ぜる

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

あなたはAngular2ものを使用するAngular1アプリケーションが必要な場合は、ドキュメントを提供する必要があります。このplunkrもあなたに役立つ可能性が

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

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

：http://plnkr.co/edit/yMjghOFhFWuY8G1fVIEg?p=previewbootstrapメソッドの最初のパラメータとしての要素。