Angular 11中如何调用外部JavaScript函数？配置后无效应如何排查？

AI 小北

2026-10-21

angular.json配置节点错误
你添加的scripts配置必须放在 projects -> 你的项目名 -> architect -> build -> options -> scripts 数组下，不要误放到test、serve等其他节点的scripts配置里，只有build节点下的scripts会在开发/生产打包时被全局注入。
示例正确配置：
```
"projects": {
  "你的项目名": {
    "architect": {
      "build": {
        "options": {
          "scripts": [
            "src/assets/Modulo_Tablas.js"
          ]
        }
      }
    }
  }
}
```
修改angular.json后未重启本地服务
angular.json属于项目核心配置，修改后必须终止当前ng serve进程，重新启动才能加载新配置，热更新不会自动生效。
外部JS函数未显式挂载到全局上下文
Angular 11默认开启了更严格的作用域隔离和Tree Shaking，你直接在JS文件中写的顶级函数say_hi会被打包工具包裹在局部作用域中，不会暴露到全局window对象，导致declare声明后也找不到对应的函数。你需要修改Modulo_Tablas.js的代码，手动把函数挂载到window：
```
window.say_hi = function(){
  alert("how are you");
}
```
declare声明位置错误
declare function say_hi(): any; 必须写在component.ts文件的@Component装饰器外部、类定义的外部，不能写到组件类内部。

旧版本Angular打包时不会对外部scripts的顶级函数做作用域包裹，直接定义的顶级函数默认会暴露到全局，Angular 11之后为了优化打包体积、避免全局作用域污染，所有引入的外部脚本默认都会做局部作用域处理，没有显式挂载到window的函数外部无法访问。

如果你不想修改原始JS文件，也可以调整angular.json的scripts配置，显式指定脚本全局注入：

"scripts": [
  {
    "input": "src/assets/Modulo_Tablas.js",
    "inject": true,
    "bundleName": "external-scripts"
  }
]

修改完成重启服务后，先打开浏览器控制台输入window.say_hi，如果能打印出函数定义说明加载成功，再测试按钮触发逻辑即可。

内容的提问来源于stack exchange，提问作者Jesús Navarro Hernández