How to serve to the browser with a configuration

CodeTroopers commented 4 years ago

Actual Behavior

Add a launch configuration in the launch.json file to serve to the browser

{
"name": "Serve to the browser (ionic serve)",
"type": "cordova",
"request": "launch",
"platform": "serve",
"cwd": "${workspaceFolder}",
"devServerAddress": "localhost",
"sourceMaps": true,
"ionicLiveReload": true
}

Add arguments to set a configuration
```
"runArguments": ["-c", "dev"]
```
Run the launch configuration
The command started has not the configuration ng run app:serve --host=localhost --port=4200

Expected Behavior

The command started has the configuration ng run app:serve --host=localhost --port=4200 -c dev

Software versions

Cordova VS Code extension version: v2.0.0
VSCode version: 1.50.1
OS platform and version: MacOS 10.15.7
NodeJS version: v12.16.2
Cordova version: 9.0.0 (cordova-lib@9.0.1)
Cordova-Android version: 8.1.0

Outputs

Output of the Debug Console

ng run app:serve --host=localhost --port=4203
[ng] ****************************************************************************************
[ng] This is a simple server for use in testing or debugging Angular applications locally.
[ng] It hasn't been reviewed for security issues.
[ng] DON'T USE IT FOR PRODUCTION!
[ng] ****************************************************************************************
[ng] <s> [webpack.Progress] 0% compiling
[ng] <s> [webpack.Progress] 10% building 0/0 modules 0 active

RedMickey commented 4 years ago

Hi @CodeTroopers and thanks for reaching us. We tried to reproduce this issue on an Ionic 5 application and didn't face any problems. We tried the following debugging configurations:

        {
            "name": "Serve to the browser (Ionic Serve)",
            "type": "cordova",
            "request": "launch",
            "platform": "serve",
            "target": "chrome",
            "cwd": "${workspaceFolder}",
            "devServerAddress": "localhost",
            "sourceMaps": true,
            "ionicLiveReload": true,
            "runArguments": ["-c", "dev"]
        }

or

        {
            "name": "Serve to the browser (Ionic Serve)",
            "type": "cordova",
            "request": "launch",
            "platform": "serve",
            "target": "chrome",
            "cwd": "${workspaceFolder}",
            "devServerAddress": "localhost",
            "sourceMaps": true,
            "ionicLiveReload": true,
            "runArguments": ["--configuration=dev"]
        }

In this case under the hood the extension runs such a command to launch an application:

ionic serve -c dev --no-interactive

After that according to Debug console logs ionic-cli runs the command:

> ng run app:serve:dev --host=localhost --port=8100

Could you please tell us which Ionic version you are using? Could you please also send us your angular.json file or, it would be better, create a demo project where the problem behavior is reproduced?

CodeTroopers commented 4 years ago

Hi @RedMickey, thank for your reply! Here the output of the command ionic info

Ionic:

Ionic CLI : 5.4.15 (/usr/local/lib/node_modules/ionic) Ionic Framework : @ionic/angular 4.11.10 @angular-devkit/build-angular : 0.803.29 @angular-devkit/schematics : 8.3.29 @angular/cli : 8.3.29 @ionic/angular-toolkit : 2.1.2

Cordova:

Cordova CLI : 9.0.0 (cordova-lib@9.0.1) Cordova Platforms : android 8.1.0, browser 6.0.0 Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.2.1, (and 16 other plugins)

Utility:

cordova-res : 0.15.1 native-run (update available: 1.2.2) : 1.0.0

System:

Android SDK Tools : 26.1.1 (/Users/laurenthoudusse/Library/Android/sdk) ios-sim : 8.0.2 NodeJS : v12.16.2 (/usr/local/bin/node) npm : 6.14.8 OS : macOS Catalina Xcode : Xcode 12.0.1 Build version 12A7300

Sorry, I don't have any time to reproduce in a demo project for now, perhaps the next week... Here the relevant part of my angular.json file

"app": {
    "root": "",
    "sourceRoot": "src",
    "projectType": "application",
    "prefix": "app",
    "schematics": {},
    "architect": {
        "build": {
            "builder": "ngx-build-plus:browser",
            "options": {
                "customWebpackConfig": {
                    "path": "./webpack.config.js",
                    "replaceDuplicatePlugins": true
                },
                "outputPath": "www",
                "index": "src/index.html",
                "main": "src/main.ts",
                "polyfills": "src/polyfills.ts",
                "tsConfig": "src/tsconfig.app.json",
                "assets": [
                    {
                        "glob": "**/*",
                        "input": "src/assets",
                        "output": "assets"
                    }
                ],
                "styles": [
                    {
                        "input": "src/global.scss"
                    }
                ],
                "scripts": [],
                "es5BrowserSupport": true,
                "preserveSymlinks": true,
                "optimization": true,
                "outputHashing": "all",
                "sourceMap": false,
                "extractCss": true,
                "namedChunks": false,
                "aot": true,
                "extractLicenses": true,
                "vendorChunk": false,
                "buildOptimizer": true,
                "budgets": [
                    {
                        "type": "initial",
                        "maximumWarning": "4mb",
                        "maximumError": "5mb"
                    }
                ]
            },
            "configurations": {
                "production": {
                    "fileReplacements": [
                        {
                            "replace": "src/environments/environment-config.ts",
                            "with": "src/environments/environment-config.prod.ts"
                        }
                    ]
                },
                "dev": {
                    "fileReplacements": [
                        {
                            "replace": "src/environments/environment-config.ts",
                            "with": "src/environments/environment-config.dev.ts"
                        }
                    ],
                    "sourceMap": true
                }
            }
        },
        "serve": {
            "builder": "ngx-build-plus:dev-server",
            "options": {
                "browserTarget": "app:build"
            },
            "configurations": {
                "production": {
                    "browserTarget": "app:build:production"
                },
                "dev": {
                    "browserTarget": "app:build:dev"
                }
            }
        }
    }
}

RedMickey commented 4 years ago

@CodeTroopers, as seen from your ionic info specification you are using Ionic CLI v5.4.15. We found out that it doesn't support the flag -c as alias for --configuration for Angular projects. According to the changelog of ionic-cli the -c alias was added in ionic-cli v6.2.0. In early versions of the CLI you can use --configuration=<conf> expression to specify the configuration to use. You can use the following debugging configuration to specify dev build config:

        {
            "name": "Serve to the browser (Ionic Serve)",
            "type": "cordova",
            "request": "launch",
            "platform": "serve",
            "target": "chrome",
            "cwd": "${workspaceFolder}",
            "devServerAddress": "localhost",
            "sourceMaps": true,
            "ionicLiveReload": true,
            "runArguments": ["--configuration=dev"]
        }

Please don't forget to add a target parameter to the serve debug configuration if it's not there. The target parameter has become mandatory since Cordova Tools v2.0.0.

Please let us know about your results.

CodeTroopers commented 4 years ago

@RedMickey thank a lot for your help and the explanation. It works with --configuration as argument

microsoft / vscode-cordova