Skip to content

Commit 57fbe7f

Browse files
crisbetocrisbeto
committed
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.
1 parent 30673c6 commit 57fbe7f

38 files changed

+223
-339
lines changed

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
1-
import {TestBed, waitForAsync} from '@angular/core/testing';
2-
import {RouterTestingModule} from '@angular/router/testing';
1+
import {TestBed} from '@angular/core/testing';
32
import {AppComponent} from './app.component';
3+
import {provideRouter} from '@angular/router';
44

55
describe('AppComponent', () => {
6-
beforeEach(waitForAsync(() => {
6+
beforeEach(() => {
77
TestBed.configureTestingModule({
8-
imports: [RouterTestingModule, AppComponent],
9-
}).compileComponents();
10-
}));
8+
providers: [provideRouter([])],
9+
});
10+
});
1111

1212
it('should create the app', () => {
1313
const fixture = TestBed.createComponent(AppComponent);

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

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
1-
import {Component, NgModule, OnDestroy, OnInit} from '@angular/core';
2-
import {MatCardModule} from '@angular/material/card';
3-
import {ActivatedRoute, RouterModule, RouterLink} from '@angular/router';
1+
import {Component, OnDestroy, OnInit} from '@angular/core';
2+
import {ActivatedRoute, RouterLink} from '@angular/router';
43
import {MatRipple} from '@angular/material/core';
54
import {combineLatest, Subscription} from 'rxjs';
65

@@ -52,9 +51,3 @@ export class ComponentCategoryList implements OnInit, OnDestroy {
5251
}
5352
}
5453
}
55-
56-
@NgModule({
57-
imports: [MatCardModule, RouterModule, ComponentCategoryList],
58-
exports: [ComponentCategoryList],
59-
})
60-
export class ComponentCategoryListModule {}

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

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,9 @@
1-
import {waitForAsync, ComponentFixture, TestBed} from '@angular/core/testing';
1+
import {ComponentFixture, TestBed} from '@angular/core/testing';
22
import {ComponentPageHeader} from './component-page-header';
3-
import {DocsAppTestingModule} from '../../testing/testing-module';
43

54
describe('ComponentPageHeader', () => {
65
let fixture: ComponentFixture<ComponentPageHeader>;
76

8-
beforeEach(waitForAsync(() => {
9-
TestBed.configureTestingModule({
10-
imports: [DocsAppTestingModule],
11-
}).compileComponents();
12-
}));
13-
147
beforeEach(() => {
158
fixture = TestBed.createComponent(ComponentPageHeader);
169
});

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
import {Component, EventEmitter, Output} from '@angular/core';
22

3-
import {MatButtonModule} from '@angular/material/button';
4-
import {MatIconModule} from '@angular/material/icon';
3+
import {MatButton} from '@angular/material/button';
4+
import {MatIcon} from '@angular/material/icon';
55

66
@Component({
77
selector: 'component-page-header',
88
templateUrl: './component-page-header.html',
99
styleUrls: ['./component-page-header.scss'],
1010
standalone: true,
11-
imports: [MatButtonModule, MatIconModule],
11+
imports: [MatButton, MatIcon],
1212
})
1313
export class ComponentPageHeader {
1414
@Output() toggleSidenav = new EventEmitter<void>();

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

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,18 @@
1-
import {waitForAsync, ComponentFixture, TestBed} from '@angular/core/testing';
1+
import {ComponentFixture, TestBed, waitForAsync} from '@angular/core/testing';
22
import {take} from 'rxjs/operators';
3-
import {ComponentSidenav, ComponentSidenavModule} from './component-sidenav';
4-
import {DocsAppTestingModule} from '../../testing/testing-module';
3+
import {ComponentSidenav} from './component-sidenav';
54
import {MatSidenav} from '@angular/material/sidenav';
5+
import {provideRouter} from '@angular/router';
66

77
describe('ComponentSidenav', () => {
88
let fixture: ComponentFixture<ComponentSidenav>;
99
let component: ComponentSidenav;
1010

11-
beforeEach(waitForAsync(() => {
11+
beforeEach(() => {
1212
TestBed.configureTestingModule({
13-
imports: [ComponentSidenavModule, DocsAppTestingModule],
14-
}).compileComponents();
15-
}));
13+
providers: [provideRouter([])],
14+
});
1615

17-
beforeEach(() => {
1816
fixture = TestBed.createComponent(ComponentSidenav);
1917
component = fixture.componentInstance;
2018
fixture.detectChanges();

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

Lines changed: 7 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -10,13 +10,10 @@ import {
1010
viewChild,
1111
} from '@angular/core';
1212
import {toObservable} from '@angular/core/rxjs-interop';
13-
import {CdkAccordionModule} from '@angular/cdk/accordion';
1413
import {BreakpointObserver} from '@angular/cdk/layout';
1514
import {AsyncPipe} from '@angular/common';
16-
import {FormsModule} from '@angular/forms';
17-
import {MatIconModule} from '@angular/material/icon';
18-
import {MatListModule} from '@angular/material/list';
19-
import {MatSidenav, MatSidenavModule} from '@angular/material/sidenav';
15+
import {MatListItem, MatNavList} from '@angular/material/list';
16+
import {MatSidenav, MatSidenavContainer} from '@angular/material/sidenav';
2017
import {
2118
ActivatedRoute,
2219
Params,
@@ -29,23 +26,18 @@ import {
2926
import {combineLatest, Observable, Subscription} from 'rxjs';
3027
import {map, switchMap} from 'rxjs/operators';
3128

32-
import {DocViewerModule} from '../../shared/doc-viewer/doc-viewer-module';
3329
import {DocumentationItems} from '../../shared/documentation-items/documentation-items';
3430
import {Footer} from '../../shared/footer/footer';
3531

3632
import {NavigationFocusService} from '../../shared/navigation-focus/navigation-focus.service';
3733

38-
import {
39-
ComponentCategoryList,
40-
ComponentCategoryListModule,
41-
} from '../component-category-list/component-category-list';
34+
import {ComponentCategoryList} from '../component-category-list/component-category-list';
4235
import {ComponentPageHeader} from '../component-page-header/component-page-header';
4336
import {
4437
ComponentApi,
4538
ComponentExamples,
4639
ComponentOverview,
4740
ComponentViewer,
48-
ComponentViewerModule,
4941
} from '../component-viewer/component-viewer';
5042
import {ComponentStyling} from '../component-viewer/component-styling';
5143

@@ -66,7 +58,8 @@ const SMALL_WIDTH_BREAKPOINT = 959;
6658
encapsulation: ViewEncapsulation.None,
6759
standalone: true,
6860
imports: [
69-
MatSidenavModule,
61+
MatSidenav,
62+
MatSidenavContainer,
7063
forwardRef(() => ComponentNav),
7164
ComponentPageHeader,
7265
RouterOutlet,
@@ -126,7 +119,7 @@ export class ComponentSidenav implements OnInit, OnDestroy {
126119
selector: 'app-component-nav',
127120
templateUrl: './component-nav.html',
128121
standalone: true,
129-
imports: [MatListModule, RouterLinkActive, RouterLink, AsyncPipe],
122+
imports: [MatNavList, MatListItem, RouterLinkActive, RouterLink, AsyncPipe],
130123
})
131124
export class ComponentNav {
132125
private _docItems = inject(DocumentationItems);
@@ -167,20 +160,6 @@ const routes: Routes = [
167160
];
168161

169162
@NgModule({
170-
imports: [
171-
MatSidenavModule,
172-
MatListModule,
173-
RouterModule,
174-
ComponentCategoryListModule,
175-
ComponentViewerModule,
176-
DocViewerModule,
177-
FormsModule,
178-
CdkAccordionModule,
179-
MatIconModule,
180-
RouterModule.forChild(routes),
181-
ComponentSidenav,
182-
ComponentNav,
183-
],
184-
exports: [ComponentSidenav],
163+
imports: [RouterModule.forChild(routes)],
185164
})
186165
export class ComponentSidenavModule {}

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

Lines changed: 11 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -4,40 +4,39 @@ import {
44
ChangeDetectorRef,
55
Component,
66
Directive,
7-
NgModule,
87
OnDestroy,
98
OnInit,
109
ViewEncapsulation,
1110
viewChild,
1211
viewChildren,
1312
} from '@angular/core';
14-
import {MatTabsModule} from '@angular/material/tabs';
15-
import {
16-
ActivatedRoute,
17-
Router,
18-
RouterModule,
19-
RouterLinkActive,
20-
RouterLink,
21-
RouterOutlet,
22-
} from '@angular/router';
13+
import {ActivatedRoute, Router, RouterLinkActive, RouterLink, RouterOutlet} from '@angular/router';
2314
import {combineLatest, Observable, ReplaySubject, Subject} from 'rxjs';
2415
import {map, skip, switchMap, takeUntil} from 'rxjs/operators';
25-
import {DocViewerModule} from '../../shared/doc-viewer/doc-viewer-module';
2616
import {DocItem, DocumentationItems} from '../../shared/documentation-items/documentation-items';
2717
import {TableOfContents} from '../../shared/table-of-contents/table-of-contents';
2818

2919
import {ComponentPageTitle} from '../page-title/page-title';
3020
import {NavigationFocus} from '../../shared/navigation-focus/navigation-focus';
3121
import {DocViewer} from '../../shared/doc-viewer/doc-viewer';
3222
import {ExampleViewer} from '../../shared/example-viewer/example-viewer';
23+
import {MatTabLink, MatTabNav, MatTabNavPanel} from '@angular/material/tabs';
3324

3425
@Component({
3526
selector: 'app-component-viewer',
3627
templateUrl: './component-viewer.html',
3728
styleUrls: ['./component-viewer.scss'],
3829
encapsulation: ViewEncapsulation.None,
3930
standalone: true,
40-
imports: [MatTabsModule, NavigationFocus, RouterLinkActive, RouterLink, RouterOutlet],
31+
imports: [
32+
MatTabNav,
33+
MatTabLink,
34+
MatTabNavPanel,
35+
NavigationFocus,
36+
RouterLinkActive,
37+
RouterLink,
38+
RouterOutlet,
39+
],
4140
})
4241
export class ComponentViewer implements OnDestroy {
4342
componentDocItem = new ReplaySubject<DocItem>(1);
@@ -194,17 +193,3 @@ export class ComponentApi extends ComponentBaseView {
194193
imports: [ExampleViewer, AsyncPipe],
195194
})
196195
export class ComponentExamples extends ComponentBaseView {}
197-
198-
@NgModule({
199-
imports: [
200-
MatTabsModule,
201-
RouterModule,
202-
DocViewerModule,
203-
ComponentViewer,
204-
ComponentOverview,
205-
ComponentApi,
206-
ComponentExamples,
207-
],
208-
exports: [ComponentViewer],
209-
})
210-
export class ComponentViewerModule {}

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

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import {ChangeDetectionStrategy, Component, computed, input, signal} from '@angular/core';
22
import {TitleCasePipe} from '@angular/common';
3-
import {MatButtonModule} from '@angular/material/button';
4-
import {MatFormFieldModule} from '@angular/material/form-field';
5-
import {MatInputModule} from '@angular/material/input';
6-
import {MatSelectModule} from '@angular/material/select';
3+
import {MatButton} from '@angular/material/button';
4+
import {MatFormField, MatLabel} from '@angular/material/form-field';
5+
import {MatInput} from '@angular/material/input';
6+
import {MatOption, MatSelect} from '@angular/material/select';
77
import {TokenName} from './token-name';
88

99
type TokenType = 'base' | 'color' | 'typography' | 'density';
@@ -21,12 +21,13 @@ export interface Token {
2121
templateUrl: './token-table.html',
2222
styleUrl: './token-table.scss',
2323
changeDetection: ChangeDetectionStrategy.OnPush,
24-
standalone: true,
2524
imports: [
26-
MatButtonModule,
27-
MatFormFieldModule,
28-
MatInputModule,
29-
MatSelectModule,
25+
MatButton,
26+
MatFormField,
27+
MatLabel,
28+
MatInput,
29+
MatSelect,
30+
MatOption,
3031
TokenName,
3132
TitleCasePipe,
3233
],

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
1-
import {waitForAsync, ComponentFixture, TestBed} from '@angular/core/testing';
1+
import {ComponentFixture, TestBed} from '@angular/core/testing';
22
import {GuideList} from './guide-list';
3-
import {DocsAppTestingModule} from '../../testing/testing-module';
3+
import {provideRouter} from '@angular/router';
44

55
describe('GuideList', () => {
66
let fixture: ComponentFixture<GuideList>;
77

8-
beforeEach(waitForAsync(() => {
8+
beforeEach(() => {
99
TestBed.configureTestingModule({
10-
imports: [DocsAppTestingModule],
11-
}).compileComponents();
10+
providers: [provideRouter([])],
11+
});
1212
fixture = TestBed.createComponent(GuideList);
13-
}));
13+
});
1414

1515
it('should display a link for each item in guide items', () => {
1616
const component = fixture.componentInstance;

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,22 @@
1-
import {Component, HostBinding, OnInit} from '@angular/core';
1+
import {Component, OnInit} from '@angular/core';
22
import {GuideItems} from '../../shared/guide-items/guide-items';
33
import {RouterLink} from '@angular/router';
44
import {Footer} from '../../shared/footer/footer';
55
import {NavigationFocus} from '../../shared/navigation-focus/navigation-focus';
66
import {ComponentPageTitle} from '../page-title/page-title';
7-
import {MatCardModule} from '@angular/material/card';
7+
import {MatCard, MatCardContent, MatCardTitle} from '@angular/material/card';
88
import {MatRipple} from '@angular/material/core';
99

1010
@Component({
1111
selector: 'app-guides',
1212
templateUrl: './guide-list.html',
1313
styleUrls: ['./guide-list.scss'],
14-
standalone: true,
15-
imports: [NavigationFocus, RouterLink, MatCardModule, Footer, MatRipple],
14+
imports: [NavigationFocus, RouterLink, MatCard, MatCardTitle, MatCardContent, Footer, MatRipple],
15+
host: {
16+
'class': 'main-content',
17+
},
1618
})
1719
export class GuideList implements OnInit {
18-
@HostBinding('class.main-content') readonly mainContentClass = true;
19-
2020
constructor(
2121
public guideItems: GuideItems,
2222
public _componentPageTitle: ComponentPageTitle,

0 commit comments

Comments
 (0)