为什么我得到无法实例化循环依赖！运行我的Angular 4测试时出现路由器错误

Question

尝试运行Angular 4测试时，我的AppComponent类出现以下错误。

AppComponent should create the app
Failed: Provider parse errors:
Cannot instantiate cyclic dependency! Router ("[ERROR ->]"): in NgModule DynamicTestModule in ./DynamicTestModule@-1:-1
Error: Provider parse errors:
Cannot instantiate cyclic dependency! Router ("[ERROR ->]"): in NgModule DynamicTestModule in ./DynamicTestModule@-1:-1
    at NgModuleProviderAnalyzer.webpackJsonp.../../../compiler/@angular/compiler.es5.js.NgModuleProviderAnalyzer.parse (http://localhost:9876/_karma_webpack_/vendor.bundle.js:69467:19)
    at NgModuleCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.NgModuleCompiler.compile (http://localhost:9876/_karma_webpack_/vendor.bundle.js:76280:36)
    at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileModule (http://localhost:9876/_karma_webpack_/vendor.bundle.js:84608:73)
    at http://localhost:9876/_karma_webpack_/vendor.bundle.js:84567:106
    at Object.then (http://localhost:9876/_karma_webpack_/vendor.bundle.js:59461:148)
    at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileModuleAndAllComponents (http://localhost:9876/_karma_webpack_/vendor.bundle.js:84564:26)
    at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler.compileModuleAndAllComponentsAsync (http://localhost:9876/_karma_webpack_/vendor.bundle.js:84496:37)
    at TestingCompilerImpl.webpackJsonp.../../../compiler/@angular/compiler/testing.es5.js.TestingCompilerImpl.compileModuleAndAllComponentsAsync (http://localhost:9876/_karma_webpack_/vendor.bundle.js:85916:31)
    at TestBed.webpackJsonp.../../../core/@angular/core/testing.es5.js.TestBed.compileComponents (http://localhost:9876/_karma_webpack_/vendor.bundle.js:101761:31)
    at Function.webpackJsonp.../../../core/@angular/core/testing.es5.js.TestBed.compileComponents (http://localhost:9876/_karma_webpack_/vendor.bundle.js:101644:67)

这是我的AppComponentClass

import { Component } from '@angular/core';
import {MainModel} from './models/main-model';
import {EventsService} from './services/events.service';
import {CreateLiveEventModalComponent} from './create-live-event-modal/create-live-event-modal.component';
import {DialogService} from 'ng2-bootstrap-modal';
import {LiveEvent} from './models/live-event';
import {Router} from '@angular/router';



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

      constructor(private mainDM: MainModel,
                  private router: Router,
                  private dialogService: DialogService) { }

      createEvent() {
        this.dialogService.addDialog(CreateLiveEventModalComponent, {});
      }

      getEvents() {
        return this.mainDM.events;
      }

      getUser() {
        return this.mainDM.user;
      }

      isRoute(url) {
        return this.router.url === url;
      }
    }

这是我的spec文件的样子

import { TestBed, async } from '@angular/core/testing';

import { AppComponent } from './app.component';
import {MainModel} from './models/main-model';
import {DialogService} from 'ng2-bootstrap-modal';
import {Router, RouterModule} from '@angular/router';
import {RouterTestingModule } from '@angular/router/testing';
import {NavigationComponent} from './navigation/navigation.component';
import {ConnectionBackend, Http} from '@angular/http';
import {RequestOptions} from 'http';

class RouterStub {
  navigateByUrl(url: string) {
    return url;
  }
}

class MockLoginComponent { }

describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        AppComponent,
        NavigationComponent
      ],
      providers: [
        MainModel,
        {
          provide: Router,
          useClass: RouterModule
        },
        DialogService
      ],
      imports: [ RouterTestingModule.withRoutes([
        {
          path: 'app-live-events',
          component: MockLoginComponent
        },
        {
          path: 'app-live-event',
          component: MockLoginComponent
        }
      ])
      ]
    }).compileComponents();
  }));

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


  // 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!!');
  // }));
});