如何为Angular模块注入Chart.js并解决[$injector:modulerr]错误

我来帮你排查这个问题——[$injector:modulerr]错误通常意味着Angular找不到你声明依赖的chart.js模块，这里主要有两个明显的问题需要修复：

问题1：Script标签属性使用错误 #

你在引入脚本时用了href属性，但script标签加载外部文件必须使用src属性，href是link标签专属的属性。这个错误会导致浏览器完全无法加载Chart.js和angular-chart.js文件，Angular自然找不到对应的模块。

问题2：脚本加载顺序颠倒 #

angular-chart.js是基于Chart.js封装的Angular指令库，它依赖Chart.js核心库才能正常初始化。你现在先加载了angular-chart.js，再加载Chart.js，会导致angular-chart初始化时找不到Chart对象，进而引发模块加载失败。

修正后的HTML脚本部分 #

把你的脚本引入代码改成下面这样：

<!-- 先加载Chart.js核心库 -->
<script type="text/javascript" src="/node_modules/chart.js/dist/Chart.min.js"></script>
<!-- 再加载angular-chart.js -->
<script type="text/javascript" src="/node_modules/angular-chart.js/dist/angular-chart.min.js"></script>

额外检查项 #

• 确认node_modules目录在你的服务器可访问路径下，如果是用构建工具（如Webpack）管理依赖，可能需要调整引用路径，或者通过模块打包的方式导入这些库，而不是直接静态引用。
• 你的模块声明代码angular.module('appModule',["chart.js"])是正确的，只要脚本加载正常，这个依赖就能被Angular识别。

修复完这两个问题后，重新运行应用，[$injector:modulerr]错误应该就能解决了。

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