Strange Routing error with AngularJS app

Question

I'm having difficulties implementing a simple routing configuration on my AngularJS application.

This is my HTML file:

<html data-ng-app="sportsStore">
    <head>
        <title>Sports Store</title>
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" type="text/css" />
        <script src="http://code.jquery.com/jquery-2.1.1.min.js" type="application/javascript"></script>
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js" type="application/javascript"></script>
        <script src="https://code.angularjs.org/1.3.0/angular.min.js" type="application/javascript"></script>
        <script src="https://code.angularjs.org/1.3.0/angular-route.min.js" type="application/javascript"></script>
        <script type="application/javascript">
            angular.module('sportsStore', ['customFilters', 'cart', 'ngRoute'])
            .config(function ($routeProvider) {
                $routeProvider.when('/checkout', {
                    templateUrl: '/views/checkoutSummary.html'
                });
                $routeProvider.when('/products', {
                    templateUrl: '/views/productList.html'
                });
                $routeProvider.otherwise({
                    templateUrl: '/views/productList.html'
                });
            });
        </script>
        <script src="controllers/sportsStore.js" type="application/javascript"></script>
        <script src="controllers/productListControllers.js" type="application/javascript"></script>
        <script src="components/cart/cart.js" type="application/javascript"></script>
        <script src="filters/customFilters.js" type="application/javascript"></script>
    </head>
    <body data-ng-controller="sportsStoreCtrl">
        <div class="navbar navbar-inverse">
            <a class="navbar-brand" href="#">SPORTS STORE</a>
            <cart-summary/>
        </div>
        <div class="alert alert-danger" data-ng-show="data.error">
            Error ({{data.error.status}}). The product data was not loaded.
            <a href="/index.html" class="alert-link">Click here to try again</a>
        </div>
        <ng-view />
    </body>
</html>

If i remove all the routing configurations from the route provider, no error is thrown, but as soon as I add them back, this error appears on the browser's console:

Error: [$compile:tpload] http://errors.angularjs.org/1.3.0/$compile/tpload?p0=%2Fviews%2FproductList.html
y/<@https://code.angularjs.org/1.3.0/angular.min.js:6:409
g@https://code.angularjs.org/1.3.0/angular.min.js:133:480
f/<@https://code.angularjs.org/1.3.0/angular.min.js:109:261
Ke/this.$get</h.prototype.$eval@https://code.angularjs.org/1.3.0/angular.min.js:123:128
Ke/this.$get</h.prototype.$digest@https://code.angularjs.org/1.3.0/angular.min.js:120:212
Ke/this.$get</h.prototype.$apply@https://code.angularjs.org/1.3.0/angular.min.js:123:404
rc/d/<@https://code.angularjs.org/1.3.0/angular.min.js:18:99
e@https://code.angularjs.org/1.3.0/angular.min.js:36:447
rc/d@https://code.angularjs.org/1.3.0/angular.min.js:18:81
rc@https://code.angularjs.org/1.3.0/angular.min.js:18:309
Ed@https://code.angularjs.org/1.3.0/angular.min.js:17:137
@https://code.angularjs.org/1.3.0/angular.min.js:246:98
n.Callbacks/j@http://code.jquery.com/jquery-2.1.1.min.js:2:26852
n.Callbacks/k.fireWith@http://code.jquery.com/jquery-2.1.1.min.js:2:27661
.ready@http://code.jquery.com/jquery-2.1.1.min.js:2:29482
I@http://code.jquery.com/jquery-2.1.1.min.js:2:29656

https://code.angularjs.org/1.3.0/angular.min.js
Line 101

Another error also appears:

[object XrayWrapper [object DOMException]]
https://code.angularjs.org/1.3.0/angular.min.js
Line 101

But when click on it to get more information, a message blocks me:

NS_ERROR_DOM_BAD_URI: Access to restricted URI denied

Niranjan Kumar Reddy · Accepted Answer · 2015-03-23 18:04:41Z

2

You need to remove the beginning "/". It works just perfect while you simulate on the PC browser and works fine on iOS as well but fails only in case of Android.

Secondly, make sure that the file name and path is correct.

answered Mar 23, 2015 at 18:04

Niranjan Kumar Reddy

212 bronze badges

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

2 Comments

Niranjan Kumar Reddy Over a year ago

I mean, removing "/" will make it work just perfectly on all platforms. Your current code will not work (with the beginning "/") on Android platform.

Sayalee Pote Over a year ago

Thanks a ton for the solution. Had me stuck for quite some time.

KJ Price · Accepted Answer · 2014-10-29 18:35:17Z

0

It is not able to find the file "/views/checkoutSummary.html". Make sure that the path is correct.

answered Oct 29, 2014 at 18:35

KJ Price

6,0143 gold badges23 silver badges36 bronze badges

2 Comments

Matias Cicero Over a year ago

The file does exist (same with productSummary.html), do I have to pass the absolute path?

dkiefer Over a year ago

Actually, I think it's not finding /views/productList.html (errors.angularjs.org/1.3.0/$compile/… in the first line of the error.) According to the docs docs.angularjs.org/error/$compile/tpload it happens when it can't find the template. "To resolve this error, ensure that the URL of the template is spelled correctly and resolves to correct absolute URL. The Chrome Developer Tools might also be helpful in determining why the request failed."

Collectives™ on Stack Overflow

Strange Routing error with AngularJS app

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related