fix(material-angular-io): remove docs data from critical path

The docs site was loading the data of all the examples up-front through an eager import which was bringing in ~170kb of JavaScript which isn't necessary for the initial load. These changes refactor the various call sites so that they load the example data asynchronously.

Author: crisbeto

material.angular.io/.eslintrc.json

@@ -20,8 +20,10 @@
         "@angular-eslint/component-selector": "off",
         "@angular-eslint/directive-class-suffix": "off",
         "@angular-eslint/directive-selector": "off",
+        "@angular-eslint/no-host-metadata-property": "off",
         "@typescript-eslint/dot-notation": "off",
         "@typescript-eslint/member-delimiter-style": "off",
+        "@typescript-eslint/naming-convention": "off",
         "@typescript-eslint/explicit-member-accessibility": [
           "off",
           {

material.angular.io/src/app/pages/component-category-list/component-category-list.html

@@ -3,9 +3,9 @@
      focusOnNavigation>
   <div [innerHTML]="_categoryListSummary"></div>
 </div>
-@if ((params | async)?.section; as section) {
+@if (items.length > 0) {
   <div class="docs-component-category-list">
-    @for (component of docItems.getItems(section); track component) {
+    @for (component of items; track component) {
       <a class="docs-component-category-list-item"
          [routerLink]="'/' + section + '/' + component.id">
         <div class="docs-component-category-list-card" matRipple>

material.angular.io/src/app/pages/component-category-list/component-category-list.spec.ts

@@ -1,11 +1,14 @@
-import {AsyncPipe} from '@angular/common';
 import {Component, NgModule, OnDestroy, OnInit} from '@angular/core';
 import {MatCardModule} from '@angular/material/card';
-import {ActivatedRoute, Params, RouterModule, RouterLink} from '@angular/router';
+import {ActivatedRoute, RouterModule, RouterLink} from '@angular/router';
 import {MatRipple} from '@angular/material/core';
-import {combineLatest, Observable, Subscription} from 'rxjs';
+import {combineLatest, Subscription} from 'rxjs';
 
-import {DocumentationItems, SECTIONS} from '../../shared/documentation-items/documentation-items';
+import {
+  DocItem,
+  DocumentationItems,
+  SECTIONS,
+} from '../../shared/documentation-items/documentation-items';
 import {NavigationFocus} from '../../shared/navigation-focus/navigation-focus';
 
 import {ComponentPageTitle} from '../page-title/page-title';
@@ -15,32 +18,31 @@ import {ComponentPageTitle} from '../page-title/page-title';
   templateUrl: './component-category-list.html',
   styleUrls: ['./component-category-list.scss'],
   standalone: true,
-  imports: [NavigationFocus, RouterLink, AsyncPipe, MatRipple],
+  imports: [NavigationFocus, RouterLink, MatRipple],
 })
 export class ComponentCategoryList implements OnInit, OnDestroy {
-  params: Observable<Params> | undefined;
+  items: DocItem[] = [];
+  section = '';
   routeParamSubscription: Subscription = new Subscription();
   _categoryListSummary: string | undefined;
 
   constructor(
-    public docItems: DocumentationItems,
-    public _componentPageTitle: ComponentPageTitle,
+    readonly _docItems: DocumentationItems,
+    private _componentPageTitle: ComponentPageTitle,
     private _route: ActivatedRoute,
   ) {}
 
   ngOnInit() {
-    // Combine params from all of the path into a single object.
-    this.params = combineLatest(
+    this.routeParamSubscription = combineLatest(
       this._route.pathFromRoot.map(route => route.params),
       Object.assign,
-    );
-
-    // title on topbar navigation
-    this.routeParamSubscription = this.params.subscribe(params => {
+    ).subscribe(async params => {
       const sectionName = params['section'];
       const section = SECTIONS[sectionName];
       this._componentPageTitle.title = section.name;
       this._categoryListSummary = section.summary;
+      this.section = sectionName;
+      this.items = await this._docItems.getItems(sectionName);
     });
   }
 

material.angular.io/src/app/pages/component-category-list/component-category-list.ts

@@ -1,17 +1,19 @@
 <div class="docs-component-viewer-nav">
-  @if ((params() | async)?.section; as section) {
+  @let items = (this.items | async) || [];
+
+  @if (items.length > 0) {
     <div class="docs-component-viewer-nav-content">
-        <mat-nav-list>
-          @for (component of docItems.getItems(section); track component) {
-            <a mat-list-item #link="routerLinkActive"
-               [routerLink]="'/' + section+ '/' + component.id"
-               [activated]="link.isActive"
-               routerLinkActive="docs-component-viewer-sidenav-item-selected"
-               [attr.aria-current]="currentItemId === component.id ? 'page': 'false'">
-              {{component.name}}
-            </a>
-          }
-        </mat-nav-list>
+      <mat-nav-list>
+        @for (component of items; track component) {
+          <a mat-list-item #link="routerLinkActive"
+              [routerLink]="'/' + params()?.section + '/' + component.id"
+              [activated]="link.isActive"
+              routerLinkActive="docs-component-viewer-sidenav-item-selected"
+              [attr.aria-current]="link.isActive ? 'page': 'false'">
+            {{component.name}}
+          </a>
+        }
+      </mat-nav-list>
     </div>
   }
 </div>

material.angular.io/src/app/pages/component-sidenav/component-nav.html

@@ -6,7 +6,7 @@
                 [mode]="(isScreenSmall | async) ? 'over' : 'side'"
                 [fixedInViewport]="(isScreenSmall | async)"
                 [fixedTopGap]="(isExtraScreenSmall | async) ? 92 : 56">
-      <app-component-nav [params]="params"></app-component-nav>
+      <app-component-nav [params]="params | async"></app-component-nav>
     </mat-sidenav>
   }
   <div class="docs-component-sidenav-content">
@@ -15,7 +15,7 @@
       <main class="docs-component-sidenav-body-content">
         <!-- If on large screen, menu resides to left of content -->
         @if ((isScreenSmall | async) === false) {
-          <app-component-nav [params]="params"/>
+          <app-component-nav [params]="params | async"/>
         }
         <router-outlet></router-outlet>
       </main>

material.angular.io/src/app/pages/component-sidenav/component-sidenav.html

@@ -34,8 +34,9 @@ describe('ComponentSidenav', () => {
     });
   });
 
-  it('should show a link for each item in doc items categories', () => {
-    const totalItems = component.docItems.getItems('categories').length;
+  it('should show a link for each item in doc items categories', async () => {
+    const items = await component.docItems.getItems('categories');
+    const totalItems = items.length;
     const totalLinks = fixture.nativeElement.querySelectorAll(
       '.docs-component-viewer-sidenav li a',
     ).length;

material.angular.io/src/app/pages/component-sidenav/component-sidenav.spec.ts

@@ -1,14 +1,15 @@
 import {
   Component,
   NgModule,
-  NgZone,
   OnDestroy,
   OnInit,
   ViewEncapsulation,
   forwardRef,
+  inject,
   input,
   viewChild,
 } from '@angular/core';
+import {toObservable} from '@angular/core/rxjs-interop';
 import {CdkAccordionModule} from '@angular/cdk/accordion';
 import {BreakpointObserver} from '@angular/cdk/layout';
 import {AsyncPipe} from '@angular/common';
@@ -26,7 +27,7 @@ import {
   RouterLink,
 } from '@angular/router';
 import {combineLatest, Observable, Subscription} from 'rxjs';
-import {map} from 'rxjs/operators';
+import {map, switchMap} from 'rxjs/operators';
 
 import {DocViewerModule} from '../../shared/doc-viewer/doc-viewer-module';
 import {DocumentationItems} from '../../shared/documentation-items/documentation-items';
@@ -75,16 +76,15 @@ const SMALL_WIDTH_BREAKPOINT = 959;
 })
 export class ComponentSidenav implements OnInit, OnDestroy {
   readonly sidenav = viewChild(MatSidenav);
-  params: Observable<Params> | undefined;
+  params: Observable<Params>;
   isExtraScreenSmall: Observable<boolean>;
   isScreenSmall: Observable<boolean>;
-  private subscriptions = new Subscription();
+  private _subscriptions = new Subscription();
 
   constructor(
     public docItems: DocumentationItems,
     private _route: ActivatedRoute,
     private _navigationFocusService: NavigationFocusService,
-    zone: NgZone,
     breakpoints: BreakpointObserver,
   ) {
     this.isExtraScreenSmall = breakpoints
@@ -93,16 +93,15 @@ export class ComponentSidenav implements OnInit, OnDestroy {
     this.isScreenSmall = breakpoints
       .observe(`(max-width: ${SMALL_WIDTH_BREAKPOINT}px)`)
       .pipe(map(breakpoint => breakpoint.matches));
-  }
 
-  ngOnInit() {
-    // Combine params from all of the path into a single object.
     this.params = combineLatest(
       this._route.pathFromRoot.map(route => route.params),
       Object.assign,
     );
+  }
 
-    this.subscriptions.add(
+  ngOnInit() {
+    this._subscriptions.add(
       this._navigationFocusService.navigationEndEvents
         .pipe(map(() => this.isScreenSmall))
         .subscribe(shouldCloseSideNav => {
@@ -115,7 +114,7 @@ export class ComponentSidenav implements OnInit, OnDestroy {
   }
 
   ngOnDestroy() {
-    this.subscriptions.unsubscribe();
+    this._subscriptions.unsubscribe();
   }
 
   toggleSidenav(): void {
@@ -130,10 +129,14 @@ export class ComponentSidenav implements OnInit, OnDestroy {
   imports: [MatListModule, RouterLinkActive, RouterLink, AsyncPipe],
 })
 export class ComponentNav {
-  readonly params = input<Observable<Params>>();
-  currentItemId: string | undefined;
+  private _docItems = inject(DocumentationItems);
+  readonly params = input<Params | null>();
 
-  constructor(public docItems: DocumentationItems) {}
+  items = toObservable(this.params).pipe(
+    switchMap(params =>
+      params?.section ? this._docItems.getItems(params.section) : Promise.resolve(null),
+    ),
+  );
 }
 
 const routes: Routes = [

material.angular.io/src/app/pages/component-sidenav/component-sidenav.ts

@@ -14,15 +14,14 @@ import {
 import {MatTabsModule} from '@angular/material/tabs';
 import {
   ActivatedRoute,
-  Params,
   Router,
   RouterModule,
   RouterLinkActive,
   RouterLink,
   RouterOutlet,
 } from '@angular/router';
 import {combineLatest, Observable, ReplaySubject, Subject} from 'rxjs';
-import {map, skip, takeUntil} from 'rxjs/operators';
+import {map, skip, switchMap, takeUntil} from 'rxjs/operators';
 import {DocViewerModule} from '../../shared/doc-viewer/doc-viewer-module';
 import {DocItem, DocumentationItems} from '../../shared/documentation-items/documentation-items';
 import {TableOfContents} from '../../shared/table-of-contents/table-of-contents';
@@ -59,15 +58,13 @@ export class ComponentViewer implements OnDestroy {
     // parent route for the section (material/cdk).
     combineLatest(routeAndParentParams)
       .pipe(
-        map((params: Params[]) => {
+        switchMap(async params => {
           const id = params[0]['id'];
           const section = params[1]['section'];
-
-          return {
-            doc: docItems.getItemById(id, section),
-            section: section,
-          };
-        }, takeUntil(this._destroyed)),
+          const doc = await docItems.getItemById(id, section);
+          return {doc, section};
+        }),
+        takeUntil(this._destroyed),
       )
       .subscribe(({doc, section}) => {
         if (!doc) {

material.angular.io/src/app/pages/component-viewer/component-viewer.spec.ts

@@ -15,27 +15,31 @@ describe('DocViewer', () => {
     docsItems = di;
   }));
 
-  it('should get a list of all doc items', () => {
-    expect(docsItems.getItems(COMPONENTS)).toBeDefined();
-    expect(docsItems.getItems(COMPONENTS).length).toBeGreaterThan(0);
-    for (const item of docsItems.getItems(COMPONENTS)) {
+  it('should get a list of all doc items', async () => {
+    const items = await docsItems.getItems(COMPONENTS);
+
+    expect(items).toBeDefined();
+    expect(items.length).toBeGreaterThan(0);
+    for (const item of items) {
       expect(item.id).toBeDefined();
       expect(item.name).toBeDefined();
     }
   });
 
-  it('should get a doc item by id', () => {
-    expect(docsItems.getItemById('button', 'material')).toBeDefined();
+  it('should get a doc item by id', async () => {
+    expect(await docsItems.getItemById('button', 'material')).toBeDefined();
   });
 
-  it('should be sorted alphabetically (components)', () => {
-    const components = docsItems.getItems(COMPONENTS).map(c => c.name);
+  it('should be sorted alphabetically (components)', async () => {
+    const items = await docsItems.getItems(COMPONENTS);
+    const components = items.map(c => c.name);
     const sortedComponents = components.concat().sort();
     expect(components).toEqual(sortedComponents);
   });
 
-  it('should be sorted alphabetically (cdk)', () => {
-    const cdk = docsItems.getItems(CDK).map(c => c.name);
+  it('should be sorted alphabetically (cdk)', async () => {
+    const items = await docsItems.getItems(CDK);
+    const cdk = items.map(c => c.name);
     const sortedCdk = cdk.concat().sort();
     expect(cdk).toEqual(sortedCdk);
   });

material.angular.io/src/app/pages/component-viewer/component-viewer.ts

@@ -1,5 +1,5 @@
 import {Injectable} from '@angular/core';
-import {EXAMPLE_COMPONENTS} from '@angular/components-examples';
+import type {LiveExample} from '@angular/components-examples';
 
 export interface AdditionalApiDoc {
   name: string;
@@ -39,7 +39,6 @@ export interface DocSection {
   summary: string;
 }
 
-const exampleNames = Object.keys(EXAMPLE_COMPONENTS);
 const CDK = 'cdk';
 const COMPONENTS = 'components';
 export const SECTIONS: {[key: string]: DocSection} = {
@@ -582,38 +581,58 @@ const DOCS: {[key: string]: DocItem[]} = {
   // docs more granularly than directory-level (within a11y) (same for viewport).
 };
 
-const ALL_COMPONENTS = processDocs('material', DOCS[COMPONENTS]);
-const ALL_CDK = processDocs('cdk', DOCS[CDK]);
-const ALL_DOCS = [...ALL_COMPONENTS, ...ALL_CDK];
+interface DocsData {
+  cdk: DocItem[];
+  components: DocItem[];
+  all: DocItem[];
+  examples: Record<string, LiveExample>;
+}
 
 @Injectable({providedIn: 'root'})
 export class DocumentationItems {
-  getItems(section: string): DocItem[] {
+  private _cachedData: DocsData | null = null;
+
+  async getItems(section: string): Promise<DocItem[]> {
+    const data = await this.getData();
     if (section === COMPONENTS) {
-      return ALL_COMPONENTS;
+      return data.components;
     }
     if (section === CDK) {
-      return ALL_CDK;
+      return data.cdk;
     }
     return [];
   }
 
-  getItemById(id: string, section: string): DocItem | undefined {
+  async getItemById(id: string, section: string): Promise<DocItem | undefined> {
+    const docs = (await this.getData()).all;
     const sectionLookup = section === 'cdk' ? 'cdk' : 'material';
-    return ALL_DOCS.find(doc => doc.id === id && doc.packageName === sectionLookup);
+    return docs.find(doc => doc.id === id && doc.packageName === sectionLookup);
   }
-}
 
-function processDocs(packageName: string, docs: DocItem[]): DocItem[] {
-  for (const doc of docs) {
-    doc.packageName = packageName;
-    doc.hasStyling ??= packageName === 'material';
-    doc.examples = exampleNames.filter(
-      key =>
-        key.match(RegExp(`^${doc.exampleSpecs.prefix}`)) &&
-        !doc.exampleSpecs.exclude?.some(excludeName => key.indexOf(excludeName) === 0),
-    );
+  async getData(): Promise<DocsData> {
+    if (!this._cachedData) {
+      const examples = (await import('@angular/components-examples')).EXAMPLE_COMPONENTS;
+      const exampleNames = Object.keys(examples);
+      const components = this._processDocs('material', exampleNames, DOCS[COMPONENTS]);
+      const cdk = this._processDocs('cdk', exampleNames, DOCS[CDK]);
+
+      this._cachedData = {components, cdk, all: [...components, ...cdk], examples};
+    }
+
+    return this._cachedData;
   }
 
-  return docs.sort((a, b) => a.name.localeCompare(b.name, 'en'));
+  private _processDocs(packageName: string, exampleNames: string[], docs: DocItem[]): DocItem[] {
+    for (const doc of docs) {
+      doc.packageName = packageName;
+      doc.hasStyling ??= packageName === 'material';
+      doc.examples = exampleNames.filter(
+        key =>
+          key.match(RegExp(`^${doc.exampleSpecs.prefix}`)) &&
+          !doc.exampleSpecs.exclude?.some(excludeName => key.indexOf(excludeName) === 0),
+      );
+    }
+
+    return docs.sort((a, b) => a.name.localeCompare(b.name, 'en'));
+  }
 }

material.angular.io/src/app/shared/documentation-items/documentation-items.spec.ts

@@ -1,15 +1,11 @@
-import {HttpTestingController} from '@angular/common/http/testing';
 import {NgModule} from '@angular/core';
-import {waitForAsync, ComponentFixture, inject, TestBed} from '@angular/core/testing';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {MatAutocompleteModule} from '@angular/material/autocomplete';
 import {MatInputModule} from '@angular/material/input';
 import {MatSlideToggleModule} from '@angular/material/slide-toggle';
-import {MatSnackBar} from '@angular/material/snack-bar';
-import {Clipboard} from '@angular/cdk/clipboard';
 
 import {EXAMPLE_COMPONENTS} from '@angular/components-examples';
-import {By} from '@angular/platform-browser';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 import {DocsAppTestingModule} from '../../testing/testing-module';
 import {DocViewerModule} from '../doc-viewer/doc-viewer-module';
@@ -25,18 +21,24 @@ const exampleBasePath = `/docs-content/examples-highlighted/material/autocomplet
 describe('ExampleViewer', () => {
   let fixture: ComponentFixture<ExampleViewer>;
   let component: ExampleViewer;
-  let http: HttpTestingController;
   let loader: HarnessLoader;
 
-  beforeEach(waitForAsync(() => {
+  function waitForTabsLoad() {
+    return new Promise<void>(resolve => {
+      const interval = setInterval(() => {
+        if (component.exampleTabs) {
+          clearInterval(interval);
+          resolve();
+        }
+      }, 100);
+    });
+  }
+
+  beforeEach(() => {
     TestBed.configureTestingModule({
       imports: [DocViewerModule, DocsAppTestingModule, ReactiveFormsModule, TestExampleModule],
     }).compileComponents();
-  }));
-
-  beforeEach(inject([HttpTestingController], (h: HttpTestingController) => {
-    http = h;
-  }));
+  });
 
   beforeEach(() => {
     fixture = TestBed.createComponent(ExampleViewer);
@@ -45,7 +47,7 @@ describe('ExampleViewer', () => {
     loader = TestbedHarnessEnvironment.loader(fixture);
   });
 
-  it('should toggle between the 3 views', waitForAsync(() => {
+  it('should toggle between the 3 views', () => {
     // need to specify a file because toggling from snippet to full changes the tabs to match
     component.file = 'file.html';
     component.view = 'snippet';
@@ -54,80 +56,89 @@ describe('ExampleViewer', () => {
     expect(component.view).toBe('full');
     component.toggleSourceView();
     expect(component.view).toBe('demo');
-  }));
+  });
 
-  it('should expand to HTML tab', waitForAsync(async () => {
+  it('should expand to HTML tab', async () => {
     component.example = exampleKey;
     component.file = 'file.html';
     component.view = 'snippet';
+    await waitForTabsLoad();
     component.toggleCompactView();
 
     const tabGroup = await loader.getHarness(MatTabGroupHarness);
     const tab = await tabGroup.getSelectedTab();
     expect(await tab.getLabel()).toBe('HTML');
-  }));
+  });
 
-  it('should expand to TS tab', waitForAsync(async () => {
+  it('should expand to TS tab', async () => {
     component.example = exampleKey;
     component.file = EXAMPLE_COMPONENTS[exampleKey].primaryFile;
     component.view = 'snippet';
+    await waitForTabsLoad();
     component.toggleCompactView();
 
     const tabGroup = await loader.getHarness(MatTabGroupHarness);
     const tab = await tabGroup.getSelectedTab();
     expect(await tab.getLabel()).toBe('TS');
-  }));
+  });
 
-  it('should expand to CSS tab', waitForAsync(async () => {
+  it('should expand to CSS tab', async () => {
     component.example = exampleKey;
     component.file = 'file.css';
     component.view = 'snippet';
+    await waitForTabsLoad();
     component.toggleCompactView();
 
     const tabGroup = await loader.getHarness(MatTabGroupHarness);
     const tab = await tabGroup.getSelectedTab();
     expect(await tab.getLabel()).toBe('CSS');
-  }));
+  });
 
-  it('should generate correct url with region', waitForAsync(() => {
+  it('should generate correct url with region', async () => {
     component.example = exampleKey;
     component.region = 'region';
+    await waitForTabsLoad();
     const url = component.generateUrl('a.b.html');
     expect(url).toBe(exampleBasePath + '/a.b_region-html.html');
-  }));
+  });
 
-  it('should generate correct url without region', waitForAsync(() => {
+  it('should generate correct url without region', async () => {
     component.example = exampleKey;
     component.region = undefined;
+    await waitForTabsLoad();
     const url = component.generateUrl('a.b.ts');
     expect(url).toBe(exampleBasePath + '/a.b-ts.html');
-  }));
+  });
 
-  it('should print an error message about incorrect file type', waitForAsync(() => {
+  it('should print an error message about incorrect file type', async () => {
     spyOn(console, 'error');
     component.example = exampleKey;
     component.file = 'file.bad';
+    await waitForTabsLoad();
     component.selectCorrectTab();
 
     expect(console.error).toHaveBeenCalledWith(`Could not find tab for file extension: "bad".`);
-  }));
+  });
 
-  it('should set and return example properly', waitForAsync(() => {
+  it('should set and return example properly', async () => {
     component.example = exampleKey;
+    await waitForTabsLoad();
     const data = component.exampleData;
     expect(data).toEqual(EXAMPLE_COMPONENTS[exampleKey]);
-  }));
+  });
 
-  it('should print an error message about missing example', waitForAsync(() => {
+  it('should print an error message about missing example', async () => {
     spyOn(console, 'error');
     component.example = 'foobar';
+    await waitForTabsLoad();
     expect(console.error).toHaveBeenCalled();
     expect(console.error).toHaveBeenCalledWith('Could not find example: foobar');
-  }));
+  });
 
-  it('should return docs-content path for example based on extension', waitForAsync(() => {
+  it('should return docs-content path for example based on extension', async () => {
     // set example
     component.example = exampleKey;
+    await waitForTabsLoad();
 
     // get example file path for each extension
     const extensions = ['ts', 'css', 'html'];
@@ -138,16 +149,17 @@ describe('ExampleViewer', () => {
 
       expect(actual).toEqual(expected);
     });
-  }));
+  });
 
   describe('view-source tab group', () => {
-    it('should only render HTML, TS and CSS files if no additional files are specified', () => {
+    it('should only render HTML, TS and CSS files if no additional files are specified', async () => {
       component.example = exampleKey;
+      await waitForTabsLoad();
 
       expect(component._getExampleTabNames()).toEqual(['HTML', 'TS', 'CSS']);
     });
 
-    it('should be able to render additional files', () => {
+    it('should be able to render additional files', async () => {
       EXAMPLE_COMPONENTS['additional-files'] = {
         ...EXAMPLE_COMPONENTS[exampleKey],
         files: [
@@ -160,6 +172,7 @@ describe('ExampleViewer', () => {
       };
 
       component.example = 'additional-files';
+      await waitForTabsLoad();
 
       expect(component._getExampleTabNames()).toEqual([
         'HTML',
@@ -170,65 +183,18 @@ describe('ExampleViewer', () => {
       ]);
     });
 
-    it('should be possible for example to not have CSS or HTML files', () => {
+    it('should be possible for example to not have CSS or HTML files', async () => {
       EXAMPLE_COMPONENTS['additional-files'] = {
         ...EXAMPLE_COMPONENTS[exampleKey],
         files: ['additional-files-example.ts'],
       };
 
       component.example = 'additional-files';
+      await waitForTabsLoad();
 
       expect(component._getExampleTabNames()).toEqual(['TS']);
     });
   });
-
-  describe('copy button', () => {
-    let button: HTMLElement;
-
-    beforeEach(() => {
-      // Open source view
-      component.example = exampleKey;
-      component.view = 'full';
-      fixture.detectChanges();
-
-      for (const url of Object.keys(FAKE_DOCS)) {
-        http.expectOne(url).flush(FAKE_DOCS[url]);
-      }
-
-      // Select button element
-      const btnDe = fixture.debugElement.query(By.css('.docs-example-source-copy'));
-      button = btnDe ? btnDe.nativeElement : null;
-    });
-
-    it('should call clipboard service when clicked', () => {
-      const clipboardService = TestBed.inject(Clipboard);
-      const spy = spyOn(clipboardService, 'copy');
-      expect(spy.calls.count()).toBe(0, 'before click');
-      button.click();
-      expect(spy.calls.count()).toBe(1, 'after click');
-      expect(spy.calls.argsFor(0)[0]).toBe('my docs page', 'click content');
-    });
-
-    it('should display a message when copy succeeds', () => {
-      const snackBar: MatSnackBar = TestBed.inject(MatSnackBar);
-      const clipboardService = TestBed.inject(Clipboard);
-      spyOn(snackBar, 'open');
-      spyOn(clipboardService, 'copy').and.returnValue(true);
-      button.click();
-      expect(snackBar.open).toHaveBeenCalledWith('Code copied', '', {duration: 2500});
-    });
-
-    it('should display an error when copy fails', () => {
-      const snackBar: MatSnackBar = TestBed.inject(MatSnackBar);
-      const clipboardService = TestBed.inject(Clipboard);
-      spyOn(snackBar, 'open');
-      spyOn(clipboardService, 'copy').and.returnValue(false);
-      button.click();
-      expect(snackBar.open).toHaveBeenCalledWith('Copy failed. Please try again!', '', {
-        duration: 2500,
-      });
-    });
-  });
 });
 
 // Create a version of ExampleModule for testing with only one component so that we don't have
@@ -245,10 +211,3 @@ describe('ExampleViewer', () => {
   ],
 })
 class TestExampleModule {}
-
-const FAKE_DOCS: {[key: string]: string} = {
-  [`${exampleBasePath}/autocomplete-overview-example-html.html`]: '<div>my docs page</div>',
-  [`${exampleBasePath}/autocomplete-overview-example-ts.html`]: '<span>const a = 1;</span>',
-  [`${exampleBasePath}/autocomplete-overview-example-css.html`]:
-    '<pre>.class { color: black; }</pre>',
-};

material.angular.io/src/app/shared/documentation-items/documentation-items.ts

@@ -1,8 +1,8 @@
-import {Component, ElementRef, HostBinding, Input, OnInit, Type, viewChildren} from '@angular/core';
+import {Component, ElementRef, inject, Input, OnInit, Type, viewChildren} from '@angular/core';
 import {MatSnackBar} from '@angular/material/snack-bar';
 import {Clipboard} from '@angular/cdk/clipboard';
 
-import {EXAMPLE_COMPONENTS, LiveExample, loadExample} from '@angular/components-examples';
+import {type LiveExample, loadExample} from '@angular/components-examples';
 import {CodeSnippet} from './code-snippet';
 import {normalizePath} from '../normalize-path';
 import {MatTabsModule} from '@angular/material/tabs';
@@ -11,6 +11,7 @@ import {MatIconModule} from '@angular/material/icon';
 import {MatTooltipModule} from '@angular/material/tooltip';
 import {MatButtonModule} from '@angular/material/button';
 import {NgComponentOutlet} from '@angular/common';
+import {DocumentationItems} from '../documentation-items/documentation-items';
 
 export type Views = 'snippet' | 'full' | 'demo';
 
@@ -34,8 +35,15 @@ const preferredExampleFileOrder = ['HTML', 'TS', 'CSS'];
     CodeSnippet,
     NgComponentOutlet,
   ],
+  host: {
+    '[attr.id]': 'example',
+  },
 })
 export class ExampleViewer implements OnInit {
+  private readonly _snackbar = inject(MatSnackBar);
+  private readonly _clipboard = inject(Clipboard);
+  private readonly _elementRef = inject<ElementRef<HTMLElement>>(ElementRef);
+  private readonly _docsItems = inject(DocumentationItems);
   readonly snippet = viewChildren(CodeSnippet);
 
   /** The tab to jump to when expanding from snippet view. */
@@ -60,21 +68,14 @@ export class ExampleViewer implements OnInit {
   @Input() showCompactToggle = false;
 
   /** String key of the currently displayed example. */
-  @HostBinding('attr.id')
   @Input()
   get example() {
     return this._example;
   }
   set example(exampleName: string | undefined) {
-    if (exampleName && exampleName !== this._example && EXAMPLE_COMPONENTS[exampleName]) {
+    if (exampleName && exampleName !== this._example) {
       this._example = exampleName;
-      this.exampleData = EXAMPLE_COMPONENTS[exampleName];
-      this._generateExampleTabs();
-      this._loadExampleComponent().catch(error =>
-        console.error(`Could not load example '${exampleName}': ${error}`),
-      );
-    } else {
-      console.error(`Could not find example: ${exampleName}`);
+      this._exampleChanged(exampleName);
     }
   }
   private _example: string | undefined;
@@ -85,12 +86,6 @@ export class ExampleViewer implements OnInit {
   /** Name of file to display in compact view. */
   @Input() file?: string;
 
-  constructor(
-    private readonly snackbar: MatSnackBar,
-    private readonly clipboard: Clipboard,
-    private readonly elementRef: ElementRef<HTMLElement>,
-  ) {}
-
   ngOnInit() {
     if (this.file) {
       this.fileUrl = this.generateUrl(this.file);
@@ -132,10 +127,10 @@ export class ExampleViewer implements OnInit {
 
   copySource(snippets: readonly CodeSnippet[], selectedIndex: number = 0) {
     const text = snippets[selectedIndex].viewer().textContent || '';
-    if (this.clipboard.copy(text)) {
-      this.snackbar.open('Code copied', '', {duration: 2500});
+    if (this._clipboard.copy(text)) {
+      this._snackbar.open('Code copied', '', {duration: 2500});
     } else {
-      this.snackbar.open('Copy failed. Please try again!', '', {duration: 2500});
+      this._snackbar.open('Copy failed. Please try again!', '', {duration: 2500});
     }
   }
 
@@ -179,28 +174,39 @@ export class ExampleViewer implements OnInit {
   _copyLink() {
     // Reconstruct the URL using `origin + pathname` so we drop any pre-existing hash.
     const fullUrl = location.origin + location.pathname + '#' + this._example;
+    const copySuccessful = this._clipboard.copy(fullUrl);
 
-    if (this.clipboard.copy(fullUrl)) {
-      this.snackbar.open('Link copied', '', {duration: 2500});
-    } else {
-      this.snackbar.open('Link copy failed. Please try again!', '', {duration: 2500});
-    }
+    this._snackbar.open(
+      copySuccessful ? 'Link copied' : 'Link copy failed. Please try again!',
+      '',
+      {duration: 2500},
+    );
   }
 
-  /** Loads the component and module factory for the currently selected example. */
-  private async _loadExampleComponent() {
-    if (this._example != null) {
-      const {componentName} = EXAMPLE_COMPONENTS[this._example];
+  private async _exampleChanged(name: string) {
+    const examples = (await this._docsItems.getData()).examples;
+    this.exampleData = examples[name];
+
+    if (!this.exampleData) {
+      console.error(`Could not find example: ${name}`);
+      return;
+    }
+
+    try {
+      this._generateExampleTabs();
+
       // Lazily loads the example package that contains the requested example.
-      const moduleExports = await loadExample(this._example);
-      this._exampleComponentType = moduleExports[componentName];
+      const moduleExports = await loadExample(name);
+      this._exampleComponentType = moduleExports[examples[name].componentName];
 
       // Since the data is loaded asynchronously, we can't count on the native behavior
       // that scrolls the element into view automatically. We do it ourselves while giving
       // the page some time to render.
       if (typeof location !== 'undefined' && location.hash.slice(1) === this._example) {
-        setTimeout(() => this.elementRef.nativeElement.scrollIntoView(), 300);
+        setTimeout(() => this._elementRef.nativeElement.scrollIntoView(), 300);
       }
+    } catch (e) {
+      console.error(`Could not load example '${name}': ${e}`);
     }
   }
 

material.angular.io/src/app/shared/example-viewer/example-viewer.spec.ts

@@ -1,6 +1,6 @@
 import {HttpClient} from '@angular/common/http';
 import {Injectable, NgZone} from '@angular/core';
-import {EXAMPLE_COMPONENTS, ExampleData} from '@angular/components-examples';
+import type {ExampleData} from '@angular/components-examples';
 import {Observable, firstValueFrom} from 'rxjs';
 import {shareReplay} from 'rxjs/operators';
 
@@ -123,9 +123,10 @@ export class StackBlitzWriter {
     exampleId: string,
     isTest: boolean,
   ): Promise<FileDictionary> {
+    const examples = await import('@angular/components-examples');
     const result: FileDictionary = {};
     const tasks: Promise<unknown>[] = [];
-    const liveExample = EXAMPLE_COMPONENTS[exampleId];
+    const liveExample = examples.EXAMPLE_COMPONENTS[exampleId];
     const exampleBaseContentPath = `${DOCS_CONTENT_PATH}/${liveExample.importPath}/${exampleId}/`;
 
     for (const relativeFilePath of TEMPLATE_FILES) {
@@ -174,12 +175,6 @@ export class StackBlitzWriter {
     return firstValueFrom(stream);
   }
 
-  /**
-   * The StackBlitz template assets contain placeholder names for the examples:
-   * "<material-docs-example>" and "MaterialDocsExample".
-   * This will replace those placeholders with the names from the example metadata,
-   * e.g. "<basic-button-example>" and "BasicButtonExample"
-   */
   private _replaceExamplePlaceholders(
     data: ExampleData,
     fileName: string,