forked from angular/angular
-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix(compiler): ensure that partially compiled queries can handle forw…
…ard references When a partially compiled component or directive is "linked" in JIT mode, the body of its declaration is evaluated by the JavaScript runtime. If a class is referenced in a query (e.g. `ViewQuery` or `ContentQuery`) but its definition is later in the file, then the reference must be wrapped in a `forwardRef()` call. Previously, query predicates were not wrapped correctly in partial declarations causing the code to crash at runtime. In AOT mode, this code is never evaluated but instead transformed as part of the build, so this bug did not become apparent until Angular Material started running JIT mode tests on its distributable output. This change fixes this problem by noting when queries are wrapped in `forwardRef()` calls and ensuring that this gets passed through to partial compilation declarations and then suitably stripped during linking. See angular/components#23882 and angular/components#23907
- Loading branch information
1 parent
0c0698a
commit d8751b1
Showing
14 changed files
with
366 additions
and
18 deletions.
There are no files selected for viewing
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
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
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
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
27 changes: 27 additions & 0 deletions
27
...ses/r3_compiler_compliance/components_and_directives/queries/content_query_forward_ref.js
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| ContentQueryComponent.ɵcmp = /*@__PURE__*/ $r3$.ɵɵdefineComponent({ | ||
| type: ContentQueryComponent, | ||
| selectors: [["content-query-component"]], | ||
| contentQueries: function ContentQueryComponent_ContentQueries(rf, ctx, dirIndex) { | ||
| if (rf & 1) { | ||
| $r3$.ɵɵcontentQuery(dirIndex, SomeDirective, __QueryFlags.descendants__|__QueryFlags.emitDistinctChangesOnly__); | ||
| $r3$.ɵɵcontentQuery(dirIndex, SomeDirective, __QueryFlags.emitDistinctChangesOnly__); | ||
| } | ||
| if (rf & 2) { | ||
| let $tmp$; | ||
| $r3$.ɵɵqueryRefresh($tmp$ = $r3$.ɵɵloadQuery()) && (ctx.someDir = $tmp$.first); | ||
| $r3$.ɵɵqueryRefresh($tmp$ = $r3$.ɵɵloadQuery()) && (ctx.someDirList = $tmp$); | ||
| } | ||
| }, | ||
| ngContentSelectors: _c0, | ||
| decls: 2, | ||
| vars: 0, | ||
| template: function ContentQueryComponent_Template(rf, ctx) { | ||
| if (rf & 1) { | ||
| $r3$.ɵɵprojectionDef(); | ||
| $r3$.ɵɵelementStart(0, "div"); | ||
| $r3$.ɵɵprojection(1); | ||
| $r3$.ɵɵelementEnd(); | ||
| } | ||
| }, | ||
| encapsulation: 2 | ||
| }); |
34 changes: 34 additions & 0 deletions
34
...ses/r3_compiler_compliance/components_and_directives/queries/content_query_forward_ref.ts
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,34 @@ | ||
| import {Component, ContentChild, ContentChildren, Directive, forwardRef, NgModule, QueryList} from '@angular/core'; | ||
|
|
||
| @Component({ | ||
| selector: 'content-query-component', | ||
| template: ` | ||
| <div><ng-content></ng-content></div> | ||
| ` | ||
| }) | ||
| export class ContentQueryComponent { | ||
| @ContentChild(forwardRef(() => SomeDirective)) someDir!: SomeDirective; | ||
| @ContentChildren(forwardRef(() => SomeDirective)) someDirList!: QueryList<SomeDirective>; | ||
| } | ||
|
|
||
| @Component({ | ||
| selector: 'my-app', | ||
| template: ` | ||
| <content-query-component> | ||
| <div someDir></div> | ||
| </content-query-component> | ||
| ` | ||
| }) | ||
| export class MyApp { | ||
| } | ||
|
|
||
|
|
||
| @Directive({ | ||
| selector: '[someDir]', | ||
| }) | ||
| export class SomeDirective { | ||
| } | ||
|
|
||
| @NgModule({declarations: [SomeDirective, ContentQueryComponent, MyApp]}) | ||
| export class MyModule { | ||
| } |
16 changes: 16 additions & 0 deletions
16
..._cases/r3_compiler_compliance/components_and_directives/queries/view_query_forward_ref.js
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| ViewQueryComponent.ɵcmp = /*@__PURE__*/ $r3$.ɵɵdefineComponent({ | ||
| type: ViewQueryComponent, | ||
| selectors: [["view-query-component"]], | ||
| viewQuery: function ViewQueryComponent_Query(rf, ctx) { | ||
| if (rf & 1) { | ||
| $r3$.ɵɵviewQuery(SomeDirective, __QueryFlags.descendants__|__QueryFlags.emitDistinctChangesOnly__); | ||
| $r3$.ɵɵviewQuery(SomeDirective, __QueryFlags.descendants__|__QueryFlags.emitDistinctChangesOnly__); | ||
| } | ||
| if (rf & 2) { | ||
| let $tmp$; | ||
| $r3$.ɵɵqueryRefresh($tmp$ = $r3$.ɵɵloadQuery()) && (ctx.someDir = $tmp$.first); | ||
| $r3$.ɵɵqueryRefresh($tmp$ = $r3$.ɵɵloadQuery()) && (ctx.someDirList = $tmp$); | ||
| } | ||
| }, | ||
| // ... | ||
| }); |
32 changes: 32 additions & 0 deletions
32
..._cases/r3_compiler_compliance/components_and_directives/queries/view_query_forward_ref.ts
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| import {Component, Directive, forwardRef, NgModule, QueryList, ViewChild, ViewChildren} from '@angular/core'; | ||
|
|
||
| @Component({ | ||
| selector: 'view-query-component', | ||
| template: ` | ||
| <div someDir></div> | ||
| ` | ||
| }) | ||
| export class ViewQueryComponent { | ||
| @ViewChild(forwardRef(() => SomeDirective)) someDir!: SomeDirective; | ||
| @ViewChildren(forwardRef(() => SomeDirective)) someDirList!: QueryList<SomeDirective>; | ||
| } | ||
|
|
||
| @Component({ | ||
| selector: 'my-app', | ||
| template: ` | ||
| <view-query-component></view-query-component> | ||
| ` | ||
| }) | ||
| export class MyApp { | ||
| } | ||
|
|
||
|
|
||
| @Directive({ | ||
| selector: '[someDir]', | ||
| }) | ||
| export class SomeDirective { | ||
| } | ||
|
|
||
| @NgModule({declarations: [SomeDirective, ViewQueryComponent, MyApp]}) | ||
| export class MyModule { | ||
| } |
Oops, something went wrong.