未捕获的错误:[$ injector:modulerr]在Firebase身份验证中

时间:2017-05-26 08:32:11

标签: javascript angularjs firebase firebase-authentication angularfire

我使用firebase身份验证为Gmail用户登录和注销开发了一项小任务。我在代码Uncaught Error: [$injector:modulerr]

上遇到了问题

我添加了以下库:

<script src='https://cdn.firebase.com/js/client/2.2.1/firebase.js'></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<script src="https://apis.google.com/js/platform.js" async defer></script>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>

<script src="https://cdn.firebase.com/libs/angularfire/2.3.0/angularfire.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"></script>

<script src="https://www.gstatic.com/firebasejs/3.9.0/firebase.js"></script>

并初始化了firebase配置。

  

的index.html

<html ng-app="appName">  
<body ng-controller="loginCtrl">
    <div id="message">
        <button ng-click="googleSignin()">SignIn into App</button>
    </div>
    <p id="load">Firebase SDK Loading&hellip;</p>
</body>

loginpage

当我们点击登录按钮时,它会在完成身份验证后显示Gmail身份验证弹出窗口重定向到htmlnew.html页面

  

app.js

var app = angular.module("appName", ["ngRoute"]);
app.config(function ($routeProvider) {
$routeProvider
        .when("/", {
            templateUrl: 'assests/index.html',
            controller: 'loginCtrl'
        })
});
 app.controller('loginCtrl', function ($scope) {
 var provider = new firebase.auth.GoogleAuthProvider();
 $scope.googleSignin = function () {
    firebase.auth()

            .signInWithPopup(provider).then(function (result) {
        var token = result.credential.accessToken;
        var user = result.user;
        console.log(token);
        console.log(user);

        firebase.auth().onAuthStateChanged(function user() {
            if (user) {
                window.location = 'htmlnew.html';
            }
        });
    }).catch(function (error) {
        var errorCode = error.code;
        var errorMessage = error.message;
        console.log(errorCode);
        console.log(errorMessage);
    });
  }
});

 app.controller('SecondController', [function ($scope) {
    $scope.googleSignout = function () {
        firebase.auth().signOut()
                .then(function () {
                    console.log('Signout Succesfull');
                }, function (error) {
                    console.log('Signout Failed');
                });
     }
 }]);
  

htmlnew.html

<html data-ng-app="appName">
<body ng-controller="SecondController">
    <div id="message">
        <h1>Welcome</h1>
        <button ng-click="googleSignout()">Google Signout</button>
    </div>

</body>

signout

以下是问题

1。)进入htmlnew.html page时会抛出未捕获错误:[$ injector:modulerr]错误。

error

2。)注销无效

2 个答案:

答案 0 :(得分:1)

您忘记在应用声明中包含fireBase模块名称。

angular.module('appName', ['ngRoute','firebase'])

参考https://code.tutsplus.com/tutorials/creating-a-web-app-from-scratch-using-angularjs-and-firebase--cms-22391

答案 1 :(得分:1)

您错过了将Firebase作为应用程序的dependency注入。在模块定义中,添加firebase:

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

Here is a JSFiddle demo using Firebase