Skip to content

Conversation

clydin
Copy link
Member

@clydin clydin commented Dec 11, 2024

When using the application builder (default for new projects) with the development server, component template only changes will now automatically replace the template within the running application without a full reload of the page. No application code changes are necessary and both file-based (templateUrl) and inline (template) component templates are supported. Additionally, changing a components styles in combination with a template change is also supported for hot replacement. This includes both inline and file-based changes.

If any issues are encountered or it is preferred to not hot replace component templates, the NG_HMR_TEMPLATES=0 environment variable can be used to disable the feature. Setting the liveReload option or hmr option to false will also disable all updates.

@clydin clydin added the target: minor This PR is targeted for the next minor release label Dec 11, 2024
@angular-robot angular-robot bot added detected: feature PR contains a feature commit area: @angular/build labels Dec 11, 2024
@clydin clydin force-pushed the hmr/component-hmr-default branch 6 times, most recently from bd1d05a to 66a8add Compare December 12, 2024 23:40
@clydin clydin marked this pull request as ready for review December 12, 2024 23:41
…erver SSR

To ensure that the Vite-based dev-server SSR uses updated component template update
modules, the server module graph is invalidated when component updates are sent.
This currently does a full invalidation but in the future this could potentially be
optimized to only update the relevant modules. A fix is also present to correct the
component update identifier usage to prevent lookup misses.
@clydin clydin force-pushed the hmr/component-hmr-default branch from 66a8add to b22d783 Compare December 16, 2024 18:09
…fault

When using the `application` builder (default for new projects) with the
development server, component template only changes will now automatically
replace the template within the running application without a full reload
of the page. No application code changes are necessary and both file-based
(`templateUrl`) and inline (`template`) component templates are supported.
Additionally, changing a components styles in combination with a template
change is also supported for hot replacement. This includes both inline and
file-based changes.

If any issues are encountered or it is preferred to not hot replace component
templates, the `NG_HMR_TEMPLATES=0` environment variable can be used to disable
the feature. Setting the `liveReload` option or `hmr` option to false will
also disable all updates.
@clydin clydin force-pushed the hmr/component-hmr-default branch from b22d783 to aa27741 Compare December 16, 2024 18:11
@clydin clydin requested a review from alan-agius4 December 16, 2024 18:26
@clydin clydin added the action: review The PR is still awaiting reviews from at least one requested reviewer label Dec 16, 2024
Copy link
Collaborator

@alan-agius4 alan-agius4 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@alan-agius4 alan-agius4 added action: merge The PR is ready for merge by the caretaker and removed action: review The PR is still awaiting reviews from at least one requested reviewer labels Dec 17, 2024
@dgp1130 dgp1130 merged commit 298b554 into angular:main Dec 17, 2024
32 checks passed
@dgp1130
Copy link
Collaborator

dgp1130 commented Dec 17, 2024

🎉

@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Jan 17, 2025
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

action: merge The PR is ready for merge by the caretaker area: @angular/build detected: feature PR contains a feature commit target: minor This PR is targeted for the next minor release

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants