1

我使用 msal 进行身份验证。在我的 AppModule.ts 中（来自示例）

    @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？

4

1 回答 1

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. 环境.ts
  2. 环境.qa.ts
  3. 环境.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

于 2021-07-27T23:29:06.203 回答