Angular 4应用加载JS文件出现ReferenceError: module is not defined求助

嘿，我之前也帮人处理过类似的Angular 4问题，你遇到的这个错误确实和CommonJS模块加载机制有关——那些包含module.exports或者直接引用module变量的JS文件，是为Node.js环境（遵循CommonJS规范）编写的，但Angular 4默认用ES模块+Webpack打包，浏览器环境里并没有全局的module对象，直接在index.html里加载这类文件自然会报错。

下面给你几个实用的解决思路，按推荐程度排序：

1. 用Angular官方推荐的方式引入JS文件（优先选这个） #

如果是第三方库，优先通过npm安装，然后让Angular的打包工具来处理：

• 先安装依赖：

  npm install your-library-name --save
  

• 打开angular-cli.json（Angular 4用的是这个配置文件），找到scripts数组，把库的路径加进去：

  "scripts": [
    "../node_modules/your-library/dist/your-library.min.js"
  ]
  

这样Webpack会自动处理模块导出，不会出现未定义的问题。

如果是你自己写的JS文件，把它放到项目的assets文件夹，然后在需要使用的组件里先声明类型再导入：

// 在组件顶部添加类型声明（避免TS报错）
declare var yourModule: any;
// 导入JS文件
import '../assets/your-custom-script.js';

2. 临时模拟CommonJS环境（应急用的hack） #

如果实在要在index.html里直接加载这些文件，可以在加载目标JS之前，先注入一个全局的module对象：

<script>
  // 给浏览器模拟一个CommonJS的module对象
  window.module = { exports: {} };
</script>
<!-- 接着加载你的JS文件 -->
<script src="./path/to/your-problem-script.js"></script>
<!-- 如果要用到脚本里导出的内容，可以这样访问 -->
<script>
  const yourExportedContent = window.module.exports;
</script>

不过这个方法只是临时救急，不推荐长期用，容易和其他脚本的全局变量冲突。

3. 把JS文件改成ES模块格式（根治方案） #

如果这些JS文件是你自己维护的，最好直接改成ES模块的写法，替换掉CommonJS的导出方式：

// 原来的CommonJS写法
module.exports = {
  calculateTotal: function(prices) {
    return prices.reduce((a, b) => a + b, 0);
  }
};

// 改成ES模块写法
export const calculateTotal = (prices) => prices.reduce((a, b) => a + b, 0);

改完之后，就能用Angular的import语句正常导入，打包工具也能正确处理，彻底解决这个错误。

内容的提问来源于stack exchange，提问作者isaac.hazan