Matt Raible Matt Raible - 1 year ago 235
TypeScript Question

TypeError: Cannot read property 'injector' of null after upgrading to Angular 2.0 final

After upgrading from Angular 2 RC5 to 2.0 Final, I'm seeing the following errors when running my tests. I'm not sure what the problem is.

TypeError: Cannot read property 'injector' of null
at TestBed._createCompilerAndModule (webpack:///Users/mraible/dev/ng2-demo/~/@angular/core/testing/test_bed.js:247:0 <- src/test.ts:20777:44)
at TestBed._initIfNeeded (webpack:///Users/mraible/dev/ng2-demo/~/@angular/core/testing/test_bed.js:213:0 <- src/test.ts:20743:39)
at TestBed.createComponent (webpack:///Users/mraible/dev/ng2-demo/~/@angular/core/testing/test_bed.js:297:0 <- src/test.ts:20827:14)

Here's an example of one of my tests:

import { MockSearchService } from '../shared/search/mocks/search.service';
import { EditComponent } from './edit.component';
import { TestBed } from '@angular/core/testing/test_bed';
import { SearchService } from '../shared/search/search.service';
import { MockRouter, MockActivatedRoute } from '../shared/search/mocks/routes';
import { ActivatedRoute, Router } from '@angular/router';
import { FormsModule } from '@angular/forms';

describe('Component: Edit', () => {
let mockSearchService: MockSearchService;
let mockActivatedRoute: MockActivatedRoute;
let mockRouter: MockRouter;

beforeEach(() => {
mockSearchService = new MockSearchService();
mockActivatedRoute = new MockActivatedRoute({'id': 1});
mockRouter = new MockRouter();

declarations: [EditComponent],
providers: [
{provide: SearchService, useValue: mockSearchService},
{provide: ActivatedRoute, useValue: mockActivatedRoute},
{provide: Router, useValue: mockRouter}
imports: [FormsModule]

it('should fetch a single record', () => {
const fixture = TestBed.createComponent(EditComponent);

let person = {name: 'Emmanuel Sanders', address: {city: 'Denver'}};

// verify service was called

// verify data was set on component when initialized
let editComponent = fixture.debugElement.componentInstance;

// verify HTML renders as expected
let compiled = fixture.debugElement.nativeElement;
expect(compiled.querySelector('h3').innerHTML).toBe('Emmanuel Sanders');

For a pull request that demonstrates this issue, please see GitHub:

Answer Source

Changing import { TestBed } from '@angular/core/testing/test_bed'; to import { TestBed } from '@angular/core/testing'; solved this problem for me.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download