Angular项目引入外部JS库调用时报WEBPACK_IMPORTED_MODULE导出不是函数错误

问题根因 #

该报错本质是webpack导入模块时，ES模块导入规则和第三方库的实际导出格式不匹配，结合你的场景具体是两个原因：

1. 你当前types.d.ts的声明仅声明了模块存在，没有明确模块的导出结构，TS编译阶段没有做正确的导出匹配
2. 该hello-world库大概率是CommonJS格式打包，默认没有适配ES模块的default导出规则，webpack导入时会把整个模块对象挂载到default属性上，导致你直接调用导入对象会提示不是函数

解决方案 #

方案1：开启TS ES模块兼容配置（优先推荐） #

1. 修改tsconfig.json，新增/调整以下配置：

{
  "compilerOptions": {
    // 其他现有配置保留
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true
  },
  "files": [
    "src/types.d.ts"
  ]
}

2. 修改src/types.d.ts的模块声明，明确导出结构：

declare module 'hello-world' {
  const helloWorld: (name: string) => void;
  export default helloWorld;
}

3. 保持原有导入逻辑即可正常调用：

import helloWorld from 'hello-world';
// 调用
helloWorld('Bob');

方案2：使用CommonJS导入语法 #

如果不想改TS配置，可以直接用require方式导入，手动取default属性：

const helloWorld = require('hello-world').default;
// 调用
helloWorld('Bob');

方案3：直接使用全局挂载的方法 #

因为库已经把方法挂载到window上，也可以直接调用全局方法，只需要补充全局类型声明即可：

1. 在src/types.d.ts中新增全局类型：

declare interface Window {
  helloWorld: (name: string) => void;
}

2. 直接在业务代码中调用，无需导入：

ngOnInit(): void {
  window.helloWorld('Bob');
}

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