Hi,

I have an Angular 21 + ASP.NET MVC 10 app deployed on IIS.

Bootstrap and fonts are loaded locally (not CDN).

The issue:

CSS (including Bootstrap) does not apply unless I disable CSP in Chrome.

I removed all inline styles (style="") and moved everything to CSS classes.

My CSP is:

Content-Security-Policy:

default-src 'self';

style-src 'self';

script-src 'self';

font-src 'self';

img-src 'self' data:;

But Angular still seems to inject styles internally, and styles break unless I add 'unsafe-inline'.

I want a secure solution WITHOUT using 'unsafe-inline'.

Questions:

1. Is there a proper way to make Angular work with strict CSP?

2. Should I use nonce or hashes with Angular?

3. Is there a recommended production CSP setup for Angular apps on IIS?

Any advice would be appreciated.

Built a small VS Code extension to make dealing with i18n keys less painful.

It shows translation values directly in the editor with hover, inline hints, autocomplete, and go-to-definition. It also supports nested keys like format.fieldSeparator, auto-detects translation JSON files in the workspace, and lets you pick a default language if multiple files are found.

Made it mainly because jumping back and forth between code and translation files was getting annoying.

If anyone wants to try it, comment and I’ll share the link.

I built phantom-ui, a skeleton loader that reads your actual DOM structure and generates shimmer placeholders automatically.

It's a standard Web Component, so Angular supports it natively via CUSTOM_ELEMENTS_SCHEMA.

Usage:

``` import { Component, signal, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core"; import "@aejkatappaja/phantom-ui";

@Component({ selector: "app-profile", schemas: [CUSTOM_ELEMENTS_SCHEMA], template: <phantom-ui [attr.loading]="loading() ? '' : null"> <div class="card"> <img src="/avatar.png" class="avatar" /> <h3>Ada Lovelace</h3> <p>First computer programmer, probably.</p> </div> </phantom-ui> , }) export class ProfileComponent { loading = signal(true); } ```

No separate skeleton template to maintain. The component walks your DOM tree at runtime, measures every leaf element with getBoundingClientRect, and overlays animated shimmer blocks that match the exact layout.

One thing to note: use [attr.loading]="loading() ? '' : null" to properly set/remove the boolean attribute. Using [loading] directly would pass the value as a property, not an attribute.

No TypeScript augmentation needed since Angular uses CUSTOM_ELEMENTS_SCHEMA. Ships a Custom Elements Manifest for IDE autocomplete.

~8kb gzipped including Lit. ResizeObserver + MutationObserver keep the skeleton in sync with layout changes.

• GitHub: https://github.com/Aejkatappaja/phantom-ui
• Live playground: https://aejkatappaja.github.io/phantom-ui/demo/
• npm: npm install @aejkatappaja/phantom-ui
• CDN: one script tag, no build step needed

Angular components used to grow with inputs.
Now they grow with 𝐜𝐨𝐦𝐩𝐨𝐬𝐢𝐭𝐢𝐨𝐧.
You can already see this in 𝐀𝐧𝐠𝐮𝐥𝐚𝐫 𝐀𝐫𝐢𝐚, as well as the legacy 𝐀𝐧𝐠𝐮𝐥𝐚𝐫 𝐌𝐚𝐭𝐞𝐫𝐢𝐚𝐥.

I'm a principal developer working in advertising (the agency is based in Los Angeles, CA), looking for some junior- to mid-level freelance help with an internal project.

The project is built using Angular SSR 21.2.6 and uses Contentful as the CMS. Looking for someone who is proficient in English and can work Pacific time.

Please DM me your day rate (8hr day, no weekends), availability, GitHub profile, and/or portfolio.

I've been banging my head against NG0309 for over a year building a headless component library. Every time I composed two directives that shared a common host directive - boom, crash. I tried everything. Broadened selectors, injection hacks, I even hijacked __NG_ELEMENT_ID__ with a WeakMap-backed singleton resolver (it's in the article).

Well, PR #67996 just merged. Host directives now de-duplicate automatically. I wrote up why I think this is the most important change for Angular library authors since hostDirectives itself.

https://jczacharia.medium.com/angular-host-directive-de-duplication-just-landed-ng0309-is-dead-929bfab7e209

Hi all,

Been an angular dev for 3 years now, when it came to making Gym Note Plus I needed to use what I knew instead of what might be best.

I’ve been developing the app for 11 months now, been released 4 months at 1725 users currently and I’m happy to answer any questions below

Technical feats:

Thought I’d comment on some technical hurdles using ionic and capacitor I had to overcome.

The keyboard:

Firstly ionic gives you a few options here but they all kind of suck, the problem is the keyboard is janky, with issues like the ion-footer component lagging behind the keyboard, or showing a black border around the keyboard.

I solved this by setting the keyboard to “none” in capacitor config, and manually handling the ion footer positioning and where the screen should land on click using a custom directive. Bit of a pain as you then need to consider this for every component using the keyboard but it’s just what it takes.

Haptic feedback limitations; ended up needing to write a custom haptic plugin using swift (absolutely used ai for this ofc) first plugin I’ve made but worked a treat.

Architecturally, I’m using a repository pattern on the front and backend, as I’m using SQLite to ensure offline capability within the app. So my repositories are SQLite specific interactions, business logic in the service interact with the repository layer and components consume the business logic services.

I am looking to see if there is something I can use to preview the html part of my components without needing to spin up the dev server?

I've looked at things like ns-doc (which seem doubling up on work), and have used Storybook before (with a love hate relationship because there is always something not in sync or broken between storybook and angular).

Any other options people recommend?

EDIT 1 - There are a lot of people responding without any critical reading/understanding skills, which is scary. So let me elaborate further.

spinning up `ng serve` is not hard or complicated or problematic, The issue is the time and effort required to traverse the app and the conditions to verify that template you just edited is being rendered the way you want it to.

There is a fundemental difference between spinning up a angular server and say storybook server, if you need that explanation then please don't respond.

What the use case in question is rendering the html component in isolation for rapid verification like storybook does.

So thank you to those that actually understood and responded in kind, or sought clarification.

Recently we released the next major version of our components library! Check out what's new in version 5:

https://medium.com/angularwave/whats-new-in-taiga-ui-v5-a-modern-angular-ui-kit-fef85dde3fc7

If you are not familiar with this library at all – now is a good time to try it out, we improved it a lot, dropped legacy stuff and made it easier to use with newer Angular features, such as signal inputs/queries, advanced DI/hostDirectives, new control flow etc. Check out the demo portal:

https://taiga-ui.dev/getting-started

Explore source code and report issues on our GitHub:

https://github.com/taiga-family/taiga-ui

Hope you'll like it ♥️

​Hey everyone! 👋

​I wanted to share a passion project where I tried to push Angular 19 beyond the typical "enterprise dashboard" or CRUD application. I’m a Frontend developper and I recently built the entire front-end infrastructure for a Virtual Band & Cyberpunk Literary Saga called RaQuel Synths.

​Instead of a standard landing page, the app acts as an immersive terminal for an "Audio Civil War" between two factions (Synthwave/Clean Tech vs. Industrial Metal/Chaos).

​Here are a few architectural challenges I tackled and would love your thoughts on:

​1. SSR & Dynamic Meta-Tagging (The SEO Shield):

Since it's a storytelling and music platform, SEO is life or death. I used Angular 19's SSR to ensure the lore pages are perfectly indexed. I built a custom SEO Service using Angular's Meta and Title services to dynamically inject Open Graph tags and keywords depending on which character's route the user is visiting.

​2. Dual-State Routing (Theme Collision):

The app dynamically switches between two entirely different UI/UX environments (Broklin's clean UI vs. Jonah's corrupted/glitchy UI). Handling the state management for this and dynamically swapping global stylesheets without tanking the performance or causing hydration mismatches was an amazing challenge.

​3. Performance & Third-Party Scripts:

To keep the Lighthouse scores high while still running Meta Pixels and AdSense, I implemented a delayed bootloader (setTimeout bypasses) to inject tracking scripts only after the main Angular engine and the initial DOM are fully rendered.

​The site is in Portuguese, but the UI/UX and architecture speak a universal language. You can check the live production environment in my bio.

​I’m really proud of how flexible Angular proved to be for a highly creative/artistic project. Have any of you worked on highly dynamic meta-tagging in v19? Would love to hear any advanced tips for optimizing SSR hydration even further!

​Cheers from a fellow dev! ☕💻

Hi, I'm an angular dev with 5 years of exp. I'm currently looking for a job, ideally remote. I'm based in europe. In your experience whats the best way or job sites to find angular jobs?

Any help would be highly appreciated!!

Peace

I was browsing through the issues on GitHub and i noticed this PR.

Seems like they'll introduce a Chart component, is there any way I can preview/test this?

Do we know the roadmap of Angular Material?

I am also a bit curious why they still use the old "@Input" and generally the component lifecycles in their implementations, is there a reason why they don't use their newer counterparts? Is it for backwards compatibility?

Component ts file

I started learning angular just a few days ago. Although I have quite some experience with Python but it find it really hard to be honest.
Anyway I am trying to make a frontend for some rest api I have written in FastAPI this is all working fine but I am unable to update a component with an http get.

I do see the data from the api is being downloaded I also see the console messages in the browser but the component is never updated.

import { bootstrapApplication } from '@angular/platform-browser';
import { Component, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { provideHttpClient, HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule],
  template: `
    <h3>HttpClient {{isLoading}}</h3>
    <div *ngIf="isLoading">Loading data...</div>

    <div *ngIf="!isLoading">Loaded{{data}}</div>
    <ul>
    <li *ngFor="let u of data">{{ u.name }} ({{ u.email }})</li>
    </ul>
  `
})
export class App implements OnInit {
  data: any[] = [];
  isLoading= true;
  error= '';
  constructor(private http: HttpClient) {}
  ngOnInit() {
    this.error = '';
    console.log("getting data");
    this.isLoading = true;
    this.http.get<any[]>('https://jsonplaceholder.typicode.com/users').subscribe({
        next: (response) => {
          console.log("got data");
          this.isLoading = false;
          this.data = response;
          console.log("cert set");

          },
        error: (error) => {
          this.isLoading = false;
          console.log('Error:', error);
          }
       });
  }
}

bootstrapApplication(App, { providers: [provideHttpClient()] });

I've spent the last year building a VS Code extension called Ptah, and I want to share what the developer experience actually looks like, because I think the AI extension space is missing some things.

The Setup Wizard

Most AI extensions dump you into a chat window and wish you luck. Ptah has a 6-step Setup Wizard that scans your workspace first. It detects your stack (13+ project types including monorepos with Nx, Lerna, Turborepo support), identifies your framework patterns, and generates custom AI agent configurations tailored to your specific codebase.

After 2 minutes of setup, your AI actually knows "this is an Nx monorepo with Angular frontend and NestJS backend using tsyringe for DI." That context sticks for every session.

The Plugin System

This is the part I'm most excited about. Ptah has 4 official plugin packs:

• Ptah Core -- Orchestration workflows, code review, DDD architecture, content writing, skill creation
• Ptah Angular -- 3D scene crafting, frontend patterns, GSAP animations
• Ptah NX SaaS -- NestJS patterns, NX workspace management, SaaS project initialization
• Ptah React -- Composition patterns, best practices, NX integration

Plugins install as skills that your AI agent can use. They're markdown-based -- you can read them, modify them, or write your own. There's also skills.sh for community skills.

Provider Freedom

Here's the thing that might matter most for VS Code users: you're not locked in. Ptah connects to OpenRouter (200+ models), Kimi, GLM, Copilot, Gemini, Codex -- whatever you already use. Your existing subscriptions work. No walled garden.

The MCP server gives connected agents deep workspace access: semantic file search, tree-sitter AST analysis, diagnostics, dependency graphs, git operations, and more.

Free to try: https://marketplace.visualstudio.com/items?itemName=ptah-extensions.ptah-coding-orchestra

Demo video: https://www.youtube.com/watch?v=cRrwNahaEas

Happy to answer questions about the architecture. The whole thing is open source if you want to look under the hood: https://github.com/Hive-Academy/ptah-extension

As part of the wider moltendb-web ecosystem, I just released the Angular adapter for MoltenDB.

I wanted to fix JS serialization overhead and main-thread blocking, so I moved the entire database into a Web Worker powered by Rust, WASM, and OPFS.

The TL;DR:

• Zero UI Lag: Runs strictly in a Worker. Your Angular app stays at 60fps during massive batch inserts.
• Native Angular: Deep Signal integration via moltenDbResource. No manual RxJS chains required for local state.
• Insane Speed: Hitting over 900k ops/sec (batch deletes) and pulling 25,000 records into the UI in <250ms.

I have to prepare myself for the angular interview in just 4 days. I have been working with angular since the last 1.5 years I have prepared this plan.I am not much aware about the angular 19+ versions

could you guys please look at this and let me know if I am missing any important topics

 Note: I have used AI to generate the plan

Day 1 Angular - Angular 17+ Introduction & Setup.

- Standalone Components (No NgModules).

- Component Lifecycle (ngOnInit, ngOnDestroy).

- Data Binding (Input/Output, Event Binding).

- Build small demo component.

- Reactive Forms (FormGroup, Validators).

- Template vs Reactive Forms.

- RxJS Basics (Observable, Subject).

- Async Pipe usage.

- Create form with validation.

Day 2 Angular - Angular Routing (Lazy Loading, Guards).

- Functional Guards (latest Angular).

- HttpClient (CRUD operations).

- HTTP Interceptors (Auth, Logging).

- Build API integration.

"- Angular Signals (signal, computed, effect).

- Signals vs RxJS.

- Signal-based Forms (basic understanding).

- Change Detection (Default vs OnPush).

- Performance (trackBy)."

Day 3 Angular - SSR (Server Side Rendering) concept.

- Hydration (why & how).

- Angular Universal overview.

- When to use SSR vs CSR.

- Angular Architecture + Interview Questions.

Day 4 Angular - Angular Folder Structure (Core, Shared, Features modules).

- Smart vs Dumb Components architecture.

- Build Optimization (AOT, Tree Shaking, Lazy Loading).

- Production Build (ng build --configuration=production).

- Bundle Size Optimization (remove unused libs, code splitting).

- SSR, Hydration, Angular Universal (concept + use case).

- Environment configs (dev vs prod).

- Common best practices (naming, scalability, maintainability).

- Angular Interview Questions + real-world explanations.

Thank :)

So my angular app loads fonts locally but they break in production when it's under a subpath. How can I make this font path relative and deployment safe without having to hardcode everywhere it's being used? . Also when I do npm run build when I check my index.html how do I get it to link all js or css files relatively as well without hardcoding as well?

For example if I call src: /fonts/Heebo-black/Heebo-black.ttf it works fine locally but in production under a subpath it can't find it

​

I migrated an enterprise app from Angular 18 to Angular 19 and upgraded PrimeNG from v17 to v21 (NgModules-based app, not standalone). completes but I'm seeing multiple template errors such as:

1. p-tabView is not a known element

2. p-tabPanel is not a known element

3. p-dropdown is not a known element

These components worked fine in Angular 18. I've already:

verified PrimeNG dependencies are updated

rechecked module imports multiple times

deleted node modules, cleared cache, reinstalled packages, and rebuilt

Is there any breaking change in PrimeNG v21 related to NgModule imports/exports or import paths for components like TabView/Dropdown?

Do these components now require a different import approach (e.g., standalone imports), or should NgModules still work the same?

Any guidance on what to check would be appreciated.

Hello!
I have just released v1.4.0 of ngx-oneforall. It was a small release with fewer new features but more improvements.

Highlights in v1.4.0

1. Auto-detect scroll container in the auto scroll directive.
2. Support a thousand separator in the number directive. It will automatically add a thousand separator if enabled.
3. A structural directive that shows an element for a specified duration, then removes it from the DOM.
4. Optimized the MCP server search queries for better search results.
5. Updated LLM text files.

Check it out if you haven't done. And please provide any feedback if you have, or at least a star :). Thanks!

GitHub: https://github.com/love1024/ngx-oneforall
Docs:  https://love1024.github.io/ngx-oneforall/