Angular 5.2.0应用导入PouchDB失败问题求助

我之前在Angular项目里折腾PouchDB导入的时候，跟你遇到了完全一样的问题！给你几个亲测有效的解决办法：

为什么会报错？ #

你用import PouchDB from 'pouchdb';时报的TS1192错误，本质是因为@types/pouchdb的类型定义基于CommonJS规范编写，没有提供ES模块的默认导出，TypeScript在严格模式下就会抛出这个错误。

办法一：使用命名空间导入（最直接的兼容方式） #

直接用你试过的第二种导入方式，同时确保类型声明正确：

// 导入整个PouchDB命名空间
import * as PouchDB from 'pouchdb';

// 在服务中声明并初始化数据库
private database: PouchDB.Database;

constructor() {
  this.database = new PouchDB(DATABASE_URL);
}

这种方式完全兼容现有的@types/pouchdb类型定义，不需要额外修改配置，适合大多数Angular项目。

办法二：改用ES模块版本的PouchDB #

如果更偏好默认导入的写法，可以安装官方提供的ES模块兼容版：

npm install pouchdb-esm --save

然后就可以用你最初想写的默认导入了：

import PouchDB from 'pouchdb-esm';

private database: PouchDB.Database = new PouchDB(DATABASE_URL);

这个版本原生支持ES模块，类型提示也更友好，适合Angular 12+的新项目。

办法三：调整TypeScript配置 #

如果不想换包，也可以通过修改tsconfig.json让TypeScript允许对CommonJS模块使用默认导入：

{
  "compilerOptions": {
    // 允许合成默认导入
    "allowSyntheticDefaultImports": true,
    // 启用ES模块与CommonJS的互操作性
    "esModuleInterop": true,
    // 其他原有配置...
  }
}

修改后重启Angular开发服务器，import PouchDB from 'pouchdb';就能正常工作了。

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