I need to store my api-url not hard-coded in my angularproject. Following case i try to build: After building my angular app with ng --build i will give the dist folder to my customer. The Angular app is one part of the package the customer have to host on his server. The other part is an .net core api.

My problem is that the api-url could be different for each customer. So i need an easy way to change this url in the dist folder. Something like an api-config.js file.

Whats the best way to serve this?

2 Answers

Community On

You can use enviroment.ts file So you can create multi enviroment.prod.ts or enviroment.stagging.ts or enviroment.qa.ts

For v6+, angular.json environments are now called configurations. Here is how to add a new qa environment after v6:

    "configurations": {
      "production": { ... },
      "qa": {
        "fileReplacements": [
            "replace": "src/environments/environment.ts",
            "with": "src/environments/environment.qa.ts"

For instance, let’s add a server URL:

    export const environment = {
      production: false,
      serverUrl: "your server url"

Then all you have to do to provide a different URL for each enviroment


import {environment} from '../../environments/environment';

export class AuthService {
  apiUrl: environment.serverUrl

Then run

ng build --configuration=qa
Mohammadreza Imani On

you can use the API Url you typed in UI to make your first request as super-admin and because you are super admin and you are setting up the project so you don't need to log in first. your first setup (adding API-Url ) will be saved in DB and after that, you can check if there is an API-Url so skip setup part and redirect it to the login page.