Verwechslung mit der Verzeichnisstruktur von Angular 2, wenn fast alle Komponenten gemeinsam genutzt werden

Question

Ich habe mit der Entwicklung einer neuen Angular 2-Anwendung begonnen und versuche, dem offiziellen Angular 2-Style-Guide zu folgen. Der Großteil meiner Bewerbung besteht aus einer Reihe von Modulen (ca. 10 davon), die nichts voneinander wissen. Als Ergebnis kann ich faules Laden verwenden und auf diese Module über den Angular 2 Router zugreifen.

|- app 
| |- +module1 
| | |- module1-list 
| | | |- module1-list.component.html 
| | | |- module1-list.component.ts 
| | |- module1-view 
| | | |- module1-view.component.html 
| | | |- module1-view.component.ts 
| | |- shared 
| | | |- module1.model.ts 
| | | |- module1.service.ts 
| | |- module1-container.component.html 
| | |- module1-container.component.ts 
| |- +module2 
| | |- <same structure with module1> 

im obigen Diagramm, das moduleX-container.component Komponente ist die Seite der Router verweist. Alle anderen Komponenten von moduleX sind daran angeschlossen.

Es gibt jedoch einige Anwendungsmodule, foo und bar, die Komponenten aus allen anderen Modulen verwenden müssen. Gemäß dem offiziellen Angular 2 Style Guide müssen geteilte Komponenten unter dem Ordner shared platziert werden. Als Ergebnis wird meine Verzeichnisstruktur wie folgt aus:

|- app 
| |- +foo (this makes use of all the components under /app/shared/) 
| | |- foo-container.component.html 
| | |- foo-container.component.ts 
| |- +bar (this makes use of all the components under /app/shared/) 
| | |- bar-container.component.html 
| | |- bar-container.component.ts 
| |- +module1 
| | |- module1-container.component.html 
| | |- module1-container.component.ts 
| |- +module2 
| | |- module2-container.component.html 
| | |- module2-container.component.ts 
| |- shared 
| | |- module1 
| | | |- module1-list 
| | | | |- module1-list.component.html 
| | | | |- module1-list.component.ts 
| | | |- module1-view 
| | | | |- module1-view.component.html 
| | | | |- module1-view.component.ts 
| | | |- shared 
| | | | |- module1.model.ts 
| | | | |- module1.service.ts 
| | |- module2 
| | | |- <same structure with module1> 

Wie Sie sehen können, jetzt fast alle meine Code unter dem shared Ordner abgelegt wird. Die Lazy Loaded-Komponenten (die mit + gestartet wurden) im App-Ordner enthielten nur das Drahtgitter für Seiten, die auf gemeinsam genutzte Komponenten zugreifen. Ist das eine gute Struktur? Es sieht so aus, als ob es mit dem offiziellen Angular 2 Style Guide kompatibel ist, aber gleichzeitig fühlt es sich irgendwie merkwürdig an, dass ich 95% meines Codes unter dem shared Ordner habe.

EDIT 1:

Auch würde Ich mag module1-view.componentmodule1-list.component und geladen, indem (unter oder verschachtelt) werden träge und nicht-loaded lazy Komponenten. Als Ergebnis scheint in meinem ersten Verzeichnisstrukturansatz module1-view.component und module1-list.component unter einer Lazy-loaded Elternkomponente (+module1) falsch zu sein.

Was denkst du? Ist das tatsächlich kompatibel oder habe ich etwas im Style Guide falsch gelesen?

Vielen Dank im Voraus.

Answer 1

Ich denke, dass Sie den Style Guide falsch lesen. Unter freigegebenen Komponenten und Direktiven sollten wirklich nur Komponenten und Direktiven platziert werden, die in mehreren übergeordneten Komponenten verschachtelt sind. I.e. Wenn Sie eine Kopfzeilenkomponente für die Rasterkomponente und auch für die Produktlistenkomponente haben, sollten Sie die Kopfkomponente in den freigegebenen Ordner einfügen. Oder eine ähnliche Komponente, die in mehr als einer anderen Komponente verschachtelt ist und keine eigenständige Komponente oder "Feature-Komponente" ist. Ein anderes Beispiel sind Dienste, die Sie mit verschiedenen Komponenten teilen können. Am Ende ist es nicht so wichtig, denn nur der Zweck der Struktur ist es, Komponenten schnell zu finden und zu lokalisieren.