Angular 11组件读取node_modules文件报错，求解决方法（需计算MD5）

你用fetch直接访问node_modules里的文件之所以失败，核心原因有两个：

1. 前端运行时资源限制：node_modules里的文件默认不会被Angular打包到前端可访问的静态资源目录，浏览器端的fetch只能访问打包后部署在服务器上的静态资源，直接写源码相对路径根本找不到。
2. 路径解析逻辑差异：浏览器端的相对路径是相对于当前页面的URL，不是相对于你的app.component.ts文件路径，所以../../../../这种源码层面的相对路径，在浏览器里解析出来的位置完全不对。

下面是几个可行的解决办法：

方案一：配置Angular将目标文件复制到静态资源 #

把需要访问的文件配置到Angular的静态资源列表，打包时会自动复制到dist目录，之后就能用浏览器可识别的路径访问：

1. 打开angular.json，找到projects -> 你的项目名 -> architect -> build -> options -> assets，添加目标文件的配置：

"assets": [
  "src/favicon.ico",
  "src/assets",
  {
    "glob": "test.js",
    "input": "./node_modules/@xyz/abc-module/lib",
    "output": "./assets/third-party"
  }
]

2. 修改app.component.ts里的代码，用新的静态资源路径访问：

async ngOnInit(): Promise<void> {
  const filePath = '/assets/third-party/test.js';
  fetch(filePath)
    .then(response => {
      if (!response.ok) throw new Error('文件未找到');
      return response.arrayBuffer();
    })
    .then(buffer => {
      // 在这里执行MD5计算逻辑
      console.log('文件Buffer:', buffer);
    })
    .catch(err => console.error('访问文件出错:', err));
}

方案二：用Angular HttpClient替代fetch（更适配Angular环境） #

和方案一一样先配置静态资源，然后用Angular自带的HttpClient来请求：

1. 确保在AppModule里导入HttpClientModule：

import { HttpClientModule } from '@angular/common/http';

@NgModule({
  imports: [BrowserModule, HttpClientModule],
  // ...其他配置
})
export class AppModule { }

2. 在app.component.ts中注入HttpClient并使用：

import { HttpClient } from '@angular/common/http';

constructor(private http: HttpClient) {}

async ngOnInit(): Promise<void> {
  this.http.get('/assets/third-party/test.js', { responseType: 'arraybuffer' })
    .subscribe({
      next: buffer => {
        // 执行MD5计算
        console.log('文件Buffer:', buffer);
      },
      error: err => console.error('请求出错:', err)
    });
}

方案三：构建阶段提前计算MD5（无需运行时访问文件） #

如果不需要在浏览器运行时计算，而是想在构建阶段就拿到MD5值，可以用Node.js脚本实现：

1. 在项目根目录创建scripts/calculate-md5.js：

const fs = require('fs');
const crypto = require('crypto');

// 读取目标文件
const filePath = './node_modules/@xyz/abc-module/lib/test.js';
const fileBuffer = fs.readFileSync(filePath);

// 计算MD5
const md5Hash = crypto.createHash('md5').update(fileBuffer).digest('hex');

// 将结果写入静态资源文件，供Angular读取
fs.writeFileSync('./src/assets/test-md5.json', JSON.stringify({ testJsMd5: md5Hash }));
console.log('test.js的MD5已计算完成:', md5Hash);

2. 在package.json的scripts里添加预构建脚本：

"scripts": {
  "prebuild": "node scripts/calculate-md5.js",
  "build": "ng build"
}

3. 之后Angular可以通过读取/assets/test-md5.json拿到预先计算好的MD5值。

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