refactor(core): implement ɵɵforeignComponent instruction#68787
Merged
atscott merged 4 commits intoJun 3, 2026
angular:mainangular/angular:mainfrom
leonsenft:foreign-component-instruction-implleonsenft/angular:foreign-component-instruction-implCopy head branch name to clipboard
Merged
refactor(core): implement ɵɵforeignComponent instruction#68787atscott merged 4 commits intoangular:mainangular/angular:mainfrom leonsenft:foreign-component-instruction-implleonsenft/angular:foreign-component-instruction-implCopy head branch name to clipboard
atscott merged 4 commits into
angular:mainangular/angular:mainfrom
leonsenft:foreign-component-instruction-implleonsenft/angular:foreign-component-instruction-implCopy head branch name to clipboard
Conversation
d90f975 to
8e7fbee
Compare
b8eca2a to
a4915d8
Compare
atscott
reviewed
May 28, 2026
JeanMeche
reviewed
May 28, 2026
atscott
approved these changes
May 28, 2026
JeanMeche
reviewed
May 28, 2026
mattrbeck
approved these changes
May 29, 2026
|
I see that you just added the If you want your PR to be merged, it has to pass all the CI checks. If you can't get the PR to a green state due to flakes or broken |
Contributor
Author
|
note for caretaker: TAP failures are preexisting. |
Add descriptive text to foreign view head and tail comments in dev mode to assist in debugging.
Implement the `ɵɵforeignComponent` instruction to render foreign components (components from other frameworks) inside Angular templates. The instruction creates a host LContainer, instantiates a foreign view, executes the foreign component's RENDER function, inserts the returned native DOM nodes, and registers the disposal hook. Add unit tests to verify element rendering, property passing, dependency injection, and disposal on destruction.
…nt props Avoid triggering the `interpolated_signal_not_invoked` diagnostic when a signal is passed directly as a property binding to a foreign component. Foreign components may accept signals directly, so they should not be flagged as uninvoked in this context. To support testing this, the typecheck testing infrastructure was updated to allow defining mock foreign components in the test setup.
Previously, the `ɵɵforeignComponent` instruction set the `currentTNode` state during the first template creation pass (via `getOrCreateTNode`), but failed to do so on subsequent instantiations when the `TNode` was accessed from cache. This resulted in the global `currentTNode` state remaining unchanged from the previous instruction. When closing a parent element (e.g., via `ɵɵelementEnd`), this mismatched state caused assertion failures because the framework attempted to close the wrong parent node. This change fixes the issue by calling `setCurrentTNode(tNode, false)` when the foreign component's `TNode` is retrieved from the cache.
12c04bc to
d1c515d
Compare
Contributor
Author
|
Removing caretaker note since TAP is now green. |
Contributor
|
This PR was merged into the repository. The changes were merged into the following branches:
|
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 join this conversation on GitHub.
Already have an account?
Sign in to comment
5 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.
Implement the
ɵɵforeignComponentinstruction to render foreign components (components from other frameworks) inside Angular templates. The instruction creates a host LContainer, instantiates a foreign view, executes the foreign component's RENDER function, inserts the returned native DOM nodes, and registers the disposal hook.Add unit tests to verify element rendering, property passing, and disposal on destruction.