哪个@angular/*包是bug的来源?
common
这是一次回归吗?
是的
描述
在将项目升级到Angular 17后,我开始无法监听reportProgress。我认为这与后端配置有关。当我在本地尝试使用jquery ajax时,我可以使用xhr.upload监听事件。以下是代码;
const headers = new HttpHeaders({ 'ngsw-bypass': '' });
return this.apiService
.put(
new ApiCall({
apiUrl: payload.files.data.upload_to,
path: '',
body: payload.files.data.file,
options: {
reportProgress: true,
observe: 'events',
headers: headers,
},
})
)
.pipe(
takeUntil(this.fileFacade.destroy$),
// map(() => fileAction.uploadFilesSuccess()),
map((event: HttpEvent<any>) => {
console.log(event);
switch (event.type) {
case HttpEventType.UploadProgress:
let progress = Math.round((event.loaded / event.total) * 100);
return fileAction.setUploadProgress({ percent: progress });
case HttpEventType.Response:
return fileAction.uploadFilesSuccess();
default:
return fileAction.uploadFilesFail(null);
}
}),
catchError((err) => of(fileAction.uploadFilesFail(err)))
);
这是我的api服务函数;
put(apiCall: IApiCall) {
apiCall = this.setApiCall(apiCall);
const url = apiCall.getFullPath();
return this.http.put(url, apiCall.body, apiCall.options).pipe(
tap((res: any) => res),
catchError(this.handleError)
);
}
当它以这种方式工作时,无论文件大小如何,都只返回事件类型0(HttpEventType.Sent)。
请提供一个最小复现bug的链接
- 无响应*
请提供您看到的异常或错误
- 无响应*
请提供您发现此bug的环境(运行ng version
)
Angular CLI: 17.0.7
Node: 20.9.0
Package Manager: npm 10.1.0
OS: darwin arm64
Angular: 17.0.7
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, platform-server
... router, service-worker, ssr
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1700.7
@angular-devkit/build-angular 17.0.7
@angular-devkit/core 17.0.0
@angular-devkit/schematics 17.0.0
@angular/cdk 17.0.1
@schematics/angular 17.0.7
rxjs 7.8.1
typescript 5.2.2
zone.js 0.14.2
还有其他信息吗?
- 无响应*
7条答案
按热度按时间rggaifut1#
你正在使用新的
withFetch()
提供商吗?Fetch不支持在上传过程中报告进度。
zfciruhq2#
是的,我正在使用
withFetch()
提供商。当我移除provideHttpClient(withFetch())
时,它可以正常工作,非常感谢@JeanMeche。我能否让它仅在单个请求中使用XMLHttpRequest
?rslzwgfq3#
我们如何将HttpClient与Xhr和fetchApi作为不同的注入?
qyuhtwio4#
您可以在模块或特定组件中不使用
withFetch()
,但这绝对不被推荐。uhry853o5#
我想在服务中使用它们(当我需要文件上传并带有进度报告时,将使用withoutFetch,否则使用withFetch)。
92dk7w1h6#
你好,有关于使用fetch实现进度支持的计划吗?现在在使用SSR时,Angular会显示这样的警告,如果不使用fetch API:
NG02801: Angular检测到
HttpClient
没有配置为使用fetch
API。强烈建议为使用服务器端渲染的应用程序启用fetch
以获得更好的性能和兼容性。要启用fetch
,请在应用程序根目录处将withFetch()
添加到provideHttpClient()
调用中。[server]: init
& 如果我们使用fetch,上传进度无法工作。
这个关于fetch标准的工作草案是否有帮助?
whatwg/fetch#425
zhte4eai7#
目前,Firefox和Safari不支持将
ReadableStream
作为请求体。在这项功能实现之前,无法使用fetch
提供进度报告。https://developer.mozilla.org/en-US/docs/Web/API/Request#browser_compatibility