AngularJS项目中import引入axios遇模块层级及依赖注入问题

问题根源 #

你的项目是未启用ES模块的老旧AngularJS项目，浏览器不会将普通JS文件识别为ES模块，因此import语句会触发层级错误；同时两个app.js中，仅website/js/app.js的模块能被factory.js识别，之前错误地在website/app.js中注册常量，导致factory无法读取。

解决方案 #

1. 通过script标签全局引入axios

在项目的HTML入口文件中，添加axios.min.js的引入，确保它在js/app.js和factory.js之前加载：

<!-- 放在其他JS文件之前 -->
<script src="js/modules/axios.min.js"></script>

加载后，axios会挂载到window对象上，成为全局可用变量。

2. 在website/js/app.js中注册axios为AngularJS常量

找到website/js/app.js中定义AngularJS模块的代码，添加constant注册：

// 替换成你项目实际的模块名称
angular.module('yourAppModule', [])
  // 将全局的axios注册为模块常量
  .constant('axios', window.axios);

3. 在factory.js中注入并使用axios

修改factory.js的getTracks函数，注入注册好的axios常量：

angular.module('yourAppModule')
  .factory('trackFactory', ['axios', function(axios) {
    return {
      getTracks: function() {
        // 这里直接使用注入的axios发起请求
        return axios.get('你的接口地址')
          .then(res => res.data)
          .catch(err => {
            console.error('获取Tracks失败:', err);
            throw err;
          });
      }
    };
  }]);

方案说明 #

• 老旧AngularJS项目依赖传统script加载顺序，全局引入axios能避开ES模块的兼容性问题。
• 在website/js/app.js中注册常量，确保factory.js所在的模块能正确识别并注入该依赖，解决Unknown Provider错误。

内容的提问来源于stack exchange，提问作者Ciro García