CODEWITHSUNDEEP
javascripthtmlangularjswebpackangular-routing
Dan Hodson
Dan Hodson

Reputation: 309

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

Upvotes: 0

Views: 1905

Answers (2)

kuvasz
kuvasz

Reputation: 1

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.

Upvotes: 0

user886045
user886045

Reputation:

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

Upvotes: 2

Related Questions