Search code examples
javascripthtmlangularjswebpackangular-routing

'fn' is not a function with Angular and Webpack

I have just started out attempting to use Webpack to bundle my Angular App. 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.

My stripped down files are as follows:

./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;

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. Clutching at straws at this point.

Many thanks.

Solution

  • In index.js try removing 'Config' and 'Run' so the lines look like this: 

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

    The error was suggesting that the first argument needs to be a function instead of a string :)