Improve folder structure for large app

[ngx-rocket]

Improve folder structure for large app

[sinedied]

This is definitely a part where I have given a lot of thoughts, but needs to be better documented I think. If you did not already read it, I advise you to look at the Angular style guide details, as it answers most of your concerns here, but here are the most important ideas:

• Everything is organized by feature modules, for example the home and about pages. This is the very foundation that greatly helps building more scalable (ie BIG) applications:

  • each feature module can be easily (thanks to the new router) eagerly or lazy-loaded (if it some point the app become too big, it's easy to switch)
  • you choose what is encapsulated by the feature, what should be exposed to other modules
  • you can more easily separated responsibilities between different developer/teams
  • it allows better isolation for testing

• The core module: this module will be registered by the app root (not lazy-loaded), so everything inside it will instancied only once. As such it is the place for:

  • application-wide singletons helpers (logger, exception handler, i18n service, http service...)
  • single-use components imported only by the App module (and not anywhere else!)

• The shared module: this is the opposite of the core module, as this module may be imported by many other modules:

  • no singletons should ever goes here (or else each module importing shared it will end up having its own...)
  • this is the place for components, directives, and pipes that will be reused among other components (such as UI components)

Applied to this starter kit, this better explains what you have seen:

• the header component is part of the SPA shell and as such is only used by the app module and not aimed to be shared, hence its place in the core module

• by opposition, the loader component is aimed to be reused many time in the app, so it is placed in the shared module.

• feature modules such as home or about both contains related services and components. There is only smart components in it at this time (what you called stateful), but dumb (stateless) related components may also goes here, it could be a good idea to add an example of it. For example, a something-list.component.ts would be the smart component fetching the data and managing the list, while something-list-item.component.ts would be the dumb component to represent a single list item.

I understand at first that this new structure may be hard to get, especially coming from angular 1 where modules were managed completely differently: in A1, modules are only loaded once, globally whereas in A2 modules are instanciated each time they are imported, which is a big difference.

The app structure we used in our Angular 1 starter kit is close to what you propose and I spent a long time pondering whether we should go this way (because yes, it's definitely clearer to catch at first sight!) or follow the Angular team recommendation with this new structure. I finally went for the latter because once you get used to the new A2 paradigm (the new router, the new module system and component-based architecture) it definitely makes sense.

If it can help convincing you, I started migrating the app structure of an existing "big" A1 app (100's of screens) to the new streamlined A2 structure, and one of the benefits is also faster navigation between service and components, as when you start having more than 20 files in a folder, and more than 4 folder deep, clarity of the project is hurt (even when using global search!). We found that the new LIFT approach and app structure helped reducing the developer pain.

[elenat82]

Sorry if I re-open an old thread, but I would like to know how can I choose the right folder when generating a new component. I mean: when I use the command

npm run generate -- component <name>

how can I tell the generator which folder the component goes in?

[elenat82]

Also, how can I tell the generator if I need the component routing too or not?

[luiza-cicone]

npm run generate is actually the ng generate of the Angular CLI. You can find the doc here

You can generate a module with routing:
npm run generate -- module <name> --routing

And a component inside another folder:
npm run generate -- component <folder-name>/<component-name>
as explained here

[elenat82]

Thank you Luiza,
I now understand that I need to create a module before creating the components that are related.
I also found this discussion which may be related to my questions: #142