Angular项目中向index.html引入内部自定义JS报404如何解决

404的核心原因是Angular CLI构建时只会打包输出明确纳入静态资源配置的文件，如果你把自定义JS放在未配置的路径下，构建产物里根本不会存在对应文件，请求自然报错。直接把custom.js放在src根目录能运行只是旧版Angular CLI的非规范默认行为，稳定性差，不建议长期使用。

标准操作步骤 #

• 规范存放JS文件：将个人编写的自定义JS文件统一放到src/assets/目录下，建议新建js子文件夹归类存放，比如最终路径为src/assets/js/custom.js。禁止将自定义JS放在项目根目录、src目录外的其他位置，这些路径默认不会被构建工具识别处理。
• 校验静态资源配置：打开项目根目录下的angular.json文件，找到当前项目的构建配置节点（路径为projects/[你的项目名称]/architect/build/options/assets），确认assets数组中包含src/assets配置项，默认配置参考如下：

"assets": [
  "src/favicon.ico",
  "src/assets"
]

如果缺失该配置直接补上，配置完成后构建时会将assets目录下的所有文件原封不动拷贝到输出目录的对应路径下。

• 正确编写引入标签：打开src/index.html，使用站点根路径引入JS文件，不要写带../、./的相对路径，对应上述文件路径，script标签写法为：

<script src="/assets/js/custom.js"></script>

注意：路径开头的斜杠/不要遗漏，它代表站点根目录，无论当前页面路由处于什么层级，都会从根目录匹配资源，不会出现相对路径计算错误的问题。

更符合Angular开发规范的引入方式 #

如果不需要全局引入脚本，推荐按需在组件中引入，彻底避免路径配置错误：

• 按上述要求把JS文件放到src/assets/js/路径后，直接在需要使用该脚本的组件TS文件顶部添加引入语句：import '/assets/js/custom.js';，构建时脚本会被自动打包进对应代码块，不需要在index.html中额外添加script标签。
• 如果脚本中暴露了全局方法或变量，在TS文件中添加类型声明即可正常调用，写法参考：declare const 你定义的全局变量名: any;，可以避免TS编译时报找不到变量的错误。

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