CODEWITHSUNDEEP
javascriptangularjs
Dan Romulus
Dan Romulus

Reputation: 115

AngularJS Error: [$injector:unpr] Unknown provider

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

Upvotes: 2

Views: 3138

Answers (4)

Dan Romulus
Dan Romulus

Reputation: 115

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

Upvotes: 1

Ashwath S H
Ashwath S H

Reputation: 581

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.

Upvotes: 2

uamanager
uamanager

Reputation: 1248

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'

Upvotes: 1

Alejandro
Alejandro

Reputation: 270

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

Upvotes: -1

Related Questions