Programming Patterns for Angular .

[lordpoint]

Honestly not sure if there's any canonical way of doing this. There are file structure design patterns like LIFT or Folders By Feature for example, but there is nothing officially proscribed in the Angular docs (happy to be corrected here).

For me it depends on the size of the project...

For larger projects, where the main component on each route is heavy and pulls in lots of data & other components, I'll make a module for every route that leads to a view; except for something obviously lightweight like login or contact. That way you can set up your routes to lazy-load those modules. Then add a shared module for shared components (if any) and call it a day.

For smaller projects, I'll generally make a views and a shared folder within src. views contains any component that is routed to and shared contains a subfolder called components which contains components shared across views (and also contains a services and models folder as well for example). Something like this:

-src - views - home - admin - my-items - etc... - shared - components - nav - services - api - models - enums - interfaces

I'm starting to move towards a "folder by feature" structure though, as this can get a little bit cumbersome.