refactor(@angular/build): support external runtime component stylesheets in application builder #28330
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.
To support automatic component style HMR,
application
builder in development mode now provides support for generating external runtime component stylesheets. This capability leverages the upcoming support within the AOT -compiler to emit components that generatelink
elements instead of embedding the stylesheet contents for file-based styles (e.g.,styleUrl
). In combination with support within the development server to handle requests for component stylesheets, file-based component stylesheets will be able to be replaced without a full page reload.The implementation leverages the AOT compiler option
externalRuntimeStyles
which uses the result of the resource handler's resolution and emits new external stylesheet metadata within the component output code. This new metadata works in concert with the Angular runtime to generatelink
elements which can then leverage existing global stylesheet HMR capabilities.This capability is current disabled by default while all elements are integrated across the CLI and framework and can be controlled via the
NG_HMR_CSTYLES=1
environment variable. Once fully integrated the environment variable will unneeded.This feature is only intended for use with the development server. Component styles within built code including production are not affected by this feature.
NOTE: Rebuild times have not yet been optimized. Future improvements will reduce the component stylesheet only rebuild time case.