Angular 2中FileSaver.saveAs is not a function错误求助

我来帮你一步步排查这个问题，你已经做了不少配置工作，但显然模块解析还是出了点小问题，咱们来逐个解决：

1. 修正SystemJS配置 #

你的SystemJS配置可能存在路径指向的问题，建议调整成以下结构：

// systemjs.config.js
map: {
  // ...其他配置
  'file-saver': 'node_modules/file-saver'
},
packages: {
  // ...其他配置
  'file-saver': {
    main: 'FileSaver.js',
    format: 'global',
    defaultExtension: 'js'
  }
}

为什么调整？ 原来的map直接指向了FileSaver.js文件，SystemJS可能无法正确识别这是一个模块包。让map指向包根目录，再通过packages配置指定入口文件，能让SystemJS更准确地解析模块。另外可以移除单独的meta配置项，因为packages里的format已经指定了全局模式，足够让SystemJS正确加载。

2. 确保组件内的导入正确 #

在使用FileSaver的组件顶部，用正确的方式导入模块：

import * as FileSaver from 'file-saver';

然后再调用FileSaver.saveAs(...)，这样就能正确关联到模块导出的方法了。

如果你之前是直接使用全局变量，因为TypeScript的类型检查，可能需要先声明全局变量（不过你已经安装了@types，优先用import方式更规范）：

// 仅当import方式无效时使用
declare var FileSaver: any;

3. 清理缓存并重装依赖 #

缓存或者依赖安装的小问题也可能导致这个错误，你可以试试：

• 清空浏览器缓存（Ctrl+Shift+Delete）
• 停止Angular开发服务，重新启动（ng serve重启）
• 彻底重装FileSaver依赖：

npm uninstall file-saver @types/file-saver
npm install file-saver@1.3.3 @types/file-saver@0.0.1

4. 验证FileSaver.js是否成功加载 #

打开浏览器开发者工具（F12），切换到Network标签，刷新页面后搜索FileSaver.js，查看它的加载状态：

• 如果状态码是200，说明文件加载成功，问题出在模块解析上
• 如果找不到这个文件，说明SystemJS的路径配置有误，检查node_modules/file-saver/FileSaver.js是否存在，以及SystemJS里的路径拼写是否正确

5. 备选方案：直接全局引入 #

如果上面的方法都没解决，可以尝试绕开SystemJS，直接在index.html里引入FileSaver.js：

<script src="node_modules/file-saver/FileSaver.js"></script>

然后在组件里声明全局变量后直接使用，这种方式适合快速验证功能是否正常，再回头排查SystemJS的配置问题。

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