Closed
Description
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:
- Check out either directory above,
- Run npm install
- 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.
Metadata
Metadata
Assignees
Labels
No labels