Verwenden AngularJS (Angular1) Modul aus Angular2 Projekt

Gerade erst eine demo Angular2 Projekt (keine Vorherige Erfahrung mit Angular1/AngularJS. Haben, gefolgt und erweitert die online-quickstart und-tutorials, und alles war in Ordnung. Aber ich bin an dem Punkt, wo ich möchte einige Komponenten aus einer Bibliothek, die entworfen, für AngularJS, und kein Ende der Probleme!

Meisten der verfügbaren Informationen über AngularJS/Angular2 Kompatibilität ausgegangen, dass ein AngularJS-Projekt, das Sie hinzufügen Angular2 Komponenten - nicht anders herum - also, was ich hoffe zu tun, vielleicht nicht einmal möglich. Was ich bisher ausprobiert habe um einen einfachen stripped-back-Projekt basiert auf der Angular2 quickstart, mit einem einzigen Angular2 Komponente, die Lasten in das index.html. Ich würde dann gerne die Integration von Komponenten aus der vorhandenen Bibliothek (AngularJS-Basis) in dieser.

  • Ich habe versucht, mit UpgradeAdapter.upgradeNg1Component zum erstellen von Komponenten aus der Bibliothek aus und fügen Sie Sie direkt in mein Angular2 Komponente

  • Habe ich versucht, die Installation von angularjs durch npm, importieren Sie Sie in ein script-tag in mein index.html und dann mit einer Kombination aus UpgradeAdapter.downgradeNg2Component und UpgradeAdapter.bootstrap laden meiner Angular2 als eine abgespeckte Modul

Keiner von Ihnen scheinen zu arbeiten - die Komponente, die nicht nachweisen können, und die browser-Konsole sagt mir ich habe eine Uncaught SyntaxError: Unexpected token <
Evaluating http://localhost:3000/angular2/upgrade
Error loading http://localhost:3000/app/main.js

Meine beste Vermutung im moment ist, dass dies tatsächlich ein nicht unterstütztes Szenario, und ich muss eine 'richtige' AngularJS-app, um die UpgradeAdapter Funktionalität von Angular2. Kann das jemand bestätigen? Oder ist es etwas blöd, ich bin hier noch fehlt?

  • Vielen Dank dafür - es war mein Verständnis, dass für eine AngularJS/Angular2 hybrid-app, die Sie nicht nutzen konnten, die ng-app tag, und habe das bootstrap()?
InformationsquelleAutor Michael | 2016-02-06
  1. 3

    Hier ist eine funktionierende plunkr, die beschreibt, wie zu mischen Angular1 und Angular2 Elemente:

    Ein wichtiger Punkt ist die bootstrap Ihrem Hauptbestandteil auf der UpgradeAdapter. Auf diese Weise alle Elemente sind in Provider (services /Fabriken) und in den Richtlinien (Komponenten /Richtlinien):

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

    Diese zwei Antworten, die Ihnen helfen könnte:

    InformationsquelleAutor Thierry Templier
  2. 2

    So, das große problem in diesem Fall erwies sich die Tatsache, dass es scheint, dass die upgrade-Komponenten sind nicht Bestandteil der basic-Winkel-2 bundle. Nach hinzufügen von:

    <script src="node_modules/angular2/bundles/upgrade.min.js"></script>

    meine index.html Datei werden die Fehler, die ich sah, sind verschwunden.

    Danke für die Antwort hier für den Hinweis mich in die richtige Richtung!

    • Verlinkung direkt zu Ihrem node_modules-Ordner ist eine schlechte Lösung. Sobald Sie die Bereitstellung Ihrer Lösung, der Ordner ist nicht mehr da (vorausgesetzt, Sie verwenden irgendeine Art von Bündelung setup)
    InformationsquelleAutor Michael
Schreibe einen Kommentar