測驗時出現NullInjectorError

我在Angular 12中運行ng測驗時遇到了以下問題：

NullInjectorError.

NullInjectorError。R3InjectorError(DynamicTestModule)[BaseURL -> BaseURL]。 NullInjectorError。沒有BaseURL的提供者! 錯誤屬性。Object({ ngTempTokenPath: null, ngTokenPath: [ 'BaseURL', 'BaseURL' ] }) NullInjectorError: R3InjectorError(DynamicTestModule)[BaseURL -> BaseURL]。 NullInjectorError: 沒有BaseURL的提供者! at NullInjector.get (http://localhost:9876/karma_webpack/webpack:/node_modules/@angular/core/ivy_ngccfesm2015/core.js:11101:1) at R3Injector.get (http://localhost:9876/karma_webpack/webpack:/node_modules/@angular/core/ivy_ngcc/sesm2015/core.js:11268:1) at R3Injector.get (http://localhost:9876/karma_webpack/webpack:/node_modules/@angular/core/ivy_ngcc/sesm2015/core.js:11268:1) at NgModuleRef$1.get (http://localhost:9876/karma_webpack/webpack:/node_modules/@angular/core/ivy_ngcc/sesm2015/core.js:25332:1) at Object.get (http://localhost:9876/karma_webpack/webpack:/node_modules/@angular/core/ivy_ngcc/sesm2015/core.js:25046:1) at lookupTokenUsingModuleInjector (http://localhost:9876/karma_webpack/webpack:/node_modules/@angular/core/ivy_ngcc/sesm2015/core.js:3342:1) at getOrCreateInjectable (http://localhost:9876/karma_webpack/webpack:/node_modules/@angular/core/ivy_ngcc/fesm2015/core.js:3454:1) at ??directiveInject (http://localhost:9876/karma_webpack/webpack:/node_modules/@angular/core/ivy_ngcc/sesm2015/core.js:14737:1) at NodeInjectorFactory.MenuComponent_Factory [as factory] (ng://MenuComponent/?fac.js:5:7) at getNodeInjectable (http://localhost:9876/karma_webpack/webpack:/node_modules/@angular/core/ivy_ngcc/fesm2015/core.js:3549:1)

錯誤。期望undefined是truthy。 在 at UserContext. (http://localhost:9876/karma_webpack/webpack：/src/app/menu/menu.component.spec.ts：46:23) at ZoneDelegate.invoke (http://localhost:9876/karma_webpack/webpack:/node_modules/zone.js/fesm2015/zone.js:372:1) at ProxyZoneSpec.onInvoke (http://localhost:9876/karma_webpack/webpack:/node_modules/zone.js/fesm2015/zone-testing.js:287:1)

spec.ts的代碼是：

import { ComponentFixture, TestBed } from '@angular/core/testing'。
import { MenuComponent } from './menu.component'/span>;
import { DishService } from './services/dish.service'。

describe('MenuComponent', () =>  {
  let component: MenuComponent。
  let fixture: ComponentFixture<MenuComponent> 。

const mockDishService = {
  getDishes: () => {
     return {
        id: '000'。
        name: 'nnnn', name: 'nnnn'
     }
  }
}

  beforeEach(async ( ) => {
    await TestBed.configureTestingModule（{
      imports: [],
      declarations: [MenuComponent]。
      providers: [
        { provide: DishService, useValue: mockDishService },
      ]
    })
    .compileComponents（）。
  });

  beforeEach(() => {
    fixture = TestBed.createComponent（MenuComponent）。
    component = fixture.componentInstance。
    fixture.detectChanges（）。

  });

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

});

該組件的代碼是：

import { Component, OnInit, Inject } from '@angular/core'/span>。
import { Dish } from './shared/dish'。
import { DishService } from './services/dish.service';
import { flyInOut, expand } from './animations/app.animation';

@Component（{
  selector: 'app-menu',
  templateUrl: './menu.component.html',
  styleUrls: ['./menu.component.scss'] 。
  // tslint:disable-next-line:use-host-property-decorator]。
  host: {
    '[@flyInOut]'。'true'。
    'style': 'display: block;'。
    },
  animations: [
    flyInOut(),
    expand()
  ]
})
export class MenuComponent 實作 OnInit {

  菜！。Dish[];
  errMess: string;
  
  constructor（private dishService: DishService。
    @Inject ('BaseURL') public baseURL) { }

  ngOnInit(): void {
    this.dishService.getDishes（）。 subscribe((dishes => this。 dishes = dishes), errMess =>  this. errMess = <any>errMess)。
  }

我使用baseURL來獲取db.json檔案的資訊，同時運行json-server --watch db.json來模擬我從服務器上獲取資訊，所以我有一個名為baseurl.ts的共享.ts檔案，代碼如下：

export const baseURL = 'http://localhost:3000'/span>;

而在app.module.ts中，我匯入了const

import { baseURL } from ' ./shared/baseurl';

并且我在同一個app.module.ts檔案中把它作為一個提供者添加：

我希望有人能夠幫助我解決這個錯誤

uj5u.com熱心網友回復：

問題1：NullInjectorError

這個錯誤資訊顯示為你的DishComponent要求BaseURL被注入[@Inject ('BaseURL')]。

NullInjectorError。R3InjectorError(DynamicTestModule)[BaseURL -> BaseURL]。NullInjectorError。沒有BaseURL的提供者！

問題1的解決方案

確保在providers部分添加BaseURL進行單元測驗。

const baseUrl = "our Base URL"。

beforeEach(async ( ) => {
  await TestBed.configureTestingModule（{
    ...
    providers: [
      { provide: DishService, useValue: mockDishService },
      { provide: 'BaseURL', useValue: baseUrl },
    ]
  })
  .compileComponents（）。
});

問題2：mockDishService.getDishes()回傳錯誤的值

從MenuComponent來看，預計dishService.getDishes()會回傳Observable<Menu[]>或者Observable<any[]>型別的值。

dishes! Dish[]。

this.dishService.getDishes（）。 subscribe((dishes => this。 dishes = dishes), errMess =>  this. errMess =<any>errMess)。

當mockDishService.getDishes()回傳any或Menu型別的值時，回傳的資料是不匹配的。

const mockDishService = {
  getDishes: () => {
    return {
      id: '000'。
      name: 'nnnn'。
    };
  },
};

因此，你會得到如下的錯誤資訊：

型別錯誤：this.dishService.getDishes(..).subscribe不是一個函式

問題2的解決方案：

確保mockDishService.getDishes()回傳Observable<Menu[]>或Observable<any[]>的值與真正的dishService.getDishes()相匹配。

import { of } from 'rxjs'/span>;

const mockDishService = {
  getDishes: () => {
    return of（[
      {
        id: '000'。
        name: 'nnnn'。
      },
    ]);
  },
};

StackBlitz上的示例解決方案

標籤：

上一篇：如何洗掉或減少標題和文章標題之間的空白空間

下一篇：為什么我的結果陣列在這個mongo查詢中回傳為空？