Angular 14静态资源请求404：数字开头文件夹引发异常？

核心原因推测 #

• Angular 构建配置的路径匹配遗漏：Angular 默认通过 angular.json 的 assets 配置复制静态资源到构建产物，数字开头的嵌套文件夹可能没被正确匹配到，导致构建后产物里没有这些目录及文件。
• 路径分隔符错误：Web 环境下路径需用正斜杠 /，如果请求时用了反斜杠 \，会被当作转义字符，导致实际请求路径解析出错（不过你字母文件夹能正常访问，这个可能性相对低）。

验证与解决步骤 #

1. 检查并修改 angular.json 配置
   打开项目根目录的 angular.json，找到 projects -> [你的项目名] -> architect -> build -> options -> assets 节点，默认配置一般是：

   "assets": [
     "src/favicon.ico",
     "src/assets"
   ]
   

   尝试显式添加数字开头的文件夹路径，强制构建时复制：

   "assets": [
     "src/favicon.ico",
     "src/assets",
     "src/assets/folder/1",
     "src/assets/folder/2"
   ]
   

   执行 ng build 重新构建项目后再测试请求。

2. 确认构建产物的目录结构
   构建完成后，查看 dist/[项目名]/assets/folder 下是否存在 1、2 文件夹及里面的 myfile.txt。如果不存在，说明构建时未复制这些资源，问题出在配置；如果存在，再检查请求路径是否正确。

3. 修正请求路径格式
   确保请求用正斜杠路径，示例代码：

   const xhr = new XMLHttpRequest();
   xhr.open('GET', '/assets/folder/1/myfile.txt', true);
   xhr.onload = function() {
     xhr.status === 200 ? console.log(xhr.responseText) : console.error('请求失败:', xhr.status);
   };
   xhr.send();
   

4. 排查路由拦截/守卫干扰
   如果项目有自定义路由拦截器或守卫，可能误拦截了数字开头路径的请求，可暂时移除相关代码测试是否恢复正常。

结论 #

这个问题并非 HttpRequest 或 Angular 14 的固有问题，大概率是Angular 构建配置未正确包含数字开头的嵌套文件夹，导致构建产物中缺失对应资源，从而出现 404。

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