[英]Property 'then' does not exist on type 'false' when building an Angular app in the terminal
I am using an Angular (not AngularJS) application that I run via the terminal using the ng serve
command.我正在使用 Angular(不是 AngularJS)应用程序,我使用ng serve
命令通过终端运行。
Everything builds and I can navigate to the Angular app locally through my browser, however when looking at the terminal I have noticed there are some build errors displayed in red displayed below.一切都在构建,我可以通过浏览器在本地导航到 Angular 应用程序,但是在查看终端时,我注意到下面以红色显示了一些构建错误。
✔ Compiled successfully.
⠋ Generating browser application bundles...
Error: src/app/components/posting/posting.component.ts:343:78 - error TS2339: Property 'then' does not exist on type 'false | Promise<unknown>'.
Property 'then' does not exist on type 'false'.
343 this.getVideoMediaData(file).then(a => this.validateFileAgainstConfig('instagram'));
~~~~
✔ Browser application bundle generation complete.
My getVideoMediaData()
looks like this我的getVideoMediaData()
看起来像这样
public getVideoMediaData(file) {
if (typeof file === 'undefined') {
return false;
}
return new Promise((resolve, reject) => {
this.postingService.getMetadata(file.url).subscribe(
data => {
resolve(data);
const errors = data.errors;
file.errors = [];
if (errors && errors.length > 0 ) {
errors.forEach(function(ffmpegError) {
file.errors.push({
'message': ffmpegError,
'validation': 'ffmpeg'
});
}, this);
}
},
errorResponse => {
reject(errorResponse);
}
);
});
}
What is causing this & how would be the best approach to fix this issue so I no longer receive this error in the terminal once it has finished building after running ng serve.导致此问题的原因以及解决此问题的最佳方法是什么,因此在运行 ng serve 后完成构建后,我不再在终端中收到此错误。
Expected outcome After running ng serve the app builds without any errors预期结果运行 ng serve 后,应用程序构建没有任何错误
Actual outcome After running ng serve the app builds and displays the "Property 'then' does not exist on type 'false'" error in the terminal.实际结果运行 ng serve 后,应用程序构建并在终端中显示“Property 'then' does not exist on type 'false'”错误。
Your first if doesn't return a Promise
.你的第一个 if 没有返回Promise
。 Wrap false
with Promise.resolve(false)
or make the method async
and you should be fine.用Promise.resolve(false)
包装false
或使方法async
,你应该没问题。
Side-note:边注:
You should check for truthyness
of file as it also considers null
besides from undefined
:您应该检查文件的truthyness
,因为它还考虑null
除了来自undefined
:
async getVideoMediaData(file): Promise<boolean> {
if (!file) return false;
return new Promise((resolve, reject) => {
this.postingService.getMetadata(file.url).subscribe(
data => {
resolve(data);
const errors = data.errors;
file.errors = [];
if (errors && errors.length > 0 ) {
errors.forEach(function(ffmpegError) {
file.errors.push({
'message': ffmpegError,
'validation': 'ffmpeg'
});
}, this);
}
},
errorResponse => {
reject(errorResponse);
}
);
});
}
Side-note-2:旁注2:
You should also consider toPromise()
(RxJS 6 and lower) or firstValueFrom
(RxJS 7^) to transform that service observable into a Promise
您还应该考虑toPromise()
(RxJS 6 及更低版本)或firstValueFrom
(RxJS 7^)将该服务可观察到的转换为Promise
async getVideoMediaData(file): Promise<boolean> {
if (!file) return false;
// if using RxJS 6 or lower
const data = await this.postingService.getMetadata(file.url).toPromise()
// RxJS 7
const data = await firstValueFrom(
this.postingService.getMetadata(file.url)
)
const errors = data.errors;
file.errors = [];
if (errors && errors.length > 0 ) {
errors.forEach(function(ffmpegError) {
file.errors.push({
'message': ffmpegError,
'validation': 'ffmpeg'
});
}, this);
}
return data
}
Side-note-3:旁注3:
I suggest you restrain yourself from passing anonymous functions and use fat-arrows
when dealing with JS arrays as you don't have to deal with the this
mess that JS has.我建议您在处理 JS 数组时限制自己传递匿名函数并使用fat-arrows
,因为您不必处理 JS 的this
混乱。 Also using map
is better than for-each
ing and pushing:同样使用map
比for-each
和 push 更好:
file.errors = Array.from(data.errors ?? []).map(ffmpegError => ({message: ffmpegError, validation: 'ffmpeg'}))
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.