Switch all injectables to Service

docs/scenes/src/app/scene-overlay-container.ts

@@ -6,10 +6,10 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {Injectable} from '@angular/core';
+import {Service} from '@angular/core';
 import {OverlayContainer} from '@angular/cdk/overlay';
 
-@Injectable({providedIn: 'root'})
+@Service()
 export class SceneOverlayContainer extends OverlayContainer {
   _createContainer(): void {
     const container = this._document.createElement('div');

docs/src/app/pages/component-sidenav/component-sidenav-can-load-guard.ts

@@ -6,15 +6,15 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {Injectable, inject} from '@angular/core';
+import {Service, inject} from '@angular/core';
 import {ActivatedRouteSnapshot, Router} from '@angular/router';
 import {SECTIONS} from '../../shared/documentation-items/documentation-items';
 
 /**
  * Guard to determine if the sidenav can load, based on whether the section exists in documentation
  * items.
  */
-@Injectable({providedIn: 'root'})
+@Service()
 export class CanActivateComponentSidenav {
   private _router = inject(Router);
 

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

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {ChangeDetectionStrategy, Component, inject, Injectable} from '@angular/core';
+import {ChangeDetectionStrategy, Component, inject, Service} from '@angular/core';
 import {DomSanitizer} from '@angular/platform-browser';
 import {HttpClient} from '@angular/common/http';
 import {AsyncPipe} from '@angular/common';
@@ -25,7 +25,7 @@ interface StyleOverridesData {
   }[];
 }
 
-@Injectable({providedIn: 'root'})
+@Service()
 class TokenService {
   private _http = inject(HttpClient);
 

docs/src/app/pages/page-title/page-title.ts

@@ -6,15 +6,15 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {Injectable, inject} from '@angular/core';
+import {Service, inject} from '@angular/core';
 import {Title} from '@angular/platform-browser';
 
 export const TITLE_SEPARATOR = ' • ';
 
 /**
  * Service responsible for setting the title that appears above the components and guide pages.
  */
-@Injectable({providedIn: 'root'})
+@Service()
 export class ComponentPageTitle {
   private _bodyTitle = inject(Title);
 

docs/src/app/shared/analytics/analytics.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {Injectable} from '@angular/core';
+import {Service} from '@angular/core';
 
 import {environment} from '../../../environments/environment';
 import {formatErrorEventForAnalytics} from './format-error';
@@ -21,7 +21,7 @@ import {formatErrorEventForAnalytics} from './format-error';
  *   - Data is uploaded to a legacy Universal Analytics property.
  *   - Data is uploaded to our main Google Analytics 4+ property.
  */
-@Injectable({providedIn: 'root'})
+@Service()
 export class AnalyticsService {
   private _previousUrl: string | undefined;
   private _gaWindow = window as Window &

docs/src/app/shared/analytics/error-report-handler.ts

@@ -6,11 +6,11 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {ErrorHandler, Injectable, inject} from '@angular/core';
+import {ErrorHandler, Service, inject} from '@angular/core';
 import {AnalyticsService} from './analytics';
 import {formatErrorForAnalytics} from './format-error';
 
-@Injectable()
+@Service({autoProvided: false})
 export class AnalyticsErrorReportHandler extends ErrorHandler {
   private _analytics = inject(AnalyticsService);
 

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

@@ -20,7 +20,7 @@ import {
   Component,
   ElementRef,
   EventEmitter,
-  Injectable,
+  Service,
   Injector,
   Input,
   NgZone,
@@ -41,7 +41,7 @@ import {DeprecatedFieldComponent} from './deprecated-tooltip';
 import {ModuleImportCopyButton} from './module-import-copy-button';
 import {AngularAriaBanner} from './angular-aria-banner/angular-aria-banner';
 
-@Injectable({providedIn: 'root'})
+@Service()
 class DocFetcher {
   private _http = inject(HttpClient);
 

docs/src/app/shared/documentation-items/documentation-items.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {Injectable} from '@angular/core';
+import {Service} from '@angular/core';
 import type {LiveExample} from '@angular/components-examples';
 
 export interface AdditionalApiDoc {
@@ -599,7 +599,7 @@ interface DocsData {
   examples: Record<string, LiveExample>;
 }
 
-@Injectable({providedIn: 'root'})
+@Service()
 export class DocumentationItems {
   private _cachedData: DocsData | null = null;
 

docs/src/app/shared/guide-items/guide-items.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {Injectable} from '@angular/core';
+import {Service} from '@angular/core';
 import {ComponentType} from '@angular/cdk/portal';
 
 export interface GuideItem {
@@ -67,7 +67,7 @@ const GUIDES: GuideItem[] = [
   },
 ];
 
-@Injectable({providedIn: 'root'})
+@Service()
 export class GuideItems {
   getAllItems(): GuideItem[] {
     return GUIDES;

docs/src/app/shared/header-tag-manager.ts

@@ -7,14 +7,14 @@
  */
 
 import {DOCUMENT} from '@angular/common';
-import {Injectable, inject} from '@angular/core';
+import {Service, inject} from '@angular/core';
 
 const MAT_ANGULAR_DEV = 'https://material.angular.dev';
 
 /**
  * Information about the deployment of this application.
  */
-@Injectable({providedIn: 'root'})
+@Service()
 export class HeaderTagManager {
   private readonly _document = inject(DOCUMENT);
 

docs/src/app/shared/navigation-focus/navigation-focus.service.ts

@@ -6,14 +6,12 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {Injectable, inject} from '@angular/core';
+import {Service, inject} from '@angular/core';
 import {Event, NavigationEnd, Router} from '@angular/router';
 import {filter, skip} from 'rxjs/operators';
 import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
 
-@Injectable({
-  providedIn: 'root',
-})
+@Service()
 export class NavigationFocusService {
   private _router = inject(Router);
   private _navigationFocusRequests: HTMLElement[] = [];

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

@@ -7,7 +7,7 @@
  */
 
 import {HttpClient} from '@angular/common/http';
-import {Injectable, NgZone, inject} from '@angular/core';
+import {Service, NgZone, inject} from '@angular/core';
 import type {ExampleData} from '@angular/components-examples';
 import {Observable} from 'rxjs';
 import {shareReplay} from 'rxjs/operators';
@@ -59,7 +59,7 @@ type FileDictionary = {[path: string]: string};
 /**
  * StackBlitz writer, write example files to StackBlitz.
  */
-@Injectable({providedIn: 'root'})
+@Service()
 export class StackBlitzWriter {
   private _http = inject(HttpClient);
   private _ngZone = inject(NgZone);

docs/src/app/shared/style-manager/style-manager.ts

@@ -6,13 +6,13 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {Injectable} from '@angular/core';
+import {Service} from '@angular/core';
 
 /**
  * Class for managing stylesheets. Stylesheets are loaded into named slots so that they can be
  * removed or changed later.
  */
-@Injectable({providedIn: 'root'})
+@Service()
 export class StyleManager {
   /**
    * Set the stylesheet with the specified key.

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

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {Injectable, EventEmitter} from '@angular/core';
+import {Service, EventEmitter} from '@angular/core';
 
 export interface DocsSiteTheme {
   name: string;
@@ -16,7 +16,7 @@ export interface DocsSiteTheme {
   isDefault?: boolean;
 }
 
-@Injectable({providedIn: 'root'})
+@Service()
 export class ThemeStorage {
   static storageKey = 'docs-theme-storage-current-name';
 

integration/vitest/package.json

@@ -11,24 +11,24 @@
   "private": true,
   "dependencies": {
     "@angular/cdk": "next",
-    "@angular/common": "^21.0.0",
-    "@angular/compiler": "^21.0.0",
-    "@angular/core": "^21.0.0",
-    "@angular/forms": "^21.0.0",
+    "@angular/common": "^22.0.0-next.9",
+    "@angular/compiler": "^22.0.0-next.9",
+    "@angular/core": "^22.0.0-next.9",
+    "@angular/forms": "^22.0.0-next.9",
     "@angular/material": "next",
-    "@angular/platform-browser": "^21.0.0",
-    "@angular/router": "^21.0.0",
+    "@angular/platform-browser": "^22.0.0-next.9",
+    "@angular/router": "^22.0.0-next.9",
     "glob": "latest",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "^0.16.0"
   },
   "devDependencies": {
-    "@angular/build": "^21.0.3",
-    "@angular/cli": "^21.0.3",
-    "@angular/compiler-cli": "^21.0.0",
+    "@angular/build": "^22.0.0-next.6",
+    "@angular/cli": "^22.0.0-next.6",
+    "@angular/compiler-cli": "^22.0.0-next.9",
     "jsdom": "^27.1.0",
-    "typescript": "~5.9.2",
+    "typescript": "~6.0.2",
     "vitest": "^4.0.8"
   }
 }