windows – Angular 4错误：在Karma-Jasmine Test中没有ChildrenOutletContexts的提供者

我的Angular应用程序工作正常,但是当我运行测试命令时,我一直收到Karma错误.我已经附加了app组件,规范,模块和html以及package.json文件.错误看起来像这样：

Failed: No provider for ChildrenOutletContexts!
Error: No provider for ChildrenOutletContexts!
at injectionError (http://localhost:9876/_karma_webpack_/vendor.bundle.js:39523:90)
at noproviderError (http://localhost:9876/_karma_webpack_/vendor.bundle.js:39561:12)
at ReflectiveInjector_.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_._throwOrNull (http://localhost:9876/_karma_webpack_/vendor.bundle.js:41003:19)
at ReflectiveInjector_.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_._getByKeyDefault (http://localhost:9876/_karma_webpack_/vendor.bundle.js:41042:25)
at ReflectiveInjector_.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_._getByKey (http://localhost:9876/_karma_webpack_/vendor.bundle.js:40974:25)
at ReflectiveInjector_.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_.get (http://localhost:9876/_karma_webpack_/vendor.bundle.js:40843:21)
at resolveNgModuleDep (http://localhost:9876/_karma_webpack_/vendor.bundle.js:47827:25)
at NgModuleRef_.webpackJsonp.../../../core/@angular/core.es5.js.NgModuleRef_.get (http://localhost:9876/_karma_webpack_/vendor.bundle.js:48909:16)
at resolveDep (http://localhost:9876/_karma_webpack_/vendor.bundle.js:49412:45)
at createClass (http://localhost:9876/_karma_webpack_/vendor.bundle.js:49276:32)

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.less']
})
export class AppComponent {
  title = 'app';
}

app.component.html

<a href="http://localhost:4200/dashboard">Dashboard</a>
<a href="http://localhost:4200/user">User</a> 
<router-outlet></router-outlet>

app.component.spec.ts

import { Testbed,async } from '@angular/core/testing';
import { RouterModule,Routes } from '@angular/router';
import { FormsModule } from '@angular/forms';
import { APP_BASE_HREF } from '@angular/common';

import { AppComponent } from './app.component';
import { DashboardComponent } from './modules/dashboard/dashboard.component';

describe('AppComponent',() => {
  const routes: Routes = [
    {
      path: '',redirectTo: 'dashboard',pathMatch: 'full'
    },{
      path: 'dashboard',component: DashboardComponent,},{
      path: 'user',loadChildren: 'app/modules/user/user.module#UserModule'
    }
  ];

  beforeEach(async(() => {
    Testbed.configureTestingModule({
      imports: [
        RouterModule,FormsModule
      ],declarations: [
        AppComponent,DashboardComponent
      ],providers: [
        { provide: APP_BASE_HREF,useClass: routes }
      ]
    }).compileComponents();
  }));

  it('should create the app',async(() => {
    const fixture = Testbed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app).toBeTruthy();
  }));

  it('should have as title app',async(() => {
    const fixture = Testbed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app.title).toEqual('app');
  }));

  it('should render title in a h1 tag',async(() => {
    const fixture = Testbed.createComponent(AppComponent);
    fixture.detectChanges();
    const compiled = fixture.debugElement.nativeElement;
    expect(compiled.querySelector('h1').textContent).toContain('Welcome to app!!');
  }));
});

app.module.ts

import { browserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { RouterModule,Routes } from '@angular/router';

import { AppComponent } from './app.component';
import { DashboardComponent } from './modules/dashboard/dashboard.component';

const routes: Routes = [
  {
    path: '',pathMatch: 'full'
  },{
    path: 'user',loadChildren: 'app/modules/user/user.module#UserModule'
  }
];

@NgModule({
  declarations: [
    AppComponent,DashboardComponent,],imports: [
    browserModule,FormsModule,RouterModule.forRoot(routes)
  ],providers: [],bootstrap: [AppComponent],exports: [RouterModule]
})
export class AppModule { }

的package.json

...
 "dependencies": {
    "@angular/animations": "^4.0.0","@angular/common": "^4.0.0","@angular/compiler": "^4.0.0","@angular/core": "^4.0.0","@angular/forms": "^4.0.0","@angular/http": "^4.0.0","@angular/platform-browser": "^4.0.0","@angular/platform-browser-dynamic": "^4.0.0","@angular/router": "^4.0.0","core-js": "^2.4.1","rxjs": "^5.1.0","zone.js": "0.8.12"
  },"devDependencies": {
    "@angular/cli": "1.2.1","@angular/compiler-cli": "^4.0.0","@angular/language-service": "^4.0.0","@types/jasmine": "~2.5.53","@types/jasminewd2": "~2.0.2","@types/node": "~6.0.60","codelyzer": "~3.0.1","jasmine-core": "~2.6.2","jasmine-spec-reporter": "~4.1.0","karma": "~1.7.0","karma-chrome-launcher": "~2.1.1","karma-cli": "~1.0.1","karma-coverage-istanbul-reporter": "^1.2.1","karma-jasmine": "~1.1.0","karma-jasmine-html-reporter": "^0.2.2","protractor": "~5.1.2","ts-node": "~3.0.4","tslint": "~5.3.2","typescript": "~2.3.3",....

导入 RouterTestingModule而不是导入RouterModule和APP_BASE_HREF.所以,在app.component.spec.ts中进行修改后工作正常！

import { Testbed,async } from '@angular/core/testing';
import { FormsModule } from '@angular/forms';
import { RouterTestingModule } from '@angular/router/testing';

import { AppComponent } from './app.component';
import { DashboardComponent } from './modules/dashboard/dashboard.component';

describe('AppComponent',() => {
  beforeEach(async(() => {
    Testbed.configureTestingModule({
      imports: [
        RouterTestingModule 
        FormsModule
      ],DashboardComponent
      ]
    }).compileComponents();
  }));