Merge pull request #249 from angular/main

Create a new pull request by comparing changes across two branches

.pullapprove.yml

@@ -57,7 +57,7 @@
 version: 3
 
 availability:
-  users_unavailable: ['atscott', 'devversion']
+  users_unavailable: ['atscott']
 
 # Meta field that goes unused by PullApprove to allow for defining aliases to be
 # used throughout the config.

adev/shared-docs/components/algolia-icon/algolia-icon.component.ts

@@ -11,7 +11,6 @@ import {ChangeDetectionStrategy, Component} from '@angular/core';
 @Component({
   selector: 'docs-algolia-icon',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [],
   templateUrl: './algolia-icon.component.html',
 })
 export class AlgoliaIcon {}

adev/shared-docs/components/breadcrumb/breadcrumb.component.html

@@ -1,4 +1,4 @@
-@for (breadcrumb of breadcrumbItems(); track breadcrumb) {
+@for (breadcrumb of breadcrumbItems(); track $index) {
   <div class="docs-breadcrumb">
     @if (breadcrumb.path) {
       @if (breadcrumb.isExternal) {

adev/shared-docs/components/breadcrumb/breadcrumb.component.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {ChangeDetectionStrategy, Component, OnInit, inject, signal} from '@angular/core';
+import {ChangeDetectionStrategy, Component, inject, computed} from '@angular/core';
 import {NavigationState} from '../../services/index';
 import {NavigationItem} from '../../interfaces/index';
 import {RouterLink} from '@angular/router';
@@ -18,31 +18,18 @@ import {RouterLink} from '@angular/router';
   styleUrls: ['./breadcrumb.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class Breadcrumb implements OnInit {
+export class Breadcrumb {
   private readonly navigationState = inject(NavigationState);
 
-  breadcrumbItems = signal<NavigationItem[]>([]);
+  breadcrumbItems = computed(() => {
+    const breadcrumbs: NavigationItem[] = [];
+    let activeItem = this.navigationState.activeNavigationItem()?.parent;
 
-  ngOnInit(): void {
-    this.setBreadcrumbItemsBasedOnNavigationStructure();
-  }
+    while (activeItem != null) {
+      breadcrumbs.push(activeItem);
+      activeItem = activeItem.parent;
+    }
 
-  private setBreadcrumbItemsBasedOnNavigationStructure(): void {
-    let breadcrumbs: NavigationItem[] = [];
-
-    const traverse = (node: NavigationItem | null) => {
-      if (!node) {
-        return;
-      }
-
-      if (node.parent) {
-        breadcrumbs = [node.parent, ...breadcrumbs];
-        traverse(node.parent);
-      }
-    };
-
-    traverse(this.navigationState.activeNavigationItem());
-
-    this.breadcrumbItems.set(breadcrumbs);
-  }
+    return breadcrumbs.reverse();
+  });
 }

adev/shared-docs/components/icon/BUILD.bazel

@@ -1,5 +1,5 @@
-load("//tools:defaults.bzl", "ng_module")
 load("@io_bazel_rules_sass//:defs.bzl", "sass_binary")
+load("//tools:defaults.bzl", "ng_module")
 
 package(default_visibility = ["//visibility:private"])
 
@@ -10,7 +10,6 @@ ng_module(
     ],
     assets = [
         ":icon.component.css",
-        "icon.component.html",
     ],
     visibility = [
         "//adev/shared-docs/components:__pkg__",

adev/shared-docs/components/icon/icon.component.ts

@@ -18,24 +18,21 @@ import {
 
 @Component({
   selector: 'docs-icon',
-  templateUrl: './icon.component.html',
-  styleUrl: './icon.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
   host: {
-    '[class]': 'MATERIAL_SYMBOLS_OUTLINED',
+    'class': 'material-symbols-outlined',
     '[style.font-size.px]': 'fontSize()',
     'aria-hidden': 'true',
     'translate': 'no',
   },
-  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content />',
+  styleUrl: './icon.component.scss',
 })
 export class IconComponent {
-  fontSize = computed(() => {
-    return IconComponent.isFontLoaded() ? null : 0;
-  });
+  private static isFontLoaded = signal(false);
 
-  protected readonly MATERIAL_SYMBOLS_OUTLINED = 'material-symbols-outlined';
+  protected readonly fontSize = computed(() => (IconComponent.isFontLoaded() ? null : 0));
 
-  private static isFontLoaded = signal(false);
   /** Share the same promise across different instances of the component */
   private static whenFontLoad?: Promise<FontFace[]> | undefined;
 

adev/shared-docs/components/viewers/docs-viewer/docs-viewer.component.ts

@@ -79,7 +79,6 @@ export class DocViewer implements OnChanges {
   private readonly injector = inject(Injector);
   private readonly appRef = inject(ApplicationRef);
 
-  // tslint:disable-next-line:no-unused-variable
   private animateContent = false;
   private readonly pendingTasks = inject(PendingTasks);
 

adev/src/app/app-scroller.ts

@@ -12,6 +12,7 @@ import {
   ApplicationRef,
   afterNextRender,
   EnvironmentInjector,
+  Injector,
 } from '@angular/core';
 import {Scroll, Router} from '@angular/router';
 import {filter, firstValueFrom, map, switchMap, tap} from 'rxjs';
@@ -62,7 +63,7 @@ export class AppScroller {
       });
   }
 
-  scroll() {
+  scroll(injector?: Injector) {
     if (!this._lastScrollEvent || !this.canScroll) {
       return;
     }
@@ -83,7 +84,9 @@ export class AppScroller {
           }
         },
       },
-      {injector: this.injector},
+      // Use the component injector when provided so that the manager can
+      // deregister the sequence once the component is destroyed.
+      {injector: injector ?? this.injector},
     );
     this.cancelScroll = () => {
       ref.destroy();

adev/src/app/editor/code-editor/code-mirror-editor.service.ts

@@ -220,7 +220,6 @@ export class CodeMirrorEditor {
     if (!this.currentFile().filename.endsWith('.ts')) return;
 
     this.tsVfsWorker.postMessage(request);
-    // tslint:disable-next-line:semicolon
   };
 
   private getVfsEnvFileSystemMap(): Map<string, string> {

adev/src/app/features/home/services/home-animation.service.ts

@@ -491,8 +491,7 @@ export class HomeAnimation {
 
     this.canvas.update(time, deltaTime, frame, this.progress);
     // TODO: add support for class fields arrow function
-    // Using disable-next-line to avoid tslint errors - An arrow function is required for binding to the listener
-    // tslint:disable-next-line:semicolon
+    // An arrow function is required for binding to the listener
   };
 
   /**

adev/src/app/features/references/api-item-label/api-item-label.component.ts

@@ -8,16 +8,15 @@
 
 import {ChangeDetectionStrategy, Component, computed, input} from '@angular/core';
 import {ApiItemType} from '../interfaces/api-item-type';
-import {ApiLabel, shortLabelsMap} from '../pipes/api-label.pipe';
+import {shortLabelsMap} from '../pipes/api-label.pipe';
 
 @Component({
   selector: 'docs-api-item-label',
-  template: `{{ label() }}`,
   changeDetection: ChangeDetectionStrategy.OnPush,
   host: {
     '[class]': `clazz()`,
   },
-  imports: [ApiLabel],
+  template: `{{ label() }}`,
 })
 export default class ApiItemLabel {
   readonly type = input.required<ApiItemType>();

adev/src/app/features/references/api-reference-list/api-reference-manager.service.ts

@@ -10,7 +10,6 @@ import {Injectable, signal} from '@angular/core';
 // This file is generated at build-time, error is expected here.
 import API_MANIFEST_JSON from '../../../../../src/assets/api/manifest.json';
 import {getApiUrl} from '../helpers/manifest.helper';
-import {ApiItem} from '../interfaces/api-item';
 import {ApiItemsGroup} from '../interfaces/api-items-group';
 import {ApiManifest} from '../interfaces/api-manifest';
 

adev/src/app/features/references/services/reference-scroll-handler.service.ts

@@ -7,7 +7,7 @@
  */
 
 import {DOCUMENT, isPlatformBrowser} from '@angular/common';
-import {DestroyRef, Injectable, PLATFORM_ID, inject} from '@angular/core';
+import {DestroyRef, Injectable, Injector, PLATFORM_ID, inject} from '@angular/core';
 import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
 import {fromEvent} from 'rxjs';
 import {MEMBER_ID_ATTRIBUTE} from '../constants/api-reference-prerender.constants';
@@ -22,6 +22,7 @@ const SCROLL_MARGIN_TOP = 100;
 export class ReferenceScrollHandler {
   private readonly destroyRef = inject(DestroyRef);
   private readonly document = inject(DOCUMENT);
+  private readonly injector = inject(Injector);
   private readonly window = inject(WINDOW);
   private readonly router = inject(Router);
   private readonly appScroller = inject(AppScroller);
@@ -43,7 +44,7 @@ export class ReferenceScrollHandler {
         // If there is no fragment or the scroll event has a position (traversing through history),
         // allow the scroller to handler scrolling instead of going to the fragment
         if (!fragment || this.appScroller.lastScrollEvent?.position) {
-          this.appScroller.scroll();
+          this.appScroller.scroll(this.injector);
           return;
         }
 

devtools/projects/demo-standalone/src/app/devtools-app/devtools-app.component.ts

@@ -24,7 +24,6 @@ import {FrameManager} from '../../../../../projects/ng-devtools/src/lib/frame_ma
           new IFrameMessageBus(
             'angular-devtools',
             'angular-devtools-backend',
-            // tslint:disable-next-line: no-non-null-assertion
             () => (document.querySelector('#sample-app') as HTMLIFrameElement).contentWindow!,
           ),
         );

devtools/projects/ng-devtools-backend/src/lib/component-tree.ts

@@ -490,7 +490,6 @@ const getRootLViewsHelper = (element: Element, rootLViews = new Set<any>()): Set
     rootLViews.add(lView);
     return rootLViews;
   }
-  // tslint:disable-next-line: prefer-for-of
   for (let i = 0; i < element.children.length; i++) {
     getRootLViewsHelper(element.children[i], rootLViews);
   }

devtools/projects/ng-devtools/src/lib/devtools-tabs/diffing/index.ts

@@ -6,7 +6,6 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-// tslint:disable-next-line:deprecation
 import {DefaultIterableDiffer} from '@angular/core';
 
 export interface MovedRecord {
@@ -56,7 +55,6 @@ export const diff = <T>(
       (a[record.currentIndex] as any)[prop] = (b[record.currentIndex] as any)[prop];
     });
     if (!alreadySet[record.previousIndex]) {
-      // tslint:disable-next-line: no-non-null-assertion
       a[record.previousIndex] = null!;
     }
     alreadySet[record.currentIndex] = true;
@@ -79,7 +77,6 @@ export const diff = <T>(
       return;
     }
     if (record.currentIndex === null && !alreadySet[record.previousIndex]) {
-      // tslint:disable-next-line: no-non-null-assertion
       a[record.previousIndex] = null!;
     }
     removedItems.push(record.item);

devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-resolver/element-property-resolver.spec.ts

@@ -110,7 +110,6 @@ describe('ElementPropertyResolver', () => {
     });
     const fooController = resolver.getDirectiveController('FooCmp');
     expect(fooController).toBeTruthy();
-    // tslint:disable-next-line: no-non-null-assertion
     const fooProps = fooController!.getExpandedProperties();
     expect(fooProps).toEqual([
       {
@@ -130,7 +129,6 @@ describe('ElementPropertyResolver', () => {
 
     const barController = resolver.getDirectiveController('BarDir');
     expect(barController).toBeTruthy();
-    // tslint:disable-next-line: no-non-null-assertion
     const barProps = barController!.getExpandedProperties();
     expect(barProps).toEqual([
       {

devtools/projects/ng-devtools/src/lib/vendor/angular-split/lib/component/interface.ts

@@ -1,5 +1,3 @@
-// tslint:disable
-
 import {SplitAreaDirective} from './splitArea.directive';
 
 export interface IPoint {

devtools/projects/ng-devtools/src/lib/vendor/angular-split/lib/component/split.component.ts

@@ -1,4 +1,3 @@
-// tslint:disable
 import {
   AfterViewInit,
   ChangeDetectionStrategy,

devtools/projects/ng-devtools/src/lib/vendor/angular-split/lib/component/splitArea.directive.ts

@@ -1,5 +1,3 @@
-// tslint:disable
-
 import {Directive, ElementRef, Input, NgZone, OnDestroy, OnInit, Renderer2} from '@angular/core';
 
 import {SplitComponent} from '../component/split.component';

devtools/projects/ng-devtools/src/lib/vendor/angular-split/lib/component/utils.ts

@@ -1,4 +1,3 @@
-// tslint:disable
 import {ElementRef} from '@angular/core';
 
 import {

devtools/projects/ng-devtools/src/lib/vendor/angular-split/public_api.ts

@@ -1,4 +1,3 @@
-// tslint:disable
 /*
  * Public API Surface of angular-split
  */

devtools/projects/protocol/src/lib/priority-aware-message-bus.ts

@@ -83,7 +83,6 @@ export class PriorityAwareMessageBus extends MessageBus<Events> {
     if (blockedBy) {
       // The source code here is safe.
       // TypeScript type inference ignores the null check here.
-      // tslint:disable-next-line: no-non-null-assertion
       for (const blocker of blockedBy!) {
         if (this._inProgress[blocker]) {
           return false;

devtools/src/app/devtools-app/devtools-app.routes.ts

@@ -26,7 +26,6 @@ export const DEVTOOL_ROUTES: Routes = [
             new IFrameMessageBus(
               'angular-devtools',
               'angular-devtools-backend',
-              // tslint:disable-next-line: no-non-null-assertion
               () => (document.querySelector('#sample-app') as HTMLIFrameElement).contentWindow!,
             ),
           );

goldens/size-tracking/integration-payloads.json

@@ -47,7 +47,7 @@
   },
   "defer": {
     "uncompressed": {
-      "main": 12094,
+      "main": 12709,
       "polyfills": 33807,
       "defer.component": 345
     }

modules/benchmarks/src/util.ts

@@ -6,7 +6,6 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-/* tslint:disable:no-console  */
 urlParamsToForm();
 
 export function getIntParameter(name: string) {

package.json

@@ -80,15 +80,15 @@
     "@types/bluebird": "^3.5.27",
     "@types/chrome": "^0.0.290",
     "@types/convert-source-map": "^2.0.0",
-    "@types/diff": "^6.0.0",
+    "@types/diff": "^7.0.0",
     "@types/dom-view-transitions": "^1.0.1",
     "@types/hammerjs": "2.0.46",
     "@types/jasmine": "^5.0.0",
     "@types/jasmine-ajax": "^3.3.1",
     "@types/jasminewd2": "^2.0.8",
     "@types/node": "^18.11.18",
     "@types/selenium-webdriver": "3.0.7",
-    "@types/selenium-webdriver4": "npm:@types/[email protected].27",
+    "@types/selenium-webdriver4": "npm:@types/[email protected].28",
     "@types/semver": "^7.3.4",
     "@types/shelljs": "^0.8.6",
     "@types/systemjs": "6.15.1",

packages/animations/browser/src/render/animation_renderer.ts

@@ -132,4 +132,12 @@ export class AnimationRendererFactory implements RendererFactory2 {
   whenRenderingDone(): Promise<any> {
     return this.engine.whenRenderingDone();
   }
+
+  /**
+   * Used during HMR to clear any cached data about a component.
+   * @param componentId ID of the component that is being replaced.
+   */
+  protected componentReplaced(componentId: string) {
+    (this.delegate as {componentReplaced?: (id: string) => void}).componentReplaced?.(componentId);
+  }
 }

packages/common/http/test/fetch_spec.ts

@@ -495,7 +495,6 @@ export class MockFetchFactory extends FetchFactory {
     this.clearWarningTimeout = () => clearTimeout(timeoutId);
 
     return this.promise;
-    // tslint:disable:semicolon
   };
 
   mockFlush(

packages/common/src/dom_adapter.ts

@@ -16,7 +16,6 @@ export function setRootDomAdapter(adapter: DomAdapter) {
   _DOM ??= adapter;
 }
 
-/* tslint:disable:requireParameterType */
 /**
  * Provides DOM operations in an environment-agnostic way.
  *

packages/common/testing/src/navigation/fake_navigation.ts

@@ -603,7 +603,6 @@ export class FakeNavigationHistoryEntry implements NavigationHistoryEntry {
   private readonly state: unknown;
   private readonly historyState: unknown;
 
-  // tslint:disable-next-line:no-any
   ondispose: ((this: NavigationHistoryEntry, ev: Event) => any) | null = null;
 
   constructor(