feat(@angular/cli): read proxyConfig from angular-cli.json

easy proxy config by reading default from angular-cli.json (#6240)

Author: ayvazj

docs/documentation/angular-cli.md

@@ -82,6 +82,7 @@
     - *ssl* (`boolean`): Enables ssl for the application. Default is `false`.
     - *sslKey* (`string`): The ssl key used by the server. Default is `ssl/server.key`.
     - *sslCert* (`string`): The ssl certificate used by the server. Default is `ssl/server.crt`.
+    - *proxyConfig* (`string`): Proxy configuration file.
 
 - **packageManager** (`string`): Specify which package manager tool to use. Options include `npm`, `cnpm` and `yarn`.
 

packages/@angular/cli/commands/serve.ts

@@ -14,6 +14,7 @@ const defaultHost = config.get('defaults.serve.host');
 const defaultSsl = config.get('defaults.serve.ssl');
 const defaultSslKey = config.get('defaults.serve.sslKey');
 const defaultSslCert = config.get('defaults.serve.sslCert');
+const defaultProxyConfig = config.get('defaults.serve.proxyConfig');
 
 export interface ServeTaskOptions extends BuildOptions {
   port?: number;
@@ -49,6 +50,7 @@ export const baseServeCommandOptions: any = overrideOptions([
   {
     name: 'proxy-config',
     type: 'Path',
+    default: defaultProxyConfig,
     aliases: ['pc'],
     description: 'Proxy configuration file.'
   },

packages/@angular/cli/lib/config/schema.json

@@ -473,6 +473,10 @@
               "description": "The ssl certificate used by the server.",
               "type": "string",
               "default": "ssl/server.crt"
+            },
+            "proxyConfig": {
+              "description": "Proxy configuration file.",
+              "type": "string"
             }
           }
         }

tests/e2e/tests/misc/proxy-config.ts

@@ -0,0 +1,72 @@
+import * as express from 'express';
+import * as http from 'http';
+
+import {writeFile} from '../../utils/fs';
+import { request } from '../../utils/http';
+import { assetDir } from '../../utils/assets';
+import { killAllProcesses } from '../../utils/process';
+import { ngServe } from '../../utils/project';
+import { updateJsonFile } from '../../utils/project';
+import {expectToFail} from "../../utils/utils";
+
+export default function() {
+  // Create an express app that serves as a proxy.
+  const app = express();
+  const server = http.createServer(app);
+  server.listen(0);
+
+  app.set('port', server.address().port);
+  app.get('/api/test', function (req, res) {
+    res.send('TEST_API_RETURN');
+  });
+
+  const backendHost = 'localhost';
+  const backendPort = server.address().port;
+  const proxyServerUrl = `http://${backendHost}:${backendPort}`;
+  const proxyConfigFile = 'proxy.config.json';
+  const proxyConfig = {
+    '/api/*': {
+      target: proxyServerUrl
+    }
+  };
+
+  return Promise.resolve()
+    .then(() => writeFile(proxyConfigFile, JSON.stringify(proxyConfig, null, 2)))
+
+    .then(() => ngServe('--proxy-config', proxyConfigFile))
+    .then(() => request('http://localhost:4200/api/test'))
+    .then(body => {
+      if (!body.match(/TEST_API_RETURN/)) {
+        throw new Error('Response does not match expected value.');
+      }
+    })
+    .then(() => server.close(), (err) => { server.close(); throw err; })
+    .then(() => killAllProcesses(), (err) => { killAllProcesses(); throw err; })
+
+    .then(() => updateJsonFile('.angular-cli.json', configJson => {
+      const app = configJson.defaults;
+      app.serve = {
+        proxyConfig: proxyConfigFile
+      };
+    }))
+    .then(() => ngServe())
+    .then(() => request('http://localhost:4200/api/test'))
+    .then(body => {
+      if (!body.match(/TEST_API_RETURN/)) {
+        throw new Error('Response does not match expected value.');
+      }
+    })
+    .then(() => server.close(), (err) => { server.close(); throw err; })
+    .then(() => killAllProcesses(), (err) => { killAllProcesses(); throw err; })
+
+    // A non-existing proxy file should error.
+
+    .then(() => expectToFail(() => ng('serve', '--proxy-config', 'proxy.non-existent.json')))
+    .then(() => updateJsonFile('.angular-cli.json', configJson => {
+      const app = configJson.defaults;
+      app.serve = {
+        proxyConfig: 'proxy.non-existent.json'
+      };
+    }))
+    .then(() => expectToFail(() => ngServe()));
+}