javascript - Bootstrapping av hybrid Angular 1+2-applikasjon

Etter å ha fulgt den offisielle 5-minutters QuickStart har jeg en enkel Angular 2-app som fungerer.

Jeg satte opp Angular 1 og har nå begge til å fungere uavhengig, se denne plunkeren.

Følgende den offisielle oppgraderingsguiden sier de:

For å deretter bytte applikasjonen til hybridmodus, må vi først installere Angular 2 i prosjektet. Følg instruksjonene i QuickStart for noen tips om dette. Når vi har Angular 2 installert, kan vi importere og instansiere UpgradeAdapter, og deretter kalle på dens bootstrap-metode. Den er designet for å ta de samme argumentene som angular.bootstrap slik at det er enkelt å gjøre overgangen:

import {UpgradeAdapter} from 'angular2/upgrade';

/* . . . */

const upgradeAdapter = new UpgradeAdapter();

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

Mitt spørsmål er hvor jeg skal plassere det?

Det høres ut som et «gjør jobben min»-spørsmål, men det er det ikke. Jeg antar i main.ts, men jeg har prøvd mange ting uten suksess. Dokumentasjonen er ikke helt klar om dette, og noen guider som er en måned gamle er allerede utdaterte.

--- oppdatering:

I mitt tilfelle glemte jeg å laste opp upgrade.js som jeg trodde allerede var inkludert

Svar #1

Jeg tok en titt på plunkr-en din. Faktisk kan du bruke bootstrap flere ganger, men dette betyr at du bruker to forskjellige applikasjoner på HTML-siden din.

Hvis du vil blande Angular1- og Angular2-ting i den samme applikasjonen, må du kun kalle bootstrap-metoden til UpgradeAdapter.

Kallet til bootstrap-funksjonen på UpgradeAdapter og dens opprettelse kan gjøres 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 importere dette til HTML-filen din slik:

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

Blande Angular2 og Angular1 ting

Hvis du vil starte en Angular2-applikasjon, gi hovedkomponenten som første parameter og provideren for Angular1-applikasjonen for å kunne bruke fabrikker/tjenester/direktiver i Angular2-applikasjonen.

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

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

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

Hvis du vil at en Angular1-applikasjon skal bruke Angular2-funksjoner, må du gi document.element som første parameter til bootstrap-metoden:

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

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

Denne plunkr kan også være nyttig for deg: http://plnkr.co/edit/yMjghOFhFWuY8G1fVIEg?p=preview.

Relaterte artikler