AngularJS Error: [$injector:unpr] Unknown provider
<p>I am getting these errors shown below after defining the URL routes - following the sportsStore app from an AngularJS book for learning purposes.</p>

<ol>
<li>Error: [$injector:unpr] Unknown provider: $templateRequestProvider &lt;- $templateRequest &lt;- $route &lt;- ngViewDirective</li>
<li>Error: [$injector:cdep] Circular dependency found: ngViewDirective</li>
</ol>

<p>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. </p>

<p>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.<a href="https://i.stack.imgur.com/vU49b.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vU49b.png" alt="enter image description here"></a></p>

<p>Here is the app.html where the routes are defined to display the specific views:
<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
&lt;html ng-app="sportsStore"&gt;

&lt;head&gt;
  &lt;title&gt;SportsStore&lt;/title&gt;
  &lt;script src="angular.js"&gt;&lt;/script&gt;
  &lt;link href="bootstrap.css" rel="stylesheet" /&gt;
  &lt;link href="bootstrap-theme.css" rel="stylesheet" /&gt;
  &lt;script&gt;
    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"
        });
      });
  &lt;/script&gt;
  &lt;script src="controllers/sportsStore.js"&gt;&lt;/script&gt;
  &lt;script src="filters/customFilters.js"&gt;&lt;/script&gt;
  &lt;script src="controllers/productListControllers.js"&gt;&lt;/script&gt;
  &lt;script src="components/cart/cart.js"&gt;&lt;/script&gt;
  &lt;script src="ngmodules/angular-route.js"&gt;&lt;/script&gt;
&lt;/head&gt;

&lt;body ng-controller="sportsStoreCtrl"&gt;
  &lt;div class="navbar navbar-inverse"&gt;
    &lt;a class="navbar-brand" href="#"&gt;SPORTS STORE&lt;/a&gt;
    &lt;cart-summary /&gt;
  &lt;/div&gt;

  &lt;div class="alert alert-danger" ng-show="data.error"&gt;
    Error ({{data.error.status}}). The product data was not loaded.
    &lt;a href="/app.html" class="alert-link"&gt;Click here to try again&lt;/a&gt;
  &lt;/div&gt;
  &lt;ng-view /&gt;
&lt;/body&gt;

&lt;/html&gt;</code></pre>
</div>
</div>
</p>

<p>Without changing the code I have another error. This is so strange:<a href="https://i.stack.imgur.com/tzmr2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tzmr2.png" alt="enter image description here"></a></p>