Angular 12中注入FormService后无法访问getFormName方法的问题

1. 修复服务方法的语法错误 #

你提供的getFormName方法存在RxJS操作符使用错误：直接在pipe中传递箭头函数是无效的，必须使用map操作符来转换Observable的返回值，同时要确保导入map：

// 先导入map操作符
import { map } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class FormService {
  // ...其他代码

  getFormName(): Observable<string> {
    return this.http.get(this.jsonUrl)
      .pipe(map((res: any) => res.label)); // 用map包裹转换逻辑
  }
}

这种语法错误会导致TypeScript编译异常，最终生成的服务代码中缺失getFormName方法。

2. 检查导入与导出的正确性 #

• 确认FormService类的export关键字没有拼写错误，确保服务能被正确导出。
• 检查AppComponent中导入FormService的路径是否准确，避免因路径错误导入到其他同名文件或不存在的文件，导致拿到的实例没有目标方法。

3. 强制重新编译代码 #

• 确保form.service.ts文件已保存，Angular热重载可能存在检测延迟，手动重启开发服务器（执行ng serve），强制重新编译所有代码。

4. 清除缓存 #

• 用Ctrl+Shift+R强制刷新浏览器，清除浏览器缓存，避免加载旧的打包资源。
• 执行ng clean清除Angular构建缓存，之后重新启动服务。

5. 排查服务提供方式冲突 #

确认没有在AppComponent的providers数组中重复声明FormService，否则会覆盖root级别的单例服务实例，导致实例异常。

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