我有一个 Angular2 组件，其中包含来自 @angular/material 的选项卡控件。

我正在尝试测试我的组件(请参阅下面的简化代码 - 我知道测试如此简单的组件毫无意义)，但出现以下错误:

Error: Error in ./MdTabHeader class MdTabHeader - inline template:0:0 caused by: No provider for ViewportRuler!
Error: No provider for ViewportRuler!

我的假设是尝试将 ViewportRuler ( https://github.com/angular/material2/blob/master/src/lib/core/overlay/position/viewport-ruler.ts) 作为提供者包括在内。当我这样做时(见下面注释掉的行)， karma 返回:

Uncaught SyntaxError: Unexpected token import
at http://localhost:9876/context.html:10

从一些谷歌搜索中可以看出，它向浏览器提供 .ts 文件，而不是编译后的 .js。我可能从错误的地方引用了它。

我的问题是:如何编译我的测试？

我的代码是:

我的.component.ts:

@Component({
    selector: 'test',
    template: require('./test.component.html')
})
export class TestComponent {

    items: any[];

    constructor() {
        this.items = [{ title: 'test 1', description: 'description 1' }, { title: 'test 2', description: 'description 2' }];
    }
}

我的.component.html:

<md-tab-group>
    <md-tab *ngFor="let link of items">
        <template md-tab-label>
            <h4>{{link.title}}</h4>
        </template>
        {{link.description}}
    </md-tab>
</md-tab-group>    

我的.component.spec.ts:

import { TestBed } from '@angular/core/testing';
import { Component} from '@angular/core';
import { MaterialModule } from '@angular/material';
import { ViewportRuler} from '@angular/material/core/overlay/position/viewport-ruler'
import { TestComponent } from './test.component';

describe("TestComponent",
    () => {
        let fixture, component;

        beforeEach(() => {

            TestBed.configureTestingModule({
                imports: [MaterialModule],
                declarations: [TestComponent],
                providers: [
                    //{ provide: ViewportRuler }    
                ]
            });

            fixture = TestBed.createComponent(TestComponent);
            component = fixture.componentInstance;
        });

        it('true = true', () => {
            expect(true).toBe(true);
        });        
    });

我已尝试包含尽可能多的信息，但我对整个 Angular 世界都是陌生的，所以如果我能提供任何其他信息，请告诉我。

非常感谢。

最佳答案

2.0.0-beta.3

MaterialModule 已弃用。开发人员可以根据需要使用单个组件模块及其依赖项(例如 MdButtonModule)或创建自己的自定义模块。

MaterialModule

• MaterialModule (and MaterialRootModule) have been marked as deprecated.

We've found that, with the current state of tree-shaking in the world, that using an aggregate NgModule like MaterialModule leads to tools not being able to eliminate code for components that aren't used.

In order to ensure that users end up with the smallest code size possible, we're deprecating MaterialModule, to be removed in the a subsequent release.

To replace MaterialModule, users can create their own "Material" modul within their application (e.g., GmailMaterialModule) that imports only the set of components actually used in the application.

https://github.com/angular/material2/releases/tag/2.0.0-beta.3

2.0.0-beta.2

Material 团队删除了 .forRoot() 使这不是问题。

The use of Module forRoot has been deprecated and will be removed in the next release. Instead, just simply import MaterialModule directly:

@NgModule({
   imports: [
       ...
       MaterialModule,
       ...
   ]
...
});

https://github.com/angular/material2/releases/tag/2.0.0-beta.2

MaterialModule.forRoot() 设置您在测试模块中需要的提供程序。这应该可以解决像您这样的错误和类似的错误，例如 No provider for MdIconRegistry!。

关于javascript - Angular2 Material ViewportRuler 单元测试错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41105539/