r/angular

Optimus UI now support Angular 22!
▲ 127 r/angular

Optimus UI now support Angular 22!

Optimus UI 2.0.0 is out.

The PrimeNG community fork now supports Angular 22!

That's a small release meant to jump from Angular 21 to Angular 22.
We'll now start addressing the 900 existing open issues and reviewing community PRs.

This version also introduces 'ng update' support, so you can update all your Optimus UI sub packages at once, and it'll unlock the ability to provide migration schematics if needed in the future!

Check out the update guide: https://optimus.openng.org/migration/update

u/GeromeGrignon — 1 day ago
▲ 60 r/angular+3 crossposts

How Big Tech Builds Micro Frontends

- Module Federation provides better performance, but no strong runtime isolation.
- iframes provide strong isolation, making independent deployment more reliable.
- This matters especially for large, legacy codebases where enforcing boundaries in code is difficult.
- A typed communication SDK, routing, and smart chunk splitting can reduce the performance cost.
- For large legacy applications, iframes can be a better tradeoff than MF

stefanhaas.dev
u/haasilein — 1 day ago

RxJS: are you supposed to use tap to set state in the service, when data is retrieved from an API?

What is the best practice when loading data from an API that you want to set in a service? I see two approaches:

public load()
{
    return this.api.listItems().pipe(
        tap((items) => {
            this.items.set(items);
        }),
        switchMap(() => of(void 0)),
    );
}

or

public load()
{
    return this.api.listItems();
}

public set(items: Item[])
{
    this.items.set(items);
}

The first feels easier to read but feels like I am hacking tap in a way it shouldn't be used?

The second seems more correct but feels like I have extra code?

reddit.com
u/AFulhamImmigrant — 1 day ago

Update incoming to better debug production build outputs for SSR applications!

Hey all!

I worked on "Support splitting browser and server stats json files for easier consumption" and found out this morning it got merged to main!

In an upcoming version of Angular, whenever you want to inspect the files that are generated for the browser versus server, or browser initial files versus browser lazy-loaded, you'll get four separate files.

  1. For browser initial files
  2. For browser files that are lazy loaded
  3. For server initial files
  4. For server files that are lazy loaded

All using the same `ng build --stats-json`. Hope it helps as many people as it did myself.

u/tsteuwer — 1 day ago
▲ 11 r/angular

Material Styling documentation - make it visual

Is it just me that hates how the styling documentation is ? Like we have a list of names but nothing visual. And even though lots of names are understandable by itself, some of them need test and trials to know exactly what is affected.

Why did they not make it visual ? Like "here the name, here's what it changes".

NB : i'm not hating on the addition of the styling, it was actually long overdue imo

reddit.com
u/Sanghxa — 1 day ago

@guildofgleks/ui — an Angular 21 component library with no CDK and no Material

Hi dear reader! (/ ^_^)/

First of all I want to say that this lib I made for personal use, but my friend said that I must share it, that's why I made a documentation site for it and publish this post.

--==--==--==--==--

This is a component library for Angular 21. Current version is 21.4.4, Apache-2.0, on npm. I work on it continuously — 11 releases since the first one on 2026-07-30.

Inside package:
- 27 components, 5 standalone directives, 15 slot directives, 3 services (DialogService, ToastService, ThemeService).
- 905 unit tests across 48 spec files (Vitest, via the Angular unit-test builder).
- 41 built-in icons (Lucide glyphs, inlined) plus a registry for your own.
- 1241 --gog-* CSS custom properties, generated into a TOKENS.md that ships in the package.

What is deliberately not in it:
- No Angular CDK, Material, "@angular/router" or animations package. Peers are "@angular/core", "@angular/common", "@angular/forms", "@angular/platform-browser". The only runtime dependency is tslib.
- No NgModules, no decorators. Everything is standalone, OnPush, and built on input() / output() / model().
- No Sass config and no JS theme object. Theming is CSS custom properties only, in three layers (primitive, semantic, component). Restyling one component or one instance is a CSS override, not a build step.

Design decisions you may or may not agree with:
- Reactive Forms only. Every form control is a ControlValueAccessor built and tested against [formControl] / formControlName. The library never imports FormsModule; [(ngModel)] is untested and I do not claim it works.
- Your data shapes, not mine. Dropdowns take your objects with accessor paths (optionLabel="profile.fullName"), not a mandated { id, name } DTO.
- gog-button cannot be a link. It renders its own <button>. For links you put [gogButton] on your own <a>, so routerLink / href / target keep working and the package needs no router dependency.
- Outputs are prefixed (gogClick, gogToggle) so they never collide with native DOM events. Inputs keep their natural names.
- Version tracks the Angular major, not semver maturity. 21.x means "for Angular 21". The project is pre-1.0, so breaking changes can land in a minor — 21.5.0 is explicitly the breaking one.

Also:
- The package ships an `AGENTS.md` — a per-component API reference with every input, output, slot, type and default. It is there because an AI assistant writing code against an unfamiliar library guesses, and a stale API table becomes wrong code in your app with nothing failing the build. Point your assistant at it.

Docs: https://ui.guildofgleks.com/
Source: https://github.com/GuildOfGleks/gleks_web_ui
NPM: https://www.npmjs.com/package/@guildofgleks/ui?activeTab=readme

Feedback on the API is more useful to me than stars. If something in the list above reads as a mistake, say so — 21.5.0 is the release where changing it is cheap.

u/IndicationFar8470 — 1 day ago

if i have an AngularJS 1.8.2 admin portal project and we need to start use vuejs3, do i need to do full rewrite for the AngularJS ?

reddit.com
u/sarah_slaiby — 3 days ago

2.5 years experience, feeling lost and confused about my career. Need advice from experienced developers. Pardon me if i have said too much, i'm eager for advices so expressed it all. Thank you.

Hello fellow devs,

I'm from Kolkata,India and currently working as a Software Developer at Jio Platforms in Mumbai,India. This is my first job, and I have around 2.8 years of experience.

My primary skill is Angular, and honestly, frontend development is what I enjoy the most. Over the last couple of years, I've worked on enterprise applications, dashboards, workflow automation portals, authentication systems, and various internal tools. Along the way, I also started learning Node.js and Spring Boot because I felt I shouldn't limit myself to frontend only. I'm not an expert in backend development yet, but I can build APIs and work on real projects. I believe that, just like Angular, I can become good at it through experience and consistent work.

The reason I'm writing this post is because I've been trying to switch jobs for the last 6–7 months. I've been applying through LinkedIn and Naukri almost daily. I have given a few interviews, but nothing has worked out so far. Earlier I used to receive calls regularly, but for the last 3–4 months it feels like the market has completely gone silent for me. Applications go out, but responses rarely come back.

At the same time, AI has been affecting my motivation. I know AI is a tool and not a replacement for developers, but sometimes it feels like the frontend work I enjoy can now be done much faster by AI. That thought has been making me question whether I should continue in this field long-term or move towards something else.

Lately I've been feeling stuck. I've become genuinely unhappy over the last 7 months. The constant applying, waiting, rejection, uncertainty, and comparison with others has started affecting my mental state. I keep asking myself whether all this stress is worth it.

I've even thought about resigning around December, moving back to my hometown, spending time with family, and figuring things out from there. Maybe continuing in IT, maybe exploring something completely different. One thing I've always felt interested in is teaching students, but I don't know if that's something I truly want or if it's just me wanting an escape from my current situation.

The biggest problem is that I still don't know what I want.

So I wanted to ask the experienced people here:

  • Has anyone gone through a similar phase?
  • Is the market really this difficult right now for 2–3 YOE developers?
  • Should I continue focusing on Angular and become really strong at it?
  • Should I push harder into Java/Spring Boot and become a full-stack developer?
  • Would leaving my job without another offer be a terrible decision?
  • How do you know when you're genuinely ready for a career change versus when you're just burned out?
  • Does this stress never go ?
  • Is career break really bad? does i make it difficult to get job later ?
  • Should i do certificates of my skills ?

I would really appreciate honest advice, even if it's tough to hear.

I genuienly appreciate anyone who has read till this. Thank you for hearing me out. I'm really in tough situation right now. I would love you all to say what you feel about this. Also some good success stories who have gone throught the same situtaiton and then listened to their heart and succeded, stories like these will surely cheer me up and maybe motivate me in some way to listen to mine too.

reddit.com
u/shinsetsu__kun — 3 days ago

From excel sheets to a small inventory system using springboot and angular

Two weeks ago, I set out to solve a simple problem for a local pharmacy: keeping track of inventory.

My first thought was, "Why not just use Excel?"

So I spent time designing a workbook with separate sheets for products, stock movements, sales, current stock, dashboards, and weekly reports. I added formulas, dropdown lists, search functionality, automatic calculations, and conditional formatting. It worked surprisingly well.

But as I kept building, I started running into limitations.

What happens if two people need to use it?

How do you prevent accidental edits to formulas?

How do you manage user authentication?

How do you make backups and restore data easily?

How do you package it so the business owner just clicks one button and starts working?

That's when I realized the spreadsheet had become a prototype rather than the final solution.

So I decided to build a lightweight inventory management system instead.

Tech Stack

Angular (Frontend)

Spring Boot (Backend)

SQLite (Database)

I intentionally chose SQLite because I wanted the system to run on a single computer without paying for cloud hosting or a VPS. The goal was to keep it affordable for a small business.

Some of the features I built include:

Secure login and authentication

Product management

Stock In / Stock Out transactions

Automatic current stock calculation

Sales recording

Dashboard with inventory insights

Low-stock and expiry tracking

Database backup and restore

Packaged deployment so the entire application can run from one folder

One of the most interesting parts was figuring out deployment. Instead of requiring separate frontend and backend servers, I bundled the Angular application inside the Spring Boot application, so the owner only needs to start one application. The SQLite database lives outside the application, making updates much safer because the data isn't lost when deploying a new version.

This project taught me something important: sometimes the best solution isn't the one you start with. Starting with a spreadsheet helped me understand the business workflow before writing a single line of backend code. By the time I built the application, I knew exactly what the users needed because I had already modeled the process.

Looking back, I'm glad I didn't stop at Excel. It evolved into a complete inventory management system that solves the same problem in a much more scalable way.

I'd love to hear how others approach projects like this. Have you ever started with a spreadsheet or another simple tool, only to realize it needed to become a full application?

reddit.com
u/Frosty-Lead8951 — 3 days ago

Still using @nx/s3-cache? A practical migration checklist before your next Nx upgrade

Nx has deprecated nx/s3-cache, nx/gcs-cache, nx/azure-cache, and nx/shared-fs-cache because their shared read/write credential model allows cache poisoning.

If one of these is still in your workspace, changing packages is only part of the migration. The important question is: who can write an artifact, and can an existing artifact be overwritten?

The checklist we’re using:

  1. Search nx.json, package.json, and CI configuration for the deprecated cache package or custom task runner.
  2. Check whether pull requests and fork builds receive a credential that can write to the cache.
  3. Choose Nx Cloud or a server implementing Nx’s current remote-cache API. Don’t point untrusted builds directly at a writable bucket.
  4. Configure:

&#8203;

NX_SELF_HOSTED_REMOTE_CACHE_SERVER=&lt;cache endpoint&gt;
NX_SELF_HOSTED_REMOTE_CACHE_ACCESS_TOKEN=&lt;token&gt;
  1. Test the migration from a clean runner:
    • First run misses and stores the artifact.
    • Second run restores the artifact remotely.
    • An untrusted build cannot write, or receives no cache credential.
    • Attempting to replace an existing cache key is rejected.
  2. Remove the old bucket credentials and task-runner configuration after validating the new path.

Disclosure: we’re building Cachely, a managed implementation of the Nx remote-cache API. It is deliberately cache-only; it does not replace Nx Cloud Agents, Atomizer, or the broader Nx Cloud platform.

If you only need a managed shared cache, Cachely has a free tier with no credit card. We’r also happy to look at an anonymized nx.json or CI snippet and point out migration or cache-key issues.

What part of the current Nx remote-cache migration has been least clear for your team?

reddit.com
u/cachely-admin — 4 days ago
▲ 15 r/angular

Long post: should I migrate an existing code base from Angular 19 to either Angular 20 or 21 and what are some pitfalls to expect

So to give some context, I am a backend developer and in some cases I can consume the endpoints for the front end in angular or react. I work at a company where I have a lot to prove (moving from an intern to a better position).

The company has a codebase that’s written in angular 19. I have been maintaining the code base, adding new features for the backend and consuming those new features in the Frontend. That has been the flow and it’s was going great. Now my boss wants a revamp of the frontend (in his words: to look more modern) and has tasked me with the rebuild. That’s fine and I don’t mind taking up the challenge even if it’s not exactly my strongest suit. Now here’s my question:

I order to make the ui have a “modern look” I wanted to go for the spartan-ng components with tailwind. The existing code base uses bootstrap so I want something that makes the customisation easy, but to still have the “modern look “ and from my research, spartan-ng provides that. But the problem is that the stable version of spartan-ng is only available from angular v21 and 22. I have tried to compromise by using tailwind and PrimeNG for the components with angular v19 but I’m not sure it’s sustainable since I have to write css ontop the primeNG components and I don’t know if that’s what I want. Now if I switch the angular to either v21 or 22 and try to replicate the way things are done from the existing code base:

  1. Is the approach even a good idea ( I need a human response. I’m not satisfied with the ai responses)

  2. Are the different versions completely different in how they work and will I be able to copy the existing code and paste into the new codebase with either v21 or 22 and it’ll work just fine?

I want to write little new functionality code as possible and focus on just the look of the ui, so that nothing has to change in the backend and the new frontend can still do the exact same thing the older one did, but with a newer look

Ps. I’m not so strong with angular that’s why I need advice from actual experts. Thanks in advance!!

reddit.com
u/MrGuam — 5 days ago
▲ 10 r/angular

Questions about learning .Net from an Angular Dev

I've been thinking of investing a decent amount of time learning .net and have some questions:

- How do you keep your frontend and backend types in sync? Is there something that takes care of it automatically between C# and typescript.

- Also if I do learn .net how easily would I be able to pickup Java, i.e can a .net dev read Java code and more or less follow what's going on?

reddit.com
u/Tyummyyumms — 7 days ago
▲ 14 r/angular

FastGrid for Angular is now a first-class citizen.

FastGrid is a JavaScript data grid component for handling large, complex datasets in web applications with high rendering performance.

New Angular package, TypeScript definitions, and a working example project you can clone and run in minutes. Built for teams that need a data grid handling large datasets without performance workarounds.

Docs + example: treegrid.com/FDoc/FastGridAngular.html

#Angular #TypeScript #DataGrid #EnterpriseSoftware

u/treegrid_qs — 7 days ago

@craft-ng: Type-safe Angular, by construction

If you want to try craft-ng, I’ve just released a beta version: The problems u/craft-ng solves:

  • Fine-grained reactivity — only the affected bindings are updated.
  • One consistent API for every kind of state — state, query, mutation, queryParams, asyncProcess.
  • Composable by design — state, directives, components, and behaviors can be combined with .pipe(...).
  • Function-based services — no u/Injectable, no constructors.
  • Selectorless & tagless components — typed references with no extra wrapper elements added to the DOM.
  • Compile-time dependency checks — missing provider, invalid route, or unhandled error = the build fails.
  • Exceptions as values — declared errors flow through the type system.
  • Forms derived from state — validators and field-level logic, with errors preserved in the type system.
  • Tests aligned with the actual dependency graph — missing mocks become compile-time errors.
  • Compile-time template assertions — verify what will be rendered without TestBed, DOM, or fixtures.
  • Templates are TypeScript functions — fully typed hyperscript.
  • Built-in observability — structured logs, correlation IDs, timings, and dependency graphs.
  • Architecture as a graph (WIP) — visualize and enforce architectural boundaries.
  • Typed SolidJS v2 Suspense / async-boundary-like features (WIP).
  • Typed CSS variables and truly scoped styles (WIP).

https://ng-angular-stack.github.io/craft/

reddit.com
u/Dismal_Chemical_4734 — 8 days ago

How do you handle error with rxResource

Hello,

Since we upgraded from v19 to v22, our way of handling errors with rxResource for http requests seem to be the wrong way of doing it.

Basically we have a helper method that will display log the thrown error and a toast for the user, this method returns a EMPTY observable for rxjs, so a rxResource looks like this:

public readonly resource = rxResource({
  params: () =&gt; ({ id: this.id() }),
  loader: ({ params: request }) =&gt;
    this.query.getInfo(request.id).pipe(
      catchError((err) =&gt; {
        return this.error.onLoadErrorHandler(err); // this is the method that returns EMPTY
      }),
    ),
});

But now, since the change in rxResource with the stream parameter it seems that you should no longer do it as it throws and error, my understanding is that this error comes the EMPTY. I cannot provide the error right now, apologies.

I understand that httpResource exist but we didn't want to use them for now.

So should we create an effect for every resource to listen to resource.error() and call this helper method to handle the error? Not a big fan of this as it will separate the resource declaration and its error handling. One way to prevent this would be to create a wrapper around resource that both creates the resource and the effect but I'm not sure if this is the right idea.

How do you guys handle error handling for this use case ?

reddit.com
u/PrevAccLocked — 8 days ago

Anybody still using NGRX? I built ngrx-offline

Even in the age of signals, I still enjoy using NgRx. In previous apps, I handled offline writes by storing work locally and replaying it when the connection returned.

I’ve tried to extract that pattern into an open-source library. Applications can keep using a fairly normal NgRx workflow, while the library handles durable IndexedDB queueing, retries, related records created offline, and client-to-server ID mapping. Instead of persisting raw actions, it stores explicitly defined operations and emits typed NgRx lifecycle actions.

It’s still in alpha, and I’m trying to find out whether this would be useful to anyone else. I’d really appreciate honest feedback on the idea and the API.

Interactive demo:

https://poodlelab.github.io/ngrx-offline/

Repository:

https://github.com/poodlelab/ngrx-offline

reddit.com
u/BreakingChangeDev — 9 days ago

ui-grid 5.x - blast from the past under original ownership now

i just got the repo transferred back to me and i migrated everything over to the old repo. MIT licensed fully featured datagrid updated for web-components, angular 17+ and react 18+. 5.4k stars.

https://github.com/orneryd/ui-grid/releases/tag/v5.0.0

thanks for everyone who has supported the project throughout the years. this was huge to get the repo back under my control. thanks!

🫶

u/Dense_Gate_5193 — 8 days ago

I built an open-source Multi-Tenant Angular + NestJS boilerplate with intelligent routing and RBAC

Hey everyone,

Following up on my previous single-tenant Unefied RBAC boilerplate (URBAC), I've just released MT-URBAC, a multi-tenant version built specifically for B2B SaaS applications where tenant isolation and dynamic role-based UI rendering are critical.

What makes the Angular setup smooth:

1. Smart Context Directive: Instead of polluting your component TS files with permission checking logic or async pipe subscriptions, UI elements are governed by a custom structural directive (*hasPermission):

&lt;button *hasPermission="'user:delete'" class="p-button-danger"&gt;
  Delete User
&lt;/button&gt;

2. Zero /etc/hosts Hacks for Local Multi-Tenancy: Testing multi-tenant subdomains locally usually means editing your operating system's hosts file. But in mt-urbac, the routing logic automatically supports path-based multi-tenancy in development (http://localhost:4200/tenant-a/login) and automatically resolves subdomains in production ( http://tenant-a.yourdomain.com ). No local config tweaks required.

3. Fully Decoupled: The frontend and backend run independently. The UI uses Tailwind CSS and OptimusUI, keeping everything lightweight, fully open-source, and MIT-licensed.

The repo includes setup instructions and a NestJS backend with a seed script so you can spin up the full pipeline locally in under two minutes: https://github.com/kasoir/mt-urbac

I'd love to hear feedback on how you all currently manage dynamic permission rendering or multi-tenant switching in your Angular applications!

mt-urbac

reddit.com
u/Individual_Suit_3255 — 9 days ago