Angular调用parse-link-header报Webpack导入模块非函数错误

问题复现 #

在Angular组件中引入parse-link-header库解析HTTP响应Link头，原有代码如下：

• 导入与类型定义：

import * as parseLinkHeader from "parse-link-header";

searchLinks: parseLinkHeader.Links;

• ngOnInit中解析逻辑：

console.log(response.headers.get('link'))

try {
    this.searchLinks = parseLinkHeader(response.headers.get('link'));
} catch (err) {
    console.log(err)
}

运行时控制台可正常打印Link头原始值：

</entries?backwards=true&previousDate=1656925591000&previousId=10>; rel="prev",</entries?backwards=true>; rel="last",</entries?backwards=false>; rel="first",

但执行解析语句时抛出如下异常：

TypeError: (parse_link_header__WEBPACK_IMPORTED_MODULE_0___namespace_cache || parse_link_header__WEBPACK_IMPORTED_MODULE_0___namespace_cache) is not a function
    at entry-find.component.ts:291:45
    at _ZoneDelegate.invoke (zone.js:372:1)
    at Object.onInvoke (core.mjs:25457:1)
    at _ZoneDelegate.invoke (zone.js:371:1)
    at Zone.run (zone.js:134:1)
    at zone.js:1275:1
    at _ZoneDelegate.invokeTask (zone.js:406:1)
    at Object.onInvokeTask (core.mjs:25444:1)
    at _ZoneDelegate.invokeTask (zone.js:405:1)
    at Zone.runTask (zone.js:178:1)

相同代码在其他旧项目中可正常运行。

根本原因 #

报错由CommonJS与ESModule的导入规则不匹配导致：

• parse-link-header是遵循CommonJS规范的第三方包，其导出内容为一个可直接调用的解析函数
• 当前项目TypeScript配置未开启esModuleInterop兼容，使用import * as parseLinkHeader的命名空间导入方式时，Webpack会将模块包装为不可调用的命名空间缓存对象，而非直接导出包的核心函数
• 旧项目可正常运行是因为旧版Angular/TypeScript构建配置默认开启了CommonJS模块的默认导出兼容，允许直接调用命名空间导入的对象。

修复方案 #

两种方案选其一即可：

• 方案1（推荐，无类型问题）：修改导入方式，配合TS配置兼容
  1. 将原有命名空间导入改为默认导入，单独导入类型定义：

  import parseLinkHeader from "parse-link-header";
  import type { Links } from "parse-link-header";
  
  searchLinks: Links;
  

  2. 检查项目根目录tsconfig.json，在compilerOptions中开启以下配置：

  {
    "compilerOptions": {
      "esModuleInterop": true,
      "allowSyntheticDefaultImports": true
    }
  }
  

  配置修改后重启开发服务即可生效。
• 方案2（临时兼容，无需改配置）：保留原有导入语句，调用时取模块的default属性

  this.searchLinks = (parseLinkHeader as any).default(response.headers.get('link'));
  

  注意：该写法为hack兼容方案，会丢失TS类型校验，不建议长期使用

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