Angular 5升级至6后出现无法解析timers于xml2js的错误求助

我之前升级Angular版本时也碰到过一模一样的问题，跟你说下怎么解决：

首先得搞清楚为什么卸载xml2js没用——这个包大概率是你项目里某个依赖的间接依赖，不是你直接安装的，所以卸载它根本不会移除实际被引用的子依赖版本。而且问题本质不是xml2js本身，是Angular 6用的Webpack 4对Node.js核心模块（比如timers）的处理逻辑变了，浏览器环境里本来就没有这些Node核心模块，所以打包时会报错。

下面是几个可行的解决方案，按推荐程度排序：

方案1：用Node Polyfill插件补全浏览器缺失的模块 #

这个是最稳妥的方法，一次性解决所有Node核心模块的兼容问题：

• 先安装必要的依赖：

  npm install @angular-builders/custom-webpack node-polyfill-webpack-plugin --save-dev
  

• 修改angular.json文件，把默认的builder替换成自定义webpack的builder：
  找到projects -> [你的项目名] -> architect -> build，把builder改成@angular-builders/custom-webpack:browser，然后添加customWebpackConfig字段：

  "build": {
    "builder": "@angular-builders/custom-webpack:browser",
    "options": {
      "customWebpackConfig": {
        "path": "./webpack.extra.js"
      },
      // 其他原有配置...
    }
  }
  

  同样，把architect -> serve的builder改成@angular-builders/custom-webpack:dev-server
• 在项目根目录创建webpack.extra.js文件，内容如下：

  const NodePolyfillPlugin = require('node-polyfill-webpack-plugin');
  
  module.exports = {
    plugins: [
      new NodePolyfillPlugin()
    ]
  };
  

• 重新启动项目，应该就不会报错了。

方案2：强制升级xml2js到兼容浏览器的版本 #

旧版本的xml2js可能依赖Node的timers模块，新版本已经做了浏览器兼容优化。如果你的项目是用npm 8+，可以在package.json里添加overrides字段强制升级所有间接依赖的xml2js版本：

"overrides": {
  "xml2js": "^0.6.2"
}

然后执行npm install重新安装依赖，再启动项目试试。

方案3：手动添加polyfill到项目 #

如果不想改webpack配置，可以直接在src/polyfills.ts里添加以下代码：

// 模拟Node的global对象
(window as any).global = window;
// 引入timers的polyfill
import 'timers';

不过这个方法只针对timers模块，后续如果还有其他Node模块报错，得一个个加，不如方案1全面。

最后，你可以先执行npm ls xml2js命令，看看是哪个依赖间接引入了xml2js，这样能更清楚问题根源~

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