Angular依赖注入后已定义的CourseServiceMock函数调用提示undefined

问题原因 #

1. 依赖注入配置错误：在app.module.ts的providers配置中，你错误使用了useValue配置项。useValue的作用是直接绑定一个现成的实例/固定值，你传入的是CourseServiceMock类本身，导致注入到组件中的是类构造函数而非实例，实例方法自然不存在。
2. 冗余装饰器：FirstComponent已经有@Component装饰器，额外添加的@Injectable()属于冗余代码，无实际作用。

修复方案 #

1. 修改app.module.ts的providers配置，将useValue替换为useClass，让Angular依赖注入容器自动实例化CourseServiceMock类并返回实例：

providers: [
  {provide: CourseService, useClass: CourseServiceMock}
]

2. 删除first.component.ts中类上方的@Injectable()装饰器即可。

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