title: Angular 4 Error: No provider for ChildrenOutletContexts in Karma-Jasmine Test
body: <p>My Angular application is working properly, but I am keep getting Karma error when I run <code>ng test</code> command. I have attached app component, spec, module and html along with package.json file. Error looks like this:    </p>
  
  <pre><code>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)
  </code></pre>
  
  <p><strong>app.component.ts</strong></p>
  
  <pre><code>import { Component } from '@angular/core';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.less']
  })
  export class AppComponent {
    title = 'app';
  }
  </code></pre>
  
  <p><strong>app.component.html</strong></p>
  
  <pre><code>&lt;a href="http://localhost:4200/dashboard"&gt;Dashboard&lt;/a&gt;
  &lt;a href="http://localhost:4200/user"&gt;User&lt;/a&gt; 
  &lt;router-outlet&gt;&lt;/router-outlet&gt;
  </code></pre>
  
  <p><strong>app.component.spec.ts</strong></p>
  
  <pre><code>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', () =&gt; {
    const routes: Routes = [
      {
        path: '',
        redirectTo: 'dashboard',
        pathMatch: 'full'
      },
      {
        path: 'dashboard',
        component: DashboardComponent,
      },
      {
        path: 'user',
        loadChildren: 'app/modules/user/user.module#UserModule'
      }
    ];
  
    beforeEach(async(() =&gt; {
      TestBed.configureTestingModule({
        imports: [
          RouterModule,
          FormsModule
        ],
        declarations: [
          AppComponent,
          DashboardComponent
        ],
        providers: [
          { provide: APP_BASE_HREF, useClass: routes }
        ]
      }).compileComponents();
    }));
  
    it('should create the app', async(() =&gt; {
      const fixture = TestBed.createComponent(AppComponent);
      const app = fixture.debugElement.componentInstance;
      expect(app).toBeTruthy();
    }));
  
    it('should have as title app', async(() =&gt; {
      const fixture = TestBed.createComponent(AppComponent);
      const app = fixture.debugElement.componentInstance;
      expect(app.title).toEqual('app');
    }));
  
    it('should render title in a h1 tag', async(() =&gt; {
      const fixture = TestBed.createComponent(AppComponent);
      fixture.detectChanges();
      const compiled = fixture.debugElement.nativeElement;
      expect(compiled.querySelector('h1').textContent).toContain('Welcome to app!!');
    }));
  });
  </code></pre>
  
  <p><strong>app.module.ts</strong></p>
  
  <pre><code>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: '',
      redirectTo: 'dashboard',
      pathMatch: 'full'
    },
    {
        path: 'dashboard', 
        component: DashboardComponent, 
    },
    {
      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 { }
  </code></pre>
  
  <p><strong>package.json</strong></p>
  
  <pre><code>    ...
   "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",
  ....
  </code></pre>