帶有ES2016負載配置模塊的AnguarJS

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