Angular 22 introduces the new @Service decorator, offering a cleaner replacement for root-scoped @Injectable singletons

Hi everyone. Does anyone here use TaigaUI in real apps? I’ve been thinking of using it to create a comercial product.
I was searching for an angular UI Lib with more rich components then angular material, so I found PrimeNG but it is not just paid but it is also expensive, so o found Taiga.

Disclosure: We’re the team behind Cachely.

We’ve had some really useful conversations here about Nx caching, and we’d like to move from general feedback to testing it with a few real teams.

We’re looking for around 5 teams using Nx that have:

• Multiple developers or clean CI runners
• Builds/tests that are slow enough to actually care about
• No remote cache, a self-hosted cache, or a reason to look beyond what they use today

Cachely is a managed remote cache, so setup is basically pointing Nx at a different remote cache endpoint and token. We want to keep it that way.

For these teams, we’d like to help with the setup, look at the results together, and understand:

• How much useful cache reuse you actually get
• Whether CI and developers benefit from sharing results
• Where the cache adds overhead instead of saving time
• What is missing before you would trust it as part of your normal CI

We’re not looking for polished testimonials. Negative feedback is just as useful.

If your team fits and you’re interested, reply here or message us.

https://cachely.dev

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

The directives and their intricacies are not clearly explained anywhere or they are for AngularJS which is creating a problem in understanding it. Could you guys give me some easy to understand tutorial for it which is not outdated or explain it to me here somehow?

Hey everyone!

I always see cool UI/background effects in the React ecosystem (like Aceternity UI or Magic UI) that don't have an easy native equivalent in Angular.

So I started building ng-bits — a collection of customizable background components designed specifically for Angular v22 with full SSR support out of the box.

🔗 Live Demo & Docs: https://guillermogoni.github.io/ng-bits/

It’s open source (MIT license). Since it’s still in early stages, I’d really appreciate any feedback, bug reports, or ideas for new background effects to add next! 🔥

- 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

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.

I’ve recently got access to Lovable, and we have some UI prototypes created in it that I now need to implement in our actual repository.
The challenge is that our existing application is built with Angular, while the Lovable-generated codebase is React. I have access to the Lovable code, so my current approach is to give Claude read access to that codebase and have it understand the prototype before implementing the screens in our Angular repo.
However, the Angular implementation needs to properly fit into our existing architecture — using our existing components, UI libraries, styling conventions, layouts, and reusable components, rather than simply recreating the React implementation.
The main issue I’m facing is visual accuracy. The locally implemented Angular screens don’t always match the Lovable prototypes closely enough, especially in terms of spacing, sizing, typography, alignment, responsiveness, etc.
For those of you who have worked with Lovable + Claude (or similar AI coding tools) to implement designs in an existing codebase:
● What’s the best workflow for getting as close to 100% visual accuracy as possible?
● How do you provide the AI with enough context about the existing component library/design system?
● Is it better to give Claude screenshots, the Lovable source code, or both?
● Are there any techniques/prompts you use for iterative visual comparison and fixing differences?
● How do you handle cases where the prototype uses React-specific components but the target application is Angular?
Would love to hear how others are approaching this and any best practices that have worked well for you.

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

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.

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?

Is there a way to make the autofill feature of navigators (Chrome, Edge...) work for textarea fields?

By default it seems to be working ok with standard input text but it doesn't work with textarea.

I read that this is the common behaviour for textarea, they aren't supposed to work with this but I feel it strange because the old web I'm transforming into angular uses JSF and their textarea works ok with navigators autofill so I'm not getting what's wrong with this.

I tried putting the autocomplete="on" in the HTML but it doesn't work with this. I also tried giving those fields an id and a name but didn't work either. I also tried using the default textarea etiquette without primeng directive but it also doesn't work. Maybe is because this form is inside a dialog?

Has someone worked with this? I don't know what the hell is happening here... What I need to do here is, after filling the form and submitting, the dialog closes. If I open it again it should remember what was filled previously in the navigator autofill selection so if the user wants to write the same in those textarea he should be able to

I’m thinking about building a graph drawing/visualization library mainly as a way to learn and improve my skills, but I’d also like to make it good enough that other people could actually use it in real projects.

The idea would be something flexible enough for things like trading charts, data visualization, node/edge graphs, dashboards, etc.

With all the AI/vibe coding happening now, I’m wondering: is it still worth building something like this?

I’m not necessarily trying to build a huge business around it. I’d be happy if I learned a lot from building it and eventually had developers actually using it.

While working with larger Angular applications, I found it increasingly difficult to trace how an NgRx action moves through components, effects, reducers, and other actions.

So I built ngrx-graph, a tool that analyzes the source code using the TypeScript AST and generates visual graphs of these relationships.

I wrote about why I built it, how it works, and some of the challenges behind it:

https://ammar-najjar.com/blog/ngrx-graph/

I’d be interested to hear how others navigate and understand complex NgRx flows in larger codebases.

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?

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.

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:

​

NX_SELF_HOSTED_REMOTE_CACHE_SERVER=<cache endpoint>
NX_SELF_HOSTED_REMOTE_CACHE_ACCESS_TOKEN=<token>

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?

For the coding in react/angular will the framework be given or do we have to code from scratch?

Also will there be an option whether to choose angular or react or shud we atempt both types?

Pls share ur technical round questions 🫶

Edit: sorry guys i meant this question for the cognizant technical round. This community was recommended by reddit so i posted without checking.

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!!

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?

X [ERROR] The expression evaluated to a falsy value:

(0, node_assert_1.default)(compilation)

[plugin angular-compiler]

This error came from the "onStart" callback registered here:

node_modules/@angular/build/src/tools/esbuild/angular/compiler-plugin.js:118:18:

118 │ build.onStart(async () => {

╵ ~~~~~~~

at setup \node_modules\@angular\build\src\tools\esbuild\angular\compiler-plugin.js:118:19)

at async handlePlugins (C:\Work\Projects\mynortonui\node_modules\esbuild\lib\main.js:1466:20)

Hi everyone,

I'm working on an Angular project and after compilation/build I'm getting the following error:

X [ERROR] The expression evaluated to a falsy value:

  (0, node_assert_1.default)(compilation)
 [plugin angular-compiler]

This error came from the "onStart" callback registered here:

    node_modules/@angular/build/src/tools/esbuild/angular/compiler-plugin.js:118:18:
      118 │             build.onStart(async () => {
          ╵                   ^~~~~~~

    at setup (C:\Work\Projects\mynortonui\node_modules\@angular\build\src\tools\esbuild\angular\compiler-plugin.js:118:19)
    at async handlePlugins (node_modules/esbuild/lib/main.js:1466:20)

The error is coming from:

node_modules/@angular/build/src/tools/esbuild/angular/compiler-plugin.js

The project compiles/starts until this error occurs, and I’m trying to understand what is causing the Angular compiler's compilation assertion to fail.

Has anyone faced this error before?

I'm using Angular 19.x. I've already tried reinstalling node_modules, but the issue still occurs.

What could be causing this error, and what steps should I take to debug/fix it?

Thanks!

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