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。

來源

2017-04-13 Maxxx

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

來源

2017-04-18 01:22:29 Maxxx

您應該爲物料組件添加正確的包裝。不幸的是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

祝你好運！

來源

2017-04-20 06:45:16

Angular 4.x中的錯誤Karma測試「沒有Provider for FocusTrapFactory」

回答

相關問題