tl;dr: What is the correct way to publish a .NET Core + Angular SPA, building both the .NET solution and the Angular app in the “ClientApp” folder for different environments?
Some additional context: I created a solution using the Angular project template with ASP.NET Core in Visual Studio 2019. The app has several different environments: DEV, STG, and Production. There are corresponding “appsettings.json” files for the .NET project (“appsettings.DEV.json”, “appsettings.STG.json”, “appsettings.Production.json”), as well as “environment.ts” files in the “ClientApp” folder (“environment.DEV.ts”, “environment.STG.ts”, “environment.Production.ts”). This app will be deployed to IIS on a Windows Server, and I have created “.pubxml” publish profiles targeting a folder for each of these environments.
The project template generates the following in the .csproj file:
The .pubxml files I created set the value of ASPNETCORE_ENVIRONMENT like this:
I have also added build scripts for the Angular client app in the “package.json” file for each environment:
However, I would like to specify which of those scripts to run, depending on which publish profile was selected. I tried modifying the “.csproj” file with the following, but it does not work. I can’t figure out how to get the value of ASPNETCORE_ENVIRONMENT in the .csproj file:
We moved away from recompiling code between environments. For us, it defeats the purpose when deploying from master/main, and would require new builds and new docker images. It also meant that we wouldn’t be deploying exactly what was built for testing/staging/UAT.
We got around this by injecting the configuration into the dotnet code using config/environment variables. Then, use a /config endpoint (anonymous) to provide the required configuration to the Angular code.
We also tried having a config.json file that we generated on container startup using envsubst, but that was before we combined the Angular and dotnet hosting processes.
Not sure if this solution is viable for you.
Edit: Another option is to run the ng build script separate from your dotnet build/dotnet publish steps. Presumably in your CICD pipeline there is logic to determine which configuration to build. You could remove the changes in csproj, run the appropriate ng build command manually, then copy the output into the ClientApp/dist folder (which is how we build our app).
You can always just replace the variables in your csproj file with a build script if everything else fails.
.net is the easy part, angular on the other hand it’s more intricate because angular cannot natively load envs at runtime like .net can. Google for angular runtime environment.
Not quite following here… Angular environment config files are read at compile time. I’m looking to call a specific ng build configuration, depending on the value of ASPNETCORE_ENVIRONMENT that is set in my .NET Publish profile.
yes it can. you mount an environment folder in assets when you build the image containing a json config. there are various ways of loading it when the app is loaded. https://medium.com/voobans-tech-stories/multiple-environments-with-angular-and-docker-2512e342ab5a
The most common way of doing it is using an APP_INITIALIZER we do it a little differently at my company but I can’t share that lol.