No provider for InjectionToken Localization key prefix

Question

I'm not new to angular and normally I know how to handle the "No provider for XYZ" Errors but in this case I don't know what angular means with "Localization key prefix"

My component is a basic wrapper for a kendo-pager

<ng-container *ngIf="render">
    <kendo-pager-prev-buttons *ngIf="previousNext"></kendo-pager-prev-buttons>
    <kendo-pager-input *ngIf="type=='input'"></kendo-pager-input>
    <kendo-pager-numeric-buttons *ngIf="type=='numeric'" [buttonCount]="buttonCount"></kendo-pager-numeric-buttons>
    <kendo-pager-page-sizes *ngIf="pageSizes"></kendo-pager-page-sizes>
    <kendo-pager-next-buttons *ngIf="previousNext"></kendo-pager-next-buttons>
</ng-container>

import {Component, Input, OnInit} from '@angular/core';

@Component({
    selector: 'b-pager',
    templateUrl: './b-pager.component.html',
    styleUrls: ['./b-pager.component.scss']
})
export class BPagerComponent implements OnInit {

    @Input() public buttonCount = 5;
    @Input() public type: 'numeric' | 'input' = 'numeric';
    @Input() public pageSizes = false;
    @Input() public previousNext = true;
    @Input() public render = true;

    constructor() {}

    ngOnInit() {}
}

When running the tests for this component I get the "No provider for InjectionToken Localization key prefix" error.

This is the test code

import {LOCALE_ID} from '@angular/core';
import {async, ComponentFixture, TestBed} from '@angular/core/testing';
import {BrowserTestingModule} from '@angular/platform-browser/testing';
import {TranslateService} from '@ngx-translate/core';
import {PagerModule} from '@progress/kendo-angular-grid';
import {LocalizationService, MessageService} from '@progress/kendo-angular-l10n';

import {BPagerComponent} from './b-pager.component';

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

    beforeEach(async(() => {
        TestBed.configureTestingModule({
            imports: [PagerModule, BrowserTestingModule],
            declarations: [BPagerComponent],
            providers: [
                LocalizationService
            ]
        }).compileComponents();
    }));

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

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

The dependencies for internalization in the package.json are

"@progress/kendo-angular-grid": "^3.0.0",
"@progress/kendo-angular-intl": "^2.0.0",
"@progress/kendo-angular-l10n": "^2.0.0",

Does anyone know why Im getting this error and how to fix it?

Answer 1

There is a rather obscure injection token that is required by the LocalizationService in Kendo called L10N_PREFIX that helps with localization of the Kendo components. So in addition to the providers you have already provided you have to add: { provide: L10N_PREFIX, useValue: '' }.

So:

beforeEach(async(() => {
    TestBed.configureTestingModule({
        imports: [PagerModule, BrowserTestingModule],
        declarations: [BPagerComponent],
        providers: [
            LocalizationService,
            { provide: L10N_PREFIX, useValue: '' }
        ]
    }).compileComponents();
}));

If you go poking around the code provided in the node_modules by Kendo you will find L10N_PREFIX in: @progress/kendo-angular-I10n/dist/es2015/localization.service.js