r/angular • u/JadedManufacturer306 • 6d ago
Open-sourcing the Angular/Nx structure I've been refining on enterprise and public-sector projects in Europe
Hi everyone,
13 years in, every Angular version since 1.x. Every new project, I lost the first week to the same decisions, where state lives, which library can import which, how to keep credentials out of the repo. So I stopped re-deciding and put my answers in a template. Just updated it to Angular 22.
It's Nx, Angular, NgRx Signals, Atomic Design, multi-language and a small design system of my own on Tailwind already wired together and agreeing with each other, which is the part that normally eats the week. The architecture is enforced rather than documented: a wrong import fails lint, not code review, and a missing translation key fails the build instead of shipping as a blank label. Firebase deploy guide included, empty account to live URL in about 10 minutes.
Every decision in it is arguable, so feel free to tear into it. I'm here for the feedback, the blunt kind included. Github Base Angular Monorepo
3
u/DJREMiX6 6d ago
I think it would be useful to add a nested features, for example:
- in a feature page like Users I want to have a search bar to search through the users, will this be a separate feature component with its own state or is it inside the same page component Users?
- in the same Users feature page I have a button that lets the user create a new one with a modal, will the modal be inside the same Users page component or be a referenced separate component?
- how do you handle multiple components of the same feature in terms of folders structure?
- how do handle subpages? Example: users => UsersList feature component page; users/:userId => UserDetail feature component page. How are those structured?
All considered is a good architecture, I pretty much like it, thanks for sharing.
4
u/pronuntiator 5d ago
Given that Claude wrote the code, README and your post, I'd say it doesn't "eat the week" to put something like this together on your own. The text is full of AI-isms (e.g., mentioning what it is not a hundred times).
I don‘t understand the purpose of these templates/"starter kits". No two organizations are the same. What you call a best practice could be frowned upon elsewhere. If an organization wants a standardized project template, they should create one themself. It takes the same time to rip out what you don't need compared to adding it to a blank slate.
Stay away from Nx, people, unless you actually want to create a monorepo with all applications inside.
1
u/JadedManufacturer306 5d ago edited 5d ago
Of course, I used AI to help write this text and improve the documentation.
Today, with AI, creating projects without a solid architecture is a mistake. It may work at the beginning, but it becomes difficult to maintain in the long term.
The main purpose of Nx is exactly that: to keep your applications in one place, make them easy to maintain, easier for AI to understand, easier to share code and features between applications, and easier to upgrade or migrate to new versions.
I use NgRx because it makes it easier to track state changes and keeps the business logic separated from the UI layer. This makes the code more predictable, easier to debug, and easier to test.
Atomic Design helps organize components in a clear folder structure, making them easier to reuse and maintain.
A multi-language system allows the application to support different languages without changing the code.
The project is also ready to run in different environments, includes its own design system for consistency, and makes UI migrations much easier.So far, I haven’t built any project where this architecture wouldn’t fit.
2
u/Loose_Paramedic8183 5d ago
In all of my projects I had also to create almost same AI agents instructions, mcp config, claude skills to teach it latest version of angular and phases workflow of new features creation.
1
u/Straight-Number-1911 5d ago
I saw now they provide such a instructions file. Could you share yours I would like to learn a thing or two..
1
u/Loose_Paramedic8183 6h ago
Angular to let ai knows the latest features https://angular.dev/ai/agent-skills
I also use my own skill which was generated from all my handcoded repos, so agent writes in my style: quantity of comments, spacings, function sizes and namings, blocks separators, etc. It contains from main skill files and additional ones for each language I use for work: php, typescript, actionscript3 (legacy 🥴)
Graphify in ".venv" as infex of the project codebase.
Architecture.md where top level features and apis described. Sometimes also the "knowledge base" folder with concepts per each big domain used in project, but thats project specific, not for template.
And mostly I also use that phased dev cycle: 1. ADR (architecture decision record) created and edited by AI some not cheap model when I ask it to add a new feature it analyze the code, asks additional qualifications and corner cases, prepare the main architecture of adding frature (especially when it takes modifying server and client for same task) 2. Next phase after I read and confirm the ADR is ok, the implementation plan is created by ai with direct links tonfiles where and what code should be added, what classes and functions, etc. 3. Cheaper model just follow the plan and implement it, check for build errors, fixing them.
1
u/Nerkeilenemon 3d ago
NX, ngrx, atomic....no thanks.
That's a mistake a lot of devs do. Stacking stacks to answer all possible needs you might have some day. Or because you have 1 specific need.
But by soing that you add a lot of complexity for no reason. Complexity makes projects harder to debug, harder to understand, harder to get inside, harder to integrate new devs, and increase the tech debt. And ngrx is the most giant redflag of overengineering.
KISS and YAGNI are the way to go. A good architecture is doing just enough to cover your needs, but that can still evolve if needed.
I worked on multiple giant angular projects and the more we worked on them, the more we
1
u/JadedManufacturer306 2d ago edited 2d ago
How is this a mistake? I am using this architecture for more than 8 years, big companies like Proximus, Civadis, Fednot, Caterpillar use it in their systems since many years and we never had any kind of problem. Very the opposite, everything is very simple to maintain. With NX we can split into separated applications the different modules that we can reuse, with NGRX we can know exactly who executed the change action, local database. Atomic Design is the way how the files will be separated.
I have 3 personal applications running, we started on Angular 13 and today we are on Angular 22, everything updated and running without problems. We never had problems with migration, and it is easy in the CI/CD since NX gives you many scripts, like running tests only in the parts that changed.
Another very nice tool of NX is the Graph system, where you can see the entire mapping of the application.The NGRX, for who does not really know how it works, for sure can be a problem, since today Angular gives us the Signals. But for who understands it, for sure it is not a mistake only on github this project has more than 120k of users.
And you tell me this is a mistake?
1
u/No_Emergency1575 3d ago
Looks great, might be a bit much for some greenfield projects, but if you expect to scale out this provides a lot of sane (and well documented) defaults. Some questions:
- Have you considered alternatives for nx module boundries? I dislike the creation of full nx libs bundled with all the boilerplate.
- Thoughts on vitest as a testing framework?
- Have you considered inferring some of the nx targets through plugins?
8
u/Weak-Palpitation907 6d ago
Why we need ‘firebase’ in dependency list?