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();
    }));

Answer 2

This issue is usually related with missing configuration in a module. If the module does not provide a nice testing module, such as RouterTestingModule, TranslocoTestingModule etc, which is the case for TranslocoLocaleModule, you then should import it with the configuration included, which usually means calling forRoot when importing.

Perhaps this solves your problem:

          TestBed.configureTestingModule({
            imports: [
              getTranslocoModule(),
              RouterTestingModule,
              TranslocoLocaleModule.forRoot(),    // <----- forRoot!
            ],
            declarations: [AppComponent],
          })

Without a need to add providers.