Angular 8集成angularx-social-login运行时出现Injectable未定义报错

报错原因 #

• 根本原因是当前安装的angularx-social-login版本与Angular 8环境不兼容。该库v4及以上版本仅支持Angular 13及更高版本，底层依赖的@angular/core导出结构发生了变更，Angular 8中没有对应版本的Injectable导出声明，因此运行时触发属性读取异常。
• 次要可能为项目依赖缓存冲突，导致模块加载时读取了错误的依赖导出路径。

解决方案 #

1. 首先卸载当前已安装的不兼容版本：

npm uninstall angularx-social-login

2. 安装适配Angular 8的v2.x分支版本，推荐使用稳定的2.3.1版本：

npm install angularx-social-login@2.3.1 --save

3. 清理依赖缓存后重新安装依赖并启动项目：

# 类Unix系统执行
rm -rf node_modules package-lock.json
# Windows系统直接手动删除node_modules文件夹和package-lock.json文件
npm install
npm start

4. 若完成上述操作后仍有配置错误，检查app.module.ts中的模块配置是否符合v2版本的规范，参考配置如下：

import { NgModule } from '@angular/core';
import { SocialLoginModule, AuthServiceConfig, GoogleLoginProvider } from "angularx-social-login";

const authConfig = new AuthServiceConfig([
  {
    id: GoogleLoginProvider.PROVIDER_ID,
    provider: new GoogleLoginProvider("替换为你的第三方登录客户端ID")
  }
]);

export function getAuthServiceConfig() {
  return authConfig;
}

@NgModule({
  imports: [
    // 其余模块引入保持不变
    SocialLoginModule
  ],
  providers: [
    {
      provide: AuthServiceConfig,
      useFactory: getAuthServiceConfig
    }
  ]
})
export class AppModule { }

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