Angular 16中如何在index.html中加载JavaScript模块？

问题根源 #

你把带export的ES模块文件加到了angular.json的scripts数组里，这是核心错误。scripts数组是用来加载全局普通脚本的，Angular的构建工具会把这些文件当作非模块代码处理，而ES模块的export语句在普通脚本环境里属于语法错误，自然会报错。另外，即便你在index.html里写了type="module"的脚本，只要文件在scripts数组里，Angular会提前处理它，和浏览器的模块加载机制冲突，导致无法正常运行。

正确解决方案 #

方案1：在Angular组件/服务中直接导入（推荐）

这是Angular项目中使用模块的标准方式，完全不需要修改angular.json或index.html的脚本：

1. 确保doSomething.js放在项目源码目录（比如src/app/utils下）
2. 在需要使用的组件或服务中直接导入：

import { doSomething } from './utils/doSomething.js';

@Component({...})
export class YourComponent {
  ngOnInit() {
    // 调用模块方法
    doSomething();
  }
}

这种方式会让Angular的构建工具正确处理ES模块，还能享受树摇优化，减少打包体积。

方案2：在index.html中直接加载ES模块（不推荐但可行）

如果必须在全局层面加载模块，不要把文件加到angular.json的scripts数组里，直接修改index.html：

1. 把doSomething.js放到src/assets目录下（确保Angular会把这个目录的文件原样复制到构建产物中）
2. 修改index.html的模块脚本路径：

<script type="module">
    import { doSomething } from "/assets/doSomething.js";
    doSomething();
</script>

这样浏览器会直接按ES模块规则加载文件，不会被Angular的构建工具干扰。

方案3：转为全局脚本（仅兼容旧代码时用）

如果非要用全局变量的方式，修改doSomething.js去掉export，把函数挂载到window对象：

function doSomething() {
    alert("I am doing something");
}
// 挂载到全局
window.doSomething = doSomething;

然后把文件加到angular.json的scripts数组里，之后在任意地方都可以通过window.doSomething()调用。但这种方式会污染全局作用域，也无法利用模块的依赖管理优势，不推荐在新项目中使用。

内容的提问来源于stack exchange，提问作者Bennett Barouch