refactor(material-angular-io): remove remaining modules

Reworks the docs site to remove all remaining `@NgModule` usages.

Author: crisbeto

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

@@ -1,6 +1,5 @@
 import {
   Component,
-  NgModule,
   OnDestroy,
   OnInit,
   ViewEncapsulation,
@@ -17,7 +16,6 @@ import {MatSidenav, MatSidenavContainer} from '@angular/material/sidenav';
 import {
   ActivatedRoute,
   Params,
-  RouterModule,
   Routes,
   RouterOutlet,
   RouterLinkActive,
@@ -133,7 +131,7 @@ export class ComponentNav {
   );
 }
 
-const routes: Routes = [
+export const componentSidenavRoutes: Routes = [
   {
     path: '',
     component: ComponentSidenav,
@@ -159,8 +157,3 @@ const routes: Routes = [
     ],
   },
 ];
-
-@NgModule({
-  imports: [RouterModule.forChild(routes)],
-})
-export class ComponentSidenavModule {}

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

@@ -1,7 +1,7 @@
 import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {Observable} from 'rxjs';
 import {ActivatedRoute, provideRouter} from '@angular/router';
-import {GuideViewer, GuideViewerModule} from './guide-viewer';
+import {GuideViewer} from './guide-viewer';
 import {provideHttpClient} from '@angular/common/http';
 
 const guideItemsId = 'getting-started';
@@ -21,7 +21,6 @@ describe('GuideViewer', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [GuideViewerModule],
       providers: [
         provideRouter([]),
         {provide: ActivatedRoute, useValue: mockActivatedRoute},

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

@@ -1,5 +1,5 @@
-import {Component, NgModule, OnInit, inject} from '@angular/core';
-import {ActivatedRoute, Router, RouterModule, Routes} from '@angular/router';
+import {Component, OnInit, inject} from '@angular/core';
+import {ActivatedRoute, Router} from '@angular/router';
 import {GuideItem, GuideItems} from '../../shared/guide-items/guide-items';
 import {Footer} from '../../shared/footer/footer';
 
@@ -47,10 +47,3 @@ export class GuideViewer implements OnInit {
     }
   }
 }
-
-const routes: Routes = [{path: '', component: GuideViewer}];
-
-@NgModule({
-  imports: [RouterModule.forChild(routes)],
-})
-export class GuideViewerModule {}

material.angular.io/src/app/routes.ts

@@ -27,7 +27,7 @@ export const MATERIAL_DOCS_ROUTES: Routes = [
   {path: 'guide/duplicate-theming-styles', redirectTo: '/guide/theming'},
   {
     path: 'guide/:id',
-    loadChildren: () => import('./pages/guide-viewer').then(m => m.GuideViewerModule),
+    loadComponent: () => import('./pages/guide-viewer').then(m => m.GuideViewer),
   },
   // Needs to be defined before `:section` so it gets picked first when redirecting a missing page.
   {
@@ -38,7 +38,7 @@ export const MATERIAL_DOCS_ROUTES: Routes = [
     path: ':section',
     canActivate: [CanActivateComponentSidenav],
     loadChildren: () =>
-      import('./pages/component-sidenav/component-sidenav').then(m => m.ComponentSidenavModule),
+      import('./pages/component-sidenav/component-sidenav').then(m => m.componentSidenavRoutes),
   },
   {path: '**', redirectTo: '/404'},
 ];

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

@@ -1,14 +1,7 @@
-import {NgModule} from '@angular/core';
 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 {EXAMPLE_COMPONENTS} from '@angular/components-examples';
-import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 import {ExampleViewer} from './example-viewer';
-import {AutocompleteOverviewExample} from '@angular/components-examples/material/autocomplete';
 import {MatTabGroupHarness} from '@angular/material/tabs/testing';
 import {HarnessLoader} from '@angular/cdk/testing';
 import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
@@ -36,7 +29,6 @@ describe('ExampleViewer', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [ReactiveFormsModule, TestExampleModule],
       providers: [provideHttpClient(), provideRouter([])],
     });
 
@@ -195,18 +187,3 @@ describe('ExampleViewer', () => {
     });
   });
 });
-
-// Create a version of ExampleModule for testing with only one component so that we don't have
-// to compile all of the examples for these tests.
-@NgModule({
-  imports: [
-    MatInputModule,
-    MatAutocompleteModule,
-    MatSlideToggleModule,
-    FormsModule,
-    ReactiveFormsModule,
-    NoopAnimationsModule,
-    AutocompleteOverviewExample,
-  ],
-})
-class TestExampleModule {}