'Fn' ist keine Funktion mit Angular und Webpack

Ich habe gerade angefangen zu versuchen, Webpack zu verwenden, um meine Angular App zu bündeln. Als ich das Wesentliche enthalten bin, Ich erhalte die folgenden Fehler'Fn' ist keine Funktion mit Angular und Webpack

Argument 'fn' is not a function, got string

Ich denke, es ist etwas mit kantigem-Strecke zu tun, aber ich kann nichts finden, kann ich sehen, was falsch wäre.

Meine abgespeckte Dateien sind wie folgt:

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

Alle konstruktive Hilfe würde sehr geschätzt werden. Bitte lassen Sie es mich wissen, wenn Sie da sind, was Sie sonst noch brauchen. Und ich muss wahrscheinlich ngRoute nicht überall benötigen. Umklammert an diesem Punkt Strohhalme.

Vielen Dank.

Quelle

2016-06-20 Dan Hodson

Haben Sie das Debugging-Tool verwendet, um herauszufinden, welche Codezeile diesen Fehler verursacht? – MarkoCen

Gut Chrome Konsole zeigt es nur als Teil der vendor.bundle.js 'return new ErrorConstructor (Nachricht);' was nicht zu hilfreich ist. Und die Angular Error-Seite zeigt an, dass es etwas mit ngRoute ist. –

In index.js versuchen zu entfernen ‚Config‘ und ‚Ausführen‘, so sehen die Zeilen wie diese:

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

Der Fehler wurde darauf hindeutet, dass das erste Argument eine Funktion anstelle einer Zeichenfolge sein muss :)

Quelle

2016-06-21 09:53:33 G33kCentric

Fantastisch @ G33kCentric, das scheint es behoben zu haben! Du bist ein Star! –

'Fn' ist keine Funktion mit Angular und Webpack

Antwort

Verwandte Themen