【问题标题】:Test failing in angular 6 due to APP_BASE_HREF not being set由于未设置 APP_BASE_HREF,角度 6 中的测试失败
【发布时间】:2019-01-28 18:25:40
【问题描述】:

我开始在我的 Angular 6 应用程序中使用测试。我遇到了一个错误,但我不确定如何解决。

正如您在下面看到的,我的测试抱怨未设置基本 href,但在我的 index.html 中我确实有 <base href="/">

Error: No base href set. Please provide a value for the APP_BASE_HREF token or
       add a base element to the document.
at new PathLocationStrategy (./node_modules/@angular/common/fesm5/common.js?:498:19)
at provideLocationStrategy (./node_modules/@angular/router/fesm5/router.js?:5302:9)
at _callFactory (./node_modules/@angular/core/fesm5/core.js?:8735:20)
at _createProviderInstance (./node_modules/@angular/core/fesm5/core.js?:8687:26)
at initNgModule (./node_modules/@angular/core/fesm5/core.js?:8617:32)
at new NgModuleRef_ (./node_modules/@angular/core/fesm5/core.js?:9343:9)
at createNgModuleRef (./node_modules/@angular/core/fesm5/core.js?:9332:12)
at Object.debugCreateNgModuleRef [as createNgModuleRef]
       (./node_modules/@angular/core/fesm5/core.js?:11157:12)
at NgModuleFactory_.create (./node_modules/@angular/core/fesm5/core.js?:11874:25)
at TestBed._initIfNeeded (./node_modules/@angular/core/fesm5/testing.js?:1015:47)

这是我的item-component.spec.ts 测试

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

import {ItemComponent} from './item.component';
import {HttpClientTestingModule} from '@angular/common/http/testing';
import {AppRoutingModule} from '../../app-routing.module';
import {HomeComponent} from '../home/home.component';
import {ContactComponent} from '../contact/contact.component';
import {InventoryComponent} from '../inventory/inventory.component';
import {SearchComponent} from '../search/search.component';
import {ApplicationFormComponent} from '../application/application-form.component';
import {SiteShellComponent} from '../site-shell/site-shell.component';
import {MainNavigationComponent} from '../partials/main-navigation/main-navigation.component';
import {FooterComponent} from '../partials/footer/footer.component';
import {ReactiveFormsModule} from '@angular/forms';

import {DebugComponent} from '../debug/debug.component';
import {NewformComponent} from '../debug/under-test/newform.component';
import {MultiSelectComponent} from '../debug/under-test/multi-select.component';

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

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        ItemComponent,
        HomeComponent,
        ContactComponent,
        InventoryComponent,
        SearchComponent,
        FinanceApplicationComponent,
        SiteShellComponent,
        MainNavigationComponent,
        FooterComponent,

        DebugComponent,
        NewformComponent,
        MultiSelectComponent,
      ],
      imports: [
        HttpClientTestingModule,
        AppRoutingModule,
        ReactiveFormsModule
      ],
    })
      .compileComponents();
  }));

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

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

为什么我的测试看不到基本的href,或者我做错了什么?我真的不知道在这里看什么来解决。我尝试导入 AppComponent,但没有帮助。

编辑:即使有人无法回答,但至少可以为我指明正确的方向,但我仍然坚持这一点。 谢谢。

【问题讨论】:

  • 尝试在你的模块文件中添加这个: import { APP_BASE_HREF } from '@angular/common';然后在 NgModule 装饰器的 Providers 数组中提供: providers: [ { provide: APP_BASE_HREF, useValue: '/' }]

标签: angular unit-testing testing angular6 karma-jasmine


【解决方案1】:

将RouterTestingModule 从@angular/router/testing 导入到Testbed。这应该可以解决问题。

【讨论】:

    猜你喜欢
    • 2021-09-18
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-10-09
    • 1970-01-01
    • 1970-01-01
    • 2018-11-18
    • 1970-01-01
    相关资源
    最近更新 更多