'fn' 不是 Angular 和 Webpack 的函数答案

【问题标题】：'fn' is not a function with Angular and Webpack'fn' 不是 Angular 和 Webpack 的函数
【发布时间】：2016-10-21 20:16:30
【问题描述】：

我刚刚开始尝试使用 Webpack 来捆绑我的 Angular 应用程序。当我包含必需品时，我收到以下错误

Argument 'fn' is not a function, got string

我认为这与 Angular-Route 有关，但我找不到任何我能看到的问题。

我的精简文件如下：

./index.html

<!DOCTYPE html>
    <html lang="en" ng-app="crewGui">
    <head>
        <title>GUI</title>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" type="text/css" href="css/stylesheets/styles.css">

        <script src="js/dist/vendor.bundle.js"></script>
        <script src="bower_components/Chart.js/Chart.js"></script>
        <script src="bower_components/angular-chart.js/dist/angular-chart.js"></script>
        <script src="bower_components/angular-busy/dist/angular-busy.min.js"></script>

        <script src="js/dist/app.bundle.js"></script>
    </head>
    <body class="container-fluid">
       <header class="row">
            <div class="logo col-xs-6">
                <img src="images/logo_alt.png" class="img-responsive" alt"logo">
            </div>
        </header>
        <div id="content">
            <div class="container-fluid">
                <ng-view></ng-view>
            </div>
        </div>
        <footer class="row">
           <div class="copyright col-xs-12">&copy;</div>
        </footer>   
    </body>
</html>

./module.js

'use strict';

var angular = require('angular');
var ngRoute = require('angular-route');

angular
    .module('crewGui', [
        'ngRoute'
    ]
);

require('./');
require('./services');
require('./controllers');

./index.js

'use strict';

var angular = require('angular');
var ngRoute = require('angular-route');

angular
    .module('crewGui')
    .config('Config', require('./config'))
    .run('Run', require('./run'));

./run.js

'use strict';

Run.$inject = ['$http'];

function Run($http) {

    $http.defaults.headers.common['Access-Control-Allow-Origin'] = '*';
    $http.defaults.headers.common['Access-Control-Allow-Methods'] = 'POST, GET, OPTIONS, PUT';
    $http.defaults.headers.common['Content-Type'] = 'application/x-www-form-urlencoded';
    $http.defaults.headers.common['Accept'] = 'application/json';
    $http.defaults.headers.common.Authorization = "Basic AWORKINGAPIKEY";

};

module.exports = Run;

./config.js

'use strict';

Config.$inject = ['$routeProvider'];

function Config($routeProvider) {

    $routeProvider
        .when('/', {
            templateUrl: 'partials/dashboard.html',
            controller: 'DashboardController',
            controllerAs: 'dashboard'
        })
        .otherwise({
            redirectTo: '/'
        });

};

module.exports = Config;

./services/index.js

'use strict';

var angular = require('angular');
var ngRoute = require('angular-route');

angular
    .module('crewGui')
    .service('GetData', require('./get_data_service'));

./services/get_data_service.js

'use strict';

GetData.$inject = ['$http'];

function GetData($http) {

    var self = this;

    self.getData = function() {
        return $http.get("https://aworkingurl")
            .success(function (data, status, headers, config) {
                return data;
            })
            .error (function (data, status, headers, config) {
                return status;
            });
    };

};

module.exports = GetData;

./controllers/index.js

'use strict';

var angular = require('angular');
var ngRoute = require('angular-route');

angular
    .module('crewGui')
    .controller('DashboardController', require('./controller_dashboard'));

./controllers/controller_dashboard.js

'use strict';

DashboardController.$inject = ['$scope', 'GetData'];

function DashboardController($scope, GetData) {

    var self = this;

    GetData.getData()
        .then(function(data){
            self.flightData = data.data;
        });

};

module.exports = DashboardController;

任何建设性的帮助将不胜感激。如果有，请告诉我；还有什么您需要的。而且我可能不需要到处要求ngRoute。在这一点上抓住稻草。

非常感谢。

【问题讨论】：

你有没有使用调试工具定位哪行代码抛出这个错误？
Chrome 控制台只是将其显示为 vendor.bundle.js return new ErrorConstructor(message); 的一部分，这并没有太大帮助。 Angular 错误页面显示它与 ngRoute 相关。

标签： javascript html angularjs webpack angular-routing

【解决方案1】：

对于来到这里寻找错误解决方案的每个人，请检查您在控制台中的全局变量，以及您的遥控器名称是否有冲突。对我们来说，问题是我们调用了远程 navigator，但在全局上下文中，已经有一个使用该名称定义的变量。

【讨论】：

【解决方案2】：

在 index.js 中尝试删除 'Config' 和 'Run' 使行看起来像这样：

.config(require('./config'))
.run(require('./run'));

错误提示第一个参数需要是函数而不是字符串:)

【讨论】：

神奇的@G33kCentric 似乎已经修复了它！你是明星！