É natural que projetos comecem pequenos e naturalmente se expandam ao longo do tempo e se tornem algo monstruoso, principalmente se você estiver fazendo um monolito ou um espaguetão bem doido. Não te culpo, quem nunca fez isso?

O problema é que dependendo da dimensão que o projeto tomar com o passar do tempo e com o aumento do seu time você pode ter criado um grande problema para todo mundo, pois, na bagunça generalizada que ele vai se tornar, você perde velocidade, agilidade e consequentemente escalabilidade.

Imagine a situação: você tem 3 devs desenvolvendo 3 features diferentes, mas você está em meio a um caos no seu projeto, sem padrão qualquer todo mundo está editando o arquivo app.module.ts. Tranquilo, afinal cada um está trabalhando na sua branch e está tudo certo. Tudo certo até você ter que fazer o merge dessa bagunça e resolver os conflitos que não precisavam existir se o projeto estivesse organizado 🙂

Mas como organizar?

Uma sugestão é dividir as responsabilidades como nesse exemplo:

|-- modules

    |-- module1
        |-- [+] components
        |-- module1.service.ts
        |-- module1.module.ts
        |-- module1.routes.ts

    |-- module2 
        |-- [+] components
        |-- module2.service.ts
        |-- module2.module.ts
        |-- module2.routes.ts

|-- shared
        |-- [+] components
        |-- [+] mocks
        |-- [+] models
        |-- [+] directives
        |-- [+] pipes

|-- core
        |-- [+] authentication
        |-- [+] footer
        |-- [+] guards
        |-- [+] http
        |-- [+] interceptors
        |-- [+] mocks
        |-- [+] services
        |-- [+] header

|-- app.module.ts
|-- app.component.ts

Dessa forma o seu projeto está com cada domínio separado, devidamente modularizado com seus componentes, módulos, rotas, guards, services e etc.

Eu em particular gosto de trocar o diretório “Modules” por “Features” e isso é a prova que não existe uma regra, você faz a sua! Essa é apenas uma sugestão de organização proposta pelo próprio Angular e alguns outros figurões como John Papa por exemplo.

O diretório core contém tudo que for necessário para a sua aplicação funcionar, como os componentes principais do seu template, serviços de autenticação e o que mais for necessário.

Enquanto o diretório shared é responsável por guardar os componentes, pipes, diretivas, etc que serão compartilhados com os outros componentes. A única regra pra entrar nesse diretório é não pertencer a nenhum componente, apenas ser usado por eles 🙂

Mas me diz aí como você estrutura o seu projeto? Tem alguma ideia melhor pra compartilhar conosco?
Já teve que reestruturar um projeto no meio do caminho ou ficou com o custo tão elevado de manutenção que inviabilizou a continuidade de um projeto?

Comenta aí que vai ser legal a gente conversar sobre isso 🙂

Fonte

https://johnpapa.net/angular-app-structuring-guidelines/

https://johnpapa.net/angular-growth-structure/

https://medium.com/@motcowley/angular-folder-structure-d1809be95542

https://itnext.io/choosing-a-highly-scalable-folder-structure-in-angular-d987de65ec7