Working with models in Angular Enterprise applications?

[raw quiver]

How do you organise all your interfaces, enums, types in your enterprise applications? Do you have a models folder and put everything in there in different *.model.ts files?

[fathom kraken]

/features/my-feature1/models/x-model.ts
/features/my-feature1/models/...
/features/my-feature2/models/y-model.ts
/features/my-feature2/models/...

[raw quiver]

Hi @raw quiver . Angular team wrote a Style Guide that may help you. See : https://angular.io/guide/styleguide#application-structure-and-ngmodules

Personnally I would recommand having a shared folder with a model folder with all your *.model.ts files and so on

[fathom kraken]

classified by functionality ? because the models of a feature must be in the feature folder****

[raw quiver]

If you have modules managing a specific model you can put your models in this modules root

I am currently using having some in /shared/models/... as well as in /services/models/...

Don't over complicate your folder structure, I would recommand not having services/models folder as it may be confusing. If you have a services folder you implicitly know that this folder contains only *.service.ts files. Same logic with models

If you need to split your services and models depending on features or whatever, put a services and a models folder inside your feature module

like :

• posts (module)
  • services
    • post.service.ts
    • post-comment.service.ts
  • models
    • post.model.ts
    • post-comment.model.ts
  • posts.module.ts

(it's a bad example as you may want to have a "post-comments" module that will lead you having a "post-comments" folder inside the "posts" folder)

[raw quiver]

This is currently how we are doing, do you mean this is overcomplicated?

Also, how do you balance having some interfaces and models inside your services and how many of them do you move to specific files? Do you either always put all in a model file?

Use the mind set of a complete angular noob. Well, This is my first day on this project, the manager asked me to fix a bug on the "post" section so where the code of this specific feature is located ?
If the noob see a "post" folder you can be 100% sure he will look at it.
So now imagine he has to fix a bug in the service that handle de api calls related to the posts. If he see a service folder or directly a file named post.service.ts once again you are 100% sure he will look at it

so the conclusion of that story is : Have a folder structure as shallow as possible and use meaningful naming for your folders as much as you can

Thanks, that's a great reminder. A very wise philosophy 😄