angular - NullInjectorError：没有 InjectionToken DEFAULT_LOCALE 的提供者

Question

我正在尝试使用 i18n 设置 Angular 2 项目。使用 Transloco 遵循此处的教程，一切都很好。但是，当我运行单元测试时，我得到了这个错误，我在网上找不到任何关于它的东西。我明显错过了一些东西，但我不知道是什么。任何帮助将非常感激。

Chrome 84.0.4147.89 (Linux x86_64) AppComponent should render title FAILED
    NullInjectorError: R3InjectorError(DynamicTestModule)[TranslocoLocaleService -> InjectionToken DEFAULT_LOCALE -> InjectionToken DEFAULT_LOCALE]: 
      NullInjectorError: No provider for InjectionToken DEFAULT_LOCALE!
    error properties: Object({ ngTempTokenPath: null, ngTokenPath: [ 'TranslocoLocaleService', 'InjectionToken DEFAULT_LOCALE', 'InjectionToken DEFAULT_LOCALE' ] })
        at <Jasmine>
        at NullInjector.get (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:914:1)
        at R3Injector.get (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:11059:1)
        at R3Injector.get (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:11059:1)
        at injectInjectorOnly (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:800:1)
        at Module.ɵɵinject (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:804:1)
        at Object.TranslocoLocaleService_Factory [as factory] (http://localhost:9876/_karma_webpack_/node_modules/@ngneat/transloco-locale/__ivy_ngcc__/fesm2015/ngneat-transloco-locale.js:972:212)
        at R3Injector.hydrate (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:11226:1)
        at R3Injector.get (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:11048:1)
        at NgModuleRef$1.get (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:23933:1)
        at Object.get (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:22198:1)
        Chrome 84.0.4147.89 (Linux x86_64): Executed 1 of 3 (1 FAILED) (0 secs / 0.12 secs)
        Chrome 84.0.4147.89 (Linux x86_64) AppComponent should render title FAILED

这是我的 app.component.spec.ts 文件：

export function getTranslocoModule(config: Partial<TranslocoConfig> = {}) {
      return TranslocoTestingModule.withLangs(
        { en, de },
        {
          availableLangs: ['en', 'de'],
          defaultLang: 'en',
          fallbackLang: 'de',
          reRenderOnLangChange: true,
          ...config
        });
    }
    
    describe('AppComponent', () => {
        beforeEach(async(() => {
          TestBed.configureTestingModule({
            imports: [
              getTranslocoModule(),
              RouterTestingModule,
              TranslocoLocaleModule
            ],
            declarations: [
              AppComponent
            ],
            providers: [
            {
              provide: LOCALE_LANG_MAPPING,
              useValue: undefined
            }]
          }).compileComponents();
        }));
    
      it('should render title', () => {
        const fixture = TestBed.createComponent(AppComponent)
        fixture.detectChanges()
        const compiled = fixture.nativeElement
        expect(compiled.querySelector('.content span').textContent).toContain('pricetracer app is running!')
      })
    })

这是 app.module.ts

import { NgModule } from '@angular/core'
import { AppRoutingModule } from './app-routing.module'
import { AppComponent } from './app.component'
import { HttpClientModule } from '@angular/common/http'
import { TranslocoRootModule } from './transloco-root.module'
import { TranslocoLocaleModule } from '@ngneat/transloco-locale'

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    TranslocoRootModule,
    TranslocoLocaleModule.init({
      defaultLocale: 'en',
      langToLocaleMapping: {
        en: 'en-US',
        de: 'de-DE'
      }
    }),
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

标签： angularinternationalizationtransloco

Answer 1

此错误告诉您它没有在app.component.spec.ts文件中找到提供程序 DEFAULT_LOCALE。

你需要做的是。您需要DEFAULT_LOCALE在您的app.component.spec.ts文件中注册TestBed.configureTestingModule为提供者：

TestBed.configureTestingModule({
        imports: [
          getTranslocoModule(),
          RouterTestingModule,
          TranslocoLocaleModule
        ],
        declarations: [
          AppComponent
        ],
        providers: [
        {
        
          *** add DEFAULT_LOCALE as a provider ***
        
          provide: LOCALE_LANG_MAPPING,
          useValue: undefined
        }]
      }).compileComponents();
    }));