6赞
418
当前位置:  开发笔记 > 编程语言 > 正文

RouterTestingModule不提供位置的提供程序

如何解决《RouterTestingModule不提供位置的提供程序》经验,为你挑选了1个好方法。

我正在Component使用其他两个组件进行单元测试。单击按钮时创建其他组件

.html

    
...
...

.ts

export class HomepageContentComponentComponent implements OnInit {

  public questiOnListRouterLink="/practice-question-list";
  public newQuestiOnRouterLink="/new-practice-question";


  constructor() {

  }

  ngOnInit() {
  }

}

我创建了一个规范,但是运行它时出现以下错误- Error: StaticInjectorError[Location]: NullInjectorError: No provider for Location!

规格是

import {async, ComponentFixture, fakeAsync, TestBed, tick} from '@angular/core/testing';
import { HomepageContentComponentComponent } from './homepage-content-component.component';
import {RouterTestingModule} from "@angular/router/testing";
import {AppRoutingModule} from "../app-routing.module";
import {Router} from "@angular/router";
import {routes} from '../app-routing.module';
import {NewPracticeQuestionComponent} from "../new-practice-question/new-practice-question.component";
import {PraticeQuestionListComponent} from "../pratice-question-list/pratice-question-list.component";
import {NgModule} from "@angular/core";
import {AppModule} from "../app.module";

fdescribe('HomepageContentComponentComponent', () => {
  let component: HomepageContentComponentComponent;
  let fixture: ComponentFixture;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports:[
        AppModule,
        AppRoutingModule,
        RouterTestingModule.withRoutes(routes) //<-- I SUPPOSE THIS STEP SHOULD PROVIDE ROUTERTESTINGMODULE WITH PROVIDERS FOR LOCATION BUT IT SEEMS IT ISN'T
      ],
      declarations: [ HomepageContentComponentComponent,
                  NewPracticeQuestionComponent,
        PraticeQuestionListComponent]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(HomepageContentComponentComponent);
    compOnent= fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });

  it('should navigate to New Questions Component when New Question button is clicked',fakeAsync(()=>{
    let router:Router;
    let location:Location;
    router = TestBed.get(Router);
    location = TestBed.get(Location);
    console.log('initial router is ',router);
    console.log('initial location is ',location);
    router.initialNavigation();
    router.navigate(['new-practice-question']);
    tick();
    console.log('new router is ',router);
    console.log('new location is ',location);

    expect(location.pathname).toBe('/new-practice-question');
  }));
});

Dan Macák.. 6

选择错误的Location并提供import {Location} from "@angular/common";帮助的原因是TypeScript实际上认为您不希望使用的类型window.location,而该类型与您要查找的类型完全不同,因此不导入它。

由于该类型是从angular的DI注册中心检索所需实例的标记,因此,如果使用错误的类型,则不会得到任何信息。当您注释掉导入并Location在IDE中“单击”该类型时,您会看到所选择的类型实际上是DOM接口,而不是Angular实现。"lib": ["dom"]进入tsconfig.json后,该DOM接口就会隐式存在。

从DOM的Locationangular显式阴影导入Location,选择正确的类型,并Location在angular的DI注册中心找到正确的实例。

实际上,这是一个很容易犯的错误(我自己做的),因为即使您忘记导入LocationLocation也会选择DOM ,而您在IDE中根本没有任何反馈,并且您想知道DI为何会失败。



1> Dan Macák..:

选择错误的Location并提供import {Location} from "@angular/common";帮助的原因是TypeScript实际上认为您不希望使用的类型window.location,而该类型与您要查找的类型完全不同,因此不导入它。

由于该类型是从angular的DI注册中心检索所需实例的标记,因此,如果使用错误的类型,则不会得到任何信息。当您注释掉导入并Location在IDE中“单击”该类型时,您会看到所选择的类型实际上是DOM接口,而不是Angular实现。"lib": ["dom"]进入tsconfig.json后,该DOM接口就会隐式存在。

从DOM的Locationangular显式阴影导入Location,选择正确的类型,并Location在angular的DI注册中心找到正确的实例。

实际上,这是一个很容易犯的错误(我自己做的),因为即使您忘记导入LocationLocation也会选择DOM ,而您在IDE中根本没有任何反馈,并且您想知道DI为何会失败。

推荐阅读
devbox
Lyj眼淚啲菋噵
这个家伙很懒,什么也没留下!
Tags | 热门标签
RankList | 热门文章
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved PHP1.CN 第一PHP社区 版权所有 京ICP备19059560号-4