Bootstrapping Hybrid Angular 1 + 2 Anwendung

Question

Nach dem offiziellen 5 min QuickStart habe ich eine einfache Angular 2 App arbeiten.

Ich habe Angular 1 eingerichtet und habe jetzt beide unabhängig voneinander arbeiten, siehe this plunker.

Nach dem official upgrade guide sie sagen:

dann Um die Anwendung in Hybrid-Modus zu wechseln, müssen wir zuerst Angular 2 zu dem Projekt installieren. Befolgen Sie die Anweisungen in der QuickStart für einige Hinweise dazu. Wenn wir Angular 2 installiert haben, können wir importieren und instanziieren die UpgradeAdapter, und rufen Sie dann bootstrap Methode. Es wurde entwickelt, um die genauen gleichen Argumente wie angular.bootstrap zu nehmen, so dass es einfach ist, den Schalter zu machen:

import {UpgradeAdapter} from 'angular2/upgrade'; 

/* . . . */ 

const upgradeAdapter = new UpgradeAdapter(); 

upgradeAdapter.bootstrap(document.body, ['heroApp'], {strictDi: true}); 

Meine Frage ist wo es zu platzieren?

Es klingt wie eine Frage "tue meinen Job", aber es ist nicht so. Ich denke in main.ts, aber ich habe viele Dinge ohne Erfolg versucht. Der Doc ist nicht wirklich klar darüber und einige Tutorials von 1 Monat alt sind bereits veraltet.

--- Update:

In meinem Fall habe ich upgrade.js zu laden vergessen, dass ich dachte inkludierte

Answer 1

ich Ihnen plunkr einen Blick hatte. In der Tat können Sie mehrmals verwenden bootstrap, aber das bedeutet, dass Sie zwei verschiedene Anwendungen in Ihre HTML-Seite verwenden.

Wenn Sie Angular1- und Angular2-Daten in derselben Anwendung mischen möchten, müssen Sie nur die boostrap-Methode der UpgradeAdapter aufrufen.

Der Aufruf der boostrap Funktion auf der UpgradeAdapter und es ist in der boot.ts Datei erfolgen Schöpfung könnte:

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

Sie können diese importieren in Ihre HTML-Datei wie folgt:

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

Mixing Angular2 und Angular1 Zeug

Wenn Sie wollen zu bootstrap eine Angular2-Anwendung, bieten die Hauptkomponente als erster Parameter und der Anbieter für die Angular1-Anwendung in der Lage sein, Fabriken/Dienstleistungen/Richtlinien in die Angular2-Anwendung zu verwenden.

// Providers for Angular1 elements 
upgrade.upgradeNg1Provider('customService'); 
upgrade.upgradeNg1Provider('customFactory'); 

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

// Bootstrap Angular2 application 
upgrade.bootstrap(AppComponent); 

Wenn Sie eine Angular1 Anwendung Angular2 Sachen zu verwenden, müssen Sie das Dokument zur Verfügung zu stellen.Element als ersten Parameter der bootstrap Methode: http://plnkr.co/edit/yMjghOFhFWuY8G1fVIEg?p=preview:

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

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

Diese plunkr auch für Sie nützlich sein könnten.