Angular Rspack Component Stylesheet Asset Extraction Bug Reproduction

This repository reproduces a bug in the @nx/angular-rspack plugin where component stylesheet assets (images, SVGs, etc.) are not properly extracted and copied to the output directory during build.

The Problem

When Angular components reference assets in their stylesheets using url(), the Angular build system correctly processes these assets and generates outputFiles, but the Nx Angular Rspack plugin doesn't extract and emit these files. This results in:

• CSS gets rewritten to reference assets in the output directory (e.g., url('./media/test-pattern.svg'))
• The actual asset files are never copied to the output directory
• Browser shows 404 errors for missing asset files

Repository Setup Commands

This repository was created using the following sequence of commands:

# Create Nx workspace with Angular Rspack
npx create-nx-workspace@latest repro --preset=angular-standalone --bundler=rspack --style=css --unitTestRunner=jest --e2eTestRunner=playwright --ssr=false --interactive=false && cd repro

# Create assets directory
mkdir -p src/assets

# Add test SVG image (created manually)
# Created: src/assets/test-pattern.svg

# Modified app component files to demonstrate the bug:
# - src/app/app.html - Updated template with test case
# - src/app/app.css - Added background-image URL pointing to the asset

How to Reproduce the Bug

1. Install Dependencies

npm install

2. Build the Application

npx nx build

3. Examine the Output

After building, check the output directory structure:

# List the built assets
ls -la dist/repro/browser/

# Check if media directory exists and contains our asset
ls -la dist/repro/browser/media/

Expected: The test-pattern.svg file should be copied to dist/repro/browser/media/ directory. Actual: The media directory doesn't exist or is empty, missing the referenced asset.

4. Serve and Test in Browser

npx nx serve

Open browser to http://localhost:4200 and:

1. You should see a test section with a div that should have a checkered background pattern
2. Open browser developer tools and check the Console tab
3. You'll see 404 errors for the missing test-pattern.svg file
4. The background image doesn't load because the asset wasn't copied

Technical Details

The bug occurs in the interaction between these components:

1. Angular's ComponentStylesheetBundler: Correctly processes stylesheet URLs and generates outputFiles containing the assets
2. Nx Angular Rspack Plugin: Doesn't handle the outputFiles from the stylesheet bundler
3. Missing Asset Emission: Assets are never emitted using compilation.emitAsset()

Files Involved

• src/app/app.css - Contains background-image: url('./assets/test-pattern.svg')
• src/assets/test-pattern.svg - Test asset that should be copied but isn't
• src/app/app.html - Test case demonstrating the issue

Expected vs Actual Behavior

Expected Behavior

• Asset files referenced in component stylesheets should be copied to the output directory
• CSS URLs should be rewritten to point to the copied assets
• No 404 errors for asset files

Actual Behavior

• CSS URLs are rewritten correctly
• Asset files are NOT copied to the output directory
• Browser shows 404 errors for missing assets

Fix Implementation

The solution involves modifying the Nx Angular Rspack compilation process to:

1. Collect outputFiles from ComponentStylesheetBundler results
2. Pass these collected assets to the Rspack plugin
3. Emit the assets using compilation.emitAsset() during the build process

The fix requires changes to:

• @nx/angular-rspack-compiler/dist/compilation/setup-compilation.js
• @nx/angular-rspack-compiler/dist/compilation/setup-with-angular-compilation.js
• @nx/angular-rspack/dist/lib/plugins/angular-rspack-plugin.js

Quick Test Commands

# Install dependencies
npm install

# Build and check for missing assets
npx nx build && ls -la dist/static/media/

# Serve and test in browser
npx nx serve

After running these commands, you should see the bug in action with missing asset files and 404 errors in the browser console.