Angular 角度7测试:NullInjectorError:没有ActivatedRoute的提供程序

Angular 角度7测试:NullInjectorError:没有ActivatedRoute的提供程序,angular,testing,jasmine,karma-runner,Angular,Testing,Jasmine,Karma Runner,嗨,在测试我用Angular 7制作的应用程序时出现了一些错误。我在这方面没有太多经验,所以我需要你的帮助+ Error: StaticInjectorError(DynamicTestModule)[BeerDetailsComponent -> ActivatedRoute]: StaticInjectorError(Platform: core)[BeerDetailsComponent -> ActivatedRoute]: NullInjectorError

嗨,在测试我用Angular 7制作的应用程序时出现了一些错误。我在这方面没有太多经验,所以我需要你的帮助+

Error: StaticInjectorError(DynamicTestModule)[BeerDetailsComponent -> ActivatedRoute]: 
  StaticInjectorError(Platform: core)[BeerDetailsComponent -> ActivatedRoute]: 
    NullInjectorError: No provider for ActivatedRoute!
测试代码如下所示:

import { async, ComponentFixture, TestBed, inject } from '@angular/core/testing';
import { BeerDetailsComponent } from './beer-details.component';
import {
  HttpClientTestingModule,
  HttpTestingController
} from '@angular/common/http/testing';

describe('BeerDetailsComponent', () => {
  let component: BeerDetailsComponent;
  let fixture: ComponentFixture<BeerDetailsComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [HttpClientTestingModule],
      declarations: [ BeerDetailsComponent ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(BeerDetailsComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create',
  inject(
    [HttpTestingController],
    () => {
      expect(component).toBeTruthy();
    }
  )
)
});
从'@angular/core/testing'导入{async,ComponentFixture,TestBed,inject};
从“/beer details.component”导入{BeerDetailsComponent};
进口{
HttpClientTestingModule,
HttpTestingController
}来自“@angular/common/http/testing”;
描述('BeerDetailsComponent',()=>{
let组件:BeerDetails组件;
let夹具:组件夹具;
beforeach(异步(()=>{
TestBed.configureTestingModule({
导入:[HttpClientTestingModule],
声明:[BeerDeailsComponent]
})
.compileComponents();
}));
在每个之前(()=>{
fixture=TestBed.createComponent(BeerDetailsComponent);
组件=fixture.componentInstance;
fixture.detectChanges();
});
它('应该创建',
注入(
[HttpTestingController],
() => {
expect(component.toBeTruthy();
}
)
)
});
我真的找不到任何解决办法


Daniele

添加以下导入

  imports: [ 
    RouterModule.forRoot([]),
    ...
  ],

您必须导入RouterTestingModule

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

imports: [
    ...
    RouterTestingModule
    ...
]

使用服务和ActivatedRoute的简单测试示例!祝你好运

    import { async, ComponentFixture, TestBed } from '@angular/core/testing';
    import { RouterTestingModule } from '@angular/router/testing';
    import { HttpClientModule } from '@angular/common/http';
    import { MyComponent } from './my.component';
    import { ActivatedRoute } from '@angular/router';
    import { MyService } from '../../core/services/my.service';


    describe('MyComponent class test', () => {
    let component: MyComponent;
    let fixture: ComponentFixture<MyComponent>;
    let teste: MyComponent;
    let route: ActivatedRoute;
    let myService: MyService;

    beforeEach(async(() => {
        teste = new MyComponent(route, myService);
        TestBed.configureTestingModule({
        declarations: [ MyComponent ],
        imports: [
            RouterTestingModule,
            HttpClientModule
        ],
        providers: [MyService]
        })
        .compileComponents();
    }));

    beforeEach(() => {
        fixture = TestBed.createComponent(MyComponent);
        component = fixture.componentInstance;
        fixture.detectChanges();
    });

    it('Checks if the class was created', () => {
        expect(component).toBeTruthy();
    });

    });
从'@angular/core/testing'导入{async,ComponentFixture,TestBed};
从“@angular/router/testing”导入{RouterTestingModule};
从'@angular/common/http'导入{HttpClientModule};
从“/my.component”导入{MyComponent};
从'@angular/router'导入{ActivatedRoute};
从“../../core/services/my.service”导入{MyService};
描述('MyComponent类测试',()=>{
let组分:MyComponent;
let夹具:组件夹具;
睾丸:支原体成分;
let-route:ActivatedRoute;
让我的服务:我的服务;
beforeach(异步(()=>{
teste=新的MyComponent(路由、myService);
TestBed.configureTestingModule({
声明:[MyComponent],
进口:[
路由器测试模块,
HttpClientModule
],
提供者:[MyService]
})
.compileComponents();
}));
在每个之前(()=>{
fixture=TestBed.createComponent(MyComponent);
组件=fixture.componentInstance;
fixture.detectChanges();
});
它('检查类是否已创建',()=>{
expect(component.toBeTruthy();
});
});

我在测试时也有一段时间出现了这个错误,但这些答案都没有真正帮助我。对我来说,解决这个问题的方法是同时导入RouterTestingModule和HttpClientTestingModule

因此,在whatever.component.spec.ts文件中基本上是这样的

你可以从中国进口

import { RouterTestingModule } from "@angular/router/testing";
import { HttpClientTestingModule } from "@angular/common/http/testing";

我不知道这是否是最好的解决方案,但这对我很有效。

此问题可以按如下方式解决:

  • 在相应的spec.ts文件中导入路由测试模块

    import { RouterTestingModule } from "@angular/router/testing";
    
    imports: [
        ...
        RouterTestingModule
        ...
    ]
    
    从'@angular/router/testing'导入{RouterTestingModule}

  • 在同一文件中,添加RouterTestingModule作为导入之一

     beforeEach(() => {
        TestBed.configureTestingModule({
        imports: [RouterTestingModule],
        providers: [Service]
      });
     });
    

  • 我应该在哪里导入RouterModule.forRoot([]),在模块
    import{RouterModule}中从'@angular/router'导入:)如果此Help.RouterModule不应包含在测试文件中,请确保检查为答案这不是一个正确的解决方案,因此您需要定义所有roter模块提供程序参数、APP_BASE_HREF标记等。执行此操作时,请改为使用RouterTestingModule而不使用路由器提供程序声明,我开始收到错误
    NullInjectorError:ActivatedRoute没有提供程序您是否已将此模块导入规范文件?我认为解决方案是使用包含测试访问的属性的匿名对象为路由添加提供程序。您是否在任何地方使用
    teste
    ?为什么需要它?我在工作的任何地方都使用它,这是一种确保应用程序在某些更改后继续工作而不破坏我的代码的方法。