using --environments with Angular SPA on Asp.net core 2 Visual Studio 2017

Question

I am running the Visual Studio 2017 Angular SPA template and I want to add in the use of angular environment variables to work in production and development.

I am running the following version of angular in my package.json file;

    "@angular/animations": "^4.4.7",
    "@angular/cli": "^6.0.8",
    "@angular/common": "^4.4.7",
    "@angular/compiler": "^4.4.7",
    "@angular/compiler-cli": "^4.4.7",
    "@angular/core": "^4.4.7",
    "@angular/forms": "^4.4.7",
    "@angular/http": "^4.4.7",
    "@angular/platform-browser": "^4.4.7",
    "@angular/platform-browser-dynamic": "^4.4.7",
    "@angular/platform-server": "^4.4.7",
    "@angular/router": "^4.4.7",

I have created the /environments folder in my ClientApp/app foldere and added my environment.prod.ts and environment.ts files.

An example is;

export const environment = {
    production: false,
    appUrl: 'http://localhost:61996',
    apiUrl: 'http://localhost:61996'
};

How do I then go about configuring this to work with my SPA? As the current template doesn't contain a .angular-cli.json file I see referenced on tutorial websites?

My aim is to be able to run in debug using 'environment.prod.tsand then web deploy theenvironment.ts` with my publish.

take · Accepted Answer · 2018-07-05 12:00:36Z

1

In your angular.json you have an configuration section where you can define a fileReplacement.

"build": {
    "configurations": {
         "dev": {
              "fileReplacements": [ {
                    "replace": "src/environments/environment.ts",
                    "with": "src/environments/environment.dev.ts"
                }]
           },
           "prod": {
              "fileReplacements": [ {
                    "replace": "src/environments/environment.ts",
                    "with": "src/environments/environment.prod.ts"
                }]
           }
     }
}

To use the dev environment you have to add --configuration=dev

answered Jul 5, 2018 at 12:00

take

2,2223 gold badges20 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

bdparrish Over a year ago

where do you add that flag?

Scott Moniz Over a year ago

Yes, where do you add --configuration=dev?

take Over a year ago

ng build --configuration=dev

Scott Moniz Over a year ago

@take Since this is a C# SPA I do not think we have access to the commands directly. They seem to be tucked away in the csproj file. Furthermore if we have multiple 'publishing profiles' it seems to be fairly difficult to have those profiles run seperate commands. Have you had any experience configuring something of this nature? (Multiple Profiles one dev one prod and having the ng build command dynamically output the --configuration switch?)

Collectives™ on Stack Overflow

using --environments with Angular SPA on Asp.net core 2 Visual Studio 2017

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related