refactor(@angular/build): support external runtime component stylesheets in application builder#28330
Merged
clydin merged 2 commits intoangular:mainfrom Sep 24, 2024
Conversation
clydin
force-pushed
the
application/compile-external-component-styles
branch
from
8135c60 to
fe044a0
Compare
clydin
force-pushed
the
application/compile-external-component-styles
branch
from
fe044a0 to
00acbf9
Compare
alan-agius4
reviewed
Sep 23, 2024
…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.
…component styles The build system will now transform inline styles into a corresponding external runtime style with a URL for the Angular AOT compiler when the development server has enabled component HMR for styles. This allows both file-based and inline component styles to be eligible for component style HMR. The inline styles are provided to the development server in an equivalent form to the file-based styles which the Angular runtime will request via `link` elements during development. A unique identifier is produced for each inline style that combines the containing file and order of the style within the containing file to represent the location of the style. This provides an equivalent unique identifier to the full path used by file-based styles.
clydin
force-pushed
the
application/compile-external-component-styles
branch
from
00acbf9 to
ca176d4
Compare
clydin
added
the
action: review
alan-agius4
approved these changes
Sep 24, 2024
alan-agius4
added
action: merge
|
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
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
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.
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 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.