diff --git a/crates/oxc_angular_compiler/src/hmr/update_module.rs b/crates/oxc_angular_compiler/src/hmr/update_module.rs
index c69cf77fa..1032e821d 100644
--- a/crates/oxc_angular_compiler/src/hmr/update_module.rs
+++ b/crates/oxc_angular_compiler/src/hmr/update_module.rs
@@ -177,9 +177,16 @@ fn generate_hmr_update_module_internal(
         output.push_str(",\n");
     }
 
-    // Add styles if present
+    // Add styles whenever the caller has an answer — an EMPTY list included.
+    // The definition above spreads `...ClassName.ɵcmp`, so every key this
+    // module does not emit keeps its previous value. A component that lost its
+    // last stylesheet therefore needs an explicit `styles: []` to clear it;
+    // omitting the key would leave the old CSS applied until a full reload.
+    // `None` stays omitted: that is "the caller does not know", not "empty".
     if let Some(styles) = styles {
-        if !styles.is_empty() {
+        if styles.is_empty() {
+            output.push_str("    styles: [],\n");
+        } else {
             output.push_str("    styles: [\n");
             for style in styles {
                 output.push_str("      ");
@@ -233,6 +240,23 @@ mod tests {
         assert!(!result.contains("styles:"));
     }
 
+    #[test]
+    fn test_generate_hmr_update_module_empty_styles_clears() {
+        // An EMPTY list is a definitive answer, not silence. The module opens
+        // with `...ClassName.ɵcmp`, so a key it does not emit keeps its old
+        // value — omitting `styles` here would leave the component's last
+        // stylesheet applied until a full reload.
+        let result = generate_hmr_update_module_from_js(
+            "src/app/app.component.ts@AppComponent",
+            "function AppComponent_Template(rf, ctx) { }",
+            Some(&[]),
+            None,
+            None,
+        );
+
+        assert!(result.contains("styles: [],"));
+    }
+
     #[test]
     fn test_class_name_extraction() {
         let result = generate_hmr_update_module_from_js(
diff --git a/napi/angular-compiler/e2e/tests/hmr-style-removal.spec.ts b/napi/angular-compiler/e2e/tests/hmr-style-removal.spec.ts
new file mode 100644
index 000000000..ba654f79b
--- /dev/null
+++ b/napi/angular-compiler/e2e/tests/hmr-style-removal.spec.ts
@@ -0,0 +1,79 @@
+import { test, expect } from '../fixtures/test-fixture.js'
+
+/**
+ * Regression test for https://github.com/voidzero-dev/oxc-angular-compiler/issues/457
+ *
+ * Losing the LAST style is the one style change HMR used to get wrong. The
+ * generated update module opens with `...ClassName.ɵcmp`, so every property it
+ * does not emit keeps its previous value — and the `styles` property was
+ * omitted for every "no styles" answer. The component updated, the old CSS
+ * stayed applied, and only a full reload cleared it.
+ *
+ * The unit tests assert the module now carries an explicit `styles: []`. This
+ * one asserts the thing a user actually sees: the CSS is gone from the page,
+ * and the page did not reload to get there.
+ */
+test.describe('Removing a component last style', () => {
+  test('emptying inline `styles` drops the CSS with no full reload', async ({
+    page,
+    fileModifier,
+    hmrDetector,
+    waitForHmr,
+  }) => {
+    // Must run before `goto` — Vite's client opens its socket during load,
+    // and the wire is the only honest evidence about a reload request.
+    await hmrDetector.captureWirePayloads()
+    await page.goto('/')
+    await page.waitForLoadState('networkidle')
+
+    // The previous spec's teardown restores the file it edited, and that
+    // write can still be in flight when this page connects — its `full-reload`
+    // would otherwise land in this test's recording and in its DOM. Let the
+    // stray settle first, then start measuring.
+    await waitForHmr()
+    const payloadsBeforeEdit = (await hmrDetector.getWirePayloads()).length
+    const sentinelId = await hmrDetector.addSentinel()
+
+    const card = page.locator('app-inline-card .inline-card')
+    await expect(card).toBeVisible()
+
+    // The fixture's inline styles put a dashed border on the card and make
+    // the host a block. Both come from the component's own `styles`.
+    const beforeBorder = await card.evaluate((el) => getComputedStyle(el).borderStyle)
+    expect(beforeBorder).toBe('dashed')
+    const beforeHostDisplay = await page
+      .locator('app-inline-card')
+      .evaluate((el) => getComputedStyle(el).display)
+    expect(beforeHostDisplay).toBe('block')
+
+    // Drop the last (and only) inline style. `styles: []` is the transition
+    // the issue names: a component that HAD a style and now has none.
+    await fileModifier.modifyFile('inline-card.component.ts', (content) => {
+      const emptied = content.replace(/styles: \[[\s\S]*?\n {2}\],/, 'styles: [],')
+      if (emptied === content) {
+        throw new Error('failed to empty the inline `styles` array in the fixture')
+      }
+      return emptied
+    })
+    await waitForHmr()
+
+    // The component is still mounted — this is an update, not a teardown.
+    await expect(page.locator('app-inline-card h2')).toHaveText('INLINE_TITLE')
+
+    // The CSS is gone: the border reverts to the UA default, and the host
+    // stops being a block. Before the fix these kept their old values.
+    const afterBorder = await card.evaluate((el) => getComputedStyle(el).borderStyle)
+    expect(afterBorder).toBe('none')
+    const afterHostDisplay = await page
+      .locator('app-inline-card')
+      .evaluate((el) => getComputedStyle(el).display)
+    expect(afterHostDisplay).toBe('inline')
+
+    // And no full reload got us there. The sentinel proves the browser did
+    // not act on one; the wire proves the server never asked for one.
+    expect(await hmrDetector.sentinelExists(sentinelId)).toBe(true)
+    const payloads = (await hmrDetector.getWirePayloads()).slice(payloadsBeforeEdit)
+    expect(payloads.map((p) => p.event)).toContain('angular:component-update')
+    expect(payloads.map((p) => p.type)).not.toContain('full-reload')
+  })
+})
diff --git a/napi/angular-compiler/index.d.ts b/napi/angular-compiler/index.d.ts
index 97a18ff1f..bf0d4976b 100644
--- a/napi/angular-compiler/index.d.ts
+++ b/napi/angular-compiler/index.d.ts
@@ -77,7 +77,11 @@ export declare function compileForHmr(
  * * `template` - The template HTML string
  * * `component_name` - The name of the component class
  * * `file_path` - The path to the component file
- * * `styles` - Optional array of CSS styles
+ * * `styles` - The component's CSS styles, or `None` when the caller cannot
+ *   tell. `Some` is a definitive answer — an EMPTY array means "this component
+ *   has no styles" and makes the generated module emit `styles: []`, clearing
+ *   whatever it had. `None` omits the key, so the module's `...ɵcmp` spread
+ *   keeps the previous styles.
  *
  * # Returns
  *
@@ -447,7 +451,8 @@ export interface FactoryNapiCompileResult {
  *
  * * `component_id` - The component ID (path@ClassName)
  * * `template_js` - The compiled template function as JavaScript
- * * `styles` - Optional array of CSS styles
+ * * `styles` - The component's CSS styles, or `None` when unknown. An empty
+ *   array is definitive and emits `styles: []`, clearing the old styles.
  *
  * # Returns
  *
diff --git a/napi/angular-compiler/src/lib.rs b/napi/angular-compiler/src/lib.rs
index 8404f96e4..5d1f2d901 100644
--- a/napi/angular-compiler/src/lib.rs
+++ b/napi/angular-compiler/src/lib.rs
@@ -472,7 +472,8 @@ pub fn compile_template(
 ///
 /// * `component_id` - The component ID (path@ClassName)
 /// * `template_js` - The compiled template function as JavaScript
-/// * `styles` - Optional array of CSS styles
+/// * `styles` - The component's CSS styles, or `None` when unknown. An empty
+///   array is definitive and emits `styles: []`, clearing the old styles.
 ///
 /// # Returns
 ///
@@ -522,7 +523,11 @@ pub fn generate_style_module(component_id: String, styles: Vec<String>) -> Strin
 /// * `template` - The template HTML string
 /// * `component_name` - The name of the component class
 /// * `file_path` - The path to the component file
-/// * `styles` - Optional array of CSS styles
+/// * `styles` - The component's CSS styles, or `None` when the caller cannot
+///   tell. `Some` is a definitive answer — an EMPTY array means "this component
+///   has no styles" and makes the generated module emit `styles: []`, clearing
+///   whatever it had. `None` omits the key, so the module's `...ɵcmp` spread
+///   keeps the previous styles.
 ///
 /// # Returns
 ///
@@ -551,31 +556,43 @@ pub fn compile_for_hmr_sync(
                 Some(output.declarations_js.as_str())
             };
 
+            // The caller's `Option` carries whether it KNOWS the answer, and
+            // that has to survive to the generated module: `Some` (even
+            // `Some([])`) is definitive, so the module emits `styles: [...]`
+            // and clears whatever the component had; `None` is "unknown", so
+            // the module omits the key and the spread keeps the old value.
+            // Collapsing an empty-but-definitive answer to `None` here is what
+            // left a component's last stylesheet applied after HMR.
+            let caller_is_definitive = styles.is_some();
+
             // Merge external styles with styles extracted from template <style> tags
             let mut all_styles: Vec<String> = styles.unwrap_or_default();
             all_styles.extend(output.styles);
 
             // Apply style encapsulation for ViewEncapsulation.Emulated
             // Angular uses %COMP% as a placeholder that the runtime replaces with the component ID
-            let encapsulated_styles: Option<Vec<String>> = if all_styles.is_empty() {
-                None
-            } else {
-                let styles: Vec<String> = all_styles
-                    .iter()
-                    .map(|style| {
-                        oxc_angular_compiler::styles::finalize_component_style(
-                            style,
-                            true,
-                            "_ngcontent-%COMP%",
-                            "_nghost-%COMP%",
-                            opts.minify_component_styles,
-                        )
-                    })
-                    .filter(|style| !style.trim().is_empty())
-                    .collect();
-
-                if styles.is_empty() { None } else { Some(styles) }
-            };
+            let encapsulated: Vec<String> = all_styles
+                .iter()
+                .map(|style| {
+                    oxc_angular_compiler::styles::finalize_component_style(
+                        style,
+                        true,
+                        "_ngcontent-%COMP%",
+                        "_nghost-%COMP%",
+                        opts.minify_component_styles,
+                    )
+                })
+                .filter(|style| !style.trim().is_empty())
+                .collect();
+
+            // Emit the array when it is an answer: the caller was definitive,
+            // or the template's own <style> tags produced content.
+            let encapsulated_styles: Option<Vec<String>> =
+                if caller_is_definitive || !encapsulated.is_empty() {
+                    Some(encapsulated)
+                } else {
+                    None
+                };
 
             // Generate HMR module with declarations, encapsulated styles, and consts
             let hmr_module = generate_hmr_update_module_from_js(
diff --git a/napi/angular-compiler/test/hmr-hot-update.test.ts b/napi/angular-compiler/test/hmr-hot-update.test.ts
index b95808c2b..d8e85d444 100644
--- a/napi/angular-compiler/test/hmr-hot-update.test.ts
+++ b/napi/angular-compiler/test/hmr-hot-update.test.ts
@@ -1671,7 +1671,12 @@ describe('@ng/component endpoint resolves the styles per class', () => {
     )
     expect(body).not.toBe('')
     expect(body).not.toContain('PS_BARE_SIBLING_MARKER')
-    expect(body).not.toContain('styles:')
+    // Served an explicitly EMPTY array, not silence. Omitting the key would
+    // also keep the sibling's CSS off this class, but only because the module
+    // spreads `...\u0275cmp` and leaves whatever was there — which is the
+    // #457 bug: a class that declares nothing must be able to CLEAR styles it
+    // used to have, not merely avoid gaining new ones.
+    expect(body).toContain('styles: []')
   })
 
   it('serves both inline styles and styleUrls when a class declares both', async () => {
@@ -1898,6 +1903,8 @@ describe('@ng/component endpoint resolves the styles per class', () => {
     )
     expect(body).not.toBe('')
     expect(body).not.toContain('PS_EMPTYURLS_SIB_MARKER')
+    // Definitive and empty: the module clears the class's styles outright.
+    expect(body).toContain('styles: []')
   })
 
   it('serves no styles for an explicitly empty inline `styles` array', async () => {
@@ -1940,6 +1947,8 @@ describe('@ng/component endpoint resolves the styles per class', () => {
     )
     expect(body).not.toBe('')
     expect(body).not.toContain('PS_EMPTYINLINE_SIB_MARKER')
+    // Definitive and empty: the module clears the class's styles outright.
+    expect(body).toContain('styles: []')
   })
 
   it('falls back when a `styleUrls` array mixes a constant with a literal', async () => {
@@ -2399,4 +2408,430 @@ describe('@ng/component endpoint resolves the styles per class', () => {
     // tracked in #456, asserted the same way as the singular-constant case
     // above. The defect fixed here is the own stylesheet going MISSING.
   })
+
+  // ----------------------------------------------------------------
+  // Issue #457 — a component that LOSES its last style must be cleared
+  // ----------------------------------------------------------------
+  // The HMR module opens with `...ClassName.\u0275cmp`, so any property it
+  // does not emit keeps its previous value. Omitting `styles` therefore
+  // leaves the old CSS applied until a full reload. An empty answer has to
+  // travel all the way to an explicit `styles: []`.
+  //
+  // The counterweight is that a FAILED read is not an empty one: an editor's
+  // atomic write leaves a window where the stylesheet is missing, and
+  // reporting the component styleless there would wipe live CSS. Those cases
+  // must still omit the key.
+
+  it('clears an inline `styles` array that lost its last entry', async () => {
+    const plugin = getAngularPlugin()
+    const mockServer = await setupPluginWithRealConfig(plugin)
+
+    const inlineDropPath = join(appDir, 'ps457-inline-drop.component.ts')
+    const source = `
+      import { Component } from '@angular/core';
+      @Component({
+        selector: 'app-ps457-inline-drop',
+        template: '<p>drop</p>',
+        styles: ['.PS457_INLINE_MARKER { color: red; }'],
+      })
+      export class InlineDropComponent {}
+    `
+    writeFileSync(inlineDropPath, source)
+    await transformSource(plugin, source, inlineDropPath)
+
+    // The last inline style is removed. `styles: []` is a definitive answer.
+    const edited = source.replace(`['.PS457_INLINE_MARKER { color: red; }']`, '[]')
+    writeFileSync(inlineDropPath, edited)
+    const ctx = createMockHmrContext(inlineDropPath, [{ id: inlineDropPath }], mockServer)
+    await callHandleHotUpdate(plugin, ctx)
+
+    expectDispatched(mockServer, `${inlineDropPath}@InlineDropComponent`)
+    const body = await invokeAngularMiddleware(
+      getMiddleware(mockServer),
+      `${inlineDropPath}@InlineDropComponent`,
+    )
+    expect(body).not.toBe('')
+    expect(body).not.toContain('PS457_INLINE_MARKER')
+    expect(body).toContain('styles: []')
+  })
+
+  it('clears the styles of a class whose only stylesheet became empty', async () => {
+    const plugin = getAngularPlugin()
+    const mockServer = await setupPluginWithRealConfig(plugin)
+
+    const emptyCssPath = join(appDir, 'ps457-empty.component.css')
+    const emptyPath = join(appDir, 'ps457-empty.component.ts')
+    writeFileSync(emptyCssPath, '.PS457_EMPTY_MARKER { color: red; }')
+
+    const source = `
+      import { Component } from '@angular/core';
+      @Component({
+        selector: 'app-ps457-empty',
+        template: '<p>empty</p>',
+        styleUrls: ['./ps457-empty.component.css'],
+      })
+      export class EmptyCssComponent {}
+    `
+    writeFileSync(emptyPath, source)
+    await transformSource(plugin, source, emptyPath)
+
+    // Read successfully, holds nothing: definitively styleless.
+    writeFileSync(emptyCssPath, '')
+    const ctx = createMockHmrContext(
+      normalizePath(emptyCssPath),
+      [{ id: normalizePath(emptyCssPath) }],
+      mockServer,
+    )
+    await callHandleHotUpdate(plugin, ctx)
+
+    const body = await invokeAngularMiddleware(
+      getMiddleware(mockServer),
+      `${emptyPath}@EmptyCssComponent`,
+    )
+    expect(body).not.toBe('')
+    expect(body).not.toContain('PS457_EMPTY_MARKER')
+    expect(body).toContain('styles: []')
+  })
+
+  it('clears the styles of a class whose only stylesheet became whitespace', async () => {
+    const plugin = getAngularPlugin()
+    const mockServer = await setupPluginWithRealConfig(plugin)
+
+    const wsCssPath = join(appDir, 'ps457-ws.component.css')
+    const wsPath = join(appDir, 'ps457-ws.component.ts')
+    writeFileSync(wsCssPath, '.PS457_WS_MARKER { color: red; }')
+
+    const source = `
+      import { Component } from '@angular/core';
+      @Component({
+        selector: 'app-ps457-ws',
+        template: '<p>ws</p>',
+        styleUrls: ['./ps457-ws.component.css'],
+      })
+      export class WhitespaceCssComponent {}
+    `
+    writeFileSync(wsPath, source)
+    await transformSource(plugin, source, wsPath)
+
+    // Angular drops whitespace-only styles (`style.trim().length > 0`), so a
+    // file holding only blank lines is styleless too, not "unknown".
+    writeFileSync(wsCssPath, '\n   \n\t\n')
+    const ctx = createMockHmrContext(
+      normalizePath(wsCssPath),
+      [{ id: normalizePath(wsCssPath) }],
+      mockServer,
+    )
+    await callHandleHotUpdate(plugin, ctx)
+
+    const body = await invokeAngularMiddleware(
+      getMiddleware(mockServer),
+      `${wsPath}@WhitespaceCssComponent`,
+    )
+    expect(body).not.toBe('')
+    expect(body).not.toContain('PS457_WS_MARKER')
+    expect(body).toContain('styles: []')
+  })
+
+  it('keeps the styles of a class whose stylesheet cannot be read', async () => {
+    const plugin = getAngularPlugin()
+    const mockServer = await setupPluginWithRealConfig(plugin)
+
+    const goneCssPath = join(appDir, 'ps457-gone.component.css')
+    const gonePath = join(appDir, 'ps457-gone.component.ts')
+    writeFileSync(goneCssPath, '.PS457_GONE_MARKER { color: red; }')
+
+    const source = `
+      import { Component } from '@angular/core';
+      @Component({
+        selector: 'app-ps457-gone',
+        template: '<p>gone</p>',
+        styleUrls: ['./ps457-gone.component.css'],
+      })
+      export class GoneCssComponent {}
+    `
+    writeFileSync(gonePath, source)
+    await transformSource(plugin, source, gonePath)
+
+    // The file is unreadable, which is what the truncate window of an atomic
+    // write looks like. A read failure is not evidence of stylelessness, so
+    // the module must say nothing about `styles` and leave the live CSS on.
+    rmSync(goneCssPath, { force: true })
+    const ctx = createMockHmrContext(
+      normalizePath(goneCssPath),
+      [{ id: normalizePath(goneCssPath) }],
+      mockServer,
+    )
+    await callHandleHotUpdate(plugin, ctx)
+
+    const body = await invokeAngularMiddleware(
+      getMiddleware(mockServer),
+      `${gonePath}@GoneCssComponent`,
+    )
+    expect(body).not.toBe('')
+    expect(body).not.toContain('styles:')
+  })
+
+  it('keeps the styles of a class whose style field cannot be read', async () => {
+    const plugin = getAngularPlugin()
+    const mockServer = await setupPluginWithRealConfig(plugin)
+
+    const constPath = join(appDir, 'ps457-const.component.ts')
+    // `styles: PS457_STYLES` holds no string literal, so the text scan reports
+    // the field unreadable — the class's styles are UNKNOWN, not absent. There
+    // is no file-level `styleUrls` to fall back to either. Clearing here would
+    // wipe the CSS the Rust extractor folded out of the constant.
+    const source = `
+      import { Component } from '@angular/core';
+      const PS457_STYLES = ['.PS457_CONST_MARKER { color: red; }'];
+      @Component({
+        selector: 'app-ps457-const',
+        template: '<p>one</p>',
+        styles: PS457_STYLES,
+      })
+      export class ConstStylesComponent {}
+    `
+    writeFileSync(constPath, source)
+    await transformSource(plugin, source, constPath)
+
+    const edited = source.replace('<p>one</p>', '<p>two</p>')
+    writeFileSync(constPath, edited)
+    const ctx = createMockHmrContext(constPath, [{ id: constPath }], mockServer)
+    await callHandleHotUpdate(plugin, ctx)
+
+    expectDispatched(mockServer, `${constPath}@ConstStylesComponent`)
+    const body = await invokeAngularMiddleware(
+      getMiddleware(mockServer),
+      `${constPath}@ConstStylesComponent`,
+    )
+    expect(body).not.toBe('')
+    expect(body).toContain('two')
+    expect(body).not.toContain('styles:')
+  })
+  it('keeps the styles of a class with an unreadable style field when the file-level stylesheet is empty', async () => {
+    const plugin = getAngularPlugin()
+    const mockServer = await setupPluginWithRealConfig(plugin)
+
+    const fbEmptyCssPath = join(appDir, 'ps457-fb-empty.component.css')
+    const fbEmptyPath = join(appDir, 'ps457-fb-empty.component.ts')
+    // Empty, but read SUCCESSFULLY — it contributes an empty string, which is
+    // the exact shape the class-level branch treats as a definitive clear.
+    writeFileSync(fbEmptyCssPath, '')
+
+    // Two classes. `FbEmptyOwnerComponent` declares `styles: PS457_FB_STYLES`,
+    // which the text scan cannot read, so the endpoint falls back to the
+    // FILE-LEVEL `styleUrls` union — and that union holds only the SIBLING's
+    // stylesheet. The fallback knows nothing about this class's decorator, so
+    // an empty read there is "no answer", never "no styles"; clearing on it
+    // would wipe the CSS the Rust extractor folded out of the constant.
+    const source = `
+      import { Component } from '@angular/core';
+      const PS457_FB_STYLES = ['.PS457_FB_MARKER { color: red; }'];
+      @Component({
+        selector: 'app-ps457-fb-empty',
+        template: '<p>one</p>',
+        styles: PS457_FB_STYLES,
+      })
+      export class FbEmptyOwnerComponent {}
+      @Component({
+        selector: 'app-ps457-fb-empty-sib',
+        template: '<p>sib</p>',
+        styleUrls: ['./ps457-fb-empty.component.css'],
+      })
+      export class FbEmptySiblingComponent {}
+    `
+    writeFileSync(fbEmptyPath, source)
+    await transformSource(plugin, source, fbEmptyPath)
+
+    const edited = source.replace('<p>one</p>', '<p>two</p>')
+    writeFileSync(fbEmptyPath, edited)
+    const ctx = createMockHmrContext(fbEmptyPath, [{ id: fbEmptyPath }], mockServer)
+    await callHandleHotUpdate(plugin, ctx)
+
+    expectDispatched(mockServer, `${fbEmptyPath}@FbEmptyOwnerComponent`)
+    const body = await invokeAngularMiddleware(
+      getMiddleware(mockServer),
+      `${fbEmptyPath}@FbEmptyOwnerComponent`,
+    )
+    expect(body).not.toBe('')
+    expect(body).toContain('two')
+    expect(body).not.toContain('styles:')
+  })
+
+  it('keeps the styles of a class with an unreadable style field when the file-level stylesheet is whitespace', async () => {
+    const plugin = getAngularPlugin()
+    const mockServer = await setupPluginWithRealConfig(plugin)
+
+    const fbWsCssPath = join(appDir, 'ps457-fb-ws.component.css')
+    const fbWsPath = join(appDir, 'ps457-fb-ws.component.ts')
+    // Whitespace-only reads back as a whitespace-only string, which the
+    // binding drops just like an empty one — same trap, one step later.
+    writeFileSync(fbWsCssPath, '\n   \n\t\n')
+
+    const source = `
+      import { Component } from '@angular/core';
+      const PS457_FB_WS_STYLES = ['.PS457_FB_WS_MARKER { color: red; }'];
+      @Component({
+        selector: 'app-ps457-fb-ws',
+        template: '<p>one</p>',
+        styles: PS457_FB_WS_STYLES,
+      })
+      export class FbWsOwnerComponent {}
+      @Component({
+        selector: 'app-ps457-fb-ws-sib',
+        template: '<p>sib</p>',
+        styleUrls: ['./ps457-fb-ws.component.css'],
+      })
+      export class FbWsSiblingComponent {}
+    `
+    writeFileSync(fbWsPath, source)
+    await transformSource(plugin, source, fbWsPath)
+
+    const edited = source.replace('<p>one</p>', '<p>two</p>')
+    writeFileSync(fbWsPath, edited)
+    const ctx = createMockHmrContext(fbWsPath, [{ id: fbWsPath }], mockServer)
+    await callHandleHotUpdate(plugin, ctx)
+
+    expectDispatched(mockServer, `${fbWsPath}@FbWsOwnerComponent`)
+    const body = await invokeAngularMiddleware(
+      getMiddleware(mockServer),
+      `${fbWsPath}@FbWsOwnerComponent`,
+    )
+    expect(body).not.toBe('')
+    expect(body).toContain('two')
+    expect(body).not.toContain('styles:')
+  })
+
+  // A read that FAILED on one stylesheet but succeeded on another is not the
+  // same as a read that found nothing. The `complete` flag exists to stop an
+  // unknown answer from becoming a definitive `styles: []` and wiping live
+  // CSS — it must not also throw away content that WAS read. A permanently
+  // unreadable stylesheet (missing, a permission error, a preprocessor
+  // failure) would otherwise make every edit to its healthy sibling a no-op,
+  // and the pending slot is consumed either way, so nothing retries.
+
+  it('serves the readable stylesheet of a class whose other stylesheet is missing', async () => {
+    const plugin = getAngularPlugin()
+    const mockServer = await setupPluginWithRealConfig(plugin)
+
+    const partialOkCssPath = join(appDir, 'ps457-partial-ok.component.css')
+    const partialGoneCssPath = join(appDir, 'ps457-partial-gone.component.css')
+    const partialPath = join(appDir, 'ps457-partial.component.ts')
+    writeFileSync(partialOkCssPath, '.PS457_PARTIAL_MARKER { color: red; }')
+    // Never written: this one is unreadable on every attempt, so the read is
+    // permanently incomplete and there is nothing a retry could recover.
+    rmSync(partialGoneCssPath, { force: true })
+
+    const source = `
+      import { Component } from '@angular/core';
+      @Component({
+        selector: 'app-ps457-partial',
+        template: '<p>partial</p>',
+        styleUrls: [
+          './ps457-partial-ok.component.css',
+          './ps457-partial-gone.component.css',
+        ],
+      })
+      export class PartialCssComponent {}
+    `
+    writeFileSync(partialPath, source)
+    await transformSource(plugin, source, partialPath)
+
+    // The user edits the HEALTHY stylesheet. A partial answer that still holds
+    // content is an UPDATE, which is what main did; only the empty one has to
+    // stay unknown.
+    writeFileSync(partialOkCssPath, '.PS457_PARTIAL_MARKER { color: green; }')
+    const ctx = createMockHmrContext(
+      normalizePath(partialOkCssPath),
+      [{ id: normalizePath(partialOkCssPath) }],
+      mockServer,
+    )
+    await callHandleHotUpdate(plugin, ctx)
+
+    const body = await invokeAngularMiddleware(
+      getMiddleware(mockServer),
+      `${partialPath}@PartialCssComponent`,
+    )
+    expect(body).not.toBe('')
+    expect(body).toContain('PS457_PARTIAL_MARKER')
+    expect(body).toContain('green')
+    // Delivering a partial read must never be confused with clearing.
+    expect(body).not.toContain('styles: []')
+  })
+
+  it('serves the inline styles of a class whose styleUrl is missing', async () => {
+    const plugin = getAngularPlugin()
+    const mockServer = await setupPluginWithRealConfig(plugin)
+
+    const inlineKeptCssPath = join(appDir, 'ps457-inline-kept.component.css')
+    const inlineKeptPath = join(appDir, 'ps457-inline-kept.component.ts')
+    rmSync(inlineKeptCssPath, { force: true })
+
+    // The external stylesheet is unreadable, but the inline `styles` entry was
+    // read straight out of the decorator and is not in doubt.
+    const source = `
+      import { Component } from '@angular/core';
+      @Component({
+        selector: 'app-ps457-inline-kept',
+        template: '<p>one</p>',
+        styles: ['.PS457_INLINE_KEPT_MARKER { color: red; }'],
+        styleUrls: ['./ps457-inline-kept.component.css'],
+      })
+      export class InlineKeptComponent {}
+    `
+    writeFileSync(inlineKeptPath, source)
+    await transformSource(plugin, source, inlineKeptPath)
+
+    const edited = source.replace('<p>one</p>', '<p>two</p>')
+    writeFileSync(inlineKeptPath, edited)
+    const ctx = createMockHmrContext(inlineKeptPath, [{ id: inlineKeptPath }], mockServer)
+    await callHandleHotUpdate(plugin, ctx)
+
+    expectDispatched(mockServer, `${inlineKeptPath}@InlineKeptComponent`)
+    const body = await invokeAngularMiddleware(
+      getMiddleware(mockServer),
+      `${inlineKeptPath}@InlineKeptComponent`,
+    )
+    expect(body).not.toBe('')
+    expect(body).toContain('two')
+    expect(body).toContain('PS457_INLINE_KEPT_MARKER')
+    expect(body).not.toContain('styles: []')
+  })
+
+  it('still omits `styles` when the incomplete read produced nothing at all', async () => {
+    const plugin = getAngularPlugin()
+    const mockServer = await setupPluginWithRealConfig(plugin)
+
+    const onlyGoneCssPath = join(appDir, 'ps457-only-gone.component.css')
+    const onlyGonePath = join(appDir, 'ps457-only-gone.component.ts')
+    rmSync(onlyGoneCssPath, { force: true })
+
+    // The guard on the other side of the same branch: an incomplete read that
+    // yields NO content stays unknown. `[]` here would clear the CSS the
+    // missing stylesheet used to supply.
+    const source = `
+      import { Component } from '@angular/core';
+      @Component({
+        selector: 'app-ps457-only-gone',
+        template: '<p>one</p>',
+        styleUrls: ['./ps457-only-gone.component.css'],
+      })
+      export class OnlyGoneComponent {}
+    `
+    writeFileSync(onlyGonePath, source)
+    await transformSource(plugin, source, onlyGonePath)
+
+    const edited = source.replace('<p>one</p>', '<p>two</p>')
+    writeFileSync(onlyGonePath, edited)
+    const ctx = createMockHmrContext(onlyGonePath, [{ id: onlyGonePath }], mockServer)
+    await callHandleHotUpdate(plugin, ctx)
+
+    expectDispatched(mockServer, `${onlyGonePath}@OnlyGoneComponent`)
+    const body = await invokeAngularMiddleware(
+      getMiddleware(mockServer),
+      `${onlyGonePath}@OnlyGoneComponent`,
+    )
+    expect(body).not.toBe('')
+    expect(body).toContain('two')
+    expect(body).not.toContain('styles:')
+  })
 })
diff --git a/napi/angular-compiler/vite-plugin/index.ts b/napi/angular-compiler/vite-plugin/index.ts
index 3ae01fc69..5cf474b21 100644
--- a/napi/angular-compiler/vite-plugin/index.ts
+++ b/napi/angular-compiler/vite-plugin/index.ts
@@ -697,8 +697,20 @@ export function angular(options: PluginOptions = {}): Plugin[] {
                 // of a class that has no external ones. Fall back to the
                 // file-level list only when the class's own styles cannot be
                 // read (preserves the old behavior there).
-                const readStyles = async (urls: string[]): Promise<string[] | null> => {
-                  const styleContents: string[] = []
+                //
+                // A read FAILURE is not evidence of stylelessness, so it has
+                // to stay distinguishable from a successful read of an empty
+                // file: `complete` is false as soon as one stylesheet could
+                // not be read, and the caller downgrades the whole answer to
+                // "unknown" rather than reporting the component styleless and
+                // wiping its live CSS (an editor's atomic write leaves exactly
+                // such a window). A file read successfully but holding nothing
+                // contributes an empty string, which IS a definitive answer.
+                const readStyles = async (
+                  urls: string[],
+                ): Promise<{ contents: string[]; complete: boolean }> => {
+                  const contents: string[] = []
+                  let complete = true
                   for (const styleUrl of urls) {
                     const stylePath = resolve(dir, styleUrl)
                     try {
@@ -711,13 +723,23 @@ export function angular(options: PluginOptions = {}): Plugin[] {
                         )
                         styleContent = processed.code
                       }
-                      styleContents.push(styleContent)
+                      contents.push(styleContent)
                     } catch {
-                      // Style file not found, continue without this style
+                      // Missing, unreadable, or failed to preprocess — what
+                      // this stylesheet holds is unknown, not empty.
+                      complete = false
                     }
                   }
-                  return styleContents.length > 0 ? styleContents : null
+                  return { contents, complete }
                 }
+                // Three-valued, and every value reaches `compileForHmrSync`
+                // verbatim: a non-empty array is the component's styles, `[]`
+                // says it definitively has none (the HMR module emits
+                // `styles: []` and the runtime drops the old CSS), and `null`
+                // says the answer is unknown so the module omits the key and
+                // whatever the component already has survives. `null` is the
+                // default because "we did not find out" is the honest starting
+                // point.
                 let styles: string[] | null = null
                 const classStyles = extractClassStylesFor(source, className)
                 if (classStyles !== null) {
@@ -727,17 +749,47 @@ export function angular(options: PluginOptions = {}): Plugin[] {
                   // decorator's own `styles`. Whitespace-only entries are
                   // dropped to match Angular's `style.trim().length > 0`.
                   const external =
-                    classStyles.urls.length > 0 ? ((await readStyles(classStyles.urls)) ?? []) : []
-                  const merged = [...classStyles.inline, ...external].filter(
+                    classStyles.urls.length > 0
+                      ? await readStyles(classStyles.urls)
+                      : { contents: [] as string[], complete: true }
+                  const merged = [...classStyles.inline, ...external.contents].filter(
                     (style) => style.trim().length > 0,
                   )
-                  styles = merged.length > 0 ? merged : null
+                  // `complete` guards exactly ONE thing: turning an unknown
+                  // answer into a definitive `[]` that wipes live CSS. It is
+                  // not a reason to throw away content that WAS read. A
+                  // stylesheet that failed while a sibling succeeded is a
+                  // PARTIAL update — which is what main always delivered,
+                  // because the old `readStyles` swallowed failures in a
+                  // `catch` and returned whatever it got. Dropping it would
+                  // silently lose every edit to the healthy sibling of a
+                  // permanently unreadable stylesheet, and the pending slot is
+                  // consumed either way, so nothing retries.
+                  //
+                  // So: a complete read is definitive and may clear; an
+                  // incomplete one falls back to main's rule exactly — send
+                  // what was read when it is non-empty, and never send `[]`.
+                  styles = external.complete || merged.length > 0 ? merged : null
                 } else if (styleUrls.length > 0) {
                   // The class's own styles could not be read — a decorator
                   // shape this text scan cannot parse, e.g. a styleUrl built
                   // from a constant the Rust extractor folds. Fall back to the
-                  // file-level list, preserving the old behavior there.
-                  styles = await readStyles(styleUrls)
+                  // file-level list, preserving the old behavior there. This
+                  // branch never clears: the decorator is unknown, so an empty
+                  // read here means "no answer", not "no styles".
+                  //
+                  // Which is why the whitespace-only filter has to run BEFORE
+                  // the null check, not after the call like the branch above.
+                  // A stylesheet that reads fine but holds nothing yields
+                  // `['']` — one entry, so a bare `length > 0` would pass it
+                  // on, and the binding, which treats any non-null array as
+                  // definitive and drops whitespace-only entries, would turn
+                  // it into `styles: []` and clear. That is the opposite of
+                  // what this branch promises, and the CSS it would wipe
+                  // belongs to a decorator nobody here could read.
+                  const fallback = await readStyles(styleUrls)
+                  const usable = fallback.contents.filter((style) => style.trim().length > 0)
+                  styles = usable.length > 0 ? usable : null
                 }
 
                 const result = compileForHmrSync(templateContent, className, resolvedId, styles, {