Angular 2 Modul/Anwendungsstruktur

Question

Ich überlege gerade, wie man Angular 2 für einige Webanwendungen verwendet, die einige Dienste und Komponenten teilen. Soweit ich weiß, kann ich Komponentenbibliotheken erstellen, um Komponenten zu teilen. Jede Komponente kann ihre eigene CSS haben, die nur die Komponente beeinflusst. Was ist der beste Ansatz zum Teilen von Diensten?

Ich verwende derzeit Angular 1 und die Bootstrap-Komponenten. Eine Voraussetzung ist, dass unsere Anwendung die Möglichkeit bietet, eigene Skins dafür zu erstellen. Die Anwendung auf sich selbst sollte auf jeder Website funktionieren, indem ein Java Script Snippet hinzugefügt wird. Dies ist ein großer Unterschied zu anderen SPA, die nur auf einer bestimmten Website ausgeführt werden. Momentan bieten wir eine Bootstrap-less-Variablen-Datei an, die angepasst und hochgeladen werden kann, um weniger neue Skins zu erstellen. Der Vorteil ist, dass fast jeder Webdesigner weiß, wie Bootstrap funktioniert. Das bedeutet aber auch, dass das CSS global definiert ist und nicht innerhalb der Komponenten. Was ist der beste Ansatz, um Menschen css in eckigen 2 auf sehr einfache Weise anpassen?

In unserem Fall kann es erforderlich sein, dass zwei Anwendungen miteinander interagieren. Im Beispiel stellen Sie sich vor, Sie haben eine Hotelbuchungsanwendung und eine Flugbuchungsanwendung. Nachdem ein Benutzer einen Flug gebucht hat, möchten Sie vielleicht auch die Hotelbuchungsanwendung auf derselben Seite anbieten. Beide Anwendungen können die Komponenten wie ein Datumsbereichsauswahlformular oder eine Ergebnisseite teilen. Ist es richtig, über verschiedene Anwendungen zu sprechen, oder würde ich nur zwei Module erstellen (Hotel + Flug)? Was ist mit Lazy Load, um nur den Teil zu laden, der für die aktuelle Anwendung benötigt wird, um die anfängliche Ladezeit bei größeren Projekten zu reduzieren?

Irgendwelche Ideen, was wäre die beste Struktur für diese Art von Projekten?

Answer 1

Die Art, wie ich es mir vorstellen kann, ist.

Anwendung mit zwei Hauptrouten

/Flights 
|--Holds other routes for the Flights part of the application 
|i.e. 
/Flights/flights 
/Flights/seating 
/Flights/payment 

/Hotels 
|--Holds other routes for the Hotels part of the application 
|i.e. 
/Hotels/booking 
/Hotels/payment 

So wird es eine Anwendung mit zwei Hauptrouten, dass Nest Routen für ihre spezifischen Bedürfnisse sein.