Angular 13本地运行报错：genMapping.encodedMap is not a function

问题原因 #

Node.js 16.6.0与Angular 13依赖的@ampproject/remapping包存在版本兼容冲突。该包旧版本中genMapping.encodedMap方法的调用逻辑，无法适配Node.js 16.6.0引入的环境变化，导致构建时触发类型错误。

解决方案 #

方法1：降级Node.js版本 #

将Node.js版本降级至16.5.0或更低的16.x稳定版，或者直接使用Angular 13官方推荐的Node.js版本（14.15+ 或 16.10+），从根源规避版本不匹配问题。

方法2：强制锁定兼容的@ampproject/remapping版本 #

通过resolutions字段强制指定该包的兼容版本（推荐2.2.0）：

npm 用户操作步骤：

1. 安装依赖锁定工具：

   npm install -D npm-force-resolutions
   

2. 在package.json中添加以下配置：

   "resolutions": {
     "@ampproject/remapping": "2.2.0"
   },
   "scripts": {
     "preinstall": "npx npm-force-resolutions"
   }
   

3. 删除node_modules和package-lock.json，重新安装依赖：

   rm -rf node_modules package-lock.json
   npm install
   

Yarn 用户操作步骤：

1. 在package.json中添加配置：

   "resolutions": {
     "@ampproject/remapping": "2.2.0"
   }
   

2. 删除node_modules和yarn.lock，重新安装依赖：

   rm -rf node_modules yarn.lock
   yarn install
   

方法3：升级Angular 13到最新小版本 #

如果项目允许，升级Angular 13至13.3及以上版本，这些版本已修复与Node.js 16.6+的兼容问题：

ng update @angular/core@13 @angular/cli@13

执行完成后，删除node_modules和锁文件，重新安装依赖即可。

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