Angular-cli: Port and Proxy Config on ng-build

Created on 1 Nov 2016 · 12Comments · Source: angular/angular-cli

Hello, I have 2 problems at the moment with the ng-build. I have created an environment.int.ts file (+ an entry in angular-cli.apps[0] just like the entry for dev and prod) and a proxy.conf.integration.ts. When I run ng build --int --port 3000 --proxy-config src/config/proxy/proxy.conf.integration.json I get the errors:

The option '--int' is not registered with the build command. Run `ng build --help` for a list of supported options.
The option '--port' is not registered with the build command. Run `ng build --help` for a list of supported options.
The option '--proxy-config' is not registered with the build command. Run `ng build --help` for a list of supported options.

so my question is: how can I add a proxy_config/port to my ng-build?

Source

markus138

Most helpful comment

@dinukanadeeshan and @moochdt003 no way to add proxy or port on build script, on prod env this is not a responsibility for your angular application. On prod you have to config your proxies, for example, if you are in a dockerized env you could add this to a Dockerfile file in the root of your app:

FROM nginx

COPY nginx.conf /etc/nginx/nginx.conf

WORKDIR /usr/share/nginx/html
COPY dist/ .

So you'll have a nginx container with your prod distribution, then you can config easily your nginx server with this nginx.conf content:

worker_processes  1;

events {
    worker_connections  1024;
}

http {
    server {
        listen 80;
        server_name  localhost;

        root   /usr/share/nginx/html;
        index  index.html index.htm;
        include /etc/nginx/mime.types;

        gzip on;
        gzip_min_length 1000;
        gzip_proxied expired no-cache no-store private auth;
        gzip_types text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;

        location /api {
            rewrite /api/(.*) /$1  break;
            proxy_pass http://myapiserver:port;
        }

        location / {
            try_files $uri $uri/ /index.html;
        }
    }
}

you can see if you have call to /api/ the proxy rewrite and redirect to http://myapiserver:port. that'd be equivalent to this proxy.conf.js entry for dev environment:

```
const proxyConfig = [
{
context: '/api/',
pathRewrite: { '^/api': '' },
target: 'http://myapiserver:port',
changeOrigin: true,
secure: false
},...
````

jesusmariajurado on 15 May 2018

👍9 🎉1

All 12 comments

The proxy and port configs are just for the dev server not for the static build. If you have other static files that you want to copy into your dist folder you can add them to the assets array

deebloo on 1 Nov 2016

is this a planned feature for the future?

markus138 on 1 Nov 2016

@markus138 Can you post your angular-cli.json file? I am not sure I totally understand. The result of building with the CLI is static html and javascript that can be hosted by any server. The proxy config is used by webpack-dev-server underneath. If you want to use the same configuration file you can add it to your assets array to be coped to your dist file and setup your own proxy to use the properties in that config file.

deebloo on 1 Nov 2016

I have a frontend running for example on int.myapp.com and it's backend on int.backend.myapp.com. I thought I can do the proxing with the proxy.conf like this:

 "/api": {
    "target": "https://int.backend.myapp.com",
    "secure": true,
    "changeOrigin": true
  }

I got a running version right now anyway I was just wondering it this is something the config could do.

closing this issue since I misunderstood the docs

markus138 on 1 Nov 2016

@deebloo hi, do you a example? I'm trying to use the proxy when im building the prod version, but it's not working, I dont know how to set the proxy in prod version

AlbertoFCasarrubias on 10 Mar 2017

how to add The proxy and port configs for static build?

dinukanadeeshan on 5 Jan 2018

@dinukanadeeshan Did you ever find an answer for your questions? "how to add The proxy and port configs for the static build?"

moochdt003 on 10 Feb 2018

No, @moochdt003

dinukanadeeshan on 12 Feb 2018

FROM nginx

COPY nginx.conf /etc/nginx/nginx.conf

WORKDIR /usr/share/nginx/html
COPY dist/ .

So you'll have a nginx container with your prod distribution, then you can config easily your nginx server with this nginx.conf content:

worker_processes  1;

events {
    worker_connections  1024;
}

http {
    server {
        listen 80;
        server_name  localhost;

        root   /usr/share/nginx/html;
        index  index.html index.htm;
        include /etc/nginx/mime.types;

        gzip on;
        gzip_min_length 1000;
        gzip_proxied expired no-cache no-store private auth;
        gzip_types text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;

        location /api {
            rewrite /api/(.*) /$1  break;
            proxy_pass http://myapiserver:port;
        }

        location / {
            try_files $uri $uri/ /index.html;
        }
    }
}

you can see if you have call to /api/ the proxy rewrite and redirect to http://myapiserver:port. that'd be equivalent to this proxy.conf.js entry for dev environment:

```
const proxyConfig = [
{
context: '/api/',
pathRewrite: { '^/api': '' },
target: 'http://myapiserver:port',
changeOrigin: true,
secure: false
},...
````