“错误：需要使用 JIT 编译器编译可注入的‘SocialAuthService’，但‘@angular/compiler’不可用。”在角 12答案

【问题标题】："Error: The injectable 'SocialAuthService' needs to be compiled using the JIT compiler, but '@angular/compiler' is not available." in Angular 12“错误：需要使用 JIT 编译器编译可注入的‘SocialAuthService’，但‘@angular/compiler’不可用。”在角 12
【发布时间】：2021-12-10 00:30:48
【问题描述】：

我正在开展一个更大的项目并尝试实施 Google OAuth 社交登录。一旦我导入SocialLoginModule 并添加import {GoogleLoginProvider, SocialAuthServiceConfig, SocialLoginModule} from "angularx-social-login";，网页就会变为空白并出现以下错误：

core.js:4036 JIT compilation failed for injectable class SocialAuthService {
    /**
     * @param config A `SocialAuthServiceConfig` object or a `Promise` that resolves to a `SocialAuthServiceConfig` object
     */
    constructor(config) {
        this.p…
getCompilerFacade @ core.js:4036
core.js:4055 Uncaught Error: The injectable 'SocialAuthService' needs to be compiled using the JIT compiler, but '@angular/compiler' is not available.

The injectable is part of a library that has been partially compiled.
However, the Angular Linker has not processed the library such that JIT compilation is used as fallback.

Ideally, the library is processed using the Angular Linker to become fully AOT compiled.
Alternatively, the JIT compiler should be loaded by bootstrapping using '@angular/platform-browser-dynamic' or '@angular/platform-server',
or manually provide the compiler with 'import "@angular/compiler";' before bootstrapping.
    at getCompilerFacade (core.js:4055)
    at Module.ɵɵngDeclareFactory (core.js:33083)
    at Module../node_modules/angularx-social-login/fesm2015/angularx-social-login.js (angularx-social-login.js:327)
    at __webpack_require__ (bootstrap:79)
    at Module../src/app/app.module.ts (app.module.ts:1)
    at __webpack_require__ (bootstrap:79)
    at Module../src/main.ts (main.ts:1)
    at __webpack_require__ (bootstrap:79)
    at Object.0 (main.ts:12)
    at __webpack_require__ (bootstrap:79)

角度版本：

Angular CLI: 12.2.1
Node: 14.17.3
Package Manager: npm 7.19.1
OS: darwin x64

Angular: 12.2.1
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.901.15
@angular-devkit/build-angular   0.901.15
@angular-devkit/core            9.1.15
@angular-devkit/schematics      12.2.1
@angular/cdk                    12.1.4
@angular/flex-layout            10.0.0-beta.32
@angular/material               12.1.4
@schematics/angular             12.2.1
rxjs                            7.3.0
typescript                      4.3.5

任何帮助将不胜感激。

我做了什么：

npm i angularx-social-login，然后我将SocialLoginModule添加到app.module.ts中的导入中并使用import {SocialLoginModule} from "angularx-social-login";导入，这就是我得到错误的地方。

【问题讨论】：

尝试运行 ngcc 或 npm i。看起来那个包裹没有被处理。
@MikeOne 我已经删除了node_modules 包并运行npm i 但没有帮助。
您使用的是哪个版本的 angularx-social-login？
我只是运行npm i angularx-social-login。这应该与 angular 12 兼容

标签： angular

【解决方案1】：

我能够通过以下方式修复此错误：

删除node_modules 和.angular 文件夹
正在运行npm install
再次运行ng serve

【讨论】：

【解决方案2】：

import { SocialLoginModule, AuthServiceConfig, GoogleLoginProvider } from 'angularx-social-login';



const config = new AuthServiceConfig ([
     {
        id: GoogleLoginProvider.PROVIDER_ID,
        provider: new GoogleLoginProvider('your-id')}
    ]);

export function provideConfig() {
  return config;
}


@NgModule({
  declarations: [
    .....
  ],
  imports: [
     SocialLoginModule
  ],
  providers: [
    {
      provide: AuthServiceConfig,
      useFactory: provideConfig
    }
   ],
  bootstrap: [AppComponent]
})

【讨论】：

你好。谢谢，但是导入有问题。当我导入 SocialLoginModule 时，根据此问题的标题出现错误。