标签：#angular

Architecting Enterprise Angular with Signals: Zoneless Reactivity and 60fps Performance For nearly a decade, Angular relied on Zone.js to intercept asynchronous browser events and trigger top-down dirty checking across the entire component tree. In large enterprise dashboards displaying live telemetry, grid streams, and complex forms, this model leads directly to frame drops and memory leaks. With Angular 19+, fine-grained Signals provide a reactive paradigm where the framework tracks exact DOM dependencies at compile-time and updates only the precise DOM nodes that changed, unlocking 60fps zoneless execution . Architecture & Interview Cheat Sheet Feature Legacy RxJS / Zone.js Angular Signals (Modern) Change Detection Dirty-checks entire component tree Fine-grained single DOM node updates Memory Lifecycle Manual takeUntilDestroyed subscriptions Automatic graph cleanup without memory leaks Derivations Complex combineLatest / switchMap Lazy, memoized computed(() => ...) Zone.js Overhead Monkey-patches all browser async APIs 0 overhead ( provideExperimentalZonelessChangeDetection() ) 1: Clean Reactive State with Signals import { Component , computed , signal , effect , inject } from ' @angular/core ' ; export interface TelemetryPacket { id : string ; latencyMs : number ; status : ' healthy ' | ' degraded ' | ' critical ' ; } @ Component ({ selector : ' app-telemetry-monitor ' , standalone : true , template : ` <div class="card"> <h3>Live Ingestion Monitor</h3> <p>Total Packets: {{ packetCount() }}</p> <p>Average Latency: {{ averageLatency().toFixed(2) }}ms</p> <span [class.badge-warn]="isDegraded()"> {{ isDegraded() ? 'DEGRADED PERFORMANCE' : 'NOMINAL' }} </span> </div> ` }) export class TelemetryMonitorComponent { // Primary Writable Signal readonly packets = signal < TelemetryPacket [] > ([]); // Derived Computed Signals (Memoized, evaluated lazily on read) readonly packetCount = computed (() => this . packets (). length ); readonly averageLatency = computed (() => {

Up front: this is my own project, so I'm not exactly neutral here ;-) Where I'm coming from I work completely differently than I did two or three years ago. For most of my career I wanted to write pretty much every line myself, and I was a bit proud of that. That has changed a lot. Instead of programming I now mostly write specifications and review what the AI generates. On the one hand that's great, I can turn new ideas into working software much faster than before. On the other hand there's the risk of stepping into the same traps with AI-generated code again and again. And that's where I noticed something. Every time I started a new project, I found myself explaining the same things to the AI. This goes into a plugin. That stays out of the core. No domain logic in the shell. Please don't invent a third way of doing tabs. The AI would nod, generate something that looked right, and two days later I'd find a slightly different version of the same sidebar with a slightly different bug. There are things I really don't want to explain over and over. A good, preferably deterministic base is getting more important, not less. I don't want to explain proven architectures from scratch every time. I'd rather build on established solutions where I can, ones the AI understands and can just use. So for my new projects I built exactly that, and put it on GitHub as open source. Why Angular? Well, simply because I think it's a great framework and I've had a lot of good experiences with it over the last 10 years. What it is, and what it isn't LoomWeaver is a workbench shell for Angular. Not a component library. Think of the frame VS Code gives you: a rail on the left, sidebars, a top bar, a status bar, and in the middle tabs and panes you can split and drag around. That frame is what most workbench-style products build themselves, every time, slightly differently. LoomWeaver gives you that frame, and your own domain moves in as plugins. The core contains zero domain logic. Even my

Dynamic rendering in Angular sounds like a fairly narrow technical problem: “I don't know which component I need until runtime.” Angular already gives us several good tools for that. But there is a big difference between dynamically choosing a component and dynamically constructing an entire UI from a runtime specification. And that difference becomes especially important with Server-Driven UI and Generative UI. 1. ngComponentOutlet : when the problem is really just component selection For simple cases Angular already gives us: <ng-container *ngComponentOutlet= "componentType" /> This works very well when the application already knows its possible components and runtime logic only decides which one to display. componentType = condition ? UserCardComponent : AdminCardComponent ; The advantages are obvious: very little infrastructure, normal Angular lifecycle, AOT-compatible components and a relatively declarative template. But this approach starts becoming uncomfortable when the runtime input is no longer: UserCardComponent and instead becomes: { "type" : "Card" , "children" : [ { "type" : "Input" , "props" : { "label" : "Name" } } ] } Now we are no longer selecting a component. We are interpreting a UI description. 2. ViewContainerRef.createComponent() : more control, more responsibility Angular also allows components to be instantiated programmatically: const ref = viewContainerRef . createComponent ( componentType ); ref . setInput ( ' label ' , ' Name ' ); This is a powerful primitive. We control where the component is created, which component is used, how inputs are assigned and when the component is destroyed. For relatively contained dynamic behavior, this can be exactly what we need. But once a runtime specification controls many components, application code often starts evolving into something like: switch ( node . type ) { case ' input ' : ... case ' select ' : ... case ' button ' : ... case ' dialog ' : ... } Then we add input mapping. Then events. Then ne

Let's be honest: async validation is the part of any forms library where you brace yourself. Debouncing, cancelling the request the user just invalidated by typing another character, keeping a "checking..." spinner honest, not letting a slow response overwrite a fast one. Every library that has ever done this has grown a pile of bespoke machinery for it. So when Signal Forms shipped validateHttp() and it just worked, I wanted to see the pile. I opened the source expecting a few hundred lines of async bookkeeping, and instead found a function whose entire body is a single call to something else. That turned into a trace all the way down, from a form field to the line where bytes actually leave the browser. Six layers, and only two of them add anything you could call new async machinery. ✅ Availability: validateHttp() is @publicApi 22.0 , stable. Every source reference in this article is pinned to the v22.1.1 tag , so the line numbers stay valid even as main moves. 🧩 The View From Outside The usage is unremarkable, which is the point. You declare that a field validates against an endpoint, and you're done: const schema = form ( this . model , ( path ) => { validateHttp ( path . username , { request : ({ value }) => `/api/username-available?u= ${ value ()} ` , debounce : 300 , onError : () => ({ kind : ' server-unreachable ' }), onSuccess : ( res : { available : boolean }) => res . available ? undefined : { kind : ' username-taken ' }, }); }); Sync validators run first, the request waits until they pass, field().pending() is true while it's in flight, and typing again cancels the previous call. If you've read Part 3 of my Signal Forms series , that's the behaviour contract you already know. The question here is who implements it. 🔍 Layer 1: validateHttp() Is a Delegation Here is the whole function, from validate_http.ts : export function validateHttp ( path , opts ) { validateAsync ( path , { params : opts . request , debounce : opts . debounce , factory : ( request )

Choosing Angular in the Age of Agents Brandon Roberts Brandon Roberts Brandon Roberts Follow Jul 30 Choosing Angular in the Age of Agents # angular # ai 37 reactions 4 comments 9 min read

We are pleased to announce the latest major version of the NgRx framework, featuring exciting new features, bug fixes, and other updates. Resource Extensions 🧩 Angular's resource and httpResource APIs cover a large part of async state management, but two very common requirements are not configurable at the resource level: Value on loading: when a resource reloads, value() resets to undefined until the new data arrives. Value on error: when a resource enters the error state, reading value() throws. The new @ngrx/signals/resource entry point addresses both cases with resource extensions : a set of utilities for customizing the behavior of a Resource in a composable, reusable way. They wrap an existing resource and patch only the parts of its behavior that should change, while fully preserving the original resource type. The extendResource function accepts the resource as the first argument, followed by the extensions to apply: import { Component } from ' @angular/core ' ; import { httpResource } from ' @angular/common/http ' ; import { extendResource , withPreviousValueOnLoading , withValueOnError , } from ' @ngrx/signals/resource ' ; @ Component ({ /* ... */ }) export class TodoList { // type: HttpResourceRef<Todo[] | undefined> readonly todosResource = extendResource ( httpResource < Todo [] > (() => ' /api/todos ' ), withPreviousValueOnLoading (), withValueOnError ( undefined ) ); } The returned resource is still the exact resource that was passed in, so no access is lost to the APIs of more specific resource types, such as WritableResource . Only value() behaves differently: it keeps the previously loaded todos while a reload is in flight, and returns undefined instead of throwing when the request fails. Built-in Extensions There are four built-in extensions: withPreviousValueOnLoading keeps the last resolved value while the resource is reloading, which is exactly what paginated and filtered lists need to avoid flickering. withValueOnLoading returns a specific fal

Envelope encryption con clave por usuario, qué se cifra y qué no, cómo lo puso a prueba una auditoría externa, y el incidente de rendimiento que provocó nuestro propio hardening de seguridad. Montaste tu app con IA rápido: le pides unos datos al usuario, llamas al modelo, guardas el resultado en la base de datos y a producción. Cómodo, sin complicaciones. Hasta que un día miras bien qué estás guardando. En Cuentopia generamos cuentos personalizados para niños. Para personalizar, un padre nos cuenta cómo es su peque: su carácter, qué le da miedo, qué está pasando en casa. El modelo no improvisa sobre la marcha: se apoya en un marco de criterios clínicos y pedagógicos para decidir cómo abordar cada situación, y luego lo reescribe todo en prosa. Visto de golpe, lo que teníamos en la base de datos era el diario emocional de un montón de menores. El RGPD lo trata como categoría especialmente protegida. El sentido común, también. ¿Y si se filtra la base de datos? ¿Y un backup mal guardado? ¿Y un acceso indebido con privilegios de admin? Relájate —bueno, primero asústate un poco; luego relájate—. Te voy a contar cómo pensamos el cifrado en reposo en serio: una arquitectura de tipo envelope encryption , con una clave maestra que no sale nunca de Cloud KMS (Google Cloud) y una clave por usuario que cifra los campos sensibles antes de que toquen la base de datos. Un aviso antes de seguir: te cuento el criterio y las decisiones, no el plano. No vas a encontrar aquí nombres de recursos, rutas de repositorio, ni el detalle exacto que le serviría de receta a alguien con ganas de probar suerte con nuestros datos. Y porque la seguridad honesta se cuenta entera, también te cuento dónde decidimos no llegar y por qué. ✨ Promesa: al terminar vas a entender, con criterio real de producto, cómo una familia sin ser expertos en cripto se planteó cifrar datos de menores — y por qué ciertas decisiones muy concretas no se hacen públicas nunca, ni en el artículo más honesto. El mapa Lo constru

Every accessibility tool I have used reports violations like this: Images must have alternative text body > main > div:nth-child(2) > form > div.field > img That selector is correct. It is also useless. It describes the rendered DOM , and I do not write rendered DOM — I write templates. Somewhere in a few hundred .component.html files there is an <img> that produced it, and finding it is manual work: grep for img , get forty hits, open them one by one, compare surrounding markup until something matches. Multiply that by sixty violations and the scan stops being useful. Not because it is wrong, but because acting on it costs more than ignoring it. React solved this years ago If you write JSX, babel-plugin-transform-react-jsx-source puts a _debugSource on every element at build time — file, line, column. That is how React DevTools can jump you straight to source, and how error overlays point at the right line. Angular has no equivalent. The compiler knows the position of every element in every template: it has to, to report template errors. But nothing carries that knowledge into the DOM. So I built the bridge. parseTemplate hands you the positions @angular/compiler exports parseTemplate , the same entry point @angular-eslint uses. Give it a template string and you get an AST where every node carries a sourceSpan with byte offsets, lines and columns: import { parseTemplate } from ' @angular/compiler ' ; const parsed = parseTemplate ( source , filePath , { preserveWhitespaces : true }); // each element node has startSourceSpan.start.{offset,line,col} Two things to know immediately. The compiler counts lines and columns from zero , and every editor counts from one — so you add one, or every location you report is off by one in both axes and nobody trusts the tool again: line : span . start . line + 1 , // the compiler counts from zero, editors do not column : span . start . col + 1 , And preserveWhitespaces: true matters: without it the offsets you get back describe a t

I love writing in Markdown. What I don't love is opening a 200MB+ Electron app just to jot down a note. So I built Markify - a desktop Markdown editor that weighs in at under 10MB and still ships a real feature set. Why bother Obsidian is great, but it's heavy, and most of what I actually need day-to-day is simpler: open a file, write, preview, export, done. Every "lightweight" alternative I tried either wasn't actually light, or was missing basics like PDF export or a proper file explorer. So I built the tool I wanted. What's in it Open & save .md , .markdown , .mdx files with native dialogs Sidebar file explorer - browse a whole folder, expand subfolders on demand, just like VS Code Three view modes : Read, Edit, and Hybrid (live side-by-side preview) PDF export with embedded images and proper Unicode font handling Light/dark theme that follows your system in real time 4 languages out of the box: English, French, German, Spanish Native title bar per platform (real traffic lights on macOS, custom controls on Windows/Linux) The stack Angular 22 (with Signals) on the frontend, Rust on the backend, glued together with Tauri 2 . That combo is exactly why the app stays small - no bundled Chromium, no Node runtime shipped, just the OS's native webview. 82 unit tests (Vitest) keep the core services honest. Everything is open source, AGPL-3.0: github.com/Martzcode/Markify Markdown is basically AI's native language now Here's the other reason this project felt worth building right now: every LLM defaults to Markdown. Ask ChatGPT, Claude, or Copilot for anything structured and you get headers, bullet lists, code fences, bold text - Markdown, every time. It's become the de facto output format for AI because it's plain text, unambiguous to parse, and renders cleanly almost everywhere. That shift changes what a Markdown editor needs to be good at: Copy-pasting AI output should just work - no reformatting, no broken tables, no mangled code blocks Code block rendering with copy b

Every Angular application I have worked on in the last few years had the same three kinds of state: URL state — the page number, the active filter, the selected tab. Client state — what the user typed, what is expanded, what is selected. Server state — the thing you fetched, and everything that can go wrong while fetching it. And every application handled them three completely different ways. ActivatedRoute and a Router.navigate call for the first. Signals or a store for the second. A service returning an Observable , plus a loading boolean, plus an error field, plus a subscribe somewhere, for the third. None of that is wrong. It is just that the glue between them is written by hand, in every app, every time. And the glue is where the bugs live. This article is about the specific piece of that problem I could not let go of, and about the toolkit I ended up building around it. It is called craft-ng , it is in beta, and I would genuinely rather have your objections than your stars. The code I kept running into Here is the shape. I should be honest: I did not write much of it myself — I had a drawer of RxJS helpers that hid most of it. But I have read it in a lot of codebases, reviewed it in a lot of pull requests, and inherited it in a lot of projects. That turned out to matter more, because a helper that only I understand is not a solution to anything. @ Injectable () export class TaskListService { private http = inject ( HttpClient ); tasks = signal < Task [] > ([]); isLoading = signal ( false ); error = signal < string | null > ( null ); load ( done : boolean ) { this . isLoading . set ( true ); this . error . set ( null ); this . http . get < Task [] > ( `/api/tasks?done= ${ done } ` ). subscribe ({ next : ( tasks ) => { this . tasks . set ( tasks ); this . isLoading . set ( false ); }, error : ( err ) => { this . error . set ( ' Something went wrong ' ); this . isLoading . set ( false ); }, }); } } Four fields, one method, and roughly six ways to get it subtly wr

[!NOTE] Summary : Progressive Web Apps (PWAs) combine the reach of the web with the native experience and speed of mobile apps. In this guide, we walk step-by-step through building an installable, native-like mobile app with Angular, Ionic, and PWA capabilities—covering service workers, web manifests, iOS Safari requirements, and instant free deployment. Why Ionic Delivers That Authentic Native-Like Feel Building a web app for mobile is easy, but making it feel native is where most web applications fail. This is where Ionic shines: Native Touch Gestures : Ionic brings built-in mobile gestures—such as swipe-to-go-back, pull-to-refresh ( ion-refresher ), swipeable modals, and instant touch feedback—directly into the browser. Hardware-Accelerated Animations : Transitions between pages (iOS slide-in, Android material push) run on the Web Animations API at 60fps/120fps with zero jank. Adaptive Platform Styling : Ionic automatically adapts its UI controls—rendering iOS Human Interface Guidelines styling on Apple devices and Material Design on Android devices automatically from a single codebase. Combining Ionic's native UI controls with Angular's PWA capabilities gives your users a mobile app that looks, feels, and responds exactly like an app downloaded from the App Store. 1. Setting Up Angular PWA Support Angular CLI provides an official automated schematic to convert your project into a PWA: npx ng add @angular/pwa What this schematic generates: public/manifest.webmanifest : Configures app name, theme color, display mode ( standalone ), and app icons. ngsw-config.json : Defines caching strategies for static assets (index, JS, CSS) and dynamic lazy-loaded chunk bundles. src/main.ts : Registers provideServiceWorker() . public/icons/ : Generates a standard set of PWA icon assets ( 72x72 up to 512x512 ). 2. The manifest.webmanifest Asset Configuration When serving your application with ionic serve or building for production, ensure angular.json maps your static public/ dir

Angular v22, Google's TypeScript-first framework, has introduced API stabilizations, ergonomic templates, and tooling enhancements for AI integration. Key developments include the stabilization of Signal Forms, improved change detection strategies, and a new @Service() decorator for dependency injection. The release supports TypeScript 6 and removes deprecated features. By Daniel Curtis

Angular is well served for icons. Material Symbols alone runs to thousands of glyphs, and the community wrappers pull in dozens of other sets on top. Geography is where the shelf runs out. You get globes and map pins, sometimes a set of flags, rarely the outline of Japan and almost never the six states of the GCC. GeoIcons ships country and area icons as Angular standalone components, 422 of them at the time of writing. Adding one takes three steps: install the package, import the component by its ISO code, and render its selector. npm i @geoicons/angular import { Component } from ' @angular/core ' ; import { Us } from ' @geoicons/angular/countries ' ; @ Component ({ selector : ' app-root ' , imports : [ Us ], template : `<geoicon-us aria-label="United States" />` , }) export class App {} See it live on geoicons.io → That is the whole path. Below: inputs, styling, accessibility, and picking an icon when you only know the country at runtime. Key takeaways Install @geoicons/angular , import each country by its ISO 3166 alpha-2 code in PascalCase, and add it to the component's imports array. The class is Us ; the selector you write in the template is <geoicon-us /> . Styling props are explicit inputs, because Angular has no rest spread. Everything else goes on the host element. Icons render as decorative unless you name them, so reach for aria-label only where no adjacent text says the country. Step 1: Install the Angular package Add the package to your project: npm i @geoicons/angular It needs @angular/core and @angular/common 15.1 or newer, plus rxjs 7 or newer. That 15.1 floor comes from hostDirectives , which the icons use to share their styling inputs and which landed in that release alongside standalone components . The package sets "sideEffects": false , so the CLI can drop what you never import. List three icons in a component and you ship three. Why that matters for icon libraries . Step 2: Import by ISO code Every country ships as a named export under its ISO

I see the some version of "Is Angular still worth picking?" every so often, and for years my answer...

This is a submission for DEV's Summer Bug Smash: Smash Stories powered by Sentry. You know those...

We run a React app and an Angular admin panel at work. Same company, same brand, and on paper the same design. On screen it was a different story. The React button had a 6px radius; the Angular one had 4px. The focus rings were two slightly different blues. Nobody noticed until somebody did. And every time design changed a token, someone got to hand-port it into two codebases. Twice the work, and it still drifted. So I went looking for something that treated both frameworks as equals. The React kits don't speak Angular. The Angular ones don't share a look with anything on the React side. Nothing let me define the design once and have it show up, the same, in both. So I built bpdm/ui . One rule: the look lives in tokens I gave myself one hard rule: nothing about how a component looks is allowed to live inside the React or Angular code. Colour, spacing, radius, the easing on transitions, all of it sits in @bpdm/tokens as plain CSS variables, and both framework packages just read from there. The component owns structure, behaviour, and the accessibility plumbing. The look comes from the tokens. @import "tailwindcss" ; @import "@bpdm/tokens/tokens.css" ; Change one token and both frameworks move together. There's no "now go sync the Angular theme" step, because there's only one theme to sync. Four ship in the box (two light, two dark). Override the variables and you've re-skinned all of it. The same component, twice React: import { Button , Badge } from " @bpdm/ui " ; export function Example () { return ( < Button variant = "primary" > Get started < Badge appearance = "soft" > New </ Badge > </ Button > ); } Angular: import { Component } from " @angular/core " ; import { BpdmButton } from " @bpdm/ng " ; @ Component ({ selector : " app-root " , imports : [ BpdmButton ], template : `<button bpdmButton>Get started</button>` , }) export class App {} Same padding, same radius, same focus ring. The accessibility isn't literally shared code: Radix does that work on the React s

TanStack Table V9 is a beta release of a headless UI library for creating tables in various JavaScript frameworks. It features improved state management, memory usage, and extensibility. The notable change is an opt-in feature model, allowing developers to load only necessary components. Migration is gradual, with tools provided for legacy support. The library remains free and developer-focused. By Daniel Curtis

Hello everyone! After publishing my Machine Learning with ML.NET series, I decided to turn the recommendation model into a complete application. In this new series, we build RockPlayer, a rock music player that combines modern software architecture, ASP.NET Core, Angular 22, Redis, and YouTube integration. Each article focuses on a different part of the project: 🎵 1. Introducing RockPlayer An overview of the project, its goals, and the overall architecture. https://devfullstack.net/blog/introducing-rockplayer 🔌 2. Adapters: Isolating the YouTube Provider Using the Adapter pattern to decouple the application from the YouTube integration. https://devfullstack.net/blog/adapters-isolating-the-youtube-provider ⚡ 3. No Database: Caching Lookups with Redis Using Redis to cache search results instead of storing external data in a database. https://devfullstack.net/blog/no-database-caching-lookups-with-redis 🅰️ 4. Angular 22 in Practice Applying modern Angular 22 features to build the user interface. https://devfullstack.net/blog/angular-22-in-practice 🚀 5. Building the RockPlayer API Building the API that orchestrates the application. https://devfullstack.net/blog/building-the-rockplayer-api ▶️ 6. The YouTube Adapter: Finding and Playing the Song Implementing the YouTube integration to search for and play songs. https://devfullstack.net/blog/the-youtube-adapter-finding-and-playing-the-song 🎧 7. RockPlayer in Angular 22: Onboarding Setting up the Angular application and organizing the project structure. https://devfullstack.net/blog/rockplayer-in-angular-22-onboarding 🎸 8. RockPlayer: Putting It All Together Bringing all the components together into a complete application. https://devfullstack.net/blog/rockplayer-putting-it-all-together I hope this series is useful for developers interested in software architecture, .NET, and Angular. See you there!

Overview This guide shows you how to fix a critical Azure App Service configuration issue where the keyVaultReferenceIdentity property is hidden from the Azure Portal but required for accessing Key Vault secrets. Symptoms Developers encountering this issue typically observe: Key Vault references returning empty values instead of secret content Configuration entries showing "Not Resolved" error messages Application settings failing to fetch secret values from Key Vault Authentication errors when attempting to access protected secrets 401/403 errors from App Service attempting to validate Key Vault access Why This Happens Azure App Service uses Managed Identity authentication to access Key Vault secrets, but the keyVaultReferenceIdentity property is deliberately hidden from standard Azure Portal interfaces. This property only exists at the Azure Resource Manager (ARM) level, making it invisible through the typical Azure management UI. Technical Architecture App Service → Managed Identity → Azure AD → Key Vault Access Policy → Secret Store App Service attempts to authenticate using its assigned Managed Identity Azure needs explicit permission through the keyVaultReferenceIdentity property This permission exists only in the underlying ARM configuration Without this configuration, the authentication chain breaks Key Vault references resolve to empty values or error messages Why Portal Visibility is Limited Microsoft implements this design choice for several reasons: Security : Keeps identity-to-Key Vault mappings out of standard management interfaces Simplicity : Prevents accidental misconfigurations that could cause security issues Audit Trail : Ensures all identity configurations go through proper change management Resource Provider : Some properties require ARM-level configuration for consistency Prerequisites Required Azure Resources Azure Subscription : Active subscription with appropriate permissions Azure App Service : Existing Linux or Windows App Service User-As

Angular 21 Module Federation: Build a Micro Frontend Workspace with One Host and Three Remotes If you're exploring Micro Frontends with Angular 21, one of the first questions you'll encounter is: "How do I set up a complete Module Federation workspace that actually works with Angular 21?" After a few iterations (and a couple of version mismatches), I successfully created a housekeeping/admin platform using Angular 21 Native Federation with: 1 Host Application 3 Remote Applications Shared routing Native Federation (esbuild) Single command startup By the end of this tutorial, you'll have the following architecture running locally: +----------------+ | host-app | | Port: 4200 | +--------+-------+ | --------------------------------------- | | | v v v +-------------+ +-------------+ +-------------+ | auth-app | | user-app | | role-app | | Port: 4201 | | Port: 4202 | | Port: 4203 | +-------------+ +-------------+ +-------------+ Project Overview This sample project represents a basic housekeeping/admin platform. Application Purpose Port host-app Shell, navigation, remote loading 4200 auth-app Login, logout, access denied 4201 user-app User management 4202 role-app Role management 4203 Host Routes /auth -> auth-app /users -> user-app /roles -> role-app Prerequisites My development environment: Angular CLI : 21.2.19 Node.js : 22.23.1 npm : 10.9.8 OS : macOS (arm64) Angular 21 works well with Native Federation. If you're starting fresh, I recommend pinning Angular CLI to version 21 to avoid compatibility issues. Step 1: Install Angular CLI 21 npm i -g @angular/cli@21 Verify: ng version Expected output: Angular CLI: 21.x Step 2: Create an Empty Workspace Instead of generating an application immediately, create an empty Angular workspace. ng new housekeeping-mf \ --create-application false \ --routing \ --style css \ --skip-git Move into the project: cd housekeeping-mf Step 3: Generate Applications Generate one host and three remotes. ng generate application host-app --routing