'fn' 不是 Angular 和 Webpack 的函数

Question

I have just started out attempting to use Webpack to bundle my Angular App.我刚刚开始尝试使用 Webpack 来捆绑我的 Angular 应用程序。 When I have included the essentials I am getting the following error当我包含了必需品时，我收到以下错误

Argument 'fn' is not a function, got string

I think it's something to do with Angular-Route, but I can't find anything I can see what would be wrong.我认为这与 Angular-Route 有关，但我找不到任何我能看到的错误。

My stripped down files are as follows:我的精简文件如下：

./index.html ./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 ./module.js

'use strict';

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

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

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

./index.js ./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 ./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 ./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 ./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 ./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 ./控制器/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 ./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;

Any constructive help would be much appreciated.任何建设性的帮助将不胜感激。 Please let me know if there;'s anything else you need.如果有，请告诉我；您还需要什么。 And i probably don't need to be requiring ngRoute all over the place.而且我可能不需要ngRoute都需要ngRoute 。 Clutching at straws at this point.在这一点上紧紧抓住吸管。

Many thanks.非常感谢。

Answer 1

In index.js try removing 'Config' and 'Run' so the lines look like this: 在index.js中，尝试删除“ Config”和“ Run”，使行如下所示：

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

The error was suggesting that the first argument needs to be a function instead of a string :) 错误提示第一个参数需要是一个函数而不是一个字符串:)

Answer 2

For everyone who comes here looking for a solution to the error, please check your global variables in the console, and the name of your remotes for collision.对于来到这里寻找错误解决方案的每个人，请在控制台中检查您的全局变量，以及您的遥控器名称是否发生冲突。 For us, the problem was that we called our remote navigator , but in the global context, there was already a variable defined with that name.对我们来说，问题是我们调用了远程navigator ，但在全局上下文中，已经有一个用该名称定义的变量。

'fn' 不是 Angular 和 Webpack 的函数

问题描述

2 个解决方案

解决方案1
2 已采纳 2016-06-21 09:53:33

解决方案2
0 2021-10-29 14:55:32

&#39;fn&#39; 不是 Angular 和 Webpack 的函数

问题描述

2 个解决方案

解决方案1 2 已采纳 2016-06-21 09:53:33

解决方案2 0 2021-10-29 14:55:32

'fn' 不是 Angular 和 Webpack 的函数

解决方案1
2 已采纳 2016-06-21 09:53:33

解决方案2
0 2021-10-29 14:55:32