angular - 没有 InjectionToken 本地化键前缀的提供者

Question

我不是 Angular 的新手，通常我知道如何处理“No provider for XYZ”错误，但在这种情况下，我不知道 Angular 对“本地化键前缀”意味着什么

我的组件是 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() {}
}

运行此组件的测试时，出现“没有提供 InjectionToken Localization key prefix 的提供商”错误。

这是测试代码

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

package.json 中内化的依赖是

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

有谁知道为什么我会收到此错误以及如何修复它？

Answer 1

Kendo 中的 LocalizationService 需要一个相当模糊的注入(inject) token ，称为 L10N_PREFIX，它有助于 Kendo 组件的本地化。因此，除了您已经提供的提供商之外，您还必须添加:{ provide: L10N_PREFIX, useValue: '' }。

所以:

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

如果您浏览 Kendo 在 node_modules 中提供的代码，您会在以下位置找到 L10N_PREFIX:@progress/kendo-angular-I10n/dist/es2015/localization.service.js