ngFileSaver从bower迁移至npm后模块加载失败如何解决

从bower切换到npm安装angular-file-saver后，原gulp构建流程没有把node_modules下的angular-file-saver及其关联依赖的脚本纳入打包范围，浏览器运行时没有加载到ngFileSaver模块的定义代码，自然会报模块不存在的注入错误。

• 先锁定兼容版本安装依赖，避免版本不匹配问题，执行以下命令：
  npm install file-saver@1.3.8 blob-util@1.2.1 angular-file-saver@1.1.3 --save-dev

  不要升级这三个包的大版本，高版本不再适配AngularJS 1.6，会出现兼容性问题

• 修改gulp构建配置，将npm路径下的三个依赖脚本加入第三方资源打包队列。
  原有配置里用main-bower-files拉取bower侧的js资源，只需要把npm侧的三个文件路径追加进去即可，参考配置片段：

// 原有获取bower端js文件的逻辑保持不变
const bowerJsFiles = mainBowerFiles({
  filter: '**/*.js'
});
// 追加npm端angular-file-saver相关的js文件路径
const npmVendorJsFiles = [
  './node_modules/blob-util/dist/blob-util.min.js',
  './node_modules/file-saver/FileSaver.min.js',
  './node_modules/angular-file-saver/dist/angular-file-saver.bundle.min.js'
];
// 合并两类第三方js文件，后续按照原有逻辑做合并、压缩、注入即可
const allVendorJsFiles = bowerJsFiles.concat(npmVendorJsFiles);

• 如果你之前在index.html里手动写过指向bower_components目录下angular-file-saver、file-saver的script标签，直接删掉这几行旧的引入代码，避免构建后出现路径404。
• 重新执行构建命令：先清空旧的dist构建产物，再依次执行npm install、bower install、gulp即可。
• 校验方法：构建完成后打开最终生成的vendor.js文件，搜索ngFileSaver关键字，能搜到模块定义代码就说明打包成功，浏览器运行不会再报模块找不到的错误。

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