Angular16中zxing-js/ngx-scanner v16.0.1的404错误解决求助

问题描述 #

使用Angular 16框架集成zxing-js/ngx-scanner v16.0.1版本时，出现GET http://localhost:4200/noposter 404 (Not Found)错误，组件内部默认请求的noposter资源不存在于项目中。

错误截图

错误原因截图

解决方法 #

方法1：补充缺失的资源文件 #

• 在项目的src/assets目录下添加noposter资源（如果是图片，建议命名为noposter.png这类明确格式的文件）
• 修改组件内的资源引用路径，将原本的noposter改为assets/noposter（若为图片则对应assets/noposter.png），确保请求路径指向正确位置

方法2：禁用海报资源加载 #

通过组件属性直接关闭poster资源的加载，避免不必要的请求：

<!-- 在组件模板中设置 -->
<zxing-scanner [poster]="null"></zxing-scanner>

或者在组件类中配置：

import { Component } from '@angular/core';

@Component({
  selector: 'app-scanner',
  template: '<zxing-scanner [poster]="null"></zxing-scanner>'
})
export class ScannerComponent {}

方法3：排查版本兼容性 #

• 确认zxing-js/ngx-scanner v16.0.1与Angular 16的适配性，若存在版本冲突，尝试升级到库的最新兼容版本
• 查看库的官方仓库issues，检索是否有相同问题的官方解决方案

内容的提问来源于stack exchange，提问作者Lakshitha Kanchana