Select correct Angular Environment based on .Net Core build

Question

I created an .Net Core Web Api with an Angular ClientApp with the templates from Visual Studio.

When building the project also builds the contained Angular App with the

Answer 1

I would just like to provide an end-to-end solution, because it took quite some time that I will save you now :).

My goal was to have different environment configurations for different companies, as the web application will be used by different companies with just small changes (enable/disable modules, change logo, change theme colors, etc.).

1. Configure launchSettings.json (within your web project under properties). Add the following code under profiles:

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

Where Staging is the name if your desired environment name. This will make sure you are able to select this configuration under Start within Visual Studio.

For more info: read this

2. Add your own appsettings.Staging.json file in the root directory of the project for custom app settings. Although this is mostly important for local testing because in your CI/CD you will probably want to configure substitutions. If you do want to use the specific appsettings.Staging.json in production, then set ASPNETCORE_ENVIRONMENT to Staging at the server (for azure App Service under Configuration => Application Settings).

3. In your Startup.cs, add the following else if block.

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
    }
});

Notice the #if DEBUG, this is required because you don't want to execute this on a deployed environment, however for locally running angular, you HAVE to call this, else you will end up with an error page. As you might also notice, I append debug to the environment name, I will explain later. For now you have to realize that env.IsDevelopment() will be false, and therefor you will have to work around to make sure your angular app will still be build and served when running your app locally.

4. Modify your angular.json, under architect => build => configurations, add 2 new configurations:

"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"
    },
  ]
}

If you know a bit about angular.json you notice that in staging I make a configuration for a production environment, I will make sure my CI/CD will call this (or when I publish my application via VS2017). For local testing, I hold a different configuration stagingdebug, so that it still keeps the source maps and I am able to debug my code while running it locally.

5. Add your environment.staging.ts file within the environments folder, for environment-specific options. More on that, read this

6. modify your package.json, under scripts, I added these 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",

Same here: for local development I call the configuration with debug appended to it.

As of now, you should be able to change to the new configuration within Visual Studio and run according to your new environment configurations!

7. Modify your .csproj, thanks for that pjominet. Please note that once again, this is only for publishing your web application, not for local debugging.

I modified mine to call the correct script that I defined in my package.json, because for some reason my CI did not pickup on the extra commands behind it while I was using pjominet's answer.

If you are using Azure DevOps, you just have to change the BuildConfiguration variable is set to Staging. If you followed all the steps then this should build successfully.