Angular2 2.0.0组件单元测试导致错误：在注入路由器之前引导至少一个组件 [英] Angular2 2.0.0 Component Unit Test causes error: Bootstrap at least one component before injecting Router

问题描述

看看之前的类似问题，似乎没有一个明确的答案。

Looking at previous similar questions, it doesn't seem that there was ever a clear answer for this.

这是正在发生的事情。我正在使用angular-cli工具构建一个angular2应用程序（运行beta 16，角度为2.0.1，路由器为3.0.1。

Here's what's happening. I'm building an angular2 app using the angular-cli tool (beta 16 running, with angular 2.0.1 and router 3.0.1.

当我运行ng test时我的所有测试都通过了，期待我的app.component。（ng服务正常工作等）

When I run "ng test" all my tests pass, expect my app.component. (ng serve is working fine etc)

这里是一些代码：

app.module.ts

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

import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { HealthComponent } from './health/health.component';
import { MonitorModule } from './monitor/monitor.module';
import { PlanComponent } from './plan/plan.component';
import { ConfigureComponent } from './configure/configure.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { TroubleshootComponent } from './troubleshoot/troubleshoot.component';
import { HeaderComponent } from './ui/header/header.component';
import { OnboardingModule } from './onboarding/onboarding.module';
import { routing, appRoutingProviders }  from './app.routing';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    routing,
    MonitorModule,
    OnboardingModule
  ],
  declarations: [
    AppComponent,
    HomeComponent,
    HealthComponent,
    PlanComponent,
    ConfigureComponent,
    DashboardComponent,
    TroubleshootComponent,
    HeaderComponent
  ],
  providers: [
    appRoutingProviders
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
}

app。 component.ts

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

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

}

app.component.spec。 ts

/* tslint:disable:no-unused-variable */

import { TestBed, async } from '@angular/core/testing';
import { APP_BASE_HREF } from '@angular/common';
import { routing, appRoutingProviders }  from './app.routing';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { HeaderComponent } from './ui/header/header.component';
import { HealthComponent } from './health/health.component';
import { PlanComponent } from './plan/plan.component';
import { ConfigureComponent } from './configure/configure.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { TroubleshootComponent } from './troubleshoot/troubleshoot.component';

describe('App: Ng2Test2', () => {
  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [
        AppComponent,
        HeaderComponent,
        HomeComponent,
        HealthComponent,
        PlanComponent,
        ConfigureComponent,
        DashboardComponent,
        TroubleshootComponent
      ],
      imports: [
        routing
      ],
      providers: [
        appRoutingProviders,
        { provide: APP_BASE_HREF, useValue : '/' }
      ]
    });
  });

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

app.component.html

  <app-header></app-header>

  <router-outlet></router-outlet>

最后，这是我在运行ng test时遇到的错误：

Finally, here's the error I'm getting when I run "ng test":

App: Ng2Test2 should create the app FAILED
    Failed: Error in ./AppComponent class AppComponent - inline template:2:2 caused by: Bootstrap at least one component before injecting Router.
    Error: Bootstrap at least one component before injecting Router.
        at setupRouter (webpack:///Users/jtaylor/Projects/hmng-angular/hmng-ng2/~/@angular/router/src/router_module.js:190:0 <- src/test.ts:29132:15)

我尝试了很多不同的东西来防止这个错误，但是可以不要让这个停止射击！

I've tried a ton of different things to prevent this error, but can't get this one to stop firing!

对此有何看法？

编辑：我追踪了它到这个组件，我在构造函数中使用路由器：

I tracked it down to this component, where I use router in my constructor:

header.component.ts

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute, NavigationEnd } from '@angular/router';
import { AppComponent } from '../../app.component';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html'
})
export class HeaderComponent implements OnInit {

  section: any;
  // router: Router;
  // activateRoute: ActivatedRoute;

  constructor(
    public router: Router,
    public activatedRoute: ActivatedRoute
  ) {}

  ngOnInit() {
    this.router.events.subscribe(e => {
      if (e instanceof NavigationEnd) {
        this.setActiveNavTab(e.url.replace(/^\/([^\/]*).*$/, '$1'));
      }
    });
  }

  setActiveNavTab(section: string) {
    this.section = section;
  }

}

那么，我该如何引导a具有单元测试的构造函数之前的组件？

So, how can I bootstrap a component before that constructor with the unit test?

推荐答案

这是因为您正在尝试使用 RouterModule 用于测试。相反，您应该使用 RouterTestingModule 并使用添加您的路线RouterTestingModule.withRoutes

It's because you are trying to use the RouterModule for the test. Instead you should use the RouterTestingModule and add your routes with RouterTestingModule.withRoutes

import { RouterTestingModule } from '@angular/router/testing';

imports: [
  // routing
  RouterTestingModule.withRoutes(APP_ROUTES)
]

这篇关于Angular2 2.0.0组件单元测试导致错误：在注入路由器之前引导至少一个组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！