Ошибка NullInjection для модульного углового материала Sidenav

Question

Сборка сиденав из угловых материалов.Хотелось сделать его более модульным, поэтому сделали sidenav bar и главную панель инструментов разными компонентами.Это вызвало NullInjectorError: No provider for MatSidenavContainer! в наших тестовых случаях на главной панели инструментов, даже несмотря на то, что MaterialModule / MatSidenavModule доступен для тестов.

Попытка добавления MaterialModule (который содержит модули для AngularMaterial) к импортам в наборе тестов.Также попытался добавить другие компоненты (NavbarComponent и AppComponent) в набор тестов.Также попытался добавить модули отдельно в файл (например, import { MatSidenavModule } from '@angular/material/sidenav).Все еще выкидываю ошибку.

Настройка
Угловой 8
Угловой материал 8
Жасмин: 3,4
Карма: 4,1

Воспроизвести ошибку: Репозиторий клонов https://github.com/ChadwickSchool/Weight-Lifting-App/tree/sidenav-test-error Изнутриdirectory

git checkout sidenav-test-error
npm install
ng test

Вот так настроен sidenav app.component.html

<mat-sidenav-container>
  <mat-sidenav #sidenav role="navigation">
    <wla-sidenav></wla-sidenav>
  </mat-sidenav>
  <mat-sidenav-content>
      <wla-navbar (toggleSidenav)="sidenav.toggle()"></wla-navbar>
      <router-outlet></router-outlet>
  </mat-sidenav-content>
</mat-sidenav-container>

Вот тестовый пример, выдающий ошибку:

describe('NavbarComponent', () => {
  let component: NavbarComponent;
  let fixture: ComponentFixture<any>;

  const authServiceStub = {
    user$: of(null),

    async googleSignin() {
      this.user$ = of(TestUtils.getTestUser());
    },

    async signOut() {
      this.user$ = of(null);
    }
  };

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [NavbarComponent],
      imports: [
        MatSidenavModule,
        MatIconModule,
        MatToolbarModule,
        NoopAnimationsModule,
        AngularFireModule.initializeApp(environment.firebaseConfig),
        AngularFirestoreModule,
        AngularFireAuthModule
      ],
      providers: [
        {
          provide: AuthService,
          useValue: authServiceStub
        }
      ]
    }).compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(NavbarComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

Github репозиторий https://github.com/ChadwickSchool/Weight-Lifting-App/tree/sidenav-test-error

полное сообщение об ошибке

Answer 1

Вы должны добавить MatSidenavModule в свой модуль

imports: [
        MaterialModule,
        NoopAnimationsModule,
        AngularFireModule.initializeApp(environment.firebaseConfig),
        AngularFirestoreModule,
        AngularFireAuthModule,
        MatSidenavModule // this one
      ],