refactor(material-angular-io): use standalone imports instead of modules

Removes (almost) all of our `@NgModule` usage in the docs site by replacing their usages with standalone imports.

Author: crisbeto

material.angular.io/scenes/src/app/app.component.spec.ts

@@ -1,13 +1,13 @@
-import {TestBed, waitForAsync} from '@angular/core/testing';
-import {RouterTestingModule} from '@angular/router/testing';
+import {TestBed} from '@angular/core/testing';
 import {AppComponent} from './app.component';
+import {provideRouter} from '@angular/router';
 
 describe('AppComponent', () => {
-  beforeEach(waitForAsync(() => {
+  beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [RouterTestingModule, AppComponent],
-    }).compileComponents();
-  }));
+      providers: [provideRouter([])],
+    });
+  });
 
   it('should create the app', () => {
     const fixture = TestBed.createComponent(AppComponent);

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

@@ -1,6 +1,5 @@
-import {Component, NgModule, OnDestroy, OnInit} from '@angular/core';
-import {MatCardModule} from '@angular/material/card';
-import {ActivatedRoute, RouterModule, RouterLink} from '@angular/router';
+import {Component, OnDestroy, OnInit} from '@angular/core';
+import {ActivatedRoute, RouterLink} from '@angular/router';
 import {MatRipple} from '@angular/material/core';
 import {combineLatest, Subscription} from 'rxjs';
 
@@ -52,9 +51,3 @@ export class ComponentCategoryList implements OnInit, OnDestroy {
     }
   }
 }
-
-@NgModule({
-  imports: [MatCardModule, RouterModule, ComponentCategoryList],
-  exports: [ComponentCategoryList],
-})
-export class ComponentCategoryListModule {}

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

@@ -1,16 +1,9 @@
-import {waitForAsync, ComponentFixture, TestBed} from '@angular/core/testing';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {ComponentPageHeader} from './component-page-header';
-import {DocsAppTestingModule} from '../../testing/testing-module';
 
 describe('ComponentPageHeader', () => {
   let fixture: ComponentFixture<ComponentPageHeader>;
 
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-      imports: [DocsAppTestingModule],
-    }).compileComponents();
-  }));
-
   beforeEach(() => {
     fixture = TestBed.createComponent(ComponentPageHeader);
   });

material.angular.io/src/app/pages/component-page-header/component-page-header.ts

@@ -1,14 +1,14 @@
 import {Component, EventEmitter, Output} from '@angular/core';
 
-import {MatButtonModule} from '@angular/material/button';
-import {MatIconModule} from '@angular/material/icon';
+import {MatButton} from '@angular/material/button';
+import {MatIcon} from '@angular/material/icon';
 
 @Component({
   selector: 'component-page-header',
   templateUrl: './component-page-header.html',
   styleUrls: ['./component-page-header.scss'],
   standalone: true,
-  imports: [MatButtonModule, MatIconModule],
+  imports: [MatButton, MatIcon],
 })
 export class ComponentPageHeader {
   @Output() toggleSidenav = new EventEmitter<void>();

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

@@ -1,20 +1,18 @@
-import {waitForAsync, ComponentFixture, TestBed} from '@angular/core/testing';
+import {ComponentFixture, TestBed, waitForAsync} from '@angular/core/testing';
 import {take} from 'rxjs/operators';
-import {ComponentSidenav, ComponentSidenavModule} from './component-sidenav';
-import {DocsAppTestingModule} from '../../testing/testing-module';
+import {ComponentSidenav} from './component-sidenav';
 import {MatSidenav} from '@angular/material/sidenav';
+import {provideRouter} from '@angular/router';
 
 describe('ComponentSidenav', () => {
   let fixture: ComponentFixture<ComponentSidenav>;
   let component: ComponentSidenav;
 
-  beforeEach(waitForAsync(() => {
+  beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [ComponentSidenavModule, DocsAppTestingModule],
-    }).compileComponents();
-  }));
+      providers: [provideRouter([])],
+    });
 
-  beforeEach(() => {
     fixture = TestBed.createComponent(ComponentSidenav);
     component = fixture.componentInstance;
     fixture.detectChanges();

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

@@ -10,13 +10,10 @@ import {
   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';
-import {FormsModule} from '@angular/forms';
-import {MatIconModule} from '@angular/material/icon';
-import {MatListModule} from '@angular/material/list';
-import {MatSidenav, MatSidenavModule} from '@angular/material/sidenav';
+import {MatListItem, MatNavList} from '@angular/material/list';
+import {MatSidenav, MatSidenavContainer} from '@angular/material/sidenav';
 import {
   ActivatedRoute,
   Params,
@@ -29,23 +26,18 @@ import {
 import {combineLatest, Observable, Subscription} from 'rxjs';
 import {map, switchMap} from 'rxjs/operators';
 
-import {DocViewerModule} from '../../shared/doc-viewer/doc-viewer-module';
 import {DocumentationItems} from '../../shared/documentation-items/documentation-items';
 import {Footer} from '../../shared/footer/footer';
 
 import {NavigationFocusService} from '../../shared/navigation-focus/navigation-focus.service';
 
-import {
-  ComponentCategoryList,
-  ComponentCategoryListModule,
-} from '../component-category-list/component-category-list';
+import {ComponentCategoryList} from '../component-category-list/component-category-list';
 import {ComponentPageHeader} from '../component-page-header/component-page-header';
 import {
   ComponentApi,
   ComponentExamples,
   ComponentOverview,
   ComponentViewer,
-  ComponentViewerModule,
 } from '../component-viewer/component-viewer';
 import {ComponentStyling} from '../component-viewer/component-styling';
 
@@ -66,7 +58,8 @@ const SMALL_WIDTH_BREAKPOINT = 959;
   encapsulation: ViewEncapsulation.None,
   standalone: true,
   imports: [
-    MatSidenavModule,
+    MatSidenav,
+    MatSidenavContainer,
     forwardRef(() => ComponentNav),
     ComponentPageHeader,
     RouterOutlet,
@@ -126,7 +119,7 @@ export class ComponentSidenav implements OnInit, OnDestroy {
   selector: 'app-component-nav',
   templateUrl: './component-nav.html',
   standalone: true,
-  imports: [MatListModule, RouterLinkActive, RouterLink, AsyncPipe],
+  imports: [MatNavList, MatListItem, RouterLinkActive, RouterLink, AsyncPipe],
 })
 export class ComponentNav {
   private _docItems = inject(DocumentationItems);
@@ -167,20 +160,6 @@ const routes: Routes = [
 ];
 
 @NgModule({
-  imports: [
-    MatSidenavModule,
-    MatListModule,
-    RouterModule,
-    ComponentCategoryListModule,
-    ComponentViewerModule,
-    DocViewerModule,
-    FormsModule,
-    CdkAccordionModule,
-    MatIconModule,
-    RouterModule.forChild(routes),
-    ComponentSidenav,
-    ComponentNav,
-  ],
-  exports: [ComponentSidenav],
+  imports: [RouterModule.forChild(routes)],
 })
 export class ComponentSidenavModule {}

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

@@ -4,40 +4,39 @@ import {
   ChangeDetectorRef,
   Component,
   Directive,
-  NgModule,
   OnDestroy,
   OnInit,
   ViewEncapsulation,
   viewChild,
   viewChildren,
 } from '@angular/core';
-import {MatTabsModule} from '@angular/material/tabs';
-import {
-  ActivatedRoute,
-  Router,
-  RouterModule,
-  RouterLinkActive,
-  RouterLink,
-  RouterOutlet,
-} from '@angular/router';
+import {ActivatedRoute, Router, RouterLinkActive, RouterLink, RouterOutlet} from '@angular/router';
 import {combineLatest, Observable, ReplaySubject, Subject} from 'rxjs';
 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';
 
 import {ComponentPageTitle} from '../page-title/page-title';
 import {NavigationFocus} from '../../shared/navigation-focus/navigation-focus';
 import {DocViewer} from '../../shared/doc-viewer/doc-viewer';
 import {ExampleViewer} from '../../shared/example-viewer/example-viewer';
+import {MatTabLink, MatTabNav, MatTabNavPanel} from '@angular/material/tabs';
 
 @Component({
   selector: 'app-component-viewer',
   templateUrl: './component-viewer.html',
   styleUrls: ['./component-viewer.scss'],
   encapsulation: ViewEncapsulation.None,
   standalone: true,
-  imports: [MatTabsModule, NavigationFocus, RouterLinkActive, RouterLink, RouterOutlet],
+  imports: [
+    MatTabNav,
+    MatTabLink,
+    MatTabNavPanel,
+    NavigationFocus,
+    RouterLinkActive,
+    RouterLink,
+    RouterOutlet,
+  ],
 })
 export class ComponentViewer implements OnDestroy {
   componentDocItem = new ReplaySubject<DocItem>(1);
@@ -194,17 +193,3 @@ export class ComponentApi extends ComponentBaseView {
   imports: [ExampleViewer, AsyncPipe],
 })
 export class ComponentExamples extends ComponentBaseView {}
-
-@NgModule({
-  imports: [
-    MatTabsModule,
-    RouterModule,
-    DocViewerModule,
-    ComponentViewer,
-    ComponentOverview,
-    ComponentApi,
-    ComponentExamples,
-  ],
-  exports: [ComponentViewer],
-})
-export class ComponentViewerModule {}

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

@@ -1,9 +1,9 @@
 import {ChangeDetectionStrategy, Component, computed, input, signal} from '@angular/core';
 import {TitleCasePipe} from '@angular/common';
-import {MatButtonModule} from '@angular/material/button';
-import {MatFormFieldModule} from '@angular/material/form-field';
-import {MatInputModule} from '@angular/material/input';
-import {MatSelectModule} from '@angular/material/select';
+import {MatButton} from '@angular/material/button';
+import {MatFormField, MatLabel} from '@angular/material/form-field';
+import {MatInput} from '@angular/material/input';
+import {MatOption, MatSelect} from '@angular/material/select';
 import {TokenName} from './token-name';
 
 type TokenType = 'base' | 'color' | 'typography' | 'density';
@@ -21,12 +21,13 @@ export interface Token {
   templateUrl: './token-table.html',
   styleUrl: './token-table.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: true,
   imports: [
-    MatButtonModule,
-    MatFormFieldModule,
-    MatInputModule,
-    MatSelectModule,
+    MatButton,
+    MatFormField,
+    MatLabel,
+    MatInput,
+    MatSelect,
+    MatOption,
     TokenName,
     TitleCasePipe,
   ],

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

@@ -1,16 +1,16 @@
-import {waitForAsync, ComponentFixture, TestBed} from '@angular/core/testing';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {GuideList} from './guide-list';
-import {DocsAppTestingModule} from '../../testing/testing-module';
+import {provideRouter} from '@angular/router';
 
 describe('GuideList', () => {
   let fixture: ComponentFixture<GuideList>;
 
-  beforeEach(waitForAsync(() => {
+  beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [DocsAppTestingModule],
-    }).compileComponents();
+      providers: [provideRouter([])],
+    });
     fixture = TestBed.createComponent(GuideList);
-  }));
+  });
 
   it('should display a link for each item in guide items', () => {
     const component = fixture.componentInstance;

material.angular.io/src/app/pages/guide-list/guide-list.ts

@@ -1,22 +1,22 @@
-import {Component, HostBinding, OnInit} from '@angular/core';
+import {Component, OnInit} from '@angular/core';
 import {GuideItems} from '../../shared/guide-items/guide-items';
 import {RouterLink} from '@angular/router';
 import {Footer} from '../../shared/footer/footer';
 import {NavigationFocus} from '../../shared/navigation-focus/navigation-focus';
 import {ComponentPageTitle} from '../page-title/page-title';
-import {MatCardModule} from '@angular/material/card';
+import {MatCard, MatCardContent, MatCardTitle} from '@angular/material/card';
 import {MatRipple} from '@angular/material/core';
 
 @Component({
   selector: 'app-guides',
   templateUrl: './guide-list.html',
   styleUrls: ['./guide-list.scss'],
-  standalone: true,
-  imports: [NavigationFocus, RouterLink, MatCardModule, Footer, MatRipple],
+  imports: [NavigationFocus, RouterLink, MatCard, MatCardTitle, MatCardContent, Footer, MatRipple],
+  host: {
+    'class': 'main-content',
+  },
 })
 export class GuideList implements OnInit {
-  @HostBinding('class.main-content') readonly mainContentClass = true;
-
   constructor(
     public guideItems: GuideItems,
     public _componentPageTitle: ComponentPageTitle,