CODEWITHSUNDEEP
angularenvironment-variables
doorman
doorman

Reputation: 16949

Different Environment Configuration when building an Angular Application

I am working with Angular 9 and I have a config.json file which is loaded during run-time. I have dev/config.json and prod/config.json which are loaded depending on if I am running the app locally or building it for production. Up till now I have been manually commenting file paths like this: 

  // this.configPath = '/config/config-dev.json';
     this.configPath = '/config/config-prod.json';

It would be more convenient if the path would always be the same:

     this.configPath = '/config/config.json';

and the corresponding config.json would be copied depending if I am running locally or building for prod: e.g. in angular.json.

"architect": {
        "build": {        
          "options": {                
            "assets": [
              "src/favicon.ico",
              "src/favicon-16x16.png",
              "src/favicon-32x32.png",
              "src/assets",
              "src/config/dev/config.json",
           or "src/config/prod/config.json",

Is it possible to setup angular.json to detect which config file should be used and to copy it to the config folder?

Upvotes: 2

Views: 1701

Answers (1)

Rich
Rich

Reputation: 4248

Since Angular version later than 4. They have put a built-in function where you can handle file replacements. This is a good read for you

For your example, let say you do have a file structure like this

└──myProject/src/config/
               └──config.ts
               └──config.prod.ts
               └──config.stage.ts

You just need to set what file should the angular replace to the config.ts depending on what environment are you going to build with.

Something like this

"configurations": {
   "production": {
     "fileReplacements": [
       {
         "replace": "src/environments/config.ts",
         "with": "src/environments/config.prod.ts"
       }
     ],
     ...

To build using the production configuration, run the following command:

 ng build --configuration=production

Note: The properties that you are going to put to config.ts should be the development environment defaults. So every time that you are going to serve your application, those are the values going to be pulled

Upvotes: 5

Related Questions