Uncaught object error on Chrome. Angularjs + ngResource

Asked 27/5, 2014 at 20:15 Answered 1/6, 2014 at 13:4

While using debug on Chrome, it keeps showing this error: uncaught object, on angular.js:36.

What am I doing wrong? :/

Thanks for any help :)

Module and Resource objects (services.js)

var services = angular.module('ngdemo.services', ['ngResource']);

services.factory('ProvidersFactory', function ($resource) {
    return $resource('http://devfz.azurewebsites.net/api/providers/', {}, {
        query: { method: 'GET', isArray: true },
    })
});

Controller (controller.js)

var app = angular.module('ngdemo.controllers', []);

app.controller('ProviderListCtrl', ['$scope', 'ProvidersFactory', '$location',
    function ($scope, ProvidersFactory, $location) {
        $scope.providers = ProvidersFactory.query();
    }]);

app.js

angular.module('ngdemo', ['ngdemo.filters', 'ngdemo.services', 'ngdemo.directives', 'ngdemo.controllers']).
config(['$routeProvider', function ($routeProvider) {
    $routeProvider.when('/provider-list', { templateUrl: '/provider-list.html', controller: 'ProviderListCtrl' });
    $routeProvider.otherwise({ redirectTo: '/provider-list' });
}]);

HTML

<!DOCTYPE html>
<html ng-app="ngdemo" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Providers</title>
    <link href="Content/bootstrap.min.css" rel="stylesheet">
    <script src="Scripts/Vendor/angular.min.js"></script>
    <script src="Scripts/Vendor/angular-resource.js"></script>
    <script src="controller.js"></script>
    <script src="services.js"></script>
    <script src="app.js"></script>
</head>
<body role="document" style="padding-top: 70px; padding-bottom: 30px">
    <div class="container body-content" role="main">
        <div ng-controller="ProviderListCtrl">
            <h2>Providers</h2>
            <hr>
            <div style="width:60%">
                <table class="table table-striped table-condensed">
                    <thead>
                        <tr>
                            <th style="min-width: 30px; width: 30px;">Id</th>
                            <th style="min-width: 100px;">Name</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="provider in providers">
                            <td valign="middle">Test: {{provider.Id}}</td>
                            <td valign="middle">Test: {{provider.Name}}</tdvalign>
                            <td valign="middle" align="right" width="40px"><a ng-click="" class="btn btn-small btn-primary">edit</a></td>
                            <td valign="middle" align="right" width="50px"><a ng-click="" class="btn btn-small btn-danger">delete</a></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</body>
</html>

Coniferous answered 27/5, 2014 at 20:15 Comment(8)

Can you create a plunker for this? The only issue I see is this <html ng-app xmlns="w3.org/1999/xhtml">. It should be <html ng-app="ngdemo" xmlns="w3.org/1999/xhtml">. – Lazar 27/5, 2014 at 20:46

Thanks for your help, Ronald91. I changed it to ng-app="ngdemo" and it is almost working. Now the tag ngRepeat iterates "Providers" but it doesn't iterate the array inside "Providers". Any type? – Coniferous 27/5, 2014 at 20:55

That would actually be another question given stackoverflow's question format but I would need to see the data structure for providers to best guide you. First thing comes to my mind is provider in providers.someArray. – Lazar 27/5, 2014 at 20:58

Now I see I get an "uncaught object". Before using ngResource, i used this code: $scope.providers = data.$values – Coniferous 27/5, 2014 at 21:5

What version of Angular are you using ? – Preen 27/5, 2014 at 22:6

Has this been figured out? I'm having the same error using a bower install angular#1.2.16 and angular-route#1.2.16. I too have added ngRoute as a dependency to my module – Reconcile 28/5, 2014 at 21:5

Italosnt - try switching to AngularJS 2.0.8 or 1.1.5 or setting a breakpoint at line 3810 in angular.js, and see if you get the error message (e.stack). I am seeing users report same is issue with UI-Router on github. Appears to be issue with any version of AngularJS 1.2.x - 1.3.x – Parahydrogen 11/6, 2014 at 1:1

I also see, that you are using $routeProvider, but do not see that you have included 'ngRoute' (like ngResource) in your modules to load. It's a separate JS file as well. – Parahydrogen 11/6, 2014 at 1:10

Try to debug in Safari browser. For me it gets more information about this error. In my case I use angular-seed app and rename 'myApp' module to 'myNameOfAppApp'. I received this error in Safari:

Error: [$injector:modulerr] Failed to instantiate module myApp due to: [$injector:nomod] Module 'myApp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

I try to find by 'mayApp' key word and after rename in index.html Error was fixed.

Serafinaserafine answered 1/6, 2014 at 13:4 Comment(3)

For me, angular-truncate changed from dist/ to src/ during bower update, and only Safari pointed me there but not Chrome. Even grunt failed silently. Thanks! – Confetti 25/6, 2014 at 5:41

Firefox also gives you more feedback than chrome – Ditty 14/7, 2014 at 18:27

The Safari thing is v.good advice. Finally. A use for Safari :) – Maurreen 16/7, 2014 at 11:46

In order to use $routeProvider you need to include (and declare as a dependency) the ngRoute module.

See, this answer for more info.

Preen answered 27/5, 2014 at 22:5 Comment(2)

I included it and declared as dependency this way: angular.module('ngdemo', ['ngRoute', 'ngdemo.filters', 'ngdemo.services', 'ngdemo.directives', 'ngdemo.controllers'])..... Still getting uncaught object :/ – Coniferous 27/5, 2014 at 22:49

Could you post the whole error message ? It would be best if you could prepare a fiddle demonstrating the issue. Could you also try including services as a dependency to controllers: angular.module('ngdemo.controllers', ['ngdemo.services']); – Preen 27/5, 2014 at 22:56

Recommended topics

Hot tags