Dan Hodson Dan Hodson - 5 months ago 83
AngularJS Question

'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.

Answer

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 :)

Comments