Angular2 Material ViewportRuler单元测试错误

Question

我有一个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）作为提供者。当我做到这一点（见注释以下行），因缘返回：

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 (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

材料去除团队制作.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!。