4

I created this simple web application to put data into a firebase database. The problem is that I get a error when I open the webpage in my browser. This is the error I get

Possibly unhandled rejection: {} angular.js:14324

Also when I press the sumbit button the first time with no data in the fields it displays the same error as shown above. Then when I press the button again it does submit the empty fields to the database. I think angular finds it a problem that the fields are empty. Am I missing something? Putting text in the fields works fine and it also submits to the database. It's just with empty fields that their are problems.

var app = angular.module("sampleApp", ["firebase"]);
app.controller("SampleCtrl", function($scope, $firebaseArray) {
    var ref = firebase.database().ref().child("messages");
    $scope.loading = true;
    $firebaseArray(ref).$loaded().then(function(){
        $scope.loading = false;
        document.getElementById('loader').style.display = 'none';
    });
    $scope.messages = $firebaseArray(ref);
    $scope.addMessage = function() {
        $scope.messages.$add({
            name: $scope.name,
            company: $scope.company,
            reason: $scope.reason,
            wayofcontact: $scope.wayofcontact,
        });
        $scope.name = '';
        $scope.company = '';
        $scope.reason = '';
        $scope.wayofcontact = '';
        document.getElementById("name").focus();
    };
});
<!DOCTYPE html>
<html ng-app="sampleApp">
<head>
    <meta charset="utf-8">
    <title>AngularJS Tutorial</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <style>
    [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
        display: none !important;
    }
    ul {
        list-style-type: none;
    }
    </style>
</head>
<body ng-controller="SampleCtrl" ng-cloak >
    <div class="container" ng-view>
        <div ng-show="loading">
            Loading...
        </div>
        <ul class="list-unstyled">
            <li ng-repeat="message in messages | filter:{name: '!!'}">
                <h1>{{message.name}}</h1>
                <p>
                    Bedrijf: {{message.company}}<br>
                    Reden: {{message.reason}}<br>
                    Email/telefoon: {{message.wayofcontact}}<br>
                </p>
                <button ng-click="messages.$remove(message)" class="btn btn-danger">Verwijder verzoek</button>
                <br><br>
            </li>
        </ul>
        <form ng-submit="addMessage()" novalidate>
            <div class="row">
                <div class="col-xs-6 form-group">
                    <input type="text" class="form-control" id="name" ng-model="name" placeholder="Naam" autofocus required/>
                </div>
                <div class="col-xs-6">
                    <input type="text" class="form-control" ng-model="namecolleague" placeholder="Naam collega" required/>
                </div>
                <div class="col-xs-12 form-group">
                    <input type="text" class="form-control" ng-model="company" placeholder="Bedrijf" required/>
                </div>
                <div class="col-xs-12 form-group">
                    <textarea rows="3" type="text" class="form-control" ng-model="reason" placeholder="Reden van bellen" required></textarea>
                </div>
                <div class="col-xs-12 form-group">
                    <input type="text" class="form-control" ng-model="wayofcontact" placeholder="Email of nummer" required/>
                </div>
                <div class="col-xs-12 form-group">
                    <button type="submit" class="btn btn-primary">Add Message</button>
                </div>
            </div>
        </form>
    </div>
    <script type="text/javascript" src="https://www.gstatic.com/firebasejs/3.6.0/firebase.js"></script>
    <script type="text/javascript" src="https://cdn.firebase.com/libs/angularfire/2.1.0/angularfire.min.js"></script>
    <script type="text/javascript" src="scripts/app.js"></script>
    <script>
    // Initialize Firebase
    var config = {
        apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
        authDomain: "xxxxxxxxxxxxxxxxxxxx",
        databaseURL: "xxxxxxxxxxxxxxxxxxxxxxxxxxx",
        storageBucket: "xxxxxxxxxxxxxxxx",
        messagingSenderId: "xxxxxxxxxxx"
    };
    firebase.initializeApp(config);
    </script>
</body>
</html>
georgeawg
  • 48,608
  • 13
  • 72
  • 95
Luukth
  • 73
  • 2
  • 9

2 Answers2

3

This error appears to be something that was added as a part of the $qProvider that is used to configure $q

https://docs.angularjs.org/api/ng/provider/$qProvider

did a search on the error since it didn't look familiar but looks like you can just disable the feature in a config block with this provider

app.config(['$qProvider', function ($qProvider) {
    $qProvider.errorOnUnhandledRejections(false);
}]);

I guess the only other thing to add is something that returns a promise here must be failing but has no error handler registered.

shaunhusain
  • 19,630
  • 4
  • 38
  • 51
  • This works and hides the message. But still when I press the submit button first time the empty form does not submit to the firebase database. And then when I press it a second time it does submit the empty data to the firebase database. I could record a video of me doing it for explanation. – Luukth Dec 23 '16 at 14:28
0

Attach an error handler to the $loaded() promise chain:

$firebaseArray(ref).$loaded().then(function(){
    $scope.loading = false;
    document.getElementById('loader').style.display = 'none';
}).catch(function (e) {
    console.log(e);
    throw e;
});

If the error is coming from that .then block, the console will show more detail.

AngularJS 1.6.0 has made errors in .then blocks less noisy. Unfortunately some details are lost. AngularJS 1.6.1 will have better error messages.

Due to c9dffde, possibly unhandled rejected promises will be logged to the $exceptionHandler. Normally, that means that an error will be logged to the console, but in tests $exceptionHandler will (by default) re-throw any exceptions. Tests that are affected by this change (e.g. tests that depend on specific order or number of messages in $exceptionHandler) will need to handle rejected promises.

-- AngularJS Developer Guide - Migrating to v1.6 - $q.

See also:

georgeawg
  • 48,608
  • 13
  • 72
  • 95
  • Their is no issue with loading the data. It has to do something with the submitting of the form to the database. – Luukth Dec 23 '16 at 14:30
  • You stated the error message occurs on the open of the browser as well as on the first submit of the form. That would indicate a possible error in the $load chain. Add an error catcher to the $add chain to see if there is a problem in that chain. Or revert to Angular 1.5.x to get better error messages. – georgeawg Dec 23 '16 at 17:06
  • I found out wat was causing it to fail the first time. The first time the fields are empty and when I sumbit I set all the fields to '' with $scope.name = ''; now when I run the script I put nothing in every field so it does submit with no data. – Luukth Dec 23 '16 at 20:43