Angular Environment Specific Deployment

Question

I am new to Angular development. I have developed an Angular web application which talks to the back end java application via REST and which in turn talks to the database to perform some CRUD operations.

Angular APP <-> Back end Java <-> DB

In the angular app, I have multiple URL's configured in a typescript file, let's call it app.constants.ts. From my Angular services I read the URL's from app.constants.ts and use it to make a REST call to my back end Java application. I build/compile the angular application using the command ng build --prod, which generates a folder under dist containing index.html, few images, javascript files, and few text files. I then copy this folder to the webapps/deploy folder under Tomcat running on a different server, which will bring up the Angular application, works well!

But my real problem is this,

1. All the while I have been reading constants from a typescript file and using it to build the application.
2. Instead of this, I want to have separate configuration files, like one for production, staging, dev, testing and so on.
3. I want to build the angular application only once and deploy it using the configuration file for that particular environment.
4. Even if I use multiple typescript files for configuration, this would be used in the compilation of the angular code. Rather, I just want the code complied once with placeholders for configs and use the configs from the right configuration file based on how we deploy the application.

Is this possible? Any information/help would be appreciated. Thank you.

Adding the below code after making it work using APP_INITIALIZER as suggested by @IsraGab file: app-config.service.ts

settings: Config;
load() {
    const jsonFile = './assets/config/config.json';
    return new Promise<void>((resolve, reject) => {
        this.http.get(jsonFile).toPromise().then((response : Config) => {
           this.settings = <Config>response;

           console.log('Config Loaded');
           console.log( this.settings);
           resolve();
           
        }).catch((response: any) => {
           reject(`Could not load the config file`+response);
        });
    });
}

File: app.module.ts

providers: [{ provide: APP_INITIALIZER,useFactory: initializeApp, deps: [AppConfigService], multi: true}]

export function initializeApp(appConfigService: AppConfigService) {
  return (): Promise<any> => { 
    return appConfigService.load();
  }
}
@NgModule

File:mydata.service.ts

protected configURL;
constructor(private apiService: AppConfigService ) { 
    this.configURL = this.apiService.url;
}

Answer 1

For this case you can use environment files which are placed inside 'src -> environments' folder in Angular Project. You can create more environment files too for your different servers.

In that environement file you can configue different configurations like URLs, API end-points etc. for different servers.

Suppose you have 2 server one is Local Server and another is Production Server. So you can have 2 environment files which are :

1. environment.ts
2. environment.prod.ts

Your environment file can have below code :

export const environment = {
   production: false,
   baseURL: 'https://someUrl.com',
};

In this case there is one key named production, which is false. So that one you can use to run project locally and for environment.prod.ts you can use true for production key and you can also use different URL for production mode.

And if you check configurations object in angular.json file, that will give you an idea that environment.ts file will be replaced by environment.prod.ts

And by using build command, you can create build for production server which will have another base URL as per your configurations in environment.prod.ts file.

ng build --prod

Whole purpose of this environment files is that you can easily bifurcate local, dev, stage and production servers with different configuration with different environment files.

You can also visit documentation for in depth explaination : https://angular.io/guide/build

Answer 2

you can set configurations on angular.json file like this,

environments files

/src/environments/
               └──environment.ts
               └──environment.prod.ts
               └──environment.stage.ts

angular.json

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

while building your application you can specify build configuration

ng build --configuration=staging

"scripts": {
  "build-all": "ng build --configuration=staging && cp -r ./dist ./staging_build && ng build --configuration=production  && cp -r ./dist ./production_build"
}

Building and serving Angular apps

Answer 3

You have 2 ways to do it. First of all, let's call your constant file a config file.

1. First option is to use environment.*.ts files, addapt angular.json and and declare your constants in these files. If you chose that option you would have to run as many build as you have environement (one build for test, one build for production ...).

2. Second option is to use the APP_INITIALIZER in order to load (http request) a config file - that config file will have the same name, but will be different in each environment (no needs to make a different build in that option).

Here you can find a tutorial how to use APP_INITIALIZER to load config at run time (Second option)