Angular集成Puppeteer报Cannot find name 'Lowercase'错误如何解决

错误产生原因 #

error TS2304: Cannot find name 'Lowercase'. 6437 export declare type ResourceType = Lowercase<Protocol.Network.ResourceType>
该报错的根因有两点：

1. Lowercase是TypeScript 4.1版本才新增的内置工具类型，你当前使用的TypeScript 3.9.6版本不支持该类型，无法识别类型定义里的Lowercase语法。
2. 你安装的Puppeteer 11.0.0版本的类型声明文件中使用了Lowercase类型，和本地TS版本存在兼容性问题。额外说明：Puppeteer本身是依赖Node.js原生API和Chromium的服务端工具，不支持直接在浏览器端运行的Angular前端组件中调用，即便解决了类型报错，运行时也会因为缺少Node环境API抛出其他错误。

解决方案 #

• 方案1：升级TypeScript版本
  若你的Angular版本支持更高版本的TS，可以将TypeScript升级到4.1及以上版本，执行命令：
  npm install typescript@~4.1.0 --save-dev
  升级后需要验证Angular依赖和TS版本的兼容性，避免出现其他依赖冲突。
• 方案2：降级Puppeteer版本
  若不想升级TS，可以将Puppeteer降级到9.x版本，该版本的类型定义没有使用Lowercase类型，兼容TS3.9.6，执行命令：
  npm install puppeteer@9.x --save

Angular中正确使用Puppeteer的方式 #

Puppeteer无法直接在Angular前端组件（浏览器端运行）中引入使用，正确的使用方式分为两种场景：

1. 普通Angular前端项目
   将Puppeteer的文本提取逻辑封装在独立的Node.js后端服务中，后端暴露HTTP接口提供文本提取能力，Angular前端通过HttpClient调用接口，传入目标页面参数，接收返回的提取结果即可。
2. Angular Universal服务端渲染项目
   在服务端渲染的Node执行层引入Puppeteer，使用ES模块语法导入，不要使用CommonJS的require语法：
   import * as puppeteer from 'puppeteer'
   直接在服务端逻辑中调用Puppeteer的相关API完成文本提取，再返回给前端渲染。

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