A solution to restart angular project cli automatically with any modification to proxy.conf.json?

Question

I'm asking for some help, we have prox.conf.json which contains our different envs, and in many cases, you need to change the target server and need to restart our angular projectAny tricks on how to prevent restarting and when we change the proxy file, angular-project will restart automatically?

const PROXY_CONFIG = {
  '/api': {
    target: target.SCRUMBLE, // adapt to a local minikube or a remote demo env
    secure: false,
    pathRewrite: {
      '^/api': '',
    },
    logLevel: "debug"
  },

you could look for a combination with `nodemon`, this link doesn't give the direct answer but should give you the idea: https://github.com/webpack/webpack-dev-server/issues/440 — Jimmy, Dec 22 '22 at 17:54
Thanks for your comment! but it's talking about webpack-dev-server — Rebai Ahmed, Dec 27 '22 at 10:01

Jimmy · Answer 1 · 2022-12-28T10:46:30.620

2

You could run this command: npx nodemon -w ./src/proxy.conf.json --exec 'ng serve'
The command is self explained: nodemon with -w option + the path to the file and in combination with ng serve

The result will look something like this:

And to add to package.json so that you could run it as a command as you want. I just replace the original start with the new command and it works.

 "scripts": {
    "ng": "ng",
    "start": "npx nodemon -w ./src/proxy.conf.json --exec 'ng serve'",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },

Please also notice that I'm using Ubuntu. If you're using other operating systems and it doesn't run, check for the "forward slash issue" or "how to run nodemon with -w" in those OS

edited Dec 28 '22 at 10:46

answered Dec 27 '22 at 13:15

Jimmy

1,276
7
8

Thanks it's helpful! we can add it to package.json? – Rebai Ahmed Dec 28 '22 at 10:35
Thanks for your answer, I need also fo figure out a solution with environment.ts export const environment = { production: false, baseUrl: 'http://localhost:4200', // this variable is used in the keycloak-init.ts in case it is set to overwrite the keycloak url keycloakClusterUrl: 'your_team_cluster_ip_address', }; keycloakClusterUrl needs to be changed, so I want to start the project with dynamic argument (cluster_url) any idea? – Rebai Ahmed Jan 18 '23 at 10:28

score 2 · Answer 2 · answered Dec 30 '22 at 14:40

2

by changing the actual script by this one and runing npm start i think it will work the right way

"scripts": {
  "ng": "ng",
  "start": "nodemon -w src/proxy.config.json --exec ng serve --proxy-config src/proxy.config.json",
  "build": "ng build",
  "watch": "ng build --watch --configuration development",
  "test": "ng test"
},

answered Dec 30 '22 at 14:40

anis khalfaoui

779
1
6
12

Thanks for your answer, I need also fo figure out a solution with environment.ts export const environment = { production: false, baseUrl: 'http://localhost:4200', // this variable is used in the keycloak-init.ts in case it is set to overwrite the keycloak url keycloakClusterUrl: 'your_team_cluster_ip_address', }; keycloakClusterUrl needs to be changed, so I want to start the project with dynamic argument (cluster_url) any idea? – Rebai Ahmed Jan 18 '23 at 10:25
@RebaiAhmed i passed a new answer i hope that i will help u – anis khalfaoui Jan 27 '23 at 15:06

score 2 · Answer 3 · answered Jan 27 '23 at 15:06

2

u can serve ur projet evrey time that way by passing the clusterUrl as argument :

ng serve --configuration=environment.ts --cluster_url=your_team_cluster_ip_address

and then in the environment file u can retrieve the argument and to keycloakClusterUrl

const args = process.argv.slice(2);
const clusterUrlArg = args.find(arg => arg.startsWith('--cluster_url'));
const clusterUrl = clusterUrlArg ? clusterUrlArg.split('=')[1] : 
'default_url';

export const environment = {
production: false,
baseUrl: 'localhost:4200',
keycloakClusterUrl: clusterUrl
};

answered Jan 27 '23 at 15:06

anis khalfaoui

779
1
6
12

Thanks for your answer, it looks good but when I tried it I got Error: Unknown argument: cluster_url – Rebai Ahmed Jan 31 '23 at 14:44
can u try this one in changing package.json by runing npm run serve-custom "scripts":{ "serve-custom": "ng serve --configuration=environment.ts --cluster_url=your_team_cluster_ip_address" } – anis khalfaoui Feb 01 '23 at 09:20
Th main problem is that ng serve does not accept any unknown arguments – Rebai Ahmed Feb 01 '23 at 12:55

A solution to restart angular project cli automatically with any modification to proxy.conf.json?

3 Answers3