Question

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

我正在尝试测试我的组件（请参阅下面的简化代码 - 我知道测试组件的这一点没有意义），并且收到以下错误：< / p>

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）作为提供者包含在内。当我这样做时（见下面注释掉的行），业力回报：

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

从谷歌的一点点来看，它表明它将.ts文件提供给浏览器，而不是编译的.js。我可以从错误的地方引用它。

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

我的代码是：

my.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' }];
    }
}

my.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>

my.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世界都很陌生，所以请告诉我是否还有其他任何我能提供的信息。

非常感谢。

Answer 1

<强> 2.0.0-beta.3

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

<强> MaterialModule


MaterialModule（和MaterialRootModule）已标记为   弃用。


我们发现，目前状态正在震动   在世界上，使用像MaterialModule这样的聚合NgModule   导致工具无法消除组件的代码   没用过。

为了确保用户以最小的代码大小结束   可能，我们已弃用MaterialModule，要在a中删除   随后的发布。

要替换MaterialModule，用户可以创建自己的＆＃34;材料＆＃34; MODUL   在他们的应用程序中（例如，GmailMaterialModule）仅导入   应用程序中实际使用的组件集。

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

<强> 2.0.0-beta.2

材料小组已移除.forRoot()，因此无法解决此问题。

不推荐使用Module forRoot，将在下一版本中删除。相反，只需直接导入MaterialModule：

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

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

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

Angular2 Material ViewportRuler单元测试错误

1 个答案: