Skip to content

Commit 8bb6cfa

Browse files
crisbetommalerba
authored andcommitted
fix(material-experimental/mdc-snack-bar): error during server-side rendering (#19922)
Fixes an error that the MDC snack bar throws during server-side rendering, because MDC is using some browser APIs. Also sets up SSR testing for the new module.
1 parent 9f8683a commit 8bb6cfa

File tree

2 files changed

+12
-2
lines changed

2 files changed

+12
-2
lines changed

src/material-experimental/mdc-snack-bar/snack-bar-container.ts

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ import {
2525
} from '@angular/core';
2626
import {MatSnackBarConfig, _SnackBarContainer} from '@angular/material/snack-bar';
2727
import {MDCSnackbarAdapter, MDCSnackbarFoundation} from '@material/snackbar';
28+
import {Platform} from '@angular/cdk/platform';
2829
import {Observable, Subject} from 'rxjs';
2930

3031
/**
@@ -101,7 +102,8 @@ export class MatSnackBarContainer extends BasePortalOutlet
101102

102103
constructor(
103104
private _elementRef: ElementRef<HTMLElement>,
104-
public snackBarConfig: MatSnackBarConfig) {
105+
public snackBarConfig: MatSnackBarConfig,
106+
private _platform: Platform) {
105107
super();
106108

107109
// Based on the ARIA spec, `alert` and `status` roles have an
@@ -136,7 +138,10 @@ export class MatSnackBarContainer extends BasePortalOutlet
136138
}
137139

138140
enter() {
139-
this._mdcFoundation.open();
141+
// MDC uses some browser APIs that will throw during server-side rendering.
142+
if (this._platform.isBrowser) {
143+
this._mdcFoundation.open();
144+
}
140145
}
141146

142147
exit(): Observable<void> {

src/universal-app/kitchen-sink-mdc/kitchen-sink-mdc.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import {MatSlideToggleModule} from '@angular/material-experimental/mdc-slide-tog
1212
import {MatSliderModule} from '@angular/material-experimental/mdc-slider';
1313
import {MatTabsModule} from '@angular/material-experimental/mdc-tabs';
1414
import {MatIconModule} from '@angular/material/icon';
15+
import {MatSnackBarModule, MatSnackBar} from '@angular/material-experimental/mdc-snack-bar';
1516

1617
@Component({
1718
selector: 'kitchen-sink-mdc',
@@ -35,6 +36,7 @@ export class KitchenSinkMdc {
3536
MatSliderModule,
3637
MatTabsModule,
3738
MatProgressBarModule,
39+
MatSnackBarModule,
3840
],
3941
declarations: [KitchenSinkMdc],
4042
exports: [KitchenSinkMdc],
@@ -47,6 +49,9 @@ export class KitchenSinkMdc {
4749
}]
4850
})
4951
export class KitchenSinkMdcModule {
52+
constructor(snackBar: MatSnackBar) {
53+
snackBar.open('Hello there');
54+
}
5055
}
5156

5257
export function ERROR_HANDLER(error: Error) {

0 commit comments

Comments
 (0)