如何在Angular的app.module.ts中切换Stripe发布密钥（开发/生产）

推荐方案：使用Angular官方环境配置（最简单高效） #

Angular原生的环境变量机制完美适配开发/生产环境切换，无需额外请求，构建时直接注入对应密钥。

1. 配置环境文件
   在src/environments/目录下的两个环境文件中添加Stripe密钥：

   • 开发环境（environment.ts）：

   export const environment = {
     production: false,
     stripePublishableKey: '你的Stripe开发密钥'
   };
   

   • 生产环境（environment.prod.ts）：

   export const environment = {
     production: true,
     stripePublishableKey: '你的Stripe生产密钥'
   };
   

2. 在AppModule中引入环境变量
   修改app.module.ts，导入环境配置并传入NgxStripeModule.forRoot()：

   import { NgModule } from '@angular/core';
   import { BrowserModule } from '@angular/platform-browser';
   import { NgxStripeModule } from 'ngx-stripe';
   // 导入环境配置
   import { environment } from '../environments/environment';
   
   import { AppComponent } from './app.component';
   
   @NgModule({
     declarations: [AppComponent],
     imports: [
       BrowserModule,
       // 直接使用环境变量中的密钥
       NgxStripeModule.forRoot(environment.stripePublishableKey)
     ],
     providers: [],
     bootstrap: [AppComponent]
   })
   export class AppModule { }
   

3. 构建时自动切换

   • 本地开发执行ng serve，Angular会自动加载environment.ts，使用开发密钥
   • 生产部署执行ng build --configuration production（Angular 12+）或ng build --prod（旧版本），会自动加载environment.prod.ts，使用生产密钥

备选方案：使用自定义appsettings配置文件 #

如果坚持使用现有appsettings.json和appsettings.Development.json，需要通过APP_INITIALIZER提前加载配置，并结合ngx-stripe的异步初始化方式：

1. 放置配置文件
   将两个配置文件移至src/assets/目录下（确保构建后可访问）：

   • assets/appsettings.json（生产环境）：

   {
     "stripePublishableKey": "你的Stripe生产密钥"
   }
   

   • assets/appsettings.Development.json（开发环境）：

   {
     "stripePublishableKey": "你的Stripe开发密钥"
   }
   

2. 创建配置加载服务
   新建config.service.ts用于加载对应环境的配置：

   import { Injectable } from '@angular/core';
   import { HttpClient } from '@angular/common/http';
   import { environment } from '../environments/environment';
   
   @Injectable({ providedIn: 'root' })
   export class ConfigService {
     private configData: any;
   
     constructor(private http: HttpClient) { }
   
     loadConfig(): Promise<void> {
       // 根据当前环境选择配置文件
       const configPath = environment.production 
         ? 'assets/appsettings.json' 
         : 'assets/appsettings.Development.json';
       
       return this.http.get(configPath)
         .toPromise()
         .then(data => {
           this.configData = data;
         });
     }
   
     getStripeKey(): string {
       return this.configData?.stripePublishableKey;
     }
   }
   

3. 配置AppModule初始化和异步加载密钥
   修改app.module.ts，使用APP_INITIALIZER提前加载配置，并通过forRootAsync初始化ngx-stripe：

   import { NgModule, APP_INITIALIZER } from '@angular/core';
   import { BrowserModule } from '@angular/platform-browser';
   import { HttpClientModule } from '@angular/common/http';
   import { NgxStripeModule } from 'ngx-stripe';
   import { ConfigService } from './config.service';
   import { AppComponent } from './app.component';
   
   // 定义初始化函数，确保配置在模块加载前完成加载
   export function initConfig(configService: ConfigService) {
     return () => configService.loadConfig();
   }
   
   @NgModule({
     declarations: [AppComponent],
     imports: [
       BrowserModule,
       HttpClientModule,
       // 异步初始化ngx-stripe，从配置服务获取密钥
       NgxStripeModule.forRootAsync({
         useFactory: (configService: ConfigService) => ({
           publishableKey: configService.getStripeKey()
         }),
         deps: [ConfigService]
       })
     ],
     providers: [
       ConfigService,
       {
         provide: APP_INITIALIZER,
         useFactory: initConfig,
         deps: [ConfigService],
         multi: true
       }
     ],
     bootstrap: [AppComponent]
   })
   export class AppModule { }
   

注意：推荐使用第一种官方环境变量方案，无需额外HTTP请求，构建阶段直接替换变量，性能更优且配置更简洁。

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