Angular 17 SSR独立组件报错：SocialAuthServiceConfig无提供者

问题描述 #

已将Angular升级至V17并启用SSR，仅使用独立组件（无模块），加载页面时出现如下报错：
ERROR Error: NullInjectorError: No provider for SocialAuthServiceConfig!

完整报错栈 #

ERROR Error: NullInjectorError: No provider for SocialAuthServiceConfig!
    at t (angular/node_modules/zone.js/fesm2015/zone-error.js:85:33)
    at NullInjector.get (angular/node_modules/@angular/core/fesm2022/core.mjs:5626:27)
    at R3Injector.get (angular/node_modules/@angular/core/fesm2022/core.mjs:6069:33)
    at R3Injector.get (angular/node_modules/@angular/core/fesm2022/core.mjs:6069:33)
    at injectInjectorOnly (angular/node_modules/@angular/core/fesm2022/core.mjs:911:40)
    at Module.ɵɵinject (angular/node_modules/@angular/core/fesm2022/core.mjs:917:42)
    at initialState (angular/node_modules/@abacritt/angularx-social-login/fesm2022/abacritt-angularx-social-login.mjs:374:46)
    at eval (angular/node_modules/@angular/core/fesm2022/core.mjs:6189:43)
    at runInInjectorProfilerContext (angular/node_modules/@angular/core/fesm2022/core.mjs:867:9)
    at R3Injector.hydrate (angular/node_modules/@angular/core/fesm2022/core.mjs:6188:17)
    at R3Injector.get (angular/node_modules/@angular/core/fesm2022/core.mjs:6058:33)
    at R3Injector.get (angular/node_modules/@angular/core/fesm2022/core.mjs:6069:33)
    at ChainedInjector.get (angular/node_modules/@angular/core/fesm2022/core.mjs:15378:36)
    at lookupTokenUsingModuleInjector (angular/node_modules/@angular/core/fesm2022/core.mjs:4137:39)
    at getOrCreateInjectable (angular/node_modules/@angular/core/fesm2022/core.mjs:4185:12) {
  originalStack: 'Error: NullInjectorError: No provider for SocialAuthServiceConfig!\n' +
    '    at t (angular/node_modules/zone.js/fesm2015/zone-error.js:85:33)\n' +
    '    at NullInjector.get (angular/node_modules/@angular/core/fesm2022/core.mjs:5626:27)\n' +
    '    at R3Injector.get (angular/node_modules/@angular/core/fesm2022/core.mjs:6069:33)\n' +
    '    at R3Injector.get (angular/node_modules/@angular/core/fesm2022/core.mjs:6069:33)\n' +
    '    at injectInjectorOnly (angular/node_modules/@angular/core/fesm2022/core.mjs:911:40)\n' +
    '    at Module.ɵɵinject (angular/node_modules/@angular/core/fesm2022/core.mjs:917:42)\n' +
    '    at initialState (angular/node_modules/@abacritt/angularx-social-login/fesm2022/abacritt-angularx-social-login.mjs:374:46)\n' +
    '    at eval (angular/node_modules/@angular/core/fesm2022/core.mjs:6189:43)\n' +
    '    at runInInjectorProfilerContext (angular/node_modules/@angular/core/fesm2022/core.mjs:867:9)\n' +
    '    at R3Injector.hydrate (angular/node_modules/@angular/core/fesm2022/core.mjs:6188:17)\n' +
    '    at R3Injector.get (angular/node_modules/@angular/core/fesm2022/core.mjs:6058:33)\n' +
    '    at R3Injector.get (angular/node_modules/@angular/core/fesm2022/core.mjs:6069:33)\n' +
    '    at ChainedInjector.get (angular/node_modules/@angular/core/fesm2022/core.mjs:15378:36)\n' +
    '    at lookupTokenUsingModuleInjector (angular/node_modules/@angular/core/fesm2022/core.mjs:4137:39)\n' +
    '    at getOrCreateInjectable (angular/node_modules/@angular/core/fesm2022/core.mjs:4185:12)',
  zoneAwareStack: 'Error: NullInjectorError: No provider for SocialAuthServiceConfig!\n' +
    '    at t (angular/node_modules/zone.js/fesm2015/zone-error.js:85:33)\n' +
    '    at NullInjector.get (angular/node_modules/@angular/core/fesm2022/core.mjs:5626:27)\n' +
    '    at R3Injector.get (angular/node_modules/@angular/core/fesm2022/core.mjs:6069:33)\n' +
    '    at R3Injector.get (angular/node_modules/@angular/core/fesm2022/core.mjs:6069:33)\n' +
    '    at injectInjectorOnly (angular/node_modules/@angular/core/fesm2022/core.mjs:911:40)\n' +
    '    at Module.ɵɵinject (angular/node_modules/@angular/core/fesm2022/core.mjs:917:42)\n' +
    '    at initialState (angular/node_modules/@abacritt/angularx-social-login/fesm2022/abacritt-angularx-social-login.mjs:374:46)\n' +
    '    at eval (angular/node_modules/@angular/core/fesm2022/core.mjs:6189:43)\n' +
    '    at runInInjectorProfilerContext (angular/node_modules/@angular/core/fesm2022/core.mjs:867:9)\n' +
    '    at R3Injector.hydrate (angular/node_modules/@angular/core/fesm2022/core.mjs:6188:17)\n' +
    '    at R3Injector.get (angular/node_modules/@angular/core/fesm2022/core.mjs:6058:33)\n' +
    '    at R3Injector.get (angular/node_modules/@angular/core/fesm2022/core.mjs:6069:33)\n' +
    '    at ChainedInjector.get (angular/node_modules/@angular/core/fesm2022/core.mjs:15378:36)\n' +
    '    at lookupTokenUsingModuleInjector (angular/node_modules/@angular/core/fesm2022/core.mjs:4137:39)\n' +
    '    at getOrCreateInjectable (angular/node_modules/@angular/core/fesm2022/core.mjs:4185:12)',
  ngTempTokenPath: null,
  ngTokenPath: [
    '_SocialAuthService',
    '_SocialAuthService',
    'SocialAuthServiceConfig',
    'SocialAuthServiceConfig'
  ]
}

解决方案 #

独立组件+SSR环境下，无法通过传统模块方式配置提供者，需通过以下两种方式解决：

1. 全局配置（推荐） #

在app.config.ts中全局注入SocialAuthServiceConfig，确保整个应用都能访问：

import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';
import { provideClientHydration } from '@angular/platform-browser';
import { provideHttpClient } from '@angular/common/http';
import { SocialAuthServiceConfig, GoogleLoginProvider } from '@abacritt/angularx-social-login';

export const appConfig: ApplicationConfig = {
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true }),
    provideRouter(routes),
    provideClientHydration(),
    provideHttpClient(),
    // 配置社交登录服务
    {
      provide: 'SocialAuthServiceConfig',
      useValue: {
        autoLogin: false,
        providers: [
          {
            id: GoogleLoginProvider.PROVIDER_ID,
            provider: new GoogleLoginProvider('你的谷歌客户端ID')
          }
          // 可添加其他登录提供商，如FacebookLoginProvider
        ],
        onError: (err) => console.error(err)
      } as SocialAuthServiceConfig
    }
  ]
};

2. 组件级配置 #

仅在需要使用社交登录的独立组件中注入提供者：

import { Component } from '@angular/core';
import { SocialAuthService, SocialUser, SocialAuthServiceConfig, GoogleLoginProvider } from '@abacritt/angularx-social-login';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  standalone: true,
  providers: [
    {
      provide: 'SocialAuthServiceConfig',
      useValue: {
        autoLogin: false,
        providers: [
          {
            id: GoogleLoginProvider.PROVIDER_ID,
            provider: new GoogleLoginProvider('你的谷歌客户端ID')
          }
        ]
      } as SocialAuthServiceConfig
    },
    SocialAuthService
  ]
})
export class LoginComponent {
  user: SocialUser | undefined;

  constructor(private authService: SocialAuthService) {
    this.authService.authState.subscribe(user => this.user = user);
  }
}

3. SSR 兼容处理 #

避免服务器端执行浏览器专属代码，可通过isPlatformBrowser判断环境：

import { isPlatformBrowser } from '@angular/common';
import { Inject, PLATFORM_ID } from '@angular/core';

// 在组件构造函数中注入平台标识
constructor(
  @Inject(PLATFORM_ID) private platformId: Object,
  private authService: SocialAuthService
) {}

ngOnInit() {
  if (isPlatformBrowser(this.platformId)) {
    this.authService.authState.subscribe(user => {
      // 仅在浏览器端处理用户状态
    });
  }
}

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