NX环境下如何从环境服务向NgxStripeModule.forRoot()传密钥？

我使用NX环境管理多个项目，由于NX没有默认的环境配置方式，我创建了一个实现环境变量的服务，目前运行正常。问题出在库模块中：我有一个用于结账支付的库，它使用NgxStripe模块，该模块需要PublishKey，而此密钥存储在我的环境服务中。

当前我的CheckoutModule代码如下：

@NgModule({
  imports: [
    CommonModule,
    ReactiveFormsModule,
    RouterModule.forChild(userRouting),
    [...]
    NgxStripeModule.forRoot(environment.stripe?.publishable_key),
    [...]
  ],
})

我希望能从运行时的环境服务中获取发布密钥，而非仅用于该模块的模拟环境，比如像这样：

@NgModule({
  imports: [
    CommonModule,
    ReactiveFormsModule,
    RouterModule.forChild(userRouting),
    [...]
    NgxStripeModule.forRoot(EnvironmentService.getValue().stripe.pk),
    [...]
  ],
})

请问有没有实现这种需求的方法？

因为NgxStripeModule.forRoot()是在模块初始化阶段执行的，这时候还无法获取运行时的服务实例，直接调用EnvironmentService.getValue()行不通。这里给你两种可行的实现方式：

方式一：用APP_INITIALIZER提前加载配置并初始化Stripe #

这种方式会在应用启动时先加载环境配置，再初始化Stripe，确保后续使用时密钥已经准备好：

1. 修改CheckoutModule，只导入NgxStripe核心模块，不调用forRoot()：

import { NgModule, APP_INITIALIZER } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ReactiveFormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import { NgxStripeModule, StripeService } from 'ngx-stripe';
import { EnvironmentService } from 'path-to-your-environment-service';
import { userRouting } from './your-routing-file';

@NgModule({
  imports: [
    CommonModule,
    ReactiveFormsModule,
    RouterModule.forChild(userRouting),
    NgxStripeModule // 仅导入核心模块
  ],
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: (envService: EnvironmentService, stripeService: StripeService) => {
        // 假设你的环境服务有load方法异步加载配置，同步的话直接获取即可
        return () => envService.load().then(() => {
          const publishableKey = envService.getValue().stripe.pk;
          stripeService.setKey(publishableKey);
        });
      },
      deps: [EnvironmentService, StripeService],
      multi: true
    }
  ]
})
export class CheckoutModule { }

方式二：在组件初始化时动态设置密钥 #

如果不需要在模块层面提前初始化，也可以在实际使用Stripe的组件里动态设置密钥：

1. 模块中仅导入NgxStripeModule：

@NgModule({
  imports: [
    CommonModule,
    ReactiveFormsModule,
    RouterModule.forChild(userRouting),
    NgxStripeModule
  ]
})
export class CheckoutModule { }

2. 在使用Stripe的组件中注入服务并设置密钥：

import { Component, OnInit } from '@angular/core';
import { StripeService } from 'ngx-stripe';
import { EnvironmentService } from 'path-to-your-environment-service';

@Component({
  selector: 'app-checkout',
  templateUrl: './checkout.component.html'
})
export class CheckoutComponent implements OnInit {
  constructor(
    private stripeService: StripeService,
    private envService: EnvironmentService
  ) { }

  ngOnInit(): void {
    const publishableKey = this.envService.getValue().stripe.pk;
    this.stripeService.setKey(publishableKey);
    // 后续的Stripe操作逻辑
  }
}

额外提示 #

• 如果多个模块都用到NgxStripe，建议在根模块只导入一次NgxStripeModule，避免重复初始化。
• 确保EnvironmentService是全局单例（比如在根模块提供），否则可能出现配置不一致的问题。

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