2016-10-06 4 views
6

Ich bin neu in Angular2 und ich bin interessiert herauszufinden, ob es die Möglichkeit gibt, ganze Sätze von Präsentationskomponenten innerhalb einer Anwendung in einer anderen Anwendung wiederzuverwenden?Kann ich Komponenten über Apps hinweg wiederverwenden?

Zum Beispiel habe ich eine Angular 2-Anwendung namens MyApp und in diesem habe ich einige gemeinsame Komponenten, die ich erstellt habe, diese befinden sich in der App/Komponenten/gemeinsamen Ordner und enthalten jeweils eine TypeScript, Sass und HTML-Datei.

Ich benutze Gulp, um das TypeScript zu JS und Sass zu CSS zu kompilieren.

Ich gebe jetzt bekannt, dass diese gemeinsamen Komponenten in meinen anderen Angular 2-Apps üblich sind und ich sie daher in einer separaten Angular 2-App namens MyOtherApp verwenden möchte.

Ich möchte alle gängigen Komponenten aus MyApp ziehen und in MyOtherApp verwenden können.

Ist das möglich? Wenn ja, was ist der beste Ansatz für diese Art der gemeinsamen Nutzung von Komponenten?

Wie gesagt, ich benutze Gulp für den Aufbau/Betrieb, und auch System.js für die Konfiguration der Angular Apps.

Ich kann einige Code von dem, was ich versucht habe, wenn erforderlich teilen, aber ich bin unsicher, was hilfreich ist zu teilen, also bitte, was nützlich sein könnte und ich werde teilen.

Antwort

4

Ich denke, der allgemeinste Weg ist, eine separate Bibliothek zu erstellen, die NgModule veröffentlicht - genau wie Angular selbst, Angular Material 2-Bibliothek und andere tun. Es erfordert jedoch mehr Aufwand, um das Build-Skript für die Bibliothek einzurichten, und erschwert das Debuggen.

Eine weitere Option ist für jedes Projekt ein einzelnes Typoskript Projekt für alle Anwendungen mit unterschiedlicher Einstiegspunkt Dateien mit kantiger Bootstrap-Funktion hat

+0

danke, können Sie einen Link oder zusätzliche Informationen bereitstellen, warum eine Bibliothek schwieriger zu debuggen ist? Wenn die Bibliothek ein eigenständiges Angular-Projekt ist, kann es als solches debuggt werden? Meinst du, dass das Debuggen der Bibliothek in der Anwendung, in die es importiert wird, schwierig wird? –

+1

Ja, Sie können eine eigenständige App in der Bibliothek haben, wie hier https://github.com/angular/material2/tree/master/src/demo-app/ Allerdings wird es schwieriger, Probleme in Ihren Apps mit der Bibliothek zu beheben - Ich würde es vorziehen, die Probleme in der App in der Bibliothek zu simulieren und sie dort zu debuggen. – Rem

+0

Dank @Rem, wäre es einfacher, eine interne Angular App in der eckigen App zu starten? Was ich tun möchte, ist irgendwo zu haben, dass ich sagen kann, guld served components und das wird eine Anwendung laden, die zeigt, welche gemeinsamen Komponenten verfügbar sind. –

-1

ich meine Komponenten wie folgt organisieren:

/routes 
    /route1/ 
    route1component.ts 
    /route1child1 
    /route1child2 
    /route2/ 
    route2component.ts 
    /route2child1 
    /route2child2 

/apponents (project-level-reuse, must be used in at least 2 places with the app to be promoted to an apponent) 
    /project-reusable-component 

/components (cross-project-level-reuse, used across multiple projects) 
    /cross-project-reusable-component 

annehmen Lassen Verwendung von Git. Jetzt innerhalb von "Komponenten" könnte ich diese Projekte in der Regel mit Git-Submodulen teilen, so dass die wiederverwendbaren "Komponenten" in ihrem eigenen Repo leben würden und als Submodul in jedes Projekt gezogen werden könnten.

Verwandte Themen