Angular2 Material ViewportRuler unit testing error

Question

I have an Angular2 component, which contains a tab control from @angular/material.

I'm trying to test my component (see simplified code below - I get that there's no point in testing a component that's this simple), and am getting the following error:

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

My assumption was to try and include ViewportRuler (https://github.com/angular/material2/blob/master/src/lib/core/overlay/position/viewport-ruler.ts) as a provider. When I do this (see commented out lines below), karma returns:

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

Which, from a bit of Googling, suggests that it's serving the .ts file to the browser, rather than the compiled .js. It's possible I'm referencing it from the wrong place.

My question is: how do I make my tests compile?

My code is:

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);
        });        
    });

I've tried to include as much info as possible, but I'm new to the whole Angular world, so let me know if there's anything else I can provide.

Many thanks.

Answer 1

2.0.0-beta.3

MaterialModule is deprecated. Developers can either consume individual component modules and their dependencies as needed (e.g. MdButtonModule) or create their own custom module.

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 team removed .forRoot() making this a non-issue.

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() sets up the providers, which you'll need in a testing module. This should resolve errors like yours and similar ones like No provider for MdIconRegistry!.