Angular 4.x中的错误Karma测试“没有Provider for FocusTrapFactory”

问题描述：

我有一个小Angular v4.x使用Angluar Material 2.x 它有一个模式（使用MdDialog）登录组件 - 几乎没有别的。我所有的测试都是失败：Angular 4.x中的错误Karma测试“没有Provider for FocusTrapFactory”

失败：无提供FocusTrapFactory！在injectionError （http://localhost:9876/base/src/test.ts?31c6eb17e2414560f8e07e35e9c56bebb408ba58:2074:86） [角] 在noProviderError（http://localhost:9876/base/src/test.ts?31c6eb17e2414560f8e07e35e9c56bebb408ba58:2112:12） [角] ...

我login.component.spec.ts是

import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 
import { FormsModule } from '@angular/forms'; 
import { RouterTestingModule } from '@angular/router/testing'; 
import { BrowserDynamicTestingModule } from '@angular/platform-browser-dynamic/testing'; 
import { NoopAnimationsModule } from '@angular/platform-browser/animations'; 
import { MdDialog, MdDialogContainer, MdInputContainer, OVERLAY_PROVIDERS } from '@angular/material'; 
import { HttpModule } from '@angular/http'; 
import { AuthenticationService } from '../shared/servicesIndex'; 
import { LoginComponent } from './login.component'; 

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

    beforeEach(async(() => { 
     TestBed.overrideModule(BrowserDynamicTestingModule, { 
      set: { 
       entryComponents: [MdDialogContainer] 
      } 
     }); 
     TestBed.configureTestingModule(
      { 
      imports: [ 
       FormsModule, 
       RouterTestingModule, 
       HttpModule, 
       NoopAnimationsModule 

      ], 
      declarations: [ 
       LoginComponent, 
       MdInputContainer, 
       MdDialogContainer 
      ], 
      providers: [ 
       MdDialog, 
       OVERLAY_PROVIDERS, 
       AuthenticationService 
      ] 
     }) 
      .compileComponents(); 

    })); 

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

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

逻辑告诉我进口FocusTrapFactory并将其添加到我的提供商列表 - 但我找不到它来导入它！

我不知所措。我的Google-fu是fu。

答

只是需要加入import { MaterialModule } from '@angular/material';然后在我app.component.spec.ts添加MaterialModule到imports阵列。

答

您应该为物料组件添加正确的包装。不幸的是MaterialModule在最新版本中被标记为depricated。

要取代它的最好方法是让你自己的模块只导入（和导出）你应用程序中实际使用的模块。

我设法通过创建这个类来解决这个问题：

import { NgModule } from '@angular/core'; 
import { CommonModule } from '@angular/common'; 
import { MdMenuModule, MdIconModule, MdRippleModule, MdToolbarModule, MdSidenavModule, MdButtonModule } from '@angular/material' 
// Add animations 
import { BrowserAnimationsModule } from '@angular/platform-browser/animations' 

const MATERIAL_MODULES = [ 
    MdMenuModule, 
    MdIconModule, 
    MdRippleModule, 
    MdToolbarModule, 
    MdSidenavModule, 
    MdButtonModule, 
    BrowserAnimationsModule 
]; 

@NgModule({ 
    imports: MATERIAL_MODULES, 
    exports: MATERIAL_MODULES 
}) 
export class AngularMaterialModule { }

该模块应包含在自己的app.module

祝你好运！

Angular 4.x中的错误Karma测试“没有Provider for FocusTrapFactory”

相关推荐