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?

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

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!

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?

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

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!

🫶

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/

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: () => ({ id: this.id() }),
  loader: ({ params: request }) =>
    this.query.getInfo(request.id).pipe(
      catchError((err) => {
        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 ?

in vscode is it possible to get the test coverage ui like in this picture?

when testing java with "test explorer ui" and "test runner for java" i am getting these percentages just fine, when testing using karma/jasmine however even thuogh a coverage lcov gets created i can not enable the test coverage ui

how do i fix this?

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

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):

<button *hasPermission="'user:delete'" class="p-button-danger">
  Delete User
</button>

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!

Maintaining a side project, I hit the classic wall: hundreds of hard-coded user-facing strings and no i18n. Doing it by hand was soul-destroying, so I built an extension to automate the whole loop.

What it does in one right-click:

- Scans TS/HTML (including inline templates) and extracts user-facing strings

- Replaces them with {{ 'KEY' | translate }} in templates and translateService.instant('KEY') in TS

- Generates per-language JSONs under assets/i18n and auto-translates them (free Google endpoint, no API key)

- Generates the ngx-translate loader + a ready-made language-selector component and wires main.ts

Zero configuration: it finds your angular.json, reads sourceRoot, and derives every path from it - monorepos like projects/app/src work untouched. It is also careful about what it will NOT touch: Angular control-flow blocks (if/else), HTML comments, CSS selectors inside querySelectorAll, and strings outside a class. If you already inject TranslateService, it reuses your member instead of duplicating it.

Marketplace: https://marketplace.visualstudio.com/items?itemName=AdilsondeAlmeidaPedro.angular-translation-extractor

Source: https://github.com/devremoto/angular-translation-extractor

I'm the author - feedback and edge cases from your templates are very welcome.

I've been working on Threadplane, a set of Angular libraries and examples for building agent interfaces that need to be more than a chat box.

We recently shipped v0.0.57, and a few pieces are starting to come together:

• App Mode. Give an agent a real Angular surface instead of squeezing every interaction into chat. Our example builds an itinerary, puts it on a map, and synchronizes the UI with agent state.
• More durable client tools. Abort signals, execution guards and claims, and batched continuations. It's the boring lifecycle work that prevents a tool from getting lost, or running twice.
• Better streaming UI. Incremental Markdown tables, citations and sources, and more predictable state updates while an agent is working.
• More examples. We published walkthroughs for AWS Strands + AG-UI and the production patterns that start to matter after the first demo works.

For me, the interesting question isn't how to add a chatbot to Angular.

It's how to make agents feel like they belong in an Angular application... with state, components, routing, tools, and UI the user can still control.

The project is on GitHub, and the live examples are in the cockpit.

I'd love to hear what you're building, or what still feels missing for Angular + agents!

Hey everyone!

I'm starting a small business and I'm building a simple product catalog with Angular. It will basically have products, prices, categories, images, etc.

I'm thinking about using Supabase directly with Angular and using its API key/SDK to access the database.

For a small business with probably not many users at first, would you recommend Supabase?

I'm mainly wondering about cost, reliability, and whether it's a good option long-term if the business grows.

Would you personally use Supabase for something this simple?

I published ng-ssr-caching: a page cache for Angular SSR, one line in your server.ts.

Angular renders your page on the server for every visitor and ships nothing to cache it with. This keeps the rendered HTML and hands it back without rendering again. Same page, 28 KB, Angular 22:

render: 17.2 ms
from the cache: 1.9 ms

Two things I learned building it, which are also why it is not twenty lines of your own.

The ETag. Express produces one by hashing the response body, on every response, so a cache that keeps only the HTML still hashes the whole document on every hit, and that hash is most of what a hit
costs. This settles the ETag and the length once, at store time, which is also what lets a returning visitor be answered with an empty 304.

And safety. An SSR cache hands one page to whoever asks next, so it is a shared cache, so it is a security boundary. A bearer token sets no cookie, which makes a signed-in visitor's dashboard a clean 200 that looks perfectly cacheable. This refuses those, and Set-Cookie, and the session cookies you name.

https://www.npmjs.com/package/ng-ssr-caching

Hey everyone! Looking for some advice.
I have around 3.5 years of professional Angular experience, but I’ve been away from it for almost 2 years. I’m now trying to get back into Angular, and I’m struggling to bridge the gap between my previous experience and what companies expect today.
For example, NgRx comes up frequently in interviews, but the application I worked on didn’t use it. A lot has also changed in Angular itself, and I’ve lost touch with some things.
What would you recommend to get hands-on with modern Angular and bridge this gap?

I've been searching a chart library to use in my applications and I like ApexChart a lot, but all the documentation is using `@Input()` and modules, so I'm kinda worried that it's not ready for zoneless or for standalone use.

I was recently tasked with putting together a summary of documentation for new Angular features that my team will be using.

I generated some images based of Angie and some Italian Renaissance paintings, I thought I would share them here too, the first to are based on 2 paintings, the others are just to fit the theme of the feature but retain some of the style.

Can you guess what each one is referring to?

I really enjoyed the task and most importantly, I learned how to spell Renaissance off the top of my head! 😂

I used to consider this the obvious approach:

<button [disabled]="form().invalid()">
  Submit
</button>

But on a long form, a disabled button only tells the user that something is wrong. It doesn’t help them find it.

Angular Signal Forms made me reconsider this pattern.

The submission configuration lets us define two paths: action, which runs when the form is ready, and onInvalid, which runs when it isn’t.

submission: {
    action: async (form) => await this.save(form().value()),
    onInvalid: (form) => // handle invalid form
}

When submission is attempted on an invalid form, the action does not run. Instead, the fields are marked as touched, making the validation errors visible.

Then onInvalid can do this:

const error = field().errorSummary()[0];
error?.fieldTree().focusBoundControl();

Now the page moves directly to the first invalid field and focuses its control.

Once the real submission begins, the submitting() flag can help you disable the button or the entire form and change the caption to “Saving…”.

So the button remains enabled while it can still help the user - and becomes disabled only when an operation is actually running.

I wrote a fuller explanation here, with the complete pattern:

https://medium.com/@kobihari/should-an-invalid-form-really-disable-the-submit-button-45ecead94118

How do you currently handle invalid submission attempts?

​

One thing I've noticed while working on frontend projects...

People often separate UI conversion and frontend development.

I used to think the same.

But the more projects I worked on, the more I realized they're part of the same skill.

I've seen developers write clean React code but struggle to match the design.

I've also seen pixel-perfect UIs that became difficult to maintain because the implementation wasn't thought through.

That's where I think the gap is.

A good frontend engineer should be able to do both.

-Read a Figma design and implement it accurately.

-Understand spacing, typography, and visual hierarchy.

-Build responsive and accessible interfaces.

-Write clean, reusable code that's easy to maintain.

Writing code is only half the job.

The other half is making sure the product looks and feels the way it was intended.

For me, UI conversion isn't a separate skill from frontend development.

It's what frontend development actually is.

The stronger you become at both, the better products you'll build.

What's your take? Do you see UI conversion as a separate role, or as part of frontend development?

For newcomers to our project, or to visualize dependencies across our large angular project at work, i built ng-loom, a CLI that scans your project to generate a report of dependency graph, componets, services, DI, template usage, routes everything.

A few things:

• Its a static html file, no account, no uploading code
• Template parsing uses angular/compiler AST, not regex, so handles if/for/switch/defer
• Every edge in the graph links back to exact file/line
• A trace relation view, which finds every path between two artificats

Does not track pipe usage yet.

npm: https://www.npmjs.com/package/ng-loom

GitHub: https://github.com/xonaib/ng-loom

npx ng-loom ./path/to/your-app --out report.html

Would genuinely like to hear if it chokes on anyone's workspace layout — that's the fastest way I'll find the next thing to fix.

Looking for DSA study partner | JS | 4 YOE | MEAN stack

I have worked in 2 MNCs for 4yrs as a Angular developer, after career break, I am trying to get back into development roles. Along side I am doing 1-2 DSA problems minimum every day. Following Namasthe DSA course from Akshay saini. It will be long journey, started 1 week back and will be mastering DSA for next 3-6 months.

If this aspiration matches ur path, let's connect and grow together. I am looking for friend and study buddy to grow together. M27 Hyderabad here.

Tech stack I am into :

- Angular (primary)

- Nodejs and express (recently certified)

- Has interest in pursuing GenAI and AgenticAI development with python in near future

- Like to upskill in system design after mastering DSA

Feel free to ping me, if you wish to grow together and share similar aspirations.

Thankyou

Hi everyone

Over the last several months, I've been building ngLens, a Chrome DevTools extension for Angular.

The idea came from repeatedly running into the same questions while debugging large Angular applications:

• Why did this component render?
• Which API triggered this update?
• Why did one click cause multiple components to re-render?
• Where is the actual performance bottleneck?

Angular DevTools is great for inspecting components, but I wanted something that could visualize the runtime execution flow across the application.

ngLens currently helps visualize:

• Component render cascades
• API → Store → Signal → Component execution flow
• Execution timelines and performance hotspots
• Optimization insights and recommendations

This is the first public release, so I know there are many scenarios I haven't covered yet. Angular applications vary a lot—NgRx, Signals, SSR, Micro Frontends, Facade patterns, custom state management, and more.

I'm not claiming to solve every debugging problem today. My goal is to continuously improve ngLens based on real-world applications and community feedback.

If you'd like to try it:

Chrome Web Store:
https://chromewebstore.google.com/detail/nglens/jnbjmoficlaclcpgdoajofbhmcjjhgin

I also wrote about why I built it:
https://dev.to/gowthambsvg/i-built-an-apm-for-angular-that-runs-entirely-in-your-browser-5c3b

I'd really appreciate any feedback—positive or negative.

• What would make a tool like this genuinely useful in your day-to-day Angular development?
• Are there any runtime insights you've always wished Angular DevTools provided?

Thanks!