这问题我之前也碰到过，帮你捋清楚背后的逻辑：

错误出现的原因 #

module.exports是Node.js的CommonJS模块规范里的语法，但浏览器原生环境根本没有module这个全局变量。Angular在打包你的应用时，只是把sample.js直接合并到了scripts.bundle.js中，没有对CommonJS语法做转译处理（比如用Webpack/Babel把它转换成浏览器能识别的代码）。所以当浏览器执行到module.exports = { abc: abc }这行时，找不到module变量，就会抛出Uncaught ReferenceError。

应用仍能正常运行的原因 #

你的abc()函数是在module.exports语句之前定义的，函数声明会被提升到当前作用域的顶部，所以在脚本执行时，abc已经被成功创建并存在于全局作用域里了。虽然module.exports这行抛出了错误，但浏览器只会终止当前脚本中错误点之后的代码执行，不会杀掉整个应用进程，也不会删除已经声明好的abc函数。当你后续调用abc()时，它依然能正常工作。

消除错误的解决方案 #

如果想去掉这个报错，有两种常见的处理方式：

• 改成浏览器兼容的全局暴露方式：

  "use strict";
  function abc() { console.log("hello from js"); }
  // 把函数挂载到window对象上，让Angular组件能访问到
  window.abc = abc;
  

• 改用ES模块规范（更符合Angular的生态）：
  先修改sample.js为ES模块：

  "use strict";
  export function abc() { console.log("hello from js"); }
  

  然后在你的Angular组件中导入并使用：

  import { abc } from './path/to/sample.js';
  
  // 在组件逻辑中调用
  ngOnInit() {
    abc();
  }
  

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