Solvedangular Inject in combination with TestBed.compileComponents() fails

I'm submitting a ... (check one with "x")

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior
I have noticed that injecting services in combination with TestBed compile/configureTestingModule fails. To reproduce this I have modified a test from @juliemr test seed project: https://github.com/juliemr/ng2-test-seed

import {
  async,
  inject,
  TestBed,
  ComponentFixture
} from '@angular/core/testing';
import { Component } from '@angular/core';
import { BorderComponent } from '../app/border-component';
import { UserService } from '../app/user-service';

@Component({
  template: '',
  directives: [BorderComponent]
})
class TestComponent {
}

describe('greeting component', () => {
  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [TestComponent],
      providers: [UserService]
    });
  });

  //injecting here fails
  it('should create component', async(inject([UserService],(service) => {
    TestBed.compileComponents().then(() => {
      var fixture = TestBed.createComponent(TestComponent);
      fixture.detectChanges();
      var compiled = fixture.debugElement.nativeElement;
    });
  })));
});

If I remove inject the test will pass. I have also seen the same result if I try to inject in a beforeEach
The error I am getting is

Error: This test module uses the component BorderComponent which is using a "templateUrl", but they were never compiled. Please call "TestBed.compileComponents" before your test.
        at TestBed._initIfNeeded (/Users/helgevot/development/ng2-test-seed/node_modules/@angular/core/testing/test_bed.js:219:27)
        at TestBed.execute (/Users/helgevot/development/ng2-test-seed/node_modules/@angular/core/testing/test_bed.js:274:14)
        at eval (/Users/helgevot/development/ng2-test-seed/node_modules/@angular/core/testing/test_bed.js:404:45)
        at ZoneDelegate.invoke (/Users/helgevot/development/ng2-test-seed/node_modules/zone.js/dist/zone.js:323:29)
        at AsyncTestZoneSpec.onInvoke (/Users/helgevot/development/ng2-test-seed/node_modules/zone.js/dist/async-test.js:76:44)
        at ZoneDelegate.invoke (/Users/helgevot/development/ng2-test-seed/node_modules/zone.js/dist/zone.js:322:35)
        at Zone.run (/Users/helgevot/development/ng2-test-seed/node_modules/zone.js/dist/zone.js:216:44)
        at runInTestZone (/Users/helgevot/development/ng2-test-seed/node_modules/@angular/core/testing/async.js:58:21)
        at Object.eval (/Users/helgevot/development/ng2-test-seed/node_modules/@angular/core/testing/async.js:32:13)

Please tell us about your environment:

  • Angular version: 2.0.0-rc.5
  • Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
  • Language: [all | TypeScript X.X | ES6/7 | ES5]
12 Answers

✔️Accepted Answer

Yes I will, but I think further discussion should be moved to gitter or stackoverflow, as this is more a support request, than a bug report.
I usually structure my tests like this. Note, that I have written this on mobile, so there might be a syntax error somewhere. But the idea should be clear.

describe('greeting component', () => {

  let fixture: ComponentFixture<TestComponent>;

  beforeEach(() => {
    return TestBed.configureTestingModule({
      declarations: [TestComponent],
      providers: [UserService]
    }).compileComponents().then(() => {
        fixture = TestBed.createComponent(TestComponent);
        fixture.detectChanges();
    });
  });

  afterEach(() => {
    fixture.destroy();
  });

  it('should create component', inject([UserService], (service: UserService) => {
      // Perform test using fixture and service
  }));
});

Other Answers:

You have to return the promise from TestBed#compileComponents in the beforeEach hook. Otherwise the tests will run before the components were compiled.

More Issues: