Question

使用棱角材质构建Sidenav。想要使其更具模块化，因此使sidenav栏和主工具栏成为不同的组件。即使在测试中可以使用MaterialModule / MatSidenavModule，这也会在我们的主要工具栏测试用例中导致NullInjectorError: No provider for MatSidenavContainer!。

尝试将MaterialModule（包含AngularMaterial的模块）添加到测试套件中的导入。还尝试将其他组件（NavbarComponent和AppComponent）添加到测试套件中。还尝试将模块分别添加到文件中（例如import { MatSidenavModule } from '@angular/material/sidenav）。仍然抛出错误。

设置
Angular 8
角材料8
茉莉花：3.4
业力：4.1

要重现错误：克隆存储库https://github.com/ChadwickSchool/Weight-Lifting-App/tree/sidenav-test-error 从内部目录

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

full error message

Answer 1

您应该将MatSidenavModule添加到您的模块

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

模块化角材料Sidenav的NullInjection错误

1 个答案: