Angular2 Upgrade-Tutorial Code nicht

Question

Bootstrapping Ich folge zusammen mit den offiziellen Angular2 upgrade guide

Derzeit ist das Projekt in Phase 2.1 der Migrationsschritte. Das Tutorial sagt "der Schlüssel ist, dies Stück für Stück zu tun, ohne die Anwendung zu brechen", aber ich habe die Anwendung gebrochen.

Das Problem scheint mit dem Upgrade-Adapter zu verwenden, um die App zu starten. Im Anschluss an den Abschnitt " Bootstrapping A Hybrid 1 + 2 PhoneCat ", die App bootet nicht. Die Symptome sind ein leerer Bildschirm und keine Fehler in der Konsole.

Es ist nicht klar, wo die Bootstrap-Methoden in der App/Js/App Datei .module.ts Die Dokumente geben nicht an, wohin der folgende Code gehen sollte. Dies sind die genauen Wörter:

Nach ein paar Ratschläge here habe ich versucht, dies:

var upgradeAdapter = new UpgradeAdapter(); 
angular.element(document.body).ready(function() { 
    upgradeAdapter.bootstrap(document.body, ['phonecatApp']); 
}); 

gleiche Ergebnis: leeren Bildschirm, keine Konsole ausgegeben.

Was ist der richtige Weg, um diesen Fusionsstatus der App zu starten?

Die fragliche Datei ist here.

Alle Vorschläge würden sehr geschätzt werden.

Answer 1

Ich denke, dass Sie versuchen könnten, das Modul zu laden und dann die Anwendung zu starten.

Etwas wie folgt aus:

• index.html

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

• hello_world.ts

  import {UpgradeAdapter} from 'angular2/upgrade'; 
  import {Component, Inject} from 'angular2/core'; 
  
  try { 
      var upgrade = new UpgradeAdapter(); 
  
      (...) 
  } catch (e) { 
      console.error(e); 
  } 
  
  export function main() { 
      try { 
      upgrade.bootstrap(document.body, ['heroApp']); 
      } catch (e) { 
      console.error(e); 
      } 
  } 
  

Sehen Sie diese plunkr als Beispiel: http://plnkr.co/edit/yMjghOFhFWuY8G1fVIEg?p=preview.

Answer 2

Hier ist der Arbeitsinhalt meiner Datei main.ts. Das Tutorial ist nicht sehr gut zu sagen, wo die neuen Zeilen hinzugefügt werden sollen, es hat mich ein bisschen gebraucht, um es herauszufinden. Der Schlüssel war, die Provider und die Service-Factory vor der Bootstrap-Methode hinzuzufügen.

import {UpgradeAdapter} from '@angular/upgrade'; 
import {HTTP_PROVIDERS} from '@angular/http'; 
import {Phone} from './core/phone/phone.service'; 

let upgradeAdapter = new UpgradeAdapter(); 

upgradeAdapter.addProvider(HTTP_PROVIDERS); 
upgradeAdapter.addProvider(Phone); 
angular.module('core.phone').factory('phone', upgradeAdapter.downgradeNg2Provider(Phone)); 

upgradeAdapter.bootstrap(document.documentElement, ['phonecatApp']); 

Ich habe in dem Code zu meinem Repo auf Github zu überprüfen: https://github.com/Rockncoder/phonecat. Die Commits sind in der gleichen Reihenfolge wie das Tutorial, so dass Sie auch sehen können, welche Änderungen ich vorgenommen habe.

Answer 3

Hier ist meine app.module.ts

import {NgModule} from '@angular/core'; 
import {BrowserModule} from '@angular/platform-browser'; 
import {UpgradeModule} from '@angular/upgrade/static'; 

@NgModule({ 
    imports:[ 
     BrowserModule, 
     UpgradeModule 
    ], 
}) 
export class AppModule{ 
    ngDoBootstrap(){} 
} 

Sicherstellen, dass die folgenden Einträge in systemjs.config existieren.js unter Winkelbündel Liste

'@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js', 
'@angular/upgrade/static': 'npm:@angular/upgrade/bundles/upgrade-static.umd.js', 

meine github repo für ein funktionierendes Beispiel finden. Die Commits wurden nach jedem Schritt der PhoneCat Upgrade Tutorial erstellt.