ng serve No Longer Displays Proxy Debugging Output

[Reboog711]

Which @angular/* package(s) are the source of the bug?

compiler-cli, Don't known / other

Is this a regression?

Yes

Description

I make use of a webpack proxy in my Angular when writing code for my book series. The proxy can pass service requests onto the appropriate application server based on an environment variable.

After upgrading the book code to Angular 13, I no longer see console output with regards to the proxy. This output was very useful when debugging.

When running the Angular 12 application, I see this:

The HPM messages are proxy messages, and as the app starts to make service calls, I can see additional details in the console about the mapping taking place.

When running the Angular 13 version, I see this:

In my tests to date, the proxy is still active and working, there is no just no output from it on the console.

The Angular 12 code base: https://github.com/Reboog711/LearnWith/tree/master/chapter2/angular12App_Bootstrap
The Angular 13 code base: https://github.com/Reboog711/LearnWith/tree/master/chapter2/angular13App_Bootstrap

Steps to reproduce:

1. Check out either directory above,
2. Run npm install
3. run ng serve

The Angular 12 version shows the proxy feedback as expected. The Angular 13 does not.

The Proxy file is identical on both the Angular 12 and Angular 13 versions of code:

var PROXY_CONFIG = [
  {
    context: [
      "/coldFusion"
    ],
    target: "http://local10.angular.learn-with.com",
    secure: false,
    logLevel: "debug",
    pathRewrite: {
      "^/coldFusion/": "http://local10.angular.learn-with.com/rest/lw2/"
    },
    changeOrigin: true
  },
  {
    context: [
      "/java"
    ],
    target: "http://localhost:8082",
    secure: false,
    logLevel: "debug",
    pathRewrite: {
      "^/java/": "http://localhost:8082/webapi/"
    }
  },
  {
    context: [
      "/nodejs"
    ],
    target: "http://127.0.0.1:8080/",
    secure: false,
    logLevel: "debug",
    pathRewrite: {
      "^/nodejs": ""
    }
  },
  {
    context: [
      "/php"
    ],
    target: "http://localphp.angular.learn-with.com:8080/",
    secure: false,
    logLevel: "debug",
    pathRewrite: function (path, req) {
      isNumeric =  (n) => {
        return !isNaN(parseFloat(n)) && isFinite(n);
      }
      const resultsArray = path.split('?');
      const urlArrayDirectories = path.split('/');
      let url = resultsArray[0].replace('/php/', 'http://localphp.angular.learn-with.com:8080/A12/chapter2/php/com/dotComIt/learnWith/api/')  ;
      if (resultsArray.length > 1) {
        url += `/?${resultsArray[1]}`
      } else if (!isNumeric(urlArrayDirectories[urlArrayDirectories.length-1])) {
        url += '/'
      }
      console.log(url);
      return url;
    },
    changeOrigin: true
  }
]

module.exports = PROXY_CONFIG;

The Angular.json is identical on both Angular 12 and Angular 13 versions of the code:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "task-manager": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:application": {
          "strict": true
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/task-manager",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css",
              "node_modules/bootstrap/dist/css/bootstrap.css"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "500kb",
                  "maximumError": "1mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "2kb",
                  "maximumError": "4kb"
                }
              ],
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "outputHashing": "all"
            },
            "development": {
              "buildOptimizer": false,
              "optimization": false,
              "vendorChunk": true,
              "extractLicenses": false,
              "sourceMap": true,
              "namedChunks": true
            },
            "coldfusion": {
              "buildOptimizer": false,
              "optimization": false,
              "vendorChunk": true,
              "extractLicenses": false,
              "sourceMap": true,
              "namedChunks": true,
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.coldfusion.ts"
                }
              ]
            },
            "java": {
              "buildOptimizer": false,
              "optimization": false,
              "vendorChunk": true,
              "extractLicenses": false,
              "sourceMap": true,
              "namedChunks": true,
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.java.ts"
                }
              ]
            },
            "php": {
              "buildOptimizer": false,
              "optimization": false,
              "vendorChunk": true,
              "extractLicenses": false,
              "sourceMap": true,
              "namedChunks": true,
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.php.ts"
                }
              ]
            },
            "nodejs": {
              "buildOptimizer": false,
              "optimization": false,
              "vendorChunk": true,
              "extractLicenses": false,
              "sourceMap": true,
              "namedChunks": true,
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.nodejs.ts"
                }
              ]
            }
          },
          "defaultConfiguration": "production"
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "configurations": {
            "production": {
              "browserTarget": "task-manager:build:production"
            },
            "development": {
              "browserTarget": "task-manager:build:development",
              "proxyConfig": "proxy.conf.js"
            },
            "coldfusion": {
              "browserTarget": "task-manager:build:coldfusion",
              "proxyConfig": "proxy.conf.js"
            },
            "php": {
              "browserTarget": "task-manager:build:php",
              "proxyConfig": "proxy.conf.js"
            },
            "java": {
              "browserTarget": "task-manager:build:java",
              "proxyConfig": "proxy.conf.js"
            },
            "nodejs": {
              "browserTarget": "task-manager:build:nodejs",
              "proxyConfig": "proxy.conf.js"
            }
          },
          "defaultConfiguration": "development"
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "task-manager:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": []
          }
        }
      }
    }
  },
  "defaultProject": "task-manager"
}

The package.json for Angular 12 version:

{
  "name": "task-manager",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~12.0.1",
    "@angular/common": "~12.0.1",
    "@angular/compiler": "~12.0.1",
    "@angular/core": "~12.0.1",
    "@angular/forms": "~12.0.1",
    "@angular/platform-browser": "~12.0.1",
    "@angular/platform-browser-dynamic": "~12.0.1",
    "@angular/router": "~12.0.1",
    "rxjs": "~6.6.0",
    "tslib": "^2.1.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~12.0.1",
    "@angular/cli": "~12.0.1",
    "@angular/compiler-cli": "~12.0.1",
    "@types/jasmine": "~3.6.0",
    "@types/node": "^12.11.1",
    "bootstrap": "^5.0.1",
    "jasmine-core": "~3.7.0",
    "karma": "~6.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "ts-md5": "^1.2.8",
    "typescript": "~4.2.3"
  }
}

Package.json for the Angular 13 version of the code:

{
  "name": "task-manager",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~13.0.0",
    "@angular/common": "~13.0.0",
    "@angular/compiler": "~13.0.0",
    "@angular/core": "~13.0.0",
    "@angular/forms": "~13.0.0",
    "@angular/platform-browser": "~13.0.0",
    "@angular/platform-browser-dynamic": "~13.0.0",
    "@angular/router": "~13.0.0",
    "rxjs": "~7.4.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~13.0.1",
    "@angular/cli": "~13.0.1",
    "@angular/compiler-cli": "~13.0.0",
    "@types/jasmine": "~3.10.0",
    "@types/node": "^12.11.1",
    "bootstrap": "^5.1.3",
    "jasmine-core": "~3.10.0",
    "karma": "~6.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "~1.7.0",
    "ts-md5": "^1.2.9",
    "typescript": "~4.4.3"
  }
}

Please provide a link to a minimal reproduction of the bug

https://github.com/Reboog711/LearnWith/tree/master/chapter2/angular13App_Bootstrap

Please provide the exception or error you saw

No proxy information is output to the console.

Please provide the environment you discovered this bug in

The info from `ng --version`

Angular CLI: 13.0.1
Node: 16.13.0
Package Manager: npm 8.1.3
OS: win32 x64

Angular: 13.0.0
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1300.1
@angular-devkit/build-angular   13.0.1
@angular-devkit/core            13.0.1
@angular-devkit/schematics      13.0.1
@angular/cli                    13.0.1
@schematics/angular             13.0.1
rxjs                            7.4.0
typescript                      4.4.4

Anything else?

Proxy is active and working, but the console output makes it easier to debug these things during development.

[alan-agius4]

Hi,

This is caused by one of the breaking changes of webpack-dev-server version 4 which is now being used by Angular CLI version 13.

Unlikely previously, information logs are not emitted directly to the console, but the built-in webpack logger is used instead. This is described in the breaking changes section of the webpack-dev-server release notes which can be found https://github.com/webpack/webpack-dev-server/blob/master/CHANGELOG.md#400-beta0-2020-11-27.

To display these information logs the build needs to be run in verbose mode using the --verbose option.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}