使用xml2js转换XML到JSON报错：ReferenceError: global is not defined

问题背景 #

你在Angular项目里尝试用xml2js库把XML字符串转换为JSON来获取用户详情，写了对应的组件代码和HTML模板：

TypeScript组件代码

sendXML(){
  console.log("Inside sendXML method")
  console.log(this.XMLAsString)
  this.parseXML(this.XMLAsString);
}
parseXML(XMLAsString){
  var result;
  var parser=require('xml2js');
  parser.Parser().parseString(XMLAsString, (err, r)=>{result=r});
  console.log(result);
}

HTML模板

<button class="largeButton primaryButton" [disabled]="proceedToVerification" (click)="sendXML()">Proceed to Submit</button>

点击按钮触发sendXML()后，控制台抛出了错误：

ItrAgainstOrderFilTypeComponent.html:112 ERROR ReferenceError: global is not defined

错误原因 #

xml2js原本是为Node.js环境开发的库，它依赖Node.js内置的global全局对象，但浏览器环境并没有这个原生对象。当Angular在浏览器中运行这段代码时，调用xml2js的过程中找不到global，就会抛出引用错误。

至于错误指向HTML文件的原因：Angular的错误追踪机制会把事件触发的DOM元素和对应的错误关联起来——你是通过点击按钮触发的sendXML()，所以错误栈会显示在按钮所在的HTML行，但实际错误是在TypeScript代码调用xml2js的逻辑中发生的。

解决方法 #

1. 为浏览器环境添加global的polyfill

在Angular项目的src/polyfills.ts文件中添加以下代码，把浏览器的window对象赋值给global，模拟Node.js的全局对象环境：

// 新增这一行，为浏览器补充global对象
(window as any).global = window;

保存文件后重启项目，这个global is not defined的错误应该就能解决了。

2. 修复代码中的异步逻辑问题（额外提示）

另外你的代码还有一个小问题：parseString是异步方法，你在回调函数外面直接console.log(result)会打印undefined，因为此时回调还没执行。可以调整成这样：

parseXML(XMLAsString){
  var parser=require('xml2js');
  parser.Parser().parseString(XMLAsString, (err, result)=>{
    if(err){
      console.error('XML解析出错:', err);
      return;
    }
    console.log(result); // 在回调内打印解析后的结果
  });
}

备选方案（无需polyfill） #

如果你不想为浏览器模拟Node.js环境，也可以换用专门为浏览器设计的XML解析库，比如@rgrove/parse-xml，它不需要依赖Node.js的全局对象，更适配浏览器场景。

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