Angular12引入angularx-social-login提示@angular/compiler不可用报错

你当前安装的angularx-social-login最新版本使用了Angular 13及以上版本才支持的Ivy部分编译模式，而你的项目Angular核心版本为12.2.1，且配套的构建依赖@angular-devkit/build-angular版本仅为9.1.15，无法处理这类部分编译的第三方库，触发JIT编译 fallback 后找不到@angular/compiler就会抛出对应错误，页面空白。

方案一（推荐，永久生效） #

• 第一步：卸载当前不兼容的库版本，安装适配Angular 12的4.x版本

  npm uninstall angularx-social-login
  npm install angularx-social-login@4.1.0
  

• 第二步：对齐构建依赖版本到和Angular核心一致的12.2.1，解决构建工具不匹配问题

  npm install @angular-devkit/architect@12.2.1 @angular-devkit/build-angular@12.2.1 @angular-devkit/core@12.2.1 --save-dev
  

• 第三步：清理缓存并重启服务
  删除项目根目录下的node_modules文件夹、package-lock.json文件，重新执行npm install，之后重启ng serve即可。

方案二（临时调试用，不建议生产环境使用） #

如果暂时不想调整依赖版本，可以在项目src/main.ts文件的最顶部添加一行导入，手动加载JIT编译器解决报错：

import '@angular/compiler';

该方案会增大产包体积，仅适合临时调试使用。

版本适配完成后，需要在app.module.ts的providers数组中添加对应配置才能正常使用功能，示例如下：

import { GoogleLoginProvider, SocialAuthServiceConfig, SocialLoginModule } from "angularx-social-login";

@NgModule({
  imports: [
    // 其他导入...
    SocialLoginModule
  ],
  providers: [
    {
      provide: 'SocialAuthServiceConfig',
      useValue: {
        autoLogin: false,
        providers: [
          {
            id: GoogleLoginProvider.PROVIDER_ID,
            provider: new GoogleLoginProvider('你申请的Google OAuth客户端ID')
          }
        ]
      } as SocialAuthServiceConfig,
    }
  ]
})
export class AppModule { }

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