Ich habe gerade ein Demo-Angular2-Projekt gestartet (keine vorherigen Erfahrungen mit Angular1 / AngularJS. Ich habe den Online-Schnellstart und die Tutorials verfolgt und erweitert, und alles war in Ordnung. Ich bin jedoch an dem Punkt, an dem ich einige Komponenten verwenden möchte eine Bibliothek, die für AngularJS entwickelt wurde und kein Ende der Probleme hat!
Die meisten verfügbaren Informationen zur AngularJS / Angular2-Kompatibilität gehen davon aus, dass Sie ein AngularJS-Projekt haben, dem Sie Angular2-Komponenten hinzufügen - nicht umgekehrt. Daher ist das, was ich zu tun hoffe, möglicherweise nicht möglich. Was ich bisher ausprobiert habe, ist ein einfaches, auf dem Angular2-Quickstart basierendes Projekt mit einer einzelnen Angular2-Komponente, die in die index.html geladen wird. Ich würde dann gerne Komponenten aus der vorhandenen Bibliothek (AngularJS-basiert) in diese integrieren.
Ich habe versucht, mit UpgradeAdapter.upgradeNg1Component Komponenten aus der Bibliothek zu erstellen und sie direkt in meine Angular2-Komponente
Ich habe versucht, angularjs über npm zu installieren, importiere es in ein Skript-Tag in meine index.html und verwende dann eine Kombination von UpgradeAdapter.downgradeNg2Component und UpgradeAdapter.bootstrap , um meine Angular2 als heruntergestuftes Modul zu laden
Keine der beiden scheint zu funktionieren - die Komponente wird nicht angezeigt und die Browserkonsole sagt mir, dass ich eine Uncaught SyntaxError: Unexpected token <
Evaluating http://localhost:3000/angular2/upgrade
Error loading http://localhost:3000/app/main.js
Meine beste Vermutung ist momentan, dass dies ein nicht unterstütztes Szenario ist und ich eine "richtige" AngularJS-App haben muss, um die UpgradeAdapter -Funktionalität von Angular2 zu verwenden. Kann das jemand bestätigen? Oder ist da etwas Dummes, das ich hier vermisse?
Das Hauptproblem in diesem Fall war also die Tatsache, dass die Upgrade-Komponenten nicht als Teil des Basis-eckigen 2-Pakets enthalten sind. Nach dem Hinzufügen:
<script src="node_modules/angular2/bundles/upgrade.min.js"></script>
zu meiner index.html Datei der Fehler, den ich sah, verschwand.
Danke an die Antwort hier , um mich in die richtige Richtung zu weisen!
Hier ist ein funktionierender Plunkr, der beschreibt, wie man Angular1- und Angular2-Elemente mischt:
Ein wichtiger Punkt ist bootstrap Ihre Hauptkomponente auf der UpgradeAdapter . Auf diese Weise werden alle Elemente in Anbieter verfügbar sind (Dienstleistungen / Fabriken) und in Richtlinien (Komponenten / Richtlinien):
Diese zwei Antworten könnten Ihnen helfen: