NullInjectorError: No provider for InjectionToken DEFAULT_LOCALE

Question

I am trying to set up an Angular 2 project with i18n. Followed the tutorial here using Transloco and all works great. However, when I run the unit tests I get this error and I cant find anything online about it. I am defiantly missing something but I dont know what. Any help would be really appreciated.

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

Here is my app.component.spec.ts file:

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!')
      })
    })

Here is 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 {}

Answer 1

This error is telling you that it is not finding in the app.component.spec.ts file the provider DEFAULT_LOCALE.

What you need to do is. You need to register DEFAULT_LOCALE in your app.component.spec.ts file under TestBed.configureTestingModule as a provider:

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