Angular项目Kendo多复选框过滤器报错：MissingTranslationHandler提供器无效

问题详情 #

我在Angular项目里使用Kendo库，同时维护一个通用组件的自定义库。在这个自定义库的Kendo网格中实现多复选框过滤器时，碰到了这个错误：

Uncaught Error: Invalid provider for MissingTranslationHandler. useClass cannot be undefined.

这类错误的常见原因有两个：

• 存在循环依赖（大概率是index.ts桶文件导致的）
• 类在声明前就被使用，这种情况需要用forwardRef

我试过用forwardRef(() => TranslateService)来处理翻译服务相关问题，但没有效果。

具体场景：这个自定义多复选框过滤器组件，在外部引用该库的项目里使用完全正常，但在库内部同模块的子组件中使用时，就会触发上述报错。相关模板代码如下：

<ng-template kendoGridFilterMenuTemplate let-column="column" let-filter="filter" let-filterService="filterService">
    <atuin-filter-multicheck [isPrimitive]="false" [field]="column.field" [currentFilter]="filter"
           [filterService]="filterService" textField="name" valueField="pkSeasonID"
           [data]="validSeasonList">
    </atuin-filter-multicheck>
</ng-template>

解决方案建议 #

1. 检查库内模块的依赖导入顺序
   确保TranslateModule和翻译服务的配置在自定义过滤器组件所在模块中先导入，再声明组件。避免因导入顺序不对导致服务还没初始化就被组件引用。

2. 排查桶文件的循环依赖
   检查自定义库的index.ts文件，看看有没有组件、服务之间的循环导出。可以试着删掉桶文件里不必要的导出，或者拆分模块来打破循环依赖。

3. 确认MissingTranslationHandler的配置正确性
   在库的模块里，明确配置TranslateModule的MissingTranslationHandler，保证useClass指向的类已经正确导入并声明，别让配置时类解析成undefined。示例配置：

   TranslateModule.forRoot({
     missingTranslationHandler: { useClass: CustomMissingTranslationHandler },
     // 其他翻译相关配置
   })
   

4. 延迟加载库内组件的翻译服务
   如果是组件初始化时翻译服务还没准备好，可以在组件里用Injector手动获取服务，或者在ngAfterViewInit这类生命周期钩子中再初始化过滤器的逻辑，别在构造函数里过早依赖未初始化的服务。

5. 检查库的构建配置
   确认自定义库的tsconfig.lib.json里的paths和compilerOptions设置正确，保证内部模块间的引用路径没问题，避免因为模块解析错误导致服务无法正常注入。

内容的提问来源于stack exchange，提问作者Muhammad Azam