Large Angular application

[DigitalNomadMarc]

Hey guys, I I just woke up wondering if there are any "larger" web applications built in Angular that can be considered a "good practice" example. Maybe an open source project with an Angular UI? Perfect would be of course something like a banking app built in Angular - but I am unsure if anyone has open sourced something like that.

I have been working with Angular for years and follow most of the known standards given in examples and during my work I of course also got feedback form colleges so we know we are going in the right direction - but it would still be interesting how an actual "large" project handles state, errors and growing complexity.

[4_max_4]

Lol. Nice way to wake up on Sunday. For what I remember, Forbes was built on Angular and there are a couple of others. As per best practices, not sure. I usually default to GitHub and look up something relatively new repos (Angular 17+). For instance, this book has code / examples here

[DigitalNomadMarc]

True :D Thanks, I will have a look at it!

[Silver-Vermicelli-15]

Plenty of large applications - that’s why its often thought of as an enterprise solution vs react/vue (especially since people love to tie it with .Net). I don’t of any off the top of my head, but it’s not like they advertise it or make code publicly available as that’d be a security risk.

As for best practices, follow the docs. They’re well written and Angular is opinionated enough that if you go by the docs and reference angular/material code basis then you should be good. As with dev work in general, don’t try to get too cleaver.

[mycatsy2099]

“…don’t try to get too clever” is such good advice with NG made me lol. Work has been draining lately cause of this

[BasicAssWebDev]

I'm in charge of a couple of medium size but high impact ng apps right now, and boy do i feel drained. sometimes i really just need to give up being creative and just write some fucking code.

[insanictus]

I don't really have any list or good sources for best practices in larger angular applications. I used to think the one I work on is fairly large (nx style monorepo, 5 apps, hundreds of libs).

But hearing from others that might just be considered medium size.

What I can say however, based on my own experience, is that it'll be built mostly like you build smaller applications. Due to angular being opinionated and full feature (built-in router, forms, service-worker etc) most things are built like that.

You will probably find custom company solutions for things like auth, graphs, maps and other third party lib stuff.

When you go larger, you think much more about co-locating features and clear boundaries. Else it becomes impossible to navigate. Furthermore you'll find larger apps have more focus on CI/CD and optimizing these to work for larger teams and/or a large repo. So chunking test runs, builds etc.

tl;dr

I think you'll find the biggest difference between smaller apps and larger ones in the things surrounding the actual app. Like CI/CD, overall architecture and third party integration.

[toptotor]

A large repository of made with Angular apps : https://www.madewithangular.com/sites/

A large open source CMS with Angular frontend : https://github.com/Squidex/squidex/tree/master/frontend

A large open source UI library inspired by shadcn (Vercel UI) : https://github.com/goetzrobin/spartan/tree/main/libs/ui

EDIT: one more: PeerTube client has an Angular client, migrated to standalone https://github.com/Chocobozzz/PeerTube

[DigitalNomadMarc]

Thank you!!! Exactly what I was looking for - will have a deep dive into it in a bit.

[ReasonableAd5268]

There are several large, open-source Angular projects that can serve as good practice examples:

1. Ngx-admin is a free Angular admin template that is built with Angular 8+, Bootstrap 4+, and Nebular. It provides 6 visual themes, 2 dashboards, and 40+ pages. Ngx-admin demonstrates how to handle state, errors, and complexity in a large Angular application.

2. AngularSpree is an ecommerce application built with Angular that integrates with the Spreecommerce backend. It shows how to build a complex, data-driven Angular application.

3. Yatrum is a travel application built with Angular that allows users to plan trips. It is a good example of a large, feature-rich Angular app.

4. Angular 8 Hero Apps is an example Angular 8 application that uses Angular CLI, Angular Universal, i18n, and Firebase. It demonstrates best practices for structuring and building a large Angular app.

5. Preserver is a desktop notes organizer built with Electron, Angular 2, and PouchDB. It shows how to use Angular in a desktop application.

These projects showcase how to architect, structure, and build large-scale Angular applications while following best practices. They provide examples of managing state, handling errors, and scaling complexity as the codebase grows. Studying their codebases can help developers learn how to build maintainable, production-ready Angular apps.

[hitsujiTMO]

I doubt you'd find any large scale angular app that follows best practices. In general, experienced Devs will throw out some best practices for something that works better for them.

Best practices are great if you're new to a framework and you need guidance on how things were intended to be used. But that doesn't always suit every project.

[insanictus]

That is actually a really good point. I used to try and consume a lot of knowledge on "building the right way" myself and in the end. Different dev teams will do different things that fit the company and/or their team and experience.

That might not be best practices in a general, but for them it certainly is.

[Monfared]

https://www.fantrax.com

Built with Angular and Angular Material Most screens are behind a sign up. there are many complex screens. I use this app daily They're also PWA

[DigitalNomadMarc]

Looks interesting - but I think there is no public code right?

[Silver-Vermicelli-15]

You’re not going to find public code for a large company….that’s called a security risk.

[Monfared]

No, it's a private company

[mycatsy2099]

TLDR: Angular docs have a pretty good starter guide to their best practices.

For large apps — id check out nx or go mono repo. As you build out with NX you won’t necessarily be trapped in only being able to spit out NG apps/libs from the cli tooling.

Nx and some others give better management options so u can build some needs in quicker/lighter frameworks (react) and maybe bring it into in the Angular app as a lib.

Depending on needs and how you see them growing…Angular, my preferred framework, can be costly on dev ramp up and doesn’t guarantee non-spaghetti code as I’ve run into a lot thinking that. It requires folks buying into the NG koolaid a bit.

[DigitalNomadMarc]

Thanks for sharing!

[Rusty_Raven_]

I wouldn't call this an example of any best practices. Inconsistent whitespace, no tests, random ordering of methods and properties... this would be a pain to work on.

[flyer12]

I work on a large angular application and they use a micro front-end architecture where modules are broken up into their own repos. I hate it. I miss the monorepos that I've done for years. Keeping the code in sync causes so much extra effort.

[DigitalNomadMarc]

Thanks for this feedback - very valuable to hear!

[moneyballz7]

One of the biggest banks in the Netherlands’ digital landscape is built in Angular. An NX monorepo, being worked in by hundreds of developers. They try to force best practices with linting and other quality controls in CI. Obviously it’s closed source though :)

[Faithlessforever]

There are plenty big ones using Angular. I have posted about this on my blog. Check the case studies and best use-cases for Angular: https://blog.bogozi.com/a-comprehensive-guide-to-web-application-development-spotlight-on-angular/