Angular 5项目导入SnazzyInfoWindow失败求助

我之前也碰到过老版本Angular导入第三方库时的类型定义坑，给你几个实用的排查和解决方向：

1. 匹配类型定义的兼容版本 #

Angular 5属于比较早期的版本，和最新的@types/snazzy-info-window可能存在兼容性问题。你可以尝试安装适配旧环境的类型包版本：

npm uninstall @types/snazzy-info-window
npm install --save-dev @types/snazzy-info-window@2.1.3

这个版本是针对SnazzyInfoWindow v2.x的，和Angular 5对应的TypeScript版本（约2.4.x）匹配度更高。

2. 调整导入写法 #

有些库的类型定义是默认导出而非命名导出，你可以试试这两种导入方式：

• 默认导入：

import SnazzyInfoWindow from 'snazzy-info-window';

• 命名空间导入：

import * as SnazzyInfoWindow from 'snazzy-info-window';

之后再尝试new SnazzyInfoWindow({})，看是否还会出现导出成员不存在的错误。

3. 手动引入脚本+声明全局变量 #

如果上面的方法都不生效，可能是库的模块导出逻辑和Angular 5的模块系统不兼容。你可以直接通过配置引入脚本：

1. 打开Angular 5的配置文件angular-cli.json，找到scripts数组，添加：

"scripts": [
  // 保留其他已有的脚本
  "../node_modules/snazzy-info-window/dist/snazzy-info-window.min.js"
]

2. 在要使用的组件.ts文件顶部，添加全局变量声明：

declare var SnazzyInfoWindow: any;

这样就能直接使用new SnazzyInfoWindow({})了，虽然会丢失类型提示，但能快速解决导入报错的问题。

4. 清理缓存重新构建 #

有时候npm缓存或Angular的构建缓存会引发奇怪的问题，你可以执行以下步骤重置环境：

# 清理npm缓存
npm cache clean --force
# 删除依赖锁文件和node_modules文件夹
rm -rf node_modules package-lock.json
# 重新安装依赖
npm install
# 重新构建项目
ng build

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