Angular 15 - Material 'mat-sidenav' breaks page

[soujam69]

Which @angular/* package(s) are the source of the bug?

Don't known / other

Is this a regression?

Yes

Description

I'm new to Angular and have installed the lastest of everything. I created a new component using the -standalone switch. I've installed Material and imported it in my new component. If I insert mat-sidenav in my html it breaks the page and everything is blank. If i remove the mat-sidenav it works again. Also, 'mat-elevation-z4' does not work either.

Header Info Side Content Main Content

Please provide a link to a minimal reproduction of the bug

No response

Please provide the exception or error you saw

No errors

Please provide the environment you discovered this bug in (run ng version)

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1501.4
@angular-devkit/build-angular   15.1.4
@angular-devkit/core            15.1.4
@angular-devkit/schematics      15.1.4
@angular/cli                    15.1.4
@schematics/angular             15.1.4
rxjs                            7.8.0
typescript                      4.9.5

Anything else?

No response

[mo-abdelazem]

It sounds like you may not have imported the correct modules in your component. Make sure you are importing the MatSidenavModule and MatElevationModule from @angular/material in your component's NgModule. You can also check the documentation for each of these components to make sure you are using them correctly.

[soujam69]

This is what I have in my material.module.ts:

import { NgModule } from @.***/core';

//Material Form Controls import { MatFormFieldModule } from @./material/form-field'; import { MatInputModule } from @./material/input' import { MatSelectModule } from @./material/select'; //Material Navigation import { MatSidenavModule } from @./material/sidenav'; import { MatToolbarModule } from @./material/toolbar'; //Material Layout import { MatCardModule } from @./material/card'; import { MatDividerModule } from @./material/divider'; //Material Buttons & Indicators import { MatButtonModule } from @./material/button'; import { MatIconModule } from @./material/icon'; //Material Popups & Modals import {MatDialogModule} from @./material/dialog'; import {MatSnackBarModule} from @./material/snack-bar'; //Material Data Tables import {MatTableModule} from @./material/table';

@NgModule({ declarations: [], imports: [ ],

exports: [ MatFormFieldModule, MatInputModule, MatSelectModule, MatSidenavModule, MatToolbarModule, MatCardModule, MatDividerModule, MatButtonModule, MatIconModule, MatDialogModule, MatSnackBarModule, MatTableModule ] }) export class MaterialModule { }

[atscott]

Please provide a minimal reproduction in either stackblitz or a github repository.

[soujam69]

Okay, I think did this correctly. https://github.com/soujam69/onetruth