fix(angular-rspack): ensure assets extracted from stylesheets correctly #32487 #32759
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
View your CI Pipeline Execution ↗ for commit 5fb692e
☁️ Nx Cloud last updated this comment at |
leosvelperez
approved these changes
Sep 18, 2025
packages/angular-rspack-compiler/src/compilation/setup-with-angular-compilation.ts
Show resolved
Hide resolved
FrozenPandaz
pushed a commit
that referenced
this pull request
Sep 18, 2025
#32487 (#32759) ## Current Behavior When Angular components reference assets in their stylesheets using `url()` (e.g., `background-image: url('../assets/test-pattern.svg')`), the Nx Angular Rspack plugin processes the CSS but fails to extract and copy the referenced asset files to the output directory. This results in: - CSS is processed and URLs may be rewritten to reference output paths (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 when the application runs - No `media` directory is created in the build output ## Expected Behavior With this fix, assets referenced in component stylesheets are now properly extracted and emitted to the output directory: - Asset files referenced in component stylesheets are extracted and copied to the output directory - CSS URLs are correctly rewritten to point to the copied assets - No 404 errors occur for asset files - A `media` directory is created in the output with the extracted assets - Both inline and external component styles properly handle asset extraction ## Related Issue(s) Fixes #32487 ## Changes Made ### Core Fix - Modified the Angular Rspack plugin to properly collect and emit stylesheet assets during the compilation process - Added asset collection during both bundle file and inline style processing in `setup-compilation.ts` and `setup-with-angular-compilation.ts` - Implemented asset emission in the `processAssets` hook of the Angular Rspack plugin ### Test Coverage - Added comprehensive example application (`examples/angular-rspack/csr-css-assets`) that demonstrates: - External component stylesheets with asset references - Inline component styles with asset references - Various asset types (SVG, images) - Proper asset extraction and URL rewriting ### Technical Details The fix addresses the gap between Angular's `ComponentStylesheetBundler` which correctly processes assets and generates `outputFiles`, and the Nx Angular Rspack plugin which now properly emits these files using `compilation.emitAsset()` during the build process. (cherry picked from commit 36741d0)
|
This pull request has already been merged/closed. If you experience issues related to these changes, please open a new issue referencing this pull request. |
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Current Behavior
When Angular components reference assets in their stylesheets using
url()(e.g.,background-image: url('../assets/test-pattern.svg')), the Nx Angular Rspack plugin processes the CSS but fails to extract and copy the referenced asset files to the output directory. This results in:url('./media/test-pattern.svg'))mediadirectory is created in the build outputExpected Behavior
With this fix, assets referenced in component stylesheets are now properly extracted and emitted to the output directory:
mediadirectory is created in the output with the extracted assetsRelated Issue(s)
Fixes #32487
Changes Made
Core Fix
setup-compilation.tsandsetup-with-angular-compilation.tsprocessAssetshook of the Angular Rspack pluginTest Coverage
examples/angular-rspack/csr-css-assets) that demonstrates:Technical Details
The fix addresses the gap between Angular's
ComponentStylesheetBundlerwhich correctly processes assets and generatesoutputFiles, and the Nx Angular Rspack plugin which now properly emits these files usingcompilation.emitAsset()during the build process.