问NullInjectorError角材料

EN

Error: Uncaught (in promise): NullInjectorError: R3InjectorError(AppModule)[MatSidenavContainer -> MatSidenavContainer -> MatSidenavContainer]: 
  NullInjectorError: No provider for MatSidenavContainer!
NullInjectorError: R3InjectorError(AppModule)[MatSidenavContainer -> MatSidenavContainer -> MatSidenavContainer]: 
  NullInjectorError: No provider for MatSidenavContainer!

import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { RegistrationFormComponent } from './registration-form/registration-form.component';
import { NgModule } from '@angular/core';
import { AngularMaterialModule } from './angular-material-module/angular-material.module';
import { LoginFormComponent } from './login-form/login-form.component';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { RouterModule, Routes } from '@angular/router';
import { FeedComponent } from './feed/feed.component';
import { VerificationLinkComponent } from './verification-link/verification-link.component';
import { AuthGuard } from './guard/auth-guard.service';
import { ProfileComponent } from './profile/profile.component';
import { ResendVerificationComponent } from './resend-verification/resend-verification.component';
import { ToolbarComponent } from './toolbar/toolbar.component';
//import { HttpInterceptorService} from './services/http-interceptor.service'


const routes: Routes = [
  {path: '', redirectTo:'login',pathMatch:'full'},
  {path: 'register', component:RegistrationFormComponent},
  {path: 'login', component:LoginFormComponent},
  {path: 'feed', component:FeedComponent, canActivate: [AuthGuard]},
  {path: 'resendVerificationLink/:id', component: ResendVerificationComponent},
  {path: 'verifyRegistration',component: VerificationLinkComponent},
  {path: 'profile/:id', component: ProfileComponent}

];

@NgModule({
  declarations: [
    AppComponent,
    ToolbarComponent,
    RegistrationFormComponent,
    LoginFormComponent,
    FeedComponent,
    VerificationLinkComponent,
    ProfileComponent,
    ResendVerificationComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    AngularMaterialModule,
    HttpClientModule,
    [RouterModule.forRoot(routes)]
  ],
  exports: [RouterModule],
  providers: [
    AuthGuard,
    // {
    //   provide: HTTP_INTERCEPTORS,
    //   useClass: HttpInterceptorService,
    //   multi: true
    // }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatNativeDateModule } from '@angular/material/core';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatSortModule } from '@angular/material/sort';
import { MatTableModule } from '@angular/material/table';
import { MatIconModule } from '@angular/material/icon';
import { MatSelectModule } from '@angular/material/select';
import { MatRadioModule } from '@angular/material/radio';
import { MatButtonModule } from '@angular/material/button';
import {MatCardModule} from '@angular/material/card';
import { FormsModule, ReactiveFormsModule  } from '@angular/forms'; 
import {MatSidenavModule} from '@angular/material/sidenav';
import { MatToolbarModule} from '@angular/material/toolbar';
import {MatListModule} from '@angular/material/list'
import {TextFieldModule} from '@angular/cdk/text-field';
@NgModule({
  declarations: [],
  exports: [
    CommonModule,
    MatRadioModule,
    MatFormFieldModule,
    MatSelectModule,
    FormsModule,
    MatIconModule,
    MatTableModule,
    MatSortModule,
    MatFormFieldModule,
    MatInputModule,
    MatDatepickerModule,
    MatNativeDateModule,
    MatIconModule,
    MatSelectModule,
    MatRadioModule,
    MatButtonModule,
    MatCardModule,
    ReactiveFormsModule,
    MatSidenavModule,
    MatToolbarModule,
    MatListModule,
    TextFieldModule 
  ]
})
export class AngularMaterialModule { }

<mat-toolbar color="primary">
    <mat-toolbar-row>
      <button mat-icon-button>
        <mat-icon (click)="sidenav.toggle()">menu</mat-icon>
      </button>
      <h1>Twitter</h1>
    </mat-toolbar-row>
    <mat-toolbar-row>
        <ng-container>
            <img class="twitter" src="assets/twitter.png" alt="">
        </ng-container>
      </mat-toolbar-row>
    </mat-toolbar>

    <mat-sidenav-container>
        <mat-sidenav #sidenav>
          <mat-nav-list>
            <a mat-list-item [routerLink]="'/feed'"><mat-icon>home</mat-icon>Feed</a>
            <a mat-list-item [routerLink]="['/profile',getProfile()]"><mat-icon>person_outline</mat-icon>Profile</a>
            <a mat-list-item (click)="authService.logout()" [routerLink]="'/login'" *ngIf="authService.isUserLoggedIn()"><mat-icon>exit_to_app</mat-icon>Logout</a>
            <a mat-list-item (click)="sidenav.toggle()"> Close</a>
          </mat-nav-list>
        </mat-sidenav>
    </mat-sidenav-container>

import { Component, OnInit } from '@angular/core';
import { AuthenticationService } from '../security-login/authentication.service';
import { AngularMaterialModule } from '../angular-material-module/angular-material.module';
@Component({
  selector: 'app-toolbar',
  templateUrl: './toolbar.component.html',
  styleUrls: ['./toolbar.component.css']
})
export class ToolbarComponent implements OnInit {

  constructor(public authService: AuthenticationService) { }

  ngOnInit(): void {
  }

  getProfile() {
    const id = sessionStorage.getItem('userId');
    return id;
  }
}