Seleccione el entorno angular correcto según la compilación .Net Core

Después de indagar en diferentes repositorios y páginas webs de internet al final hemos descubierto la resolución que te enseñamos ahora.

Solución:

Encontré una solución manipulando el * .csproj después de todo.

INSINUACIÓN: Para que quede claro, este problema solo se aplica cuando creó su proyecto con el Visual Studio .Net Core Web Api with Angular Template que crea una api web combinada con el proyecto clientapp

Después de descubrir que podía agregar configuraciones de compilación personalizadas para dotnet build Agregué las siguientes líneas al cuadra:

y en package.json agregue a los scripts:

"scripts": 
        "build-staging": "ng build --configuration=staging",
        "build-prod": "ng build --configuration=production",
    ,

Lo que hace es en diferentes configuraciones de compilación establecidas por el Condition attribute, npm run build se llama con un entorno correspondiente / apropiado.

Otro enfoque, quizás más fácil, sería tener dos pipelines de compilación, uno para npm y la aplicación angular y otro para la api web dotnet. Mientras lo hace, es posible que desee eliminar todo el material SPA de compilación del * .csproj; de lo contrario, compilará la aplicación dos veces.

O simplemente tenga 2 proyectos separados en primer lugar y ahórrese la molestia 🙂

EDITAR:

Como se indica en Command="npm run build --configuration=production" (por ejemplo, construir con múltiples parámetros) no es recogido por el CI / CD. Entonces, usar scripts predefinidos de package.json es el camino correcto a seguir 🙂

Solo me gustaría proporcionar una solución de un extremo a otro, porque me llevó bastante tiempo salvarlo ahora :).

Mi objetivo era tener diferentes configuraciones de entorno para diferentes empresas, ya que la aplicación web será utilizada por diferentes empresas con solo pequeños cambios (habilitar / deshabilitar módulos, cambiar logo, cambiar colores de tema, etc.).

1. Configurar launchSettings.json (dentro de su proyecto web en propiedades). Agregue el siguiente código debajo profiles:

"Staging": 
 "commandName": "IISExpress",
 "launchBrowser": true,
 "environmentVariables": 
   "ASPNETCORE_ENVIRONMENT": "Staging"
 ,
 "applicationUrl": "https://localhost:5001;http://localhost:5000"

Donde Staging es el nombre del entorno deseado. Esto asegurará que pueda seleccionar esta configuración en Start dentro de Visual Studio.

Para más información: lea esto

2. Agrega tu propia appsettings.Staging.json archivo en el directorio raíz del proyecto para la configuración personalizada de la aplicación. Aunque esto es sobre todo importante para las pruebas locales porque en su CI / CD probablemente querrá configurar sustituciones. Si desea utilizar el específico appsettings.Staging.json en producción, luego establezca ASPNETCORE_ENVIRONMENT a Staging en el servidor (para Azure App Service en Configuración => Configuración de la aplicación).

3. En tus Startup.cs, agregue lo siguiente else if cuadra.

app.UseSpa(spa =>

    // To learn more about options for serving an Angular SPA from ASP.NET Core,
    // see https://go.microsoft.com/fwlink/?linkid=864501

    spa.Options.SourcePath = "ClientApp";

    if (env.IsDevelopment())
    
        spa.UseAngularCliServer(npmScript: "start");
    
    else if (env.EnvironmentName == "Staging")
    
#if DEBUG
        spa.UseAngularCliServer(npmScript: "start-stagingdebug");
#endif
    
);

Observe la #if DEBUG, esto es necesario porque no desea ejecutar esto en un entorno implementado, sin embargo, para ejecutar angular localmente, TIENE que llamar a esto, de lo contrario, terminará con una página de error. Como también puede notar, agrego debug al nombre del entorno, lo explicaré más adelante. Por ahora tienes que darte cuenta de que env.IsDevelopment() estarán false, y por lo tanto, tendrá que trabajar para asegurarse de que su aplicación angular aún se compile y se sirva cuando la ejecute localmente.

4. Modifica tu angular.json, bajo architect => build => configurations, agregar 2 nuevas configuraciones:

"staging": 
  "fileReplacements": [
    
      "replace": "src/environments/environment.ts",
      "with": "src/environments/environment.toptechneut.ts"
    ,
    
      "replace": "src/assets/img/logo-icon.png",
      "with": "src/assets/img/staging/logo-icon.png"
    ,
  ],

  "optimization": true,
  "outputHashing": "all",
  "sourceMap": false,
  "extractCss": true,
  "namedChunks": false,
  "aot": true,
  "extractLicenses": true,
  "vendorChunk": false,
  "buildOptimizer": true,
  "budgets": [
    
      "type": "initial",
      "maximumWarning": "2mb",
      "maximumError": "5mb"
    
  ]
,
"stagingdebug": 
  "fileReplacements": [
    
      "replace": "src/environments/environment.ts",
      "with": "src/environments/environment.toptechneut.ts"
    ,
    
      "replace": "src/assets/img/logo-icon.png",
      "with": "src/assets/img/staging/logo-icon.png"
    ,
  ]

Si sabes un poco sobre angular.json notas que en staging Hago una configuración para un entorno de producción, me aseguraré de que mi CI / CD llame a esto (o cuando publique mi aplicación a través de VS2017). Para las pruebas locales, tengo una configuración diferente stagingdebug, para que aún conserve los mapas de origen y pueda depurar mi código mientras lo ejecuto localmente.

5. Agrega tu environment.staging.ts archivo dentro del environments carpeta, para opciones específicas del entorno. Más sobre eso, lee esto

6. modificar su package.json, bajo scripts, Agregué estos scripts:

"start-staging": "ng serve --configuration staging",
"start-stagingdebug": "ng serve --configuration stagingdebug",
"build-staging": "ng build --configuration staging",
"build-stagingdebug": "ng build --configuration stagingdebug",

Lo mismo aquí: para el desarrollo local llamo a la configuración con debug adjunto a él.

¡A partir de ahora, debería poder cambiar a la nueva configuración dentro de Visual Studio y ejecutar de acuerdo con las nuevas configuraciones de su entorno!

7. Modifica tu .csproj, gracias por ese pjominet. Tenga en cuenta que, una vez más, esto es solo para publicar su aplicación web, no para la depuración local.

Modifiqué el mío para llamar al correcto script que definí en mi package.json, porque por alguna razón mi CI no captó los comandos adicionales detrás de él mientras estaba usando la respuesta de pjominet.

Si está utilizando Azure DevOps, solo tiene que cambiar el BuildConfiguration la variable está establecida en Staging. Si siguió todos los pasos, esto debería compilarse correctamente.

Aquí puedes ver las reseñas y valoraciones de los lectores

Puedes confirmar nuestra tarea mostrando un comentario y dejando una valoración te estamos agradecidos.

---

---

Utiliza Nuestro Buscador