Question

我正在尝试基于ES6启动一个新的Angular 1应用程序。我使用webpack和babel-loader来转换JS。

我现在的问题是加载自己的配置模块。请看一下：

// config/config.js
import angular from 'angular';

export default angular.module('config')
    .factory('config', () => {
        return {
            url: {
                products: 'https://....'
            },
            products: []
        }
    })

相应的app.js读取（我剥离了一些导入）：

import angular  from 'angular';

import config from './config/config';
import HomeCtrl from './controller/HomeController';


let app = () => {
  return {
    template: require('./app.html')
  }
};


const MODULE_NAME = 'app';

angular.module(MODULE_NAME, [uiRouter, config])
    .directive('myapp', app)
    .config(['$stateProvider', '$urlRouterProvider', 'config', function ($stateProvider, $urlRouterProvider, config) {
        $urlRouterProvider.otherwise('/');

        $stateProvider
        .state("home", {
            "url": "/",
            "template": require('./views/home.html'),
            "controller": HomeCtrl,
            'controllerAs': 'app'
        })


    }]);


export default MODULE_NAME;

错误消息显示：

未捕获错误：[$ injector：nomod]模块'config'不可用！您要么错误拼写了模块名称，要么忘记加载它。如果注册模块，请确保将依赖项指定为第二个参数。

我在这里错过了什么？是否有更好的方法来加载应用程序范围的配置对象以在某些服务中使用？

感谢您的帮助！

Answer 1

创建模块时，必须使用两个参数调用module()：名称和依赖项。如果仅使用一个参数调用它，则会获得具有该名称的现有模块。

将您的模块config声明更改为：

export default angular.module('config', [])
    .factory('config', () => {
        return {
            url: {
                products: 'https://....'
            },
            products: []
        }
    }).name

此外，我始终只导出新模块的.name。导入模块时，只需要其名称。

希望它有所帮助。

Answer 2

在主模块定义中声明依赖模块时，需要使用字符串标识符，而不是实际的angular.module（至少在这里它被指定为Array [String]：https://docs.angularjs.org/api/ng/function/angular.module

所以，你应该改为：

angular.module(MODULE_NAME, ['config'])

Answer 3

请检查Angular文档 - 模块依赖关系它的字符串数组，但不依赖于模块类型或实例

angular.module(name, [requires], [configFn]);

当

requires (optional) Array<string>

所以你的解决方案是使用下一个声明 angular.module(MODULE_NAME, ['config'])

https://docs.angularjs.org/api/ng/function/angular.module

带有ES2016负载配置模块的AnguarJS

3 个答案: