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

[sean-perkins]

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

> [email protected] 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!

[JrSagas]

Hi,

It's amazing everything what you can do in ionic.
I was wondering if works the same way (-- separator) when I execute ionic build?

I'm trying something like this:
ionic build -- --proxy-config proxy.config.json

I want to because I have CORS issues and I don't have control over the server.
In the execution doesn't catch the proxy config

iRaul-2:Byte_Managment_Projects rtoledo$ ionic build -- --proxy-config proxy.config.json
[WARN] The pro_id field in ./ionic.config.json has been deprecated.

   Ionic Pro has been renamed to Ionic Appflow! We've copied the value in pro_id to id, but you may want to unset 
   the deprecated property: ionic config unset pro_id

ionic-app-scripts build --proxy-config proxy.config.json
[09:07:38] ionic-app-scripts 3.2.2
[09:07:38] build dev started ...
[09:07:38] clean started ...
[09:07:38] clean finished in 2 ms
[09:07:38] copy started ...
[09:07:38] deeplinks started ...
[09:07:38] deeplinks finished in 184 ms
[09:07:38] transpile started ...
[09:07:43] transpile finished in 5.30 s
[09:07:43] preprocess started ...
[09:07:43] preprocess finished in less than 1 ms
[09:07:43] webpack started ...
[09:07:43] copy finished in 5.64 s
[09:07:48] webpack finished in 4.34 s
[09:07:48] sass started ...
[09:07:49] sass finished in 1.62 s
[09:07:49] postprocess started ...
[09:07:49] postprocess finished in 6 ms
[09:07:49] lint started ...
[09:07:49] build dev finished in 11.55 s

My proxy.config.json

{
    "/auth-proxy": {
        "target": "http://galaxiaaa.com:8090/api/auth-server/auth-server/oauth",
        "secure": false,
        "pathRewrite": {
            "^/auth-proxy": ""
        },
        "changeOrigin": true,
        "logLevel": "debug"
    }
}

Thank you a lot!

[imhoffd]

@JrSagas It looks like you're using Ionic 3, which uses @ionic/app-scripts. Proxy configuration documentation for Ionic 3 is here: https://ionicframework.com/docs/v3/cli/configuring.html#service-proxies

[JrSagas]

@JrSagas It looks like you're using Ionic 3, which uses @ionic/app-scripts. Proxy configuration documentation for Ionic 3 is here: https://ionicframework.com/docs/v3/cli/configuring.html#service-proxies

Thank you for the fast reply!
I gonna try installing ionic proxy and use it like environment variable.

Thanks

[imhoffd]

That doesn't sound right. You want _Service Proxies_ not _Using a Proxy_. Sorry it's confusing.