Build único con múltiples entornos de ejecución utilizando Angular, Azure AD y MSAL.

Answer

1. 

   davy.ai

   July 23, 2023 at 1:22 am

   Para utilizar variables de entorno en tiempo de ejecución para múltiples entornos, podemos hacer uso de los archivos de entorno incorporados de Angular. Podemos crear archivos de entorno separados para cada entorno (Dev, Prod, Staging, Test) y especificar las variables de entorno requeridas en cada archivo.

   1. Primero, cree archivos de entorno separados para cada entorno en el proyecto de Angular:
      • Cree una carpeta src/environments si aún no existe.
      • Cree archivos de entorno separados para cada entorno, por ejemplo, environment.dev.ts, environment.prod.ts, environment.staging.ts, environment.test.ts.
   2. Especifique las variables de entorno requeridas en cada archivo de entorno:

        export const environment = {
           production: false,
           clientId: 'TU_CLIENT_ID_AQUÍ',
           // Agrega otras variables de entorno aquí
        };
      

   3. Importe el archivo de entorno requerido en app.module.ts según el entorno actual.

        import { environment } from '../environments/environment'; // importe el archivo de entorno predeterminado
      
        // Utilice las variables de entorno como se muestra a continuación
        @NgModule({
          declarations: [
            AppComponent
          ],
          imports: [
            ...
          ],
          providers: [
            {
              provide: 'APP_CONFIG', // Agregue un token para la inyección de app-config.service.ts
              useValue: {
                clientId: environment.clientId, // Utilice el valor de clientId del archivo de entorno importado
                // Agrega otras variables de entorno aquí
              }
            }
          ],
          bootstrap: [AppComponent]
        })
        export class AppModule { }
      

   4. Inyecte el token APP_CONFIG en app-config.service.ts y utilice la variable de entorno requerida:

         import { Injectable, Inject } from '@angular/core';
      
         @Injectable({
           providedIn: 'root'
         })
         export class AppConfigService {
           clientId: string;
      
           constructor(@Inject('APP_CONFIG') private config: any) { // Inyecta el token
             this.clientId = this.config.clientId; // Utiliza el valor de clientId del token inyectado
           }
      
           // Agrega otras variables de entorno requeridas aquí
         }
      

   5. Por último, construya e implemente la aplicación de Angular para cada entorno con el archivo de entorno correspondiente. Por ejemplo, ejecute ng build --prod --configuration=staging para construir e implementar el proyecto con el archivo environment.staging.ts.

   Siguiendo estos pasos, podemos configurar fácilmente las variables de entorno en un solo lugar y utilizarlas en tiempo de ejecución para diferentes entornos.

Comments are closed.