Injector Fehler beim Konfigurieren von angularfire

Derzeit hat meine index.html die folgende Konfiguration. Die JavaScript-Datei (js/app.js) ist wie folgt:Injector Fehler beim Konfigurieren von angularfire

var app = angular.module('app', ['firebase', 'ngRoute']); 

app.controller('RootCtrl', function($scope, $firebaseObject) { 
    var ref = firebase.database().ref(); 
    $scope.data = $firebaseObject(ref); 
}); 

app.controller('HomeCtrl', function($scope, $firebaseObject) { 
    var ref = firebase.database().ref(); 
    $scope.data = $firebaseObject(ref); 
    $scope.pageName = 'Home'; 
}); 

app.config(function($routeProvider) { 
    $routeProvider.when('/', { 
    templateUrl: 'home.html', 
    controller: 'HomeCtrl' 
    }).when('/location/:locId', { 
    templateUrl: 'location.html', 
    controller: 'LocationCtrl' 
    }).otherwise({ 
    redirectTo: '/' 
    }); 
});

Die HTML-Datei:

<html> 

<head> 
    <title>Firebase App</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css"> 
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> 

    <!-- Angular Material requires Angular.js Libraries --> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-route.min.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.min.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-aria.min.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-messages.min.js"></script> 

    <!-- Angular Material Library --> 
    <script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script> 


    <!-- Firebase Libraries --> 
    <script src="https://www.gstatic.com/firebasejs/3.5.2/firebase.js"></script> 
    <script src="https://www.gstatic.com/firebasejs/3.5.2/firebase-app.js"></script> 
    <script src="https://www.gstatic.com/firebasejs/3.5.2/firebase-auth.js"></script> 
    <script src="https://www.gstatic.com/firebasejs/3.5.2/firebase-database.js"></script> 
    <script src="https://www.gstatic.com/firebasejs/3.5.2/firebase-messaging.js"></script> 
    <script src="https://www.gstatic.com/firebasejs/3.5.2/firebase-storage.js"></script> 
    <script> 
    // Initialize Firebase 
    var config = { 
     apiKey: "___", 
     authDomain: "___.firebaseapp.com", 
     databaseURL: "https://___.firebaseio.com", 
     storageBucket: "___.appspot.com", 
     messagingSenderId: "___" 
    }; 
    firebase.initializeApp(config); 
    </script> 

    <!-- AngularFire --> 
    <script src="https://cdn.firebase.com/libs/angularfire/2.1.0/angularfire.min.js"></script> 
    <script src="js/app.js"></script> 
</head> 

<body ng-app="app" ng-controller="RootCtrl"> 
    <div ng-view> 
    </div> 
</body> 

</html>

Ausführen dieses den folgenden Fehler gibt:

angular.js:38Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.8/$injector/modulerr?p0=app&p1=Error%3A%20%…ogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.8%2Fangular.min.js%3A43%3A336)(…)

nicht sicher, was geht falsch. Darüber hinaus hat einige Debuggen festgestellt, dass dieser Fehler beim Versuch, firebase Modul injizieren verursacht wird.

Quelle

2016-10-31 Sneha Lohar

Ich sehe kein AngularFire 'script' da drin. – cartant

@cartant Meinst du, es gibt ein Problem mit der Art, wie 'app.js' eingerichtet wurde? AngularFire wurde direkt vor 'js/app.js' importiert –

Ja, ich sehe es jetzt. Offenbar weiß ich nicht, wie man eine Bildlaufleiste bearbeitet. Wie peinlich. – cartant

Basierend auf Ihren Kommentar in einer anderen Antwort und Ihr Skript:

Das Problem ist, mit Ihrem app.js Skript. Wenn Sie Ihr Skript minimieren, werden Ihre Variablen umbenannt, in diesem Fall wird $routeProvider etwas wie e werden und angular wird nicht mehr in der Lage sein zu injizieren. Ändern Sie Ihren Konfigurationsanruf zu:

app.config(['$routeProvider', function($routeProvider) { 
    $routeProvider.when('/', { 
    templateUrl: 'home.html', 
    controller: 'HomeCtrl' 
    }).when('/location/:locId', { 
    templateUrl: 'location.html', 
    controller: 'LocationCtrl' 
    }).otherwise({ 
    redirectTo: '/' 
    }); 
}]);

Nehmen Sie auch ähnliche Änderungen an Ihrem Controller vor. Lass mich wissen, ob das funktioniert.

Quelle

2016-11-02 01:51:04 vivekprakash

Nachdem Sie Ihren Code genommen und Ihre App lokal auf meinem Computer erstellt haben, ist meine beste Schätzung ng-app="app", die Ihre app.js Datei nicht sehen kann. Wenn Sie ng-app deklarieren, sucht Angular nach dem Modul, wie Sie es auch nennen (in diesem Fall "app"). Wenn es nicht gefunden werden kann, erhalten Sie den Fehler, den Sie bekommen (was zugegebenermaßen sehr vage ist).

Entweder Ihr Server ist nicht richtig eingerichtet app.js zu finden oder der Pfad, den Sie erklärt haben, ist falsch. Eine Möglichkeit, dies zu testen, ist app.js im selben Ordner wie index.html zu setzen und dann ersetzen

<script src="js/app.js"></script>

mit

<script src="./app.js"></script>

lieben würde zu hören, was letztlich das Problem löst.

Quelle

2016-11-01 00:51:21

versuchte dies aber kein Ergebnis. Derzeit wurde mit minimierte Version des obigen Skript (Schließung kompiliert). Ändern dass un-kompilierte Version zusammen mit Entfernen aller Zusätze Das Firebaseskript (fireBase- *) führt dies aus.Nicht sicher, was das Problem verursacht, wenn es kompiliert wird. –

Habe gerade die Antwort von @vivekprakash gesehen. Total vergessen, aber das ist die richtige Antwort. –

Injector Fehler beim Konfigurieren von angularfire

Antwort

Verwandte Themen