Different Environment Configuration when building an Angular Application

Question

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?

Rich · Accepted Answer · 2020-03-09 16:18:53Z

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

Collectives™ on Stack Overflow

Different Environment Configuration when building an Angular Application

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related