Fix docs site breakages

MODULE.bazel

@@ -32,7 +32,7 @@ git_override(
 bazel_dep(name = "rules_angular")
 git_override(
     module_name = "rules_angular",
-    commit = "af626f77ad610d1a9c47ee317af88e2c8edd66a4",
+    commit = "32ce54318d9ec5d84269d4acecbc39944cd8b5e7",
     remote = "https://github.com/angular/rules_angular.git",
 )
 

docs/src/app/material-docs-app.ts

@@ -6,7 +6,13 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {Component, OnDestroy, ViewEncapsulation, inject} from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  OnDestroy,
+  ViewEncapsulation,
+  inject,
+} from '@angular/core';
 
 import {AnalyticsService} from './shared/analytics/analytics';
 import {NavigationFocusService} from './shared/navigation-focus/navigation-focus.service';
@@ -27,6 +33,7 @@ import {HeaderTagManager} from './shared/header-tag-manager';
   styleUrls: ['./material-docs-app.scss'],
   encapsulation: ViewEncapsulation.None,
   imports: [NavBar, RouterOutlet, CookiePopup],
+  changeDetection: ChangeDetectionStrategy.Eager,
 })
 export class MaterialDocsApp implements OnDestroy {
   private _subscriptions = new Subscription();

docs/src/app/pages/component-category-list/component-category-list.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {Component, OnDestroy, OnInit, inject} from '@angular/core';
+import {ChangeDetectionStrategy, Component, OnDestroy, OnInit, inject} from '@angular/core';
 import {ActivatedRoute, RouterLink} from '@angular/router';
 import {MatRipple} from '@angular/material/core';
 import {NgTemplateOutlet} from '@angular/common';
@@ -26,6 +26,7 @@ import {ComponentPageTitle} from '../page-title/page-title';
   templateUrl: './component-category-list.html',
   styleUrls: ['./component-category-list.scss'],
   imports: [NavigationFocus, RouterLink, MatRipple, NgTemplateOutlet],
+  changeDetection: ChangeDetectionStrategy.Eager,
 })
 export class ComponentCategoryList implements OnInit, OnDestroy {
   private readonly _docItems = inject(DocumentationItems);

docs/src/app/pages/component-sidenav/component-sidenav.ts

@@ -6,7 +6,14 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {Component, ViewEncapsulation, forwardRef, inject, viewChild} from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ViewEncapsulation,
+  forwardRef,
+  inject,
+  viewChild,
+} from '@angular/core';
 import {BreakpointObserver} from '@angular/cdk/layout';
 import {AsyncPipe} from '@angular/common';
 import {MatListItem, MatNavList} from '@angular/material/list';
@@ -46,6 +53,7 @@ const SMALL_WIDTH_BREAKPOINT = 959;
   templateUrl: './component-sidenav.html',
   styleUrls: ['./component-sidenav.scss'],
   encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.Eager,
   imports: [
     MatSidenav,
     MatSidenavContainer,
@@ -97,6 +105,7 @@ export class ComponentSidenav {
   selector: 'app-component-nav',
   templateUrl: './component-nav.html',
   imports: [MatNavList, MatListItem, RouterLinkActive, RouterLink, AsyncPipe],
+  changeDetection: ChangeDetectionStrategy.Eager,
 })
 export class ComponentNav {
   private _docItems = inject(DocumentationItems);

docs/src/app/pages/component-viewer/component-styling.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {Component, inject, Injectable} from '@angular/core';
+import {ChangeDetectionStrategy, Component, inject, Injectable} from '@angular/core';
 import {DomSanitizer} from '@angular/platform-browser';
 import {HttpClient} from '@angular/common/http';
 import {AsyncPipe} from '@angular/common';
@@ -52,6 +52,7 @@ class TokenService {
   selector: 'component-styling',
   templateUrl: './component-styling.html',
   imports: [AsyncPipe, TokenTable],
+  changeDetection: ChangeDetectionStrategy.Eager,
 })
 export class ComponentStyling {
   private _componentViewer = inject(ComponentViewer);

docs/src/app/pages/component-viewer/token-table.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {ChangeDetectionStrategy, Component, computed, input, signal} from '@angular/core';
+import {Component, computed, input, signal} from '@angular/core';
 import {TitleCasePipe} from '@angular/common';
 import {MatButton, MatIconButton} from '@angular/material/button';
 import {MatFormField, MatLabel, MatSuffix} from '@angular/material/form-field';
@@ -31,7 +31,6 @@ export interface Token {
   selector: 'token-table',
   templateUrl: './token-table.html',
   styleUrl: './token-table.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
     MatButton,
     MatIconButton,

docs/src/app/pages/guide-list/guide-list.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {Component, OnInit, inject} from '@angular/core';
+import {ChangeDetectionStrategy, Component, OnInit, inject} from '@angular/core';
 import {GuideItems} from '../../shared/guide-items/guide-items';
 import {RouterLink} from '@angular/router';
 import {Footer} from '../../shared/footer/footer';
@@ -20,6 +20,7 @@ import {MatRipple} from '@angular/material/core';
   templateUrl: './guide-list.html',
   styleUrls: ['./guide-list.scss'],
   imports: [NavigationFocus, RouterLink, MatCard, MatCardTitle, MatCardContent, Footer, MatRipple],
+  changeDetection: ChangeDetectionStrategy.Eager,
   host: {
     'class': 'docs-main-content',
   },

docs/src/app/pages/guide-viewer/guide-viewer.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {Component, OnInit, inject, signal} from '@angular/core';
+import {ChangeDetectionStrategy, Component, OnInit, inject, signal} from '@angular/core';
 import {ActivatedRoute, Router} from '@angular/router';
 import {GuideItem, GuideItems} from '../../shared/guide-items/guide-items';
 import {Footer} from '../../shared/footer/footer';
@@ -21,6 +21,7 @@ import {DocViewer} from '../../shared/doc-viewer/doc-viewer';
   templateUrl: './guide-viewer.html',
   styleUrls: ['./guide-viewer.scss'],
   imports: [DocViewer, NavigationFocus, TableOfContents, Footer],
+  changeDetection: ChangeDetectionStrategy.Eager,
   host: {
     'class': 'docs-main-content',
   },

docs/src/app/shared/carousel/carousel.spec.ts

@@ -1,4 +1,9 @@
-import {Component, provideZoneChangeDetection, ViewChild} from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  provideZoneChangeDetection,
+  ViewChild,
+} from '@angular/core';
 import {ComponentFixture, fakeAsync, flush, TestBed} from '@angular/core/testing';
 import {provideRouter} from '@angular/router';
 import {Carousel, CarouselItem} from './carousel';
@@ -61,6 +66,7 @@ describe('HorizontalCarousel', () => {
   `,
   ],
   imports: [Carousel, CarouselItem],
+  changeDetection: ChangeDetectionStrategy.Eager,
 })
 class CarouselTestComponent {
   @ViewChild(Carousel) carousel!: Carousel;

docs/src/app/shared/carousel/carousel.ts

@@ -16,6 +16,7 @@ import {
   contentChildren,
   viewChild,
   inject,
+  ChangeDetectionStrategy,
 } from '@angular/core';
 import {FocusableOption, FocusKeyManager} from '@angular/cdk/a11y';
 import {LEFT_ARROW, RIGHT_ARROW, TAB} from '@angular/cdk/keycodes';
@@ -45,6 +46,7 @@ export class CarouselItem implements FocusableOption {
   styleUrls: ['./carousel.scss'],
   encapsulation: ViewEncapsulation.None,
   imports: [MatIconButton, MatIcon],
+  changeDetection: ChangeDetectionStrategy.Eager,
 })
 export class Carousel implements AfterContentInit {
   readonly ariaLabel = input<string | undefined>(undefined, {alias: 'aria-label'});

docs/src/app/shared/cookie-popup/cookie-popup.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {ChangeDetectionStrategy, Component} from '@angular/core';
+import {Component} from '@angular/core';
 import {MatAnchor, MatButton} from '@angular/material/button';
 
 const STORAGE_KEY = 'docs-cookies';
@@ -15,7 +15,6 @@ const STORAGE_KEY = 'docs-cookies';
   selector: 'app-cookie-popup',
   templateUrl: './cookie-popup.html',
   styleUrls: ['./cookie-popup.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [MatButton, MatAnchor],
 })
 export class CookiePopup {

docs/src/app/shared/doc-viewer/angular-aria-banner/angular-aria-banner.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {Component, Input} from '@angular/core';
+import {ChangeDetectionStrategy, Component, Input} from '@angular/core';
 import {MatIcon} from '@angular/material/icon';
 
 /**
@@ -28,6 +28,7 @@ const ANGULAR_ARIA_LINKS: Record<string, string> = {
   templateUrl: 'angular-aria-banner.html',
   styleUrl: 'angular-aria-banner.css',
   imports: [MatIcon],
+  changeDetection: ChangeDetectionStrategy.Eager,
 })
 export class AngularAriaBanner {
   @Input() componentName: string = '';

docs/src/app/shared/doc-viewer/deprecated-tooltip.ts

@@ -6,14 +6,15 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {Component} from '@angular/core';
+import {ChangeDetectionStrategy, Component} from '@angular/core';
 import {MatTooltip} from '@angular/material/tooltip';
 
 /** Shows the deprecation message for a specific field as a tooltip. */
 @Component({
   selector: 'deprecated-field',
   template: `<div class="docs-deprecated-content" [matTooltip]="message"></div>`,
   imports: [MatTooltip],
+  changeDetection: ChangeDetectionStrategy.Eager,
 })
 export class DeprecatedFieldComponent {
   /** Message regarding the deprecation  */

docs/src/app/shared/doc-viewer/doc-viewer.spec.ts

@@ -1,6 +1,6 @@
 import {Clipboard} from '@angular/cdk/clipboard';
 import {HttpTestingController, provideHttpClientTesting} from '@angular/common/http/testing';
-import {Component, provideZoneChangeDetection} from '@angular/core';
+import {ChangeDetectionStrategy, Component, provideZoneChangeDetection} from '@angular/core';
 import {TestBed} from '@angular/core/testing';
 import {MatIconButton} from '@angular/material/button';
 import {MatTooltip} from '@angular/material/tooltip';
@@ -216,6 +216,7 @@ describe('DocViewer', () => {
   selector: 'test',
   template: `<doc-viewer [document]="documentUrl" />`,
   imports: [DocViewer],
+  changeDetection: ChangeDetectionStrategy.Eager,
 })
 class DocViewerTestComponent {
   documentUrl = 'http://material.angular.dev/simple-doc.html';
@@ -271,6 +272,7 @@ class TestComponent {}
   selector: 'test',
   template: `<doc-viewer [document]="component" />`,
   imports: [DocViewer, TestComponent],
+  changeDetection: ChangeDetectionStrategy.Eager,
 })
 class DocViewerWithCompTestComponent {
   component = TestComponent;

docs/src/app/shared/doc-viewer/doc-viewer.ts

@@ -31,6 +31,7 @@ import {
   input,
   inject,
   Type,
+  ChangeDetectionStrategy,
 } from '@angular/core';
 import {Observable, Subscription} from 'rxjs';
 import {shareReplay, take, tap} from 'rxjs/operators';
@@ -66,6 +67,7 @@ class DocFetcher {
     }
   `,
   imports: [CdkPortalOutlet],
+  changeDetection: ChangeDetectionStrategy.Eager,
 })
 export class DocViewer implements OnDestroy {
   private _appRef = inject(ApplicationRef);

docs/src/app/shared/example-viewer/code-snippet.ts

@@ -6,14 +6,13 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {ChangeDetectionStrategy, Component, forwardRef, input, viewChild} from '@angular/core';
+import {Component, forwardRef, input, viewChild} from '@angular/core';
 import {DocViewer} from '../doc-viewer/doc-viewer';
 
 @Component({
   selector: 'code-snippet',
   templateUrl: './code-snippet.html',
   styleUrls: ['./example-viewer.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [forwardRef(() => DocViewer)],
 })
 export class CodeSnippet {

docs/src/app/shared/example-viewer/example-viewer.ts

@@ -7,6 +7,7 @@
  */
 
 import {
+  ChangeDetectionStrategy,
   Component,
   computed,
   ElementRef,
@@ -43,6 +44,7 @@ const preferredExampleFileOrder = ['HTML', 'TS', 'CSS'];
   selector: 'example-viewer',
   templateUrl: './example-viewer.html',
   styleUrls: ['./example-viewer.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
   imports: [
     MatIconButton,
     MatTooltip,

docs/src/app/shared/navbar/navbar.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {Component, OnDestroy, inject} from '@angular/core';
+import {ChangeDetectionStrategy, Component, OnDestroy, inject} from '@angular/core';
 import {NgTemplateOutlet} from '@angular/common';
 import {MatButton, MatIconButton} from '@angular/material/button';
 import {RouterLink, RouterLinkActive} from '@angular/router';
@@ -24,6 +24,7 @@ const SECTIONS_KEYS = Object.keys(SECTIONS);
   selector: 'app-navbar',
   templateUrl: './navbar.html',
   styleUrls: ['./navbar.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
   imports: [
     MatButton,
     MatIconButton,

docs/src/app/shared/stackblitz/stackblitz-button.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {Component, Input, NgZone, inject} from '@angular/core';
+import {ChangeDetectionStrategy, Component, Input, NgZone, inject} from '@angular/core';
 import {ExampleData} from '@angular/components-examples';
 import {MatIconButton} from '@angular/material/button';
 import {MatIcon} from '@angular/material/icon';
@@ -18,6 +18,7 @@ import {MatSnackBar} from '@angular/material/snack-bar';
   selector: 'stackblitz-button',
   templateUrl: './stackblitz-button.html',
   imports: [MatIconButton, MatTooltip, MatIcon],
+  changeDetection: ChangeDetectionStrategy.Eager,
 })
 export class StackblitzButton {
   private _stackBlitzWriter = inject(StackBlitzWriter);

docs/src/app/shared/table-of-contents/table-of-contents.ts

@@ -16,6 +16,7 @@ import {
   ChangeDetectorRef,
   input,
   inject,
+  ChangeDetectionStrategy,
 } from '@angular/core';
 import {DOCUMENT} from '@angular/common';
 import {ActivatedRoute, Router} from '@angular/router';
@@ -49,6 +50,7 @@ interface Link {
   selector: 'table-of-contents',
   styleUrls: ['./table-of-contents.scss'],
   templateUrl: './table-of-contents.html',
+  changeDetection: ChangeDetectionStrategy.Eager,
 })
 export class TableOfContents implements OnInit, AfterViewInit, OnDestroy {
   private _router = inject(Router);

docs/src/app/shared/theme-picker/theme-picker.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {ChangeDetectionStrategy, Component, ViewEncapsulation, inject} from '@angular/core';
+import {Component, ViewEncapsulation, inject} from '@angular/core';
 import {StyleManager} from '../style-manager';
 import {DocsSiteTheme, ThemeStorage} from './theme-storage/theme-storage';
 import {MatIconButton} from '@angular/material/button';
@@ -22,7 +22,6 @@ import {LiveAnnouncer} from '@angular/cdk/a11y';
   selector: 'theme-picker',
   templateUrl: 'theme-picker.html',
   styleUrls: ['theme-picker.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   imports: [MatIconButton, MatTooltip, MatMenu, MatMenuItem, MatMenuTrigger, MatIcon],
 })

docs/src/app/shared/version-picker/version-picker.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {Component, ViewEncapsulation, inject} from '@angular/core';
+import {ChangeDetectionStrategy, Component, ViewEncapsulation, inject} from '@angular/core';
 import {HttpClient} from '@angular/common/http';
 import {AsyncPipe} from '@angular/common';
 import {MatButton} from '@angular/material/button';
@@ -29,6 +29,7 @@ interface VersionInfo {
   styleUrls: ['./version-picker.scss'],
   imports: [MatButton, MatTooltip, MatMenu, MatMenuItem, MatIcon, MatMenuTrigger, AsyncPipe],
   encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.Eager,
 })
 export class VersionPicker {
   private _http = inject(HttpClient);