AngularJS Error: [$injector:unpr] Unknown provider

Question

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

Error: [$injector:unpr] Unknown provider: $templateRequestProvider <- $templateRequest <- $route <- ngViewDirective
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.

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:

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, Jul 26 '16 at 19:04
I don't think it has anything with the other js files because they worked before adding the routes — Dan Romulus, Jul 26 '16 at 19:33

score 2 · Answer 1 · answered Jul 26 '16 at 19:10

2

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.

answered Jul 26 '16 at 19:10

Ashwath S H

481
1
4
13

it must be a mistake in the book can you show me the syntax to define the routes after the files are loaded? – Dan Romulus Jul 26 '16 at 19:18
@DanRomulus Updated (waiting to be reviewed, but should show up in a little bit if it is approved) – Jay Jul 26 '16 at 19:32
@DanRomulus To elaborate, Javascript is executed synchronously. You're trying to inject all of these services like ngRoute and customFilters that you haven't defined yet because they're being imported AFTER your script where you declare your routes. Just because you have those libs in your HTML doesn't mean they're available everywhere, you have to run things in order. As mentioned by other people, you should actually have all of your scripts at the end of your body so that it doesn't block render, but that's another problem entirely. – Jay Jul 26 '16 at 19:35
I understand I will add them to the end of the body – Dan Romulus Jul 26 '16 at 19:45
I did what you said and move the scripts where I import the angular-route.js above the script where I declare the module and I am getting more errors plus the one I posted in the picture – Dan Romulus Jul 26 '16 at 20:11

score 1 · Answer 2 · answered Jul 26 '16 at 19:05

1

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'

answered Jul 26 '16 at 19:05

uamanager

1,128
8
11

just a few minutes pls – Dan Romulus Jul 26 '16 at 19:20
with the same code I had before I have this new GET error. This is strange because it is a different error at all. – Dan Romulus Jul 26 '16 at 19:31
do u have this file there? – uamanager Jul 26 '16 at 19:38
@DanRomulus The 404 means the html file isn't in that folder. The route is resolving fine, but can't find the template. – KreepN Jul 26 '16 at 19:44
I checked and it is in that folder – Dan Romulus Jul 26 '16 at 20:02
@DanRomulus can u reach this file via browser? – uamanager Jul 26 '16 at 20:04
@DanRomulus i mean can u open http://localhost:53692/views/productList.html if no it's server config problems – uamanager Jul 26 '16 at 20:11
I can't open the url – Dan Romulus Jul 26 '16 at 20:13
@DanRomulus so here is the root of current problem – uamanager Jul 26 '16 at 20:16
how can I debug this? – Dan Romulus Jul 26 '16 at 20:20
1

@DanRomulus can u change /views/productList.html to views/productList.html – uamanager Jul 26 '16 at 20:23
you are a genius!!! this is the mistake in the book, so doesn't have anything with the scripts. That fixed everything! – Dan Romulus Jul 26 '16 at 20:25
1

@DanRomulus great) Good Luck) – uamanager Jul 26 '16 at 20:27

Dan Romulus · Accepted Answer · 2016-07-27T10:41:20.623

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

score -1 · Answer 4 · edited Jul 26 '16 at 19:03

-1

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

edited Jul 26 '16 at 19:03

Jay

998
1
10
22

answered Jul 26 '16 at 18:57

Alejandro

270
2
12

While true, this isn't a fix for his issue. – KreepN Jul 26 '16 at 19:02

AngularJS Error: [$injector:unpr] Unknown provider

4 Answers4

Linked