Cannot read property 'injector' of null in TestBed.createComponent when running tests in angular2 and jasmine

angular, browserify, karma-jasmine, unit-testing

Solution

I guess you forgot to init platform:

import { 
  BrowserDynamicTestingModule, 
  platformBrowserDynamicTesting 
} 
from '@angular/platform-browser-dynamic/testing';

TestBed.initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());

See also Plunker Example

Problem

When running a simple test with karma and browserify my test crashes inside TestBed.createComponent() function. Here is the beforeEach which is crashing: ``` import { ComponentFixture, TestBed } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; import { DebugElement } from '@angular/core'; import { AboutPage } from './about' beforeEach(() => { // refine the test module by declaring the test component TestBed.configureTestingModule({ declarations: [ AboutPage ], }); // create component and test fixture fixture = TestBed.createComponent(AboutPage); // get test component from the fixture comp = fixture.componentInstance; }); ``` And the error received: ``` Chrome 53.0.2785 (Mac OS X 10.11.6) About component should display original title FAILED TypeError: Cannot read property 'injector' of null at TestBed._createCompilerAndModule (/var/folders/by/05whlcq9247dyx85bd0l183w0000gn/T/node_modules/@angular/core/bundles/core-testing.umd.js:834:0 <- /var/folders/by/05whlcq9247dyx85bd0l183w0000gn/T/57bca79162ed1bcbdc3d746a5d9211d7.browserify:3968:48) at TestBed._initIfNeeded (/var/folders/by/05whlcq9247dyx85bd0l183w0000gn/T/node_modules/@angular/core/bundles/core-testing.umd.js:800:0 <- /var/folders/by/05whlcq9247dyx85bd0l183w0000gn/T/57bca79162ed1bcbdc3d746a5d9211d7.browserify:3934:43) at TestBed.createComponent (/var/folders/by/05whlcq9247dyx85bd0l183w0000gn/T/node_modules/@angular/core/bundles/core-testing.umd.js:884:0 <- /var/folders/by/05whlcq9247dyx85bd0l183w0000gn/T/57bca79162ed1bcbdc3d746a5d9211d7.browserify:4018:18) at Function.TestBed.createComponent (/var/folders/by/05whlcq9247dyx85bd0l183w0000gn/T/node_modules/@angular/core/bundles/core-testing.umd.js:714:0 <- /var/folders/by/05whlcq9247dyx85bd0l183w0000gn/T/57bca79162ed1bcbdc3d746a5d9211d7.browserify:3848:33) at Object.<anonymous> (/var/folders/by/05whlcq9247dyx85bd0l183w0000gn/T/src/pages/about/about.spec.ts:24:22 <- /var/folders/by/05whlcq9247dyx85bd0l183w0000gn/T/57bca79162ed1bcbdc3d746a5d9211d7.browserify:50004:37) at ZoneDelegate.invoke (node_modules/zone.js/dist/zone.js:203:28) at ProxyZoneSpec.onInvoke (node_modules/zone.js/dist/proxy.js:72:39) at ZoneDelegate.invoke (node_modules/zone.js/dist/zone.js:202:34) at Zone.run (node_modules/zone.js/dist/zone.js:96:43) at Object.<anonymous> (node_modules/zone.js/dist/jasmine-patch.js:91:50) TypeError: Cannot read property 'detectChanges' of undefined at Object.<anonymous> (/var/folders/by/05whlcq9247dyx85bd0l183w0000gn/T/src/pages/about/about.spec.ts:33:12 <- /var/folders/by/05whlcq9247dyx85bd0l183w0000gn/T/57bca79162ed1bcbdc3d746a5d9211d7.browserify:50010:16) at ZoneDelegate.invoke (node_modules/zone.js/dist/zone.js:203:28) at ProxyZoneSpec.onInvoke (node_modules/zone.js/dist/proxy.js:72:39) at ZoneDelegate.invoke (node_modules/zone.js/dist/zone.js:202:34) at Zone.run (node_modules/zone.js/dist/zone.js:96:43) at Object.<anonymous> (node_modules/zone.js/dist/jasmine-patch.js:91:50) at ZoneQueueRunner.jasmine.QueueRunner.ZoneQueueRunner.execute (node_modules/zone.js/dist/jasmine-patch.js:119:42) ``` And here's the code. ``` import { Component } from '@angular/core'; import { NavController } from 'ionic-angular'; @Component({ selector: 'page-about', templateUrl: 'about.html' }) export class AboutPage { helloText: string; constructor(public navCtrl: NavController) { } sayHello(){ this.helloText = "hello"; } } ``` Any help will be appreciated. - Operating system: osx 10.11.6 Angular version: 2.0.1 "zone.js": "^0.6.21" "browserify": "13.1.0" Node: `node --version` = v6.7.0

Original source