javascript - Bootstrapping av hybrid Angular 1+2-applikation

Följande den officiella 5 minuters QuickStart har jag en enkel Angular 2-app som fungerar.

Jag satte upp Angular 1 och har nu båda fungerande oberoende, se denna plunker.

Följande den officiella uppgraderingsguiden säger de:

För att sedan växla applikationen till hybridläge måste vi först installera Angular 2 i projektet. Följ instruktionerna i QuickStart för några tips om detta. När vi har installerat Angular 2 kan vi importera och skapa en instans av UpgradeAdapter, och sedan kalla på dess bootstrap-metod. Den är designad för att ta exakt samma argument som angular.bootstrap så att det är enkelt att göra bytet:

import {UpgradeAdapter} from 'angular2/upgrade';

/* . . . */

const upgradeAdapter = new UpgradeAdapter();

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

Min fråga är var man ska placera det?

Det låter som en 'gör mitt jobb'-fråga men det är det inte. Jag antar i main.ts, men jag har försökt mycket utan framgång. Dokumentationen är inte riktigt tydlig om detta och vissa tutorials som är en månad gamla är redan inaktuella.

--- uppdatering:

I mitt fall glömde jag att ladda upgrade.js som jag trodde redan var inkluderad

Svar #1

Jag tittade på din plunkr. Faktum är att du kan använda bootstrap flera gånger, men det betyder att du använder två olika applikationer på din HTML-sida.

Om du vill blanda Angular1- och Angular2-saker i samma applikation, måste du bara anropa bootstrap-metoden på UpgradeAdapter.

Anropet av bootstrap-funktionen på UpgradeAdapter och dess skapande kan göras i boot.ts-filen:

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

Du kan importera detta till din HTML-fil så här:

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

Blanda Angular2 och Angular1-saker

Om du vill bootstrapa en Angular2-applikation, ange huvudkomponenten som första parameter och providern för Angular1-applikationen för att kunna använda fabriker/tjänster/direktiv i Angular2-applikationen.

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

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

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

Om du vill att en Angular1-applikation ska använda Angular2-saker måste du tillhandahålla document.element som första parameter till bootstrap-metoden:

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

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

Den här plunkern kan också vara användbar för dig: http://plnkr.co/edit/yMjghOFhFWuY8G1fVIEg?p=preview.

Relaterade artiklar