After setting up the URL routes for the sportsStore app from an AngularJS book to learn, I'm encountering the following errors:
- Error: [$injector:unpr] Unknown provider: $templateRequestProvider <- $templateRequest <- $route <- ngViewDirective
- Error: [$injector:cdep] Circular dependency found: ngViewDirective
Despite checking that the versions of angular.js and angular-route.js are the same (the latest stable version) and reviewing the AngularJS API documentation for possible causes, I still can't seem to figure out why these errors are occurring.
I'm at a loss on how to proceed as interpreting the browser's developer tools' error messages shown in the screenshot seems impossible. Any guidance on resolving this issue would be greatly appreciated. https://i.sstatic.net/vU49b.png
Below is the snippet from app.html where the routes are defined to render specific views:
<!DOCTYPE html>
<html ng-app="sportsStore">
<head>
<title>SportsStore</title>
<script src="angular.js"></script>
<link href="bootstrap.css" rel="stylesheet" />
<link href="bootstrap-theme.css" rel="stylesheet" />
<script>
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"></script>
<script src="filters/customFilters.js"></script>
<script src="controllers/productListControllers.js"></script>
<script src="components/cart/cart.js"></script>
<script src="ngmodules/angular-route.js"></script>
</head>
<body ng-controller="sportsStoreCtrl">
<div class="navbar navbar-inverse">
<a class="navbar-brand" href="#">SPORTS STORE</a>
<cart-summary />
</div>
<div class="alert alert-danger" ng-show="data.error">
Error ({{data.error.status}}). The product data was not loaded.
<a href="/app.html" class="alert-link">Click here to try again</a>
</div>
<ng-view />
</body>
</html>Interestingly, even without altering the code, another error pops up. This situation is quite perplexing:https://i.sstatic.net/tzmr2.png