Project Structure

Pour profiter au maximum du Lazy Loading, pensez à bien décomposer vos applications en petits modules dès le départ !

Il est également intéresser de séparer les Routed Feature Modules et les Domain Feature Modules ou les Widget Feature Modules tout en essayant de suivre avec les Routed Feature Modules l'arborescence de "Routing".

Les "Routed Feature Modules" ne contiennent que des "View Components". Ces composants suffixés par View sont couplés au "Routing" (Cf. https://blog.wishtack.com/2017/05/05/the-guide-to-building-quality-angular-2-components/).

├── app-routing.module.ts
├── app.module.ts
├── auth
├── book
│   ├── book-list
│   ├── book-preview
│   └── book-search
├── user
└── views
    ├── admin
    │   ├── admin-routing.module.ts
    │   ├── dashboard-view
    │   └── settings
    │       ├── settings-routing.module.ts
    │       └── settings-view
    ├── book
    │   ├── book-detail-view
    │   ├── book-list-view
    │   └── book-routing.module.ts
    └── cart
        ├── cart-detail-view
        └── cart-routing.module.ts

Les "Domain, Service et Widget Feature Modules" (auth, book, user) sont indépendants du fonctionnement et de la configuration du "Routing". Ils peuvent être réutilisés peu importe le contexte.

En revanche les Routed Modules et les View Components sont fortement couplés au "Routing" et nous permettent d'imaginer rapidement la configuration du "Routing" :

/admin/dashboard => DashboardViewComponent
/admin/settings => SettingsRoutingModule => SettingsViewComponent
/book/detail/... => BookDetailView
/book/list => BookListView
/cart => CartDetailView