refactor(@angular/build): support external runtime component stylesheets in application builder #28330
+154
−12
Conversation
This file contains 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
…ets in application builder 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 generate `link` 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 generate `link` 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 in 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.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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,
applicationbuilder 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 generatelinkelements 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
externalRuntimeStyleswhich 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 generatelinkelements 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=1environment variable. Once fully integrated the environment variable will unneeded.This feature is only intended for use with the development server. Component styles within in 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.