Create a new pull request by comparing changes across two branches

adev/src/app/editor/embedded-editor.component.scss

@@ -145,7 +145,9 @@ $width-breakpoint: 950px;
   display: flex;
   align-items: center;
   background-color: var(--octonary-contrast);
-  transition: background-color 0.3s ease, border-color 0.3s ease;
+  transition:
+    background-color 0.3s ease,
+    border-color 0.3s ease;
 
   i {
     color: var(--bright-blue);
@@ -192,3 +194,11 @@ $width-breakpoint: 950px;
     padding: 1.5rem;
   }
 }
+
+::ng-deep mat-tab-group {
+  .mat-mdc-tab-body-wrapper,
+  .mat-mdc-tab-body,
+  .mat-mdc-tab-body-content {
+    display: contents;
+  }
+}

adev/src/app/features/references/api-reference-details-page/api-reference-details-page.component.scss

@@ -99,11 +99,14 @@
     display: flex;
     gap: 1.81rem;
     align-items: flex-start;
+    margin-bottom: 1px;
+
     @include mq.for-desktop-down {
       flex-direction: column;
     }
 
     & > .docs-code {
+      box-sizing: border-box;
       width: 100%;
       max-height: 93vh;
       overflow: hidden;

docs/CARETAKER.md

@@ -21,6 +21,29 @@ To merge a PR run:
 $ yarn ng-dev pr merge <pr number>
 ```
 
+## Primitives and Blocked merges
+
+The caretaker may encounter PRs that will fail to merge due to primitives files. Code inside some
+paths must be merged and synced separately. For example, anything under `//packages/core/primitives`
+has to be merged and synced separately from other changes. Once the latest sync has fully landed,
+merging can continue. This is to reduce the risk of challenging rollbacks in the event of a breakage.
+
+## PRs that require TGPs
+
+If a PR is risky or otherwise requires more thorough testing, add the `requires: TGP` label to the PR.
+The merge tooling will enforce that a TGP has been run, or alternatively you can add a review comment
+that starts with `TESTED=` and then put a reason why the PR is sufficiently tested. This will allow
+the PR to be merged. The `requires: TGP` label will be automatically added to PRs that affect files
+matching `separateFilePatterns` in [`.ng-dev/google-sync-config.json`](https://github.com/angular/angular/blob/main/.ng-dev/google-sync-config.json).
+
+For example:
+
+```
+TESTED=docs only update and does not need a TGP
+```
+
+**Note:** the review comment _must_ be made by a googler.
+
 ### Recovering from failed `merge-pr` due to conflicts
 
 The `ng-dev pr merge` tool will automatically restore to the previous git state when a merge fails.

package.json

@@ -154,7 +154,7 @@
     "@angular/animations": "^17.2.0-next",
     "@angular/build-tooling": "https://github.com/angular/dev-infra-private-build-tooling-builds.git#65f8e0021b37719f1d6352d0680c6b45a47a6b3a",
     "@angular/docs": "https://github.com/angular/dev-infra-private-docs-builds.git#5274bdd3611a27067888e9a93c0838ab776e43af",
-    "@angular/ng-dev": "https://github.com/angular/dev-infra-private-ng-dev-builds.git#0126481d9074759b2d1c5be77f8a3c87e5c3c1e4",
+    "@angular/ng-dev": "https://github.com/angular/dev-infra-private-ng-dev-builds.git#262c6ede0815bb2ba6fbe6f1790eaaa77ce84c9c",
     "@babel/helper-remap-async-to-generator": "^7.18.9",
     "@babel/plugin-proposal-async-generator-functions": "^7.20.7",
     "@bazel/bazelisk": "^1.7.5",

packages/compiler/src/compiler.ts

@@ -63,7 +63,7 @@ export {SourceMap} from './output/source_map';
 export * from './injectable_compiler_2';
 export * from './render3/partial/api';
 export * from './render3/view/api';
-export {BoundAttribute as TmplAstBoundAttribute, BoundEvent as TmplAstBoundEvent, BoundText as TmplAstBoundText, Content as TmplAstContent, Element as TmplAstElement, Icu as TmplAstIcu, Node as TmplAstNode, RecursiveVisitor as TmplAstRecursiveVisitor, Reference as TmplAstReference, Template as TmplAstTemplate, Text as TmplAstText, TextAttribute as TmplAstTextAttribute, Variable as TmplAstVariable, DeferredBlock as TmplAstDeferredBlock, DeferredBlockPlaceholder as TmplAstDeferredBlockPlaceholder, DeferredBlockLoading as TmplAstDeferredBlockLoading, DeferredBlockError as TmplAstDeferredBlockError, DeferredTrigger as TmplAstDeferredTrigger, BoundDeferredTrigger as TmplAstBoundDeferredTrigger, IdleDeferredTrigger as TmplAstIdleDeferredTrigger, ImmediateDeferredTrigger as TmplAstImmediateDeferredTrigger, HoverDeferredTrigger as TmplAstHoverDeferredTrigger, TimerDeferredTrigger as TmplAstTimerDeferredTrigger, InteractionDeferredTrigger as TmplAstInteractionDeferredTrigger, ViewportDeferredTrigger as TmplAstViewportDeferredTrigger, SwitchBlock as TmplAstSwitchBlock, SwitchBlockCase as TmplAstSwitchBlockCase, ForLoopBlock as TmplAstForLoopBlock, ForLoopBlockEmpty as TmplAstForLoopBlockEmpty, IfBlock as TmplAstIfBlock, IfBlockBranch as TmplAstIfBlockBranch, DeferredBlockTriggers as TmplAstDeferredBlockTriggers, UnknownBlock as TmplAstUnknownBlock} from './render3/r3_ast';
+export {visitAll as tmplAstVisitAll, BlockNode as TmplAstBlockNode, BoundAttribute as TmplAstBoundAttribute, BoundEvent as TmplAstBoundEvent, BoundText as TmplAstBoundText, Content as TmplAstContent, Element as TmplAstElement, Icu as TmplAstIcu, Node as TmplAstNode, Visitor as TmplAstVisitor, RecursiveVisitor as TmplAstRecursiveVisitor, Reference as TmplAstReference, Template as TmplAstTemplate, Text as TmplAstText, TextAttribute as TmplAstTextAttribute, Variable as TmplAstVariable, DeferredBlock as TmplAstDeferredBlock, DeferredBlockPlaceholder as TmplAstDeferredBlockPlaceholder, DeferredBlockLoading as TmplAstDeferredBlockLoading, DeferredBlockError as TmplAstDeferredBlockError, DeferredTrigger as TmplAstDeferredTrigger, BoundDeferredTrigger as TmplAstBoundDeferredTrigger, IdleDeferredTrigger as TmplAstIdleDeferredTrigger, ImmediateDeferredTrigger as TmplAstImmediateDeferredTrigger, HoverDeferredTrigger as TmplAstHoverDeferredTrigger, TimerDeferredTrigger as TmplAstTimerDeferredTrigger, InteractionDeferredTrigger as TmplAstInteractionDeferredTrigger, ViewportDeferredTrigger as TmplAstViewportDeferredTrigger, SwitchBlock as TmplAstSwitchBlock, SwitchBlockCase as TmplAstSwitchBlockCase, ForLoopBlock as TmplAstForLoopBlock, ForLoopBlockEmpty as TmplAstForLoopBlockEmpty, IfBlock as TmplAstIfBlock, IfBlockBranch as TmplAstIfBlockBranch, DeferredBlockTriggers as TmplAstDeferredBlockTriggers, UnknownBlock as TmplAstUnknownBlock} from './render3/r3_ast';
 export * from './render3/view/t2_api';
 export * from './render3/view/t2_binder';
 export {createCssSelectorFromNode} from './render3/view/util';

packages/core/src/di/interface/provider.ts

@@ -23,7 +23,7 @@ export interface ValueSansProvider {
 
 /**
  * Configures the `Injector` to return a value for a token.
- * @see ["Dependency Injection Guide"](guide/dependency-injection).
+ * @see [Dependency Injection Guide](guide/dependency-injection).
  *
  * @usageNotes
  *
@@ -72,7 +72,7 @@ export interface StaticClassSansProvider {
 
 /**
  * Configures the `Injector` to return an instance of `useClass` for a token.
- * @see ["Dependency Injection Guide"](guide/dependency-injection).
+ * @see [Dependency Injection Guide](guide/dependency-injection).
  *
  * @usageNotes
  *
@@ -104,7 +104,7 @@ export interface StaticClassProvider extends StaticClassSansProvider {
 /**
  * Configures the `Injector` to return an instance of a token.
  *
- * @see ["Dependency Injection Guide"](guide/dependency-injection).
+ * @see [Dependency Injection Guide](guide/dependency-injection).
  *
  * @usageNotes
  *
@@ -125,7 +125,7 @@ export interface ConstructorSansProvider {
 /**
  * Configures the `Injector` to return an instance of a token.
  *
- * @see ["Dependency Injection Guide"](guide/dependency-injection).
+ * @see [Dependency Injection Guide](guide/dependency-injection).
  *
  * @usageNotes
  *
@@ -154,7 +154,7 @@ export interface ConstructorProvider extends ConstructorSansProvider {
  * Configures the `Injector` to return a value of another `useExisting` token.
  *
  * @see {@link ExistingProvider}
- * @see ["Dependency Injection Guide"](guide/dependency-injection).
+ * @see [Dependency Injection Guide](guide/dependency-injection).
  *
  * @publicApi
  */
@@ -168,7 +168,7 @@ export interface ExistingSansProvider {
 /**
  * Configures the `Injector` to return a value of another `useExisting` token.
  *
- * @see ["Dependency Injection Guide"](guide/dependency-injection).
+ * @see [Dependency Injection Guide](guide/dependency-injection).
  *
  * @usageNotes
  *
@@ -197,7 +197,7 @@ export interface ExistingProvider extends ExistingSansProvider {
  * Configures the `Injector` to return a value by invoking a `useFactory` function.
  *
  * @see {@link FactoryProvider}
- * @see ["Dependency Injection Guide"](guide/dependency-injection).
+ * @see [Dependency Injection Guide](guide/dependency-injection).
  *
  * @publicApi
  */
@@ -217,7 +217,7 @@ export interface FactorySansProvider {
 
 /**
  * Configures the `Injector` to return a value by invoking a `useFactory` function.
- * @see ["Dependency Injection Guide"](guide/dependency-injection).
+ * @see [Dependency Injection Guide](guide/dependency-injection).
  *
  * @usageNotes
  *
@@ -251,7 +251,7 @@ export interface FactoryProvider extends FactorySansProvider {
  * A static provider provides tokens to an injector for various types of dependencies.
  *
  * @see {@link Injector.create()}
- * @see ["Dependency Injection Guide"](guide/dependency-injection-providers).
+ * @see [Dependency Injection Guide](guide/dependency-injection-providers).
  *
  * @publicApi
  */
@@ -279,7 +279,7 @@ export interface TypeProvider extends Type<any> {}
  * Configures the `Injector` to return a value by invoking a `useClass` function.
  * Base for `ClassProvider` decorator.
  *
- * @see ["Dependency Injection Guide"](guide/dependency-injection).
+ * @see [Dependency Injection Guide](guide/dependency-injection).
  *
  * @publicApi
  */
@@ -292,7 +292,7 @@ export interface ClassSansProvider {
 
 /**
  * Configures the `Injector` to return an instance of `useClass` for a token.
- * @see ["Dependency Injection Guide"](guide/dependency-injection).
+ * @see [Dependency Injection Guide](guide/dependency-injection).
  *
  * @usageNotes
  *
@@ -323,7 +323,7 @@ export interface ClassProvider extends ClassSansProvider {
 
 /**
  * Describes how the `Injector` should be configured.
- * @see ["Dependency Injection Guide"](guide/dependency-injection).
+ * @see [Dependency Injection Guide](guide/dependency-injection).
  *
  * @see {@link StaticProvider}
  *

packages/core/src/di/metadata.ts

@@ -32,7 +32,7 @@ export interface InjectDecorator {
    * <code-example path="core/di/ts/metadata_spec.ts" region="InjectWithoutDecorator">
    * </code-example>
    *
-   * @see ["Dependency Injection Guide"](guide/dependency-injection)
+   * @see [Dependency Injection Guide](guide/dependency-injection)
    *
    */
   (token: any): any;
@@ -83,7 +83,7 @@ export interface OptionalDecorator {
    * <code-example path="core/di/ts/metadata_spec.ts" region="Optional">
    * </code-example>
    *
-   * @see ["Dependency Injection Guide"](guide/dependency-injection).
+   * @see [Dependency Injection Guide](guide/dependency-injection).
    */
   (): any;
   new(): Optional;

packages/language-service/src/codefixes/fix_invalid_banana_in_box.ts

@@ -6,8 +6,8 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import {TmplAstBoundEvent} from '@angular/compiler';
 import {ErrorCode, ngErrorCode} from '@angular/compiler-cli/src/ngtsc/diagnostics';
-import {BoundEvent} from '@angular/compiler/src/render3/r3_ast';
 import tss from 'typescript/lib/tsserverlibrary';
 
 import {getTargetAtPosition, TargetNodeKind} from '../template_target';
@@ -85,7 +85,8 @@ export const fixInvalidBananaInBoxMeta: CodeActionMeta = {
   },
 };
 
-function getTheBoundEventAtPosition(templateInfo: TemplateInfo, start: number): BoundEvent|null {
+function getTheBoundEventAtPosition(templateInfo: TemplateInfo, start: number): TmplAstBoundEvent|
+    null {
   // It's safe to get the bound event at the position `start + 1` because the `start` is at the
   // start of the diagnostic, and the node outside the attribute key and value spans are skipped by
   // the function `getTargetAtPosition`.
@@ -97,7 +98,7 @@ function getTheBoundEventAtPosition(templateInfo: TemplateInfo, start: number):
   }
 
   if (positionDetail.context.kind !== TargetNodeKind.AttributeInKeyContext ||
-      !(positionDetail.context.node instanceof BoundEvent)) {
+      !(positionDetail.context.node instanceof TmplAstBoundEvent)) {
     return null;
   }
 
@@ -107,7 +108,7 @@ function getTheBoundEventAtPosition(templateInfo: TemplateInfo, start: number):
 /**
  * Flip the invalid "box in a banana" `([thing])` to the correct "banana in a box" `[(thing)]`.
  */
-function convertBoundEventToTsTextChange(node: BoundEvent): readonly tss.TextChange[] {
+function convertBoundEventToTsTextChange(node: TmplAstBoundEvent): readonly tss.TextChange[] {
   const name = node.name;
   const boundSyntax = node.sourceSpan.toString();
   const expectedBoundSyntax = boundSyntax.replace(`(${name})`, `[(${name.slice(1, -1)})]`);

packages/language-service/src/codefixes/fix_missing_import.ts

@@ -6,10 +6,9 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {ASTWithName} from '@angular/compiler';
+import {ASTWithName, TmplAstElement} from '@angular/compiler';
 import {ErrorCode as NgCompilerErrorCode, ngErrorCode} from '@angular/compiler-cli/src/ngtsc/diagnostics/index';
 import {PotentialDirective, PotentialImportMode, PotentialPipe} from '@angular/compiler-cli/src/ngtsc/typecheck/api';
-import * as t from '@angular/compiler/src/render3/r3_ast';  // t for template AST
 import ts from 'typescript';
 
 import {getTargetAtPosition, TargetNodeKind} from '../template_target';
@@ -52,7 +51,7 @@ function getCodeActions(
 
   let matches: Set<PotentialDirective>|Set<PotentialPipe>;
   if (target.context.kind === TargetNodeKind.ElementInTagContext &&
-      target.context.node instanceof t.Element) {
+      target.context.node instanceof TmplAstElement) {
     const allPossibleDirectives = checker.getPotentialTemplateDirectives(templateInfo.component);
     matches = getDirectiveMatchesForElementTag(target.context.node, allPossibleDirectives);
   } else if (

packages/language-service/src/codefixes/fix_missing_member.ts

@@ -6,8 +6,6 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {findFirstMatchingNode} from '@angular/compiler-cli/src/ngtsc/typecheck/src/comments';
-import * as e from '@angular/compiler/src/expression_parser/ast';  // e for expression AST
 import ts from 'typescript';
 import tss from 'typescript/lib/tsserverlibrary';
 

packages/language-service/src/completions.ts

@@ -6,10 +6,9 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {AST, ASTWithSource, BindingPipe, BindingType, Call, EmptyExpr, ImplicitReceiver, LiteralPrimitive, ParsedEventType, ParseSourceSpan, PropertyRead, PropertyWrite, SafePropertyRead, TmplAstBoundAttribute, TmplAstBoundEvent, TmplAstElement, TmplAstNode, TmplAstReference, TmplAstTemplate, TmplAstText, TmplAstTextAttribute, TmplAstVariable} from '@angular/compiler';
+import {AST, ASTWithSource, BindingPipe, BindingType, Call, EmptyExpr, ImplicitReceiver, LiteralPrimitive, ParsedEventType, ParseSourceSpan, PropertyRead, PropertyWrite, SafePropertyRead, TmplAstBoundAttribute, TmplAstBoundEvent, TmplAstBoundEvent as BoundEvent, TmplAstElement, TmplAstNode, TmplAstReference, TmplAstSwitchBlock as SwitchBlock, TmplAstTemplate, TmplAstText, TmplAstTextAttribute, TmplAstTextAttribute as TextAttribute, TmplAstUnknownBlock as UnknownBlock, TmplAstVariable} from '@angular/compiler';
 import {NgCompiler} from '@angular/compiler-cli/src/ngtsc/core';
 import {CompletionKind, PotentialDirective, SymbolKind, TemplateDeclarationSymbol} from '@angular/compiler-cli/src/ngtsc/typecheck/api';
-import {BoundEvent, DeferredBlock, SwitchBlock, TextAttribute, UnknownBlock} from '@angular/compiler/src/render3/r3_ast';
 import ts from 'typescript';
 
 import {addAttributeCompletionEntries, AsciiSortPriority, AttributeCompletionKind, buildAnimationCompletionEntries, buildAttributeCompletionTable, getAttributeCompletionSymbol} from './attribute_completions';

packages/language-service/src/outlining_spans.ts

@@ -6,11 +6,10 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {ParseLocation, ParseSourceSpan} from '@angular/compiler';
+import {ParseLocation, ParseSourceSpan, TmplAstBlockNode, TmplAstDeferredBlock, TmplAstForLoopBlock, TmplAstIfBlock, TmplAstNode, TmplAstRecursiveVisitor, tmplAstVisitAll} from '@angular/compiler';
 import {NgCompiler} from '@angular/compiler-cli/src/ngtsc/core';
 import {isExternalResource} from '@angular/compiler-cli/src/ngtsc/metadata';
 import {isNamedClassDeclaration} from '@angular/compiler-cli/src/ngtsc/reflection';
-import * as t from '@angular/compiler/src/render3/r3_ast';  // t for template AST
 import ts from 'typescript';
 
 import {getFirstComponentForTemplateFile, isTypeScriptFile, toTextSpan} from './utils';
@@ -22,7 +21,7 @@ export function getOutliningSpans(compiler: NgCompiler, fileName: string): ts.Ou
       return [];
     }
 
-    const templatesInFile: Array<t.Node[]> = [];
+    const templatesInFile: Array<TmplAstNode[]> = [];
     for (const stmt of sf.statements) {
       if (isNamedClassDeclaration(stmt)) {
         const resources = compiler.getComponentResources(stmt);
@@ -47,19 +46,19 @@ export function getOutliningSpans(compiler: NgCompiler, fileName: string): ts.Ou
   }
 }
 
-class BlockVisitor extends t.RecursiveVisitor {
-  readonly blocks = [] as Array<t.BlockNode>;
+class BlockVisitor extends TmplAstRecursiveVisitor {
+  readonly blocks = [] as Array<TmplAstBlockNode>;
 
-  static getBlockSpans(templateNodes: t.Node[]): ts.OutliningSpan[] {
+  static getBlockSpans(templateNodes: TmplAstNode[]): ts.OutliningSpan[] {
     const visitor = new BlockVisitor();
-    t.visitAll(visitor, templateNodes);
+    tmplAstVisitAll(visitor, templateNodes);
     const {blocks} = visitor;
     return blocks.map(block => {
       let mainBlockSpan = block.sourceSpan;
       // The source span of for loops and deferred blocks contain all parts (ForLoopBlockEmpty,
       // DeferredBlockLoading, etc.). The folding range should only include the main block span for
       // these.
-      if (block instanceof t.ForLoopBlock || block instanceof t.DeferredBlock) {
+      if (block instanceof TmplAstForLoopBlock || block instanceof TmplAstDeferredBlock) {
         mainBlockSpan = block.mainBlockSpan;
       }
       return {
@@ -75,10 +74,10 @@ class BlockVisitor extends t.RecursiveVisitor {
     });
   }
 
-  visit(node: t.Node) {
-    if (node instanceof t.BlockNode
+  visit(node: TmplAstNode) {
+    if (node instanceof TmplAstBlockNode
         // Omit `IfBlock` because we include the branches individually
-        && !(node instanceof t.IfBlock)) {
+        && !(node instanceof TmplAstIfBlock)) {
       this.blocks.push(node);
     }
   }

packages/language-service/src/quick_info.ts

@@ -5,10 +5,9 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
-import {AST, TmplAstBoundAttribute, TmplAstNode, TmplAstTextAttribute} from '@angular/compiler';
+import {AST, TmplAstBlockNode, TmplAstBoundAttribute, TmplAstDeferredTrigger, TmplAstNode, TmplAstTextAttribute} from '@angular/compiler';
 import {NgCompiler} from '@angular/compiler-cli/src/ngtsc/core';
 import {DirectiveSymbol, DomBindingSymbol, ElementSymbol, InputBindingSymbol, OutputBindingSymbol, PipeSymbol, ReferenceSymbol, Symbol, SymbolKind, TcbLocation, VariableSymbol} from '@angular/compiler-cli/src/ngtsc/typecheck/api';
-import {BlockNode, DeferredTrigger} from '@angular/compiler/src/render3/r3_ast';
 import ts from 'typescript';
 
 import {DisplayInfoKind, SYMBOL_PUNC, SYMBOL_SPACE, SYMBOL_TEXT} from './display_parts';
@@ -26,7 +25,7 @@ export class QuickInfoBuilder {
       private readonly positionDetails: TemplateTarget) {}
 
   get(): ts.QuickInfo|undefined {
-    if (this.node instanceof DeferredTrigger || this.node instanceof BlockNode) {
+    if (this.node instanceof TmplAstDeferredTrigger || this.node instanceof TmplAstBlockNode) {
       return createQuickInfoForBuiltIn(this.node, this.positionDetails.position);
     }