AngularJS Error: [$injector:unpr] Unknown provider

2
votes

I am getting these errors shown below after defining the URL routes - following the sportsStore app from an AngularJS book for learning purposes.

  1. Error: [$injector:unpr] Unknown provider: $templateRequestProvider <- $templateRequest <- $route <- ngViewDirective
  2. Error: [$injector:cdep] Circular dependency found: ngViewDirective

I've read all the posts related to this type of error and I checked the versions of the angular.js and angular-route.js to be the same (the last stable version). I've read also the documentation on the AngularJS API and make sure that the causes described there are not the case.

I don't know what to do next since it is impossible for me to understand the error from the browser's developer tools shown in the image. Please point me to the right direction.enter image description here

Here is the app.html where the routes are defined to display the 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>

Without changing the code I have another error. This is so strange:enter image description here

4
javascriptangularjs
The circular reference is your main problem, you have 2 components that depend on one another. We need to see your other js to find the problem. – KreepN
I don't think it has anything with the other js files because they worked before adding the routes – Dan Romulus

4 Answers

2
votes

Your writing your routes before loading your angular-route.js file. So you need to move your routes between <script></script> to the end.

This will solve your problem.

1
votes

Move 

<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>

to the end of the 'head', cause angular and ngRoute still are not loaded. Better to keep scripts at the bottom of 'body'

1
votes

@uamanager showed me the solution -> to remove the '/' right before the views in the templateUrl 

<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>
-1
votes

change your syntax for your route provider, you only need one $routeProvider

$routeProvider
    .when('/Book/:bookId', {
        templateUrl: 'book.html',
        controller: 'BookController',    
   })
   .when('/Book/:bookId/ch/:chapterId', {
       templateUrl: 'chapter.html',
       controller: 'ChapterController'
  });

check out this codepen https://codepen.io/CarterTsai/pen/tfjqu