Merge branch 'main' into isAssignmentOperation

fisker · web-flow · commit 8172c20e5b71 · 2026-01-10T01:01:55.000+08:00
diff --git a/adev/package.json b/adev/package.json
@@ -5,17 +5,17 @@
     "@algolia/requester-browser-xhr": "5.46.2",
     "@algolia/requester-node-http": "5.46.2",
     "@angular/animations": "workspace:*",
-    "@angular/aria": "21.1.0-next.3",
+    "@angular/aria": "21.1.0-next.4",
     "@angular/build": "21.1.0-rc.0",
-    "@angular/cdk": "21.1.0-next.3",
+    "@angular/cdk": "21.1.0-next.4",
     "@angular/cli": "21.1.0-rc.0",
     "@angular/common": "workspace:*",
     "@angular/compiler": "workspace:*",
     "@angular/compiler-cli": "workspace:*",
     "@angular/core": "workspace:*",
     "@angular/docs": "workspace:*",
     "@angular/forms": "workspace:*",
-    "@angular/material": "21.1.0-next.3",
+    "@angular/material": "21.1.0-next.4",
     "@angular/platform-browser": "workspace:*",
     "@angular/platform-server": "workspace:*",
     "@angular/router": "workspace:*",
diff --git a/adev/shared-docs/services/search.service.ts b/adev/shared-docs/services/search.service.ts
@@ -105,17 +105,23 @@ export class Search {
       const content = hitItem._snippetResult.content;
       const hierarchy = hitItem._snippetResult.hierarchy;
       const category = hitItem.hierarchy?.lvl0 ?? null;
-      const hasSubLabel = hierarchy?.lvl2 || hierarchy?.lvl3 || hierarchy?.lvl4;
+
+      const lvl1Value = hierarchy?.lvl1?.value || hitItem.hierarchy?.lvl1;
+
+      const sublabelSnippet = this.getBestSnippetForMatch(hitItem);
+
+      // If no lvl1, promote sublabel to label to avoid empty titles
+      const label = lvl1Value || sublabelSnippet || '';
+
+      const hasSubLabel = lvl1Value && (hierarchy?.lvl2 || hierarchy?.lvl3 || hierarchy?.lvl4);
 
       return {
         id: hitItem.objectID,
         type: hitItem.hierarchy.lvl0 === 'Tutorials' ? 'code' : 'doc',
         url: hitItem.url,
 
-        labelHtml: this.parseLabelToHtml(hitItem._snippetResult.hierarchy?.lvl1?.value ?? ''),
-        subLabelHtml: this.parseLabelToHtml(
-          hasSubLabel ? this.getBestSnippetForMatch(hitItem) : null,
-        ),
+        labelHtml: this.parseLabelToHtml(label),
+        subLabelHtml: this.parseLabelToHtml(hasSubLabel ? sublabelSnippet : null),
         contentHtml: content ? this.parseLabelToHtml(content.value) : null,
         package: category === 'Reference' ? extractPackageNameFromUrl(hitItem.url) : null,
 
diff --git a/adev/src/content/ai/mcp-server-setup.md b/adev/src/content/ai/mcp-server-setup.md
@@ -22,10 +22,12 @@ Some tools are provided in experimental / preview status since they are new or n
 | Name                       | Description                                                                                                                                                                                                                                                         | `local-only` | `read-only` |
 | :------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :----------: | :---------: |
 | `build`                    | Perform a one-off, non-watched build using `ng build`.                                                                                                                                                                                                              |      ✅      |     ❌      |
-| `modernize`                | Performs code migrations and provides further instructions on how to modernize Angular code to align with the latest best practices and syntax. [Learn more](/reference/migrations)                                                                                 |      ✅      |     ❌      |
 | `devserver.start`          | Asynchronously starts a development server that watches the workspace for changes, similar to running `ng serve`. Since this is asynchronous it returns immediately. To manage the resulting server, use the `devserver.stop` and `devserver.wait_for_build` tools. |      ✅      |     ✅      |
 | `devserver.stop`           | Stops a development server started by `devserver.start`.                                                                                                                                                                                                            |      ✅      |     ✅      |
 | `devserver.wait_for_build` | Returns the output logs of the most recent build in a running development server started by `devserver.start`. If a build is currently ongoing, it will first wait for that build to complete and then return the logs.                                             |      ✅      |     ✅      |
+| `e2e`                      | Executes the end-to-end tests configured in the project.                                                                                                                                                                                                            |      ✅      |     ✅      |
+| `modernize`                | Performs code migrations and provides further instructions on how to modernize Angular code to align with the latest best practices and syntax. [Learn more](https://angular.dev/reference/migrations)                                                              |      ✅      |     ❌      |
+| `test`                     | Runs the project's unit tests.                                                                                                                                                                                                                                      |      ✅      |     ✅      |
 
 ## Get Started
 
@@ -133,11 +135,11 @@ For other IDEs, check your IDE's documentation for the proper location of the MC
 
 The `mcp` command can be configured with the following options passed as arguments in your IDE's MCP configuration:
 
-| Option                        | Type      | Description                                                                                                                                                                                                                  | Default |
-| :---------------------------- | :-------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------ |
-| `--read-only`                 | `boolean` | Only register tools that do not make changes to the project. Your editor or coding agent may still perform edits.                                                                                                            | `false` |
-| `--local-only`                | `boolean` | Only register tools that do not require an internet connection. Your editor or coding agent may still send data over the network.                                                                                            | `false` |
-| `--experimental-tool`<br>`-E` | `string`  | Enable an [experimental tool](#experimental-tools). Separate multiple options by spaces, e.g. `-E tool_a tool_b`. You can also enable tool groups like `devserver` to enable all related tools at once, e.g. `-E devserver`. |         |
+| Option                        | Type      | Description                                                                                                                                                               | Default |
+| :---------------------------- | :-------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :------ |
+| `--read-only`                 | `boolean` | Only register tools that do not make changes to the project. Your editor or coding agent may still perform edits.                                                         | `false` |
+| `--local-only`                | `boolean` | Only register tools that do not require an internet connection. Your editor or coding agent may still send data over the network.                                         | `false` |
+| `--experimental-tool`<br>`-E` | `string`  | Enable an [experimental tool](#experimental-tools). Separate multiple options by spaces, e.g. `-E tool_a tool_b`. Enable all `devserver.x` tools by using `-E devserver`. |         |
 
 For example, to run the server in read-only mode in VS Code, you would update your `mcp.json` like this:
 
diff --git a/adev/src/content/guide/forms/signals/field-state-management.md b/adev/src/content/guide/forms/signals/field-state-management.md
@@ -109,11 +109,11 @@ When checking validity in code, use `invalid()` instead of `!valid()` if you wan
 
 Access the array of validation errors with `errors()`. Each error object contains:
 
-| Property  | Description                                                     |
-| --------- | --------------------------------------------------------------- |
-| `kind`    | The validation rule that failed (such as "required" or "email") |
-| `message` | Optional human-readable error message                           |
-| `field`   | Reference to the `FieldTree` where the error occurred           |
+| Property    | Description                                                     |
+| ----------- | --------------------------------------------------------------- |
+| `kind`      | The validation rule that failed (such as "required" or "email") |
+| `message`   | Optional human-readable error message                           |
+| `fieldTree` | Reference to the `FieldTree` where the error occurred           |
 
 NOTE: The `message` property is optional. Validators can provide custom error messages, but if not specified, you may need to map error `kind` values to your own messages.
 
diff --git a/adev/src/content/guide/forms/signals/validation.md b/adev/src/content/guide/forms/signals/validation.md
@@ -461,6 +461,19 @@ export class UrlFormComponent {
 }
 ```
 
+For submission errors that target specific fields, use the `fieldTree` property:
+
+```ts
+// In a submit function
+return [
+  {
+    fieldTree: registrationForm.username, // Target specific field
+    kind: 'server',
+    message: 'Username already taken',
+  },
+];
+```
+
 The validator function receives a `FieldContext` object with:
 
 | Property        | Type       | Description                                 |
diff --git a/adev/src/content/guide/templates/expression-syntax.md b/adev/src/content/guide/templates/expression-syntax.md
@@ -8,16 +8,17 @@ Angular supports a subset of [literal values](https://developer.mozilla.org/en-U
 
 ### Supported value literals
 
-| Literal type    | Example values                  |
-| --------------- | ------------------------------- |
-| String          | `'Hello'`, `"World"`            |
-| Boolean         | `true`, `false`                 |
-| Number          | `123`, `3.14`                   |
-| Object          | `{name: 'Alice'}`               |
-| Array           | `['Onion', 'Cheese', 'Garlic']` |
-| null            | `null`                          |
-| Template string | `` `Hello ${name}` ``           |
-| RegExp          | `/\d+/`                         |
+| Literal type           | Example values                  |
+| ---------------------- | ------------------------------- |
+| String                 | `'Hello'`, `"World"`            |
+| Boolean                | `true`, `false`                 |
+| Number                 | `123`, `3.14`                   |
+| Object                 | `{name: 'Alice'}`               |
+| Array                  | `['Onion', 'Cheese', 'Garlic']` |
+| null                   | `null`                          |
+| RegExp                 | `/\d+/`                         |
+| Template string        | `` `Hello ${name}` ``           |
+| Tagged template string | `` tag`Hello ${name}` ``        |
 
 ### Unsupported value literals
 
@@ -64,6 +65,9 @@ Angular supports the following operators from standard JavaScript.
 | Unary Negation                | `-x`                                           |
 | Unary Plus                    | `+y`                                           |
 | Property Accessor             | `person['name']`                               |
+| typeof                        | `typeof 42`                                    |
+| void                          | `void 1`                                       |
+| in                            | `'model' in car`                               |
 | Assignment                    | `a = b`                                        |
 | Addition Assignment           | `a += b`                                       |
 | Subtraction Assignment        | `a -= b`                                       |
@@ -74,6 +78,9 @@ Angular supports the following operators from standard JavaScript.
 | Logical AND Assignment        | `a &&= b`                                      |
 | Logical OR Assignment         | `a \|\|= b`                                    |
 | Nullish Coalescing Assignment | `a ??= b`                                      |
+| Spread in object literals     | `{...obj, foo: 'bar'}`                         |
+| Spread in array literals      | `[...arr, 1, 2, 3]`                            |
+| Rest in function calls        | `fn(...args)`                                  |
 
 Angular expressions additionally also support the following non-standard operators:
 
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-explorer.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-explorer.component.ts
@@ -349,7 +349,7 @@ export class DirectiveExplorerComponent {
     const selectedFrame = this._frameManager.selectedFrame();
 
     if (!this._frameManager.activeFrameHasUniqueUrl()) {
-      const error = `The currently inspected frame does not have a unique url on this page. Cannot inspect object.`;
+      const error = `The currently inspected frame does not have a unique URL on this page. Cannot inspect object.`;
       this.snackBar.open(error, 'Dismiss', {duration: 5000, horizontalPosition: 'left'});
       this._messageBus.emit('log', [{level: 'warn', message: error}]);
       return;
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-explorer.spec.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-explorer.spec.ts
@@ -356,7 +356,7 @@ describe('DirectiveExplorerComponent', () => {
         expect(messageBusMock.emit).toHaveBeenCalledWith('log', [
           {
             level: 'warn',
-            message: `The currently inspected frame does not have a unique url on this page. Cannot inspect object.`,
+            message: `The currently inspected frame does not have a unique URL on this page. Cannot inspect object.`,
           },
         ]);
       });
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body/property-view-body.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/property-view-body/property-view-body.component.ts
@@ -109,6 +109,7 @@ export class PropertyViewBodyComponent {
     this.controller().logValue(node);
     this._snackBar.open(`Logged value of '${node.prop.name}' to the console`, 'Dismiss', {
       duration: 2000,
+      horizontalPosition: 'left',
     });
   }
 
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/profiler-import-dialog/BUILD.bazel b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/profiler-import-dialog/BUILD.bazel
@@ -5,6 +5,9 @@ package(default_visibility = ["//devtools:__subpackages__"])
 sass_binary(
     name = "profiler-import-dialog_styles",
     src = "profiler-import-dialog.component.scss",
+    deps = [
+        "//devtools/projects/ng-devtools/src/styles:typography",
+    ],
 )
 
 ng_project(
@@ -19,5 +22,6 @@ ng_project(
     deps = [
         "//:node_modules/@angular/core",
         "//:node_modules/@angular/material",
+        "//devtools/projects/ng-devtools/src/lib/shared/button",
     ],
 )
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/profiler-import-dialog/profiler-import-dialog.component.html b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/profiler-import-dialog/profiler-import-dialog.component.html
@@ -1,22 +1,22 @@
 @switch (data.status) {
   @case ('ERROR') {
-    <h1 mat-dialog-title>Error</h1>
-    <div mat-dialog-content>
+    <h1>Error</h1>
+    <div>
       <p>Could not process uploaded file.</p>
       <p class="error">
         {{ data.errorMessage }}
       </p>
     </div>
-    <div mat-dialog-actions>
-      <button mat-flat-button [mat-dialog-close]="false">Close</button>
+    <div class="actions">
+      <button ng-button [mat-dialog-close]="false">Close</button>
     </div>
   }
   @case ('INVALID_VERSION') {
-    <h1 mat-dialog-title>Warning</h1>
-    <div mat-dialog-content>
+    <h1>Warning</h1>
+    <div>
       <p>
         The file you are attempting to upload was recorded in a different format than the one
-        supported by your current Angular DevTools version
+        supported by your current Angular DevTools version.
       </p>
       <p>
         Current format version:
@@ -28,9 +28,9 @@ <h1 mat-dialog-title>Warning</h1>
       </p>
       <p>Files recorded in older versions may no longer be compatible. Do you wish to continue?</p>
     </div>
-    <div mat-dialog-actions>
-      <button mat-flat-button [mat-dialog-close]="false">No Thanks</button>
-      <button mat-flat-button [mat-dialog-close]="true">Yes</button>
+    <div class="actions">
+      <button ng-button [mat-dialog-close]="false">No, Thanks</button>
+      <button ng-button btnType="secondary" [mat-dialog-close]="true">Yes</button>
     </div>
   }
 }
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/profiler-import-dialog/profiler-import-dialog.component.scss b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/profiler-import-dialog/profiler-import-dialog.component.scss
@@ -1,8 +1,30 @@
-.profiler-version {
-  color: var(--green-01);
-}
+@use '../../../../styles/typography';
+
+:host {
+  display: block;
+  padding: 1rem;
+
+  h1 {
+    @extend %heading-600;
+    margin: 0;
+    padding: 0;
+  }
+
+  p {
+    @extend %body-01;
+  }
+
+  .actions {
+    display: flex;
+    gap: 0.5rem;
+  }
+
+  .profiler-version {
+    color: var(--dynamic-green-01);
+  }
 
-.imported-version,
-.error {
-  color: var(--dynamic-red-01);
+  .imported-version,
+  .error {
+    color: var(--dynamic-red-01);
+  }
 }
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/profiler-import-dialog/profiler-import-dialog.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/profiler-import-dialog/profiler-import-dialog.component.ts
@@ -7,15 +7,8 @@
  */
 
 import {ChangeDetectionStrategy, Component, inject} from '@angular/core';
-import {
-  MAT_DIALOG_DATA,
-  MatDialogRef,
-  MatDialogTitle,
-  MatDialogContent,
-  MatDialogActions,
-  MatDialogClose,
-} from '@angular/material/dialog';
-import {MatButton} from '@angular/material/button';
+import {MAT_DIALOG_DATA, MatDialogRef, MatDialogClose} from '@angular/material/dialog';
+import {ButtonComponent} from '../../../shared/button/button.component';
 
 interface DialogData {
   profilerVersion?: number;
@@ -28,7 +21,7 @@ interface DialogData {
   selector: 'ng-profiler-import-dialog',
   templateUrl: './profiler-import-dialog.component.html',
   styleUrls: ['./profiler-import-dialog.component.scss'],
-  imports: [MatDialogActions, MatDialogClose, MatDialogContent, MatDialogTitle, MatButton],
+  imports: [MatDialogClose, ButtonComponent],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ProfilerImportDialogComponent {
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/transfer-state/transfer-state.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/transfer-state/transfer-state.component.ts
@@ -177,7 +177,7 @@ export class TransferStateComponent {
       const errorDetail =
         err instanceof Error ? `${err.name}: ${err.message}` : JSON.stringify(err);
 
-      this.snackBar.open(message, 'Dismiss', {duration: 3000});
+      this.snackBar.open(message, 'Dismiss', {duration: 3000, horizontalPosition: 'left'});
       this.messageBus.emit('log', [{level: 'error', message: `${message}: ${errorDetail}`}]);
     }
   }
diff --git a/devtools/projects/ng-devtools/src/lib/shared/button/button.component.scss b/devtools/projects/ng-devtools/src/lib/shared/button/button.component.scss
@@ -20,6 +20,14 @@
     color: var(--septenary-contrast);
   }
 
+  &.type-secondary {
+    border-radius: 2rem;
+    background: transparent;
+    box-sizing: border-box;
+    border: 1px solid var(--quaternary-contrast);
+    color: var(--color-text);
+  }
+
   &.type-icon {
     background: transparent;
     border: none;
diff --git a/devtools/projects/ng-devtools/src/lib/shared/button/button.component.spec.ts b/devtools/projects/ng-devtools/src/lib/shared/button/button.component.spec.ts
@@ -31,6 +31,13 @@ describe('ButtonComponent', () => {
     expect(element.classList.contains('size-compact')).toBeFalse();
   });
 
+  it('should change the type to secondary', async () => {
+    fixture.componentRef.setInput('btnType', 'secondary');
+    await fixture.whenStable();
+
+    expect(element.classList.contains('type-secondary')).toBeTrue();
+  });
+
   it('should be compact size', async () => {
     fixture.componentRef.setInput('size', 'compact');
     await fixture.whenStable();
diff --git a/devtools/projects/ng-devtools/src/lib/shared/button/button.component.ts b/devtools/projects/ng-devtools/src/lib/shared/button/button.component.ts
@@ -8,7 +8,7 @@
 
 import {ChangeDetectionStrategy, Component, input} from '@angular/core';
 
-type ButtonType = 'primary' | 'icon';
+type ButtonType = 'primary' | 'secondary' | 'icon';
 type ButtonSize = 'standard' | 'mid' | 'compact';
 
 @Component({
@@ -19,6 +19,7 @@ type ButtonSize = 'standard' | 'mid' | 'compact';
   host: {
     class: 'ng-button',
     '[class.type-primary]': `btnType() === 'primary'`,
+    '[class.type-secondary]': `btnType() === 'secondary'`,
     '[class.type-icon]': `btnType() === 'icon'`,
     '[class.size-compact]': `size() === 'compact'`,
     '[class.size-mid]': `size() === 'mid'`,
diff --git a/devtools/projects/ng-devtools/src/styles/_overrides.scss b/devtools/projects/ng-devtools/src/styles/_overrides.scss
@@ -38,6 +38,12 @@
     )
   );
 
+  @include mat.dialog-overrides(
+    (
+      container-elevation-shadow: 1,
+    )
+  );
+
   /* FRAGILE */
   .mat-mdc-menu-item {
     min-height: 32px;
diff --git a/package.json b/package.json
diff --git a/packages/compiler-cli/src/ngtsc/typecheck/src/expression.ts b/packages/compiler-cli/src/ngtsc/typecheck/src/expression.ts
diff --git a/packages/compiler/src/expression_parser/ast.ts b/packages/compiler/src/expression_parser/ast.ts
diff --git a/packages/compiler/src/expression_parser/parser.ts b/packages/compiler/src/expression_parser/parser.ts
diff --git a/packages/forms/signals/src/api/structure.ts b/packages/forms/signals/src/api/structure.ts
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

Original file line number	Diff line number	Diff line change
`@@ -356,7 +356,7 @@ describe('DirectiveExplorerComponent', () => {`
`356`	`356`	`expect(messageBusMock.emit).toHaveBeenCalledWith('log', [`
`357`	`357`	`{`
`358`	`358`	`level: 'warn',`
`359`		- message: `The currently inspected frame does not have a unique url on this page. Cannot inspect object.`,
	`359`	+ message: `The currently inspected frame does not have a unique URL on this page. Cannot inspect object.`,
`360`	`360`	`},`
`361`	`361`	`]);`
`362`	`362`	`});`
Original file line number	Diff line number	Diff line change
`@@ -109,6 +109,7 @@ export class PropertyViewBodyComponent {`
`109`	`109`	`this.controller().logValue(node);`
`110`	`110`	this._snackBar.open(`Logged value of '${node.prop.name}' to the console`, 'Dismiss', {
`111`	`111`	`duration: 2000,`
	`112`	`+ horizontalPosition: 'left',`
`112`	`113`	`});`
`113`	`114`	`}`
`114`	`115`