使用Angular 1.5+TypeScript自定义过滤器时遇Unknown provider错误

这个错误我之前在Angular 1.x+TypeScript项目里踩过坑！本质是没搞对Angular过滤器的注册和注入规则，咱们一步步拆解解决：

核心原因：过滤器命名与注入的规则冲突 #

Angular 1.x对过滤器的命名有明确规则：

• 注册过滤器时，使用功能名称（不带Filter后缀），比如模板里用{{text | testName}}，注册名就是testName
• 当在代码（控制器/服务）中注入过滤器时，需要在注册名后加Filter后缀，比如注入testNameFilter

你的错误提示里出现testNameFilterFilter，说明你注册过滤器时的名字已经带了Filter后缀（比如TestNameFilter），注入时又自动加了Filter，导致重复后缀，Angular找不到对应的provider。

具体修复步骤 #

1. 修正过滤器类的注册名称 #

看你的代码，父类AbstractFilter的构造函数第一个参数是过滤器的注册名称，你现在传的是"TestNameFilter"，这就是问题根源！把它改成不带Filter后缀的名称，比如"testName"：

export class TestNameFilter extends AbstractFilter { 
  public static factory($injector: angular.auto.IInjectorService): Function { 
    return new TestNameFilter($injector).filter; 
  } 
  public constructor($injector: angular.auto.IInjectorService) { 
    // 把注册名改为不带Filter后缀的"testName"
    super("testName", $injector); 
  } 
  public filter = (text: string, length: any, end: any): string => { 
    // 补全你的过滤器逻辑
    let processedText = text;
    if (text && length) {
      processedText = text.slice(0, length) + (end ?? "...");
    }
    return processedText;
  };
}

2. 正确注册过滤器到Angular模块 #

确保在模块中注册时，使用和上面一致的名称（testName）：

// 替换成你的实际模块名
angular.module('yourAppModule')
  .filter('testName', TestNameFilter.factory);

3. 注入过滤器时使用正确的名称 #

如果需要在控制器或服务中使用这个过滤器，注入时要加Filter后缀：

export class YourController {
  // 显式声明注入依赖（TypeScript中推荐这样做，避免压缩问题）
  static $inject = ['testNameFilter'];
  
  constructor(private testNameFilter: (text: string, length: any, end: any) => string) {
    // 使用过滤器
    const truncatedText = this.testNameFilter('这是一段很长的文本', 8, '...');
    console.log(truncatedText); // 输出："这是一段很长的..."
  }
}

// 注册控制器
angular.module('yourAppModule')
  .controller('YourController', YourController);

额外注意点 #

• 检查你的AbstractFilter父类实现，确保它是用传入的注册名称去注册过滤器，而不是额外添加Filter后缀
• 模板中使用过滤器时，直接用注册名testName即可：{{yourText | testName:10:'---'}}

内容的提问来源于stack exchange，提问作者Shrinivas Pai