如何将不同环境中的clientId传递给AppModule

Question

我使用 msal 进行身份验证。在我的 AppModule.ts 中（来自the example)

    @NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    ProfileComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    MsalModule.forRoot( new PublicClientApplication({
      auth: {
        clientId: 'Enter_the_Application_Id_here', // This is your client ID
        authority: 'Enter_the_Cloud_Instance_Id_Here'/'Enter_the_Tenant_Info_Here', // This is your tenant ID
        redirectUri: 'Enter_the_Redirect_Uri_Here'// This is your redirect URI
      },
      cache: {
        cacheLocation: 'localStorage',
        storeAuthStateInCookie: isIE, // Set to true for Internet Explorer 11
      }
    }), null, null)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

对于clientId，我不想在这里硬编码。它在一个配置文件中。问题是我有不同的环境，例如 dev/qa 和 prod 等。每个端点的 clientId 都不同。

如何将值而不是硬编码传递给 AppModule？

Answer 1

您可以为 './src/environments/' 下的每个阶段创建 environment.[stage].ts 文件。

// environment.ts
export const environment = {
  production: false,
  clientId: 'Enter_the_Application_Id_here',
  authority: 'Enter_the_Cloud_Instance_Id_Here',
  redirectUri: 'Enter_the_Redirect_Uri_Here'
}

// environment.qa.ts
export const environment = {
  production: true,
  clientId: 'Enter_the_Application_Id_here',
  authority: 'Enter_the_Cloud_Instance_Id_Here',
  redirectUri: 'Enter_the_Redirect_Uri_Here'
}

完成后，每个阶段应该有 N 个文件。例如：

1. environment.ts
2. environment.qa.ts
3. environment.prod.ts

通过对 angular.json 中的每个 [stage] 进行一些额外配置，您可以轻松做到这一点：

import { environment } from './../environments/environment';

//inside app.module
   MsalModule.forRoot( new PublicClientApplication({
      auth: {
        clientId: environment.clientId,
        authority: environment.authority,
        redirectUri: environment.redirectUri
      },

angular.json 中的附加配置添加了一个 "fileReplacements" 将 environment.ts 替换为 envirnment.[stage].ts:

"configurations": {
  "qa": {
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.qa.ts"
      }
    ],

现在您可以运行特定于阶段的构建：

ng build --configuration=qa

Angular 官方文档有一个关于这个话题的页面：https://angular.io/guide/build