🐞 bug report
Affected Package
The issue is caused by package @angular/common/http
Is this a regression?
Unknown. I first noticed this in one of the latest 8.x releases. I haven’t checked all of the previous versions, but I suspect that it was working in 7.x (or an earlier Edge browser version) when I was more actively developing this project.
Description
When posting to a remote server from localhost, an error is thrown in Edge browser but no other browser does this (tested on Edge, Firefox, Chrome).
The error itself appears to be invalid because the error object is a ProgressEvent. This may be because XHR on Edge browser has a different progress event being raised that other browsers don’t have and that unexpected event causes an error.
If you have the server also running on localhost then it succeeds in all browsers (Edge, Firefox, Chrome).
Note: this isn’t server-side CORS because other browsers don’t get the error when calling the same server. Also, in the example below, pure HTML/JS does not generate the error.
🔬 Minimal Reproduction
This repo contains a demo Angular project and a Node Express server to accept uploaded files (it does nothing with the uploaded files, just returns 200 and a fixed message).
https://github.com/JamesHough/angular-edge-progressevent-error
Run npm install inside the root folder and also inside the «node» folder which has the Express REST api for testing.
npm start will start the local REST server and the Angular app. However you must copy the REST service to a different server and host it in Node in order to cause the problem to occur. When you move it to a remote server, you will need to edit any-old.service.ts and also edit index.html to set the right remote server to use for testing.
Note: This sample includes both an Angular solution and a plain HTML/JS solution that will both upload to the same Node Express service. The HTML/JS example uses XHR and works on all browsers (Edge, Firefox, Chrome)
🔥 Exception or Error
{
error: ProgressEvent,
headers: Object,
message: "Http failure response for http://remote-server-name:3000/api/excel-reader-api/api/ReadColumnHeaders: 0 Unknown Error",
name: "HttpErrorResponse",
ok: false,
status: 0,
statusText: "Unknown Error",
url: "http://remote-server-name:3000/api/excel-reader-api/api/ReadColumnHeaders"
}🌍 Your Environment
Angular Version:
Angular CLI: 8.3.20
Node: 12.5.0
OS: win32 x64
Angular: 8.2.14
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Package Version
-----------------------------------------------------------
@angular-devkit/architect 0.803.20
@angular-devkit/build-angular 0.803.20
@angular-devkit/build-optimizer 0.803.20
@angular-devkit/core 8.3.20
@angular-devkit/schematics 8.3.20
@angular/cli 8.3.20
@ngtools/webpack 8.3.20
@schematics/angular 8.3.20
@schematics/update 0.803.20
rxjs 6.4.0
typescript 3.5.3
webpack 4.39.2Anything else relevant?
This only happens on the Edge browser when running on localhost and connecting to a remote server. I have Edge version 18 installed but it may have been working on earlier Edge browser versions (or in earlier Angular versions).
Microsoft Edge 44.18362.449.0
Microsoft EdgeHTML 18.18363Hello everybody
Tangram v0.20.1
I’ve got a strange connection error:
tangram.min.js?37b0:35 Tangram v0.20.1 [error]: Scene.load() failed to load "scene:n background:n color: '#ddeeee'nnsources:n nextzen:n type: MVTn url: http://localhost/tiles/{z}/{x}/{y}n max_zoom: 16nnlayers:n landuse:n data: { source: nextzen }n draw:n polygons:n order: function() { return feature.sort_rank; }n color: lightgreennn water:n data: { source: nextzen }n draw:n polygons:n order: function() { return feature.sort_rank; }n color: lightbluenn roads:n data: { source: nextzen }n filter:n not: { kind: [path, rail, ferry] }n draw:n lines:n order: function() { return feature.sort_rank; }n color: [.6, .6, .6]n width: [[0, 2px], [14, 2px], [16, 4px], [18, 6px]]n outline:n color: whiten width: [[14, 0px], [16, 1px]]n order: 350nn buildings:n data: { source: nextzen }n draw:n polygons:n order: function() { return feature.sort_rank; }n color: |n function () {n var h = feature.height || 20;n h = Math.min((h + 50)/ 255, 1); // max brightness: 1n h = Math.max(h, .4); // min brightness: .4n h = (h - 0.4) * -1 + 1; // flip brightnessn return [h, h * 0.4, h * 0.7];n }n 3d-buildings:n filter: { $zoom: { min: 15 } }n draw:n polygons:n extrude: function () { return feature.height > 20 || $zoom >= 16; }nn places:n data: { source: nextzen }n filter: function() { return ($zoom >= feature.min_zoom && (feature.max_zoom == null || $zoom <= feature.max_zoom)); }n draw:n text:n visible: global.labelsn priority: function() { return 1 - 1/feature.min_zoom; } # give higher priority to lower min_zoomn repeat_distance: 512px # filter out duplicate place namesn text_source: namen font:n family: Helvetican fill: blackn size: |n function() {n if (feature.min_zoom == null) return 12;n var p = feature.population_rank || 7;n return Math.min(n 12 + (p - 7) + Math.pow(1.5, Math.max($zoom - feature.min_zoom)),n 24);n }n weight: boldn": There was a network error[object ProgressEvent] Error: There was a network error[object ProgressEvent] at XMLHttpRequest.a.onerror (tangram.min.js?37b0:35)
ENVIRONMENT:
WIndows 10, Chrome 84.0.4147.105
TO REPRODUCE THE ISSUE, FOLLOW THESE STEPS:
I’ve used Tangram with pbf data from by my own tile server. The server works well with L.VectorGrid plugin. CORS headers are on
RESULT:
The connection error as above.
EXPECTED RESULT:
Connection established.
Hello everybody
Tangram v0.20.1
I’ve got a strange connection error:
tangram.min.js?37b0:35 Tangram v0.20.1 [error]: Scene.load() failed to load "scene:n background:n color: '#ddeeee'nnsources:n nextzen:n type: MVTn url: http://localhost/tiles/{z}/{x}/{y}n max_zoom: 16nnlayers:n landuse:n data: { source: nextzen }n draw:n polygons:n order: function() { return feature.sort_rank; }n color: lightgreennn water:n data: { source: nextzen }n draw:n polygons:n order: function() { return feature.sort_rank; }n color: lightbluenn roads:n data: { source: nextzen }n filter:n not: { kind: [path, rail, ferry] }n draw:n lines:n order: function() { return feature.sort_rank; }n color: [.6, .6, .6]n width: [[0, 2px], [14, 2px], [16, 4px], [18, 6px]]n outline:n color: whiten width: [[14, 0px], [16, 1px]]n order: 350nn buildings:n data: { source: nextzen }n draw:n polygons:n order: function() { return feature.sort_rank; }n color: |n function () {n var h = feature.height || 20;n h = Math.min((h + 50)/ 255, 1); // max brightness: 1n h = Math.max(h, .4); // min brightness: .4n h = (h - 0.4) * -1 + 1; // flip brightnessn return [h, h * 0.4, h * 0.7];n }n 3d-buildings:n filter: { $zoom: { min: 15 } }n draw:n polygons:n extrude: function () { return feature.height > 20 || $zoom >= 16; }nn places:n data: { source: nextzen }n filter: function() { return ($zoom >= feature.min_zoom && (feature.max_zoom == null || $zoom <= feature.max_zoom)); }n draw:n text:n visible: global.labelsn priority: function() { return 1 - 1/feature.min_zoom; } # give higher priority to lower min_zoomn repeat_distance: 512px # filter out duplicate place namesn text_source: namen font:n family: Helvetican fill: blackn size: |n function() {n if (feature.min_zoom == null) return 12;n var p = feature.population_rank || 7;n return Math.min(n 12 + (p - 7) + Math.pow(1.5, Math.max($zoom - feature.min_zoom)),n 24);n }n weight: boldn": There was a network error[object ProgressEvent] Error: There was a network error[object ProgressEvent] at XMLHttpRequest.a.onerror (tangram.min.js?37b0:35)
ENVIRONMENT:
WIndows 10, Chrome 84.0.4147.105
TO REPRODUCE THE ISSUE, FOLLOW THESE STEPS:
I’ve used Tangram with pbf data from by my own tile server. The server works well with L.VectorGrid plugin. CORS headers are on
RESULT:
The connection error as above.
EXPECTED RESULT:
Connection established.