refactor: do cleanups to theme, version and content loader services at adev (#55234)

Keep theme constants in sync betwee index.html file and theme manager. Move versions config static data to their own file, and replace the deprecated toPromise() api with the new firstValueFrom() api

PR Close #55234

adev/src/app/core/constants/versions.ts

@@ -0,0 +1,74 @@
+/*!
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.dev/license
+ */
+
+export const VERSIONS_CONFIG = {
+  currentVersion: 'stable',
+  historicalVersionsLinkPattern: 'https://v{{version}}.angular.dev',
+  mainVersions: [
+    {
+      version: 'stable',
+      url: 'https://angular.dev',
+    },
+    {
+      version: 'v16',
+      url: 'https://v16.angular.io/docs',
+    },
+    {
+      version: 'v15',
+      url: 'https://v15.angular.io/docs',
+    },
+    {
+      version: 'v14',
+      url: 'https://v14.angular.io/docs',
+    },
+    {
+      version: 'v13',
+      url: 'https://v13.angular.io/docs',
+    },
+    {
+      version: 'v12',
+      url: 'https://v12.angular.io/docs',
+    },
+    {
+      version: 'v11',
+      url: 'https://v11.angular.io/docs',
+    },
+    {
+      version: 'v10',
+      url: 'https://v10.angular.io/docs',
+    },
+    {
+      version: 'v9',
+      url: 'https://v9.angular.io/docs',
+    },
+    {
+      version: 'v8',
+      url: 'https://v8.angular.io/docs',
+    },
+    {
+      version: 'v7',
+      url: 'https://v7.angular.io/docs',
+    },
+    {
+      version: 'v6',
+      url: 'https://v6.angular.io/docs',
+    },
+    {
+      version: 'v5',
+      url: 'https://v5.angular.io/docs',
+    },
+    {
+      version: 'v4',
+      url: 'https://v4.angular.io/docs',
+    },
+    {
+      version: 'v2',
+      url: 'https://v2.angular.io/docs',
+    },
+  ],
+};

adev/src/app/core/services/content-loader.service.ts

@@ -10,6 +10,7 @@ import {HttpClient} from '@angular/common/http';
 import {Injectable, inject} from '@angular/core';
 import {DocContent, DocsContentLoader} from '@angular/docs';
 import {Router} from '@angular/router';
+import {firstValueFrom} from 'rxjs';
 import {map} from 'rxjs/operators';
 
 @Injectable()
@@ -27,12 +28,13 @@ export class ContentLoader implements DocsContentLoader {
       try {
         this.cache.set(
           path,
-          this.httpClient
-            .get(`assets/content/${path}`, {
-              responseType: 'text',
-            })
-            .pipe(map((contents) => ({contents, id: path})))
-            .toPromise(),
+          firstValueFrom(
+            this.httpClient
+              .get(`assets/content/${path}`, {
+                responseType: 'text',
+              })
+              .pipe(map((contents) => ({contents, id: path}))),
+          ),
         );
       } catch {
         this.router.navigateByUrl('/404');

adev/src/app/core/services/theme-manager.service.ts

@@ -82,7 +82,7 @@ export class ThemeManager {
   }
 
   private watchPreferredColorScheme() {
-    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (event) => {
+    window.matchMedia(PREFERS_COLOR_SCHEME_DARK).addEventListener('change', (event) => {
       const preferredScheme = event.matches ? 'dark' : 'light';
       this.setThemeBodyClasses(preferredScheme);
     });
@@ -90,5 +90,5 @@ export class ThemeManager {
 }
 
 function preferredScheme(): 'dark' | 'light' {
-  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+  return window.matchMedia(PREFERS_COLOR_SCHEME_DARK).matches ? 'dark' : 'light';
 }

adev/src/app/core/services/version-manager.service.ts

@@ -7,74 +7,7 @@
  */
 
 import {Injectable, VERSION, computed, signal} from '@angular/core';
-
-// TODO(josephperrott): extract this out of the file into a managed location.
-const VERSIONS_CONFIG = {
-  currentVersion: 'stable',
-  historicalVersionsLinkPattern: 'https://v{{version}}.angular.dev',
-  mainVersions: [
-    {
-      version: 'stable',
-      url: 'https://angular.dev',
-    },
-    {
-      version: 'v16',
-      url: 'https://v16.angular.io/docs',
-    },
-    {
-      version: 'v15',
-      url: 'https://v15.angular.io/docs',
-    },
-    {
-      version: 'v14',
-      url: 'https://v14.angular.io/docs',
-    },
-    {
-      version: 'v13',
-      url: 'https://v13.angular.io/docs',
-    },
-    {
-      version: 'v12',
-      url: 'https://v12.angular.io/docs',
-    },
-    {
-      version: 'v11',
-      url: 'https://v11.angular.io/docs',
-    },
-    {
-      version: 'v10',
-      url: 'https://v10.angular.io/docs',
-    },
-    {
-      version: 'v9',
-      url: 'https://v9.angular.io/docs',
-    },
-    {
-      version: 'v8',
-      url: 'https://v8.angular.io/docs',
-    },
-    {
-      version: 'v7',
-      url: 'https://v7.angular.io/docs',
-    },
-    {
-      version: 'v6',
-      url: 'https://v6.angular.io/docs',
-    },
-    {
-      version: 'v5',
-      url: 'https://v5.angular.io/docs',
-    },
-    {
-      version: 'v4',
-      url: 'https://v4.angular.io/docs',
-    },
-    {
-      version: 'v2',
-      url: 'https://v2.angular.io/docs',
-    },
-  ],
-};
+import {VERSIONS_CONFIG} from '../constants/versions';
 
 export interface Version {
   displayName: string;

adev/src/index.html

@@ -9,10 +9,12 @@
       const THEME_PREFERENCE_LOCAL_STORAGE_KEY = 'themePreference';
       const DARK_MODE_CLASS_NAME = 'docs-dark-mode';
       const LIGHT_MODE_CLASS_NAME = 'docs-light-mode';
+      const PREFERS_COLOR_SCHEME_DARK = '(prefers-color-scheme: dark)';
+
 
       const theme = localStorage.getItem(THEME_PREFERENCE_LOCAL_STORAGE_KEY) ?? 'auto';
       const prefersDark =
-        window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+        window.matchMedia && window.matchMedia(PREFERS_COLOR_SCHEME_DARK).matches;
       const documentClassList = this.document.documentElement.classList;
 
       // clearing classes before setting them.