angularjs ui.router is throwing Error: Unexpected request: GET

Question

I am trying to implement AngularJS Routing Using UI-Router. I have index.html file which is trying to load the partial productListView.html using app.js as javascript but i am seeing Error: Unexpected request: GET productListView.html in my console. Any help would be appreciated.

index.html:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Acme Product Management</title>
    <!--Style Sheets-->
    <link rel="stylesheet" type="text/css" href="styles/app.css">
    <link rel="stylesheet" type="text/css" href="styles/bootstrap.css">
</head>
<body ng-app="productManagement">
    <div class="container">
        <div ui-view></div>
    </div>
    <!--Library Scripts-->
    <script src="js/angular.min.js"></script>
    <script src="js/angular-mocks.js"></script>
    <script src="js/angular-resource.min.js"></script>
    <script src="js/angular-ui-router.min.js"></script>
    <!--Application Script-->
    <script src="app.js"></script>
    <!--Services-->
    <script src="common/services/common-services.js"></script>
    <script src="common/services/productResource.js"></script>
    <script src="common/services/productResourceMock.js"></script>
    <!--Product Controllers-->
    <script src="products/productListCtrl.js"></script>
</body>
</html>

app.js:

(function(){
    'use strict';
    angular.module('productManagement',['common-services',
                                        'productResourceMock',
                                        'ui.router'])
           .config(['$stateProvider',
                    '$urlRouterProvider',
                    function($stateProvider,
                             $urlRouterProvider){

                    $urlRouterProvider.otherwise('/products');

                    $stateProvider
                        .state('productList', {
                            url:         '/products',
                            templateUrl: 'products/productListView.html',
                            controller:  'ProductListCtrl'
                        });
                    }]
           );
})();

enter image description here

Can you dd a '/' at the start of the templateUrl and check, like templateUrl: '/products/productListView.html' — Arulkumar
– Arulkumar, Commented Apr 24, 2015 at 15:18
I cleared cache and did hard reload but still seeing the same error — user3842029
– user3842029, Commented Apr 24, 2015 at 15:26

Unihedron · Accepted Answer · 2015-08-04 17:40:34Z

8

I think, you must change: $httpBackend.whenGET(/app/).passThrough(); in productResourceMock.js file

edited Aug 4, 2015 at 17:40

Unihedron

11.1k13 gold badges65 silver badges72 bronze badges

answered Aug 4, 2015 at 17:16

guvenuysal

961 silver badge2 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Himanshu Over a year ago

Yes you are right, we need to bypass all the request which is in our app directory, in this error case is "productListView.html". I think this answer should be accepted as a solution.

Kcats Wolfrevo Over a year ago

pluralsight - angularjs line of business applications.. great course..highly recommend it :)

Sunil D. · Accepted Answer · 2015-04-24 17:11:09Z

0

You are incorrectly icluding Javascript files that are meant for testing in your HTML file. The error you are seeing comes from the "mock" version of HTTPBackend that is used in unit tests.

You should remove lines like these from the HTML:

<script src="js/angular-mocks.js"></script>
<script src="common/services/productResourceMock.js"></script>

answered Apr 24, 2015 at 17:11

Sunil D.

18.2k6 gold badges55 silver badges69 bronze badges

3 Comments

user3842029 Over a year ago

@@Sunil. Those files are not for unit testing, I am trying to mock the web-service with those files. can you tell me what is the correct way to include those JavaScript files.

Sunil D. Over a year ago

I can't comment about productResourceMock.js, but angular-mocks.js is intended primarily for unit testing. If you're trying to use it as a pseudo back end, you would have to go and augment all of your application code to tell it how to respond to each query. That's why you get the error message you're getting, the mock $httpbackEnd was not told to expect or how to respond to any requests.

Sunil D. Over a year ago

Also, by including angular-mocks.js you're including mocked versions of more than just the $httpBackend service. You can read more about what else is mocked here.

Collectives™ on Stack Overflow

angularjs ui.router is throwing Error: Unexpected request: GET

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related