Question

我的Angular应用程序正常运行，但是当我运行SQL> CREATE TABLE pager (PAG_ID NUMBER,PAG_PARENT VARCHAR2(10), PAG_ACTIVE NUMBER); Table created SQL> CREATE SEQUENCE seq_paper START WITH 1 INCREMENT BY 1 MINVALUE 1 NOMAXVALUE; Sequence created SQL> SQL> INSERT INTO pager 2 (pag_id, 3 pag_parent, 4 pag_active) 5 SELECT seq_paper.nextval, 6 pag_parent, 7 pag_active 8 FROM (SELECT 'Multi 8000' pag_parent, 9 1 pag_active 10 FROM dual 11 UNION ALL 12 SELECT 'Multi 8001', 13 1 14 FROM dual); 2 rows inserted SQL>命令时，我一直收到Karma错误。我已经附加了app组件，规范，模块和html以及package.json文件。错误如下所示：

ng test

app.component.ts

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.html

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

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

app.component.spec.ts

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

app.module.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!!');
  }));
});

的package.json

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 { }

Answer 1

基于@John提供的线索，我确实导入了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
      ],
      declarations: [
        AppComponent,
        DashboardComponent
      ]
    }).compileComponents();
  }));

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

1 个答案: