Search code examples
angulartypescriptangular-module

Angular 2 Project Structure With Multiple Modules


I'm currently developing my first Angular 2+ application and I'm running into a couple issues regarding how to best structure the application.

I've just begun developing the area of the application where a user can do things like log in, and create an account. For just these two routes, I already have several components (login form, signup form, login page, signup page, etc). Continuing to declare these in the root module seems messy, especially as the application grows in size.

How should I proceed going forward? Make a module for each route? Make one module that encompasses both the login and signup functionality since they're similar? I'm not finding much online so any guidance would be great!

Thank you!


Solution

  • The official style guide that was already suggested by @brijmcq and the documentation about modules give a good first orientation.

    You should group your application's classes in modules by feature (and definetly not by type). It strongly depends on the context where to draw the line. For a very small application one root app module might be sufficient, in most cases having feature modules makes a lot of sense. Typically, a module handles more than one route, there might be cases though, where one route per module is appropriate. In your case, an authentication module that handles login, logout, registration,... sounds very reasonable to me. If your registration process becomes very complex, you might consider refactoring it into its own module at a later point.

    Some things might not belong to one feature in particular but are used in several different features (mostly UI components, like a floating action button). It's common practice to move those into your own common module and import this in all your modules.