`--proxy-config` and other options not forwarded to Angular CLI

Bug Report

Ionic Info

cli packages: (/Users/sean/.config/fnm/lib/node_modules)

   @ionic/cli-utils  : 2.0.0-rc.6
   ionic (Ionic CLI) : 4.0.0-rc.6

local packages:

   @angular-devkit/core       : 0.0.28
   @angular-devkit/schematics : 0.6.0
   @angular/cli               : 6.0.1
   @ionic/schematics-angular  : 1.0.0-rc.9
   Ionic Framework            : @ionic/angular 4.0.0-alpha.7

System:

   NodeJS : v8.11.1
   npm    : 5.6.0
   OS     : macOS High Sierra

Describe the Bug The proxy config is not being appended to the ng serve command starting in rc.7.

Steps to Reproduce Steps to reproduce the behavior:

1. Install rc.6
2. Ionic serve an Ionic 4 project with a proxy.conf.json file
3. Notice the script is appended ng serve --host=0.0.0.0 --port=8101 --proxy-config=proxy.conf.json
4. Upgrade to rc.7 (or later)
5. No longer works as expected.

sean@Seans-MacBook-Pro-2 ~/D/m/m/a/loop-ionic> npm run start

> loop@0.0.1 start /Users/sean/Documents/maestro/maestro/apps/loop-ionic
> ionic serve --proxy-config proxy.conf.json

> ng run app:serve --host=0.0.0.0 --port=8101

[imhoffd]

There’s actually two issues I think you’re reporting, so I’ll tackle them one at a time.

1. CLI RC.6 and before automatically added the --proxy-config option if a proxy.conf.json was detected.

   I took this out because Angular 6 (which we switched to for RC.7+) emphasizes the preference of target -> config.

   In the angular.json file, you can provide defaults for command configurations: https://github.com/angular/angular-cli/blob/44086c60ff1d6c26d30850bef125120f6c498ac1/packages/angular_devkit/build_angular/src/dev-server/schema.json#L20-L23

   For example, try adding proxyConfig option:

   ...
       "serve": {
         "builder": "@angular-devkit/build-angular:dev-server",
         "options": {
           "browserTarget": "app:build",
           "proxyConfig": "proxy.config.json"
         },
       },
   ...
   

   (more info here: https://github.com/angular/angular-cli/wiki/stories-proxy#proxy-to-backend)

2. Ionic CLI does not forward all Angular CLI options.

   The Ionic CLI would need to know all the available options of the Angular CLI in order to forward them. It would need to keep a whitelist because the Angular CLI errors if unknown options are provided. For example, the Ionic CLI would need to know how to parse ionic serve --proxy-config proxy.config.json --engine cordova. --engine is an Ionic CLI option, but --proxy-config is an Angular CLI option.

   Additionally, the type of option would need to be known. --hmr is a boolean option, so the Ionic CLI would need to know not to forward arguments to the Angular CLI because it will fail, for example: ionic serve --hmr extra-arg --proxy-config proxy.config.json.

   Routing options to where they need to go requires deep coupling, which becomes difficult to maintain over time. Additionally, it can be error-prone.

   Because of these reasons, if you still need to pass options to the Angular CLI, I’ve added a mechanism that looks for a -- separator character, which tells the Ionic CLI to stop parsing command line options and forward whatever comes after to the Angular CLI directly. This already exists for ionic cordova commands, because they wrap the Cordova CLI (see the examples in ionic cordova run --help).

   For example, use ionic serve -- --proxy-config proxy.config.json and whatever comes after the -- separator will be forwarded as-is to the Angular CLI.

   This is documented in ionic serve --help.

[sean-perkins]

@dwieeb thanks for the speedy reply.

Both methods worked perfectly and thank you for making me aware of the configuration option in the angular.json.

Love what you guys are doing with Ionic and Capacitor; exciting time to be using Ionic in our apps. Great work!