Angular5中重写其他模块服务时出现"is not a function"错误求助

哦，这个问题我之前帮人排查过好几次，核心问题出在你模块2的providers配置上！

错误原因分析 #

你现在用了useValue: MyChartProgressService来替换原有的ChartProgressService，但这里犯了一个Angular依赖注入的常见误区：

• useValue是用来注入具体的值的，比如字符串、对象字面量，或者已经手动实例化好的对象。
• 你直接把MyChartProgressService这个类本身传进去，注入到组件里的其实是这个类的构造函数，而不是它的实例。当你调用这个"实例"的方法时，自然会抛出"is not a function"的错误——因为构造函数本身不是你要调用的实例方法。

正确的解决方案 #

把useValue换成useClass就可以解决问题了，useClass会告诉Angular自动帮你实例化指定的类，注入的就是可用的服务实例：

providers: [
  { provide: Configuration, useClass: AppConfiguration },
  { provide: ChartProgressService, useClass: MyChartProgressService }, // 这里替换为useClass
  { provide: LOCALE_ID, useValue: 'de-DE' }
]

特殊场景补充 #

如果你的MyChartProgressService需要依赖其他服务（比如HttpClient或者其他自定义服务），useClass会自动处理这些依赖的注入，这也是它比useValue更适合类实例注入的原因。

当然，如果你确实需要用useValue（比如要手动控制实例化过程），那你得自己手动创建实例并传入所有依赖，比如：

// 假设MyChartProgressService需要HttpClient依赖
{ 
  provide: ChartProgressService, 
  useValue: new MyChartProgressService(injectedHttpClientInstance) 
}

但这种方式非常繁琐，除非有特殊需求，否则强烈推荐用useClass。

最后别忘了确认MyChartProgressService已经正确实现了ChartProgressService的所有方法（不管是继承基类还是实现接口），避免因为方法名不匹配导致的其他问题。

内容的提问来源于stack exchange，提问作者Thorsten Rintelen