Geek Answers Handbook

AngularJS error: [$ injector: unpr] Unknown provider

I get these errors, shown below, after defining URL routes - after the sportsStore application from the AngularJS book for training purposes.

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

I read all the posts related to this type of error and I checked the versions of angular.js and angular -route.js to be the same (latest stable version). I also read the AngularJS API documentation and made sure that the reasons described are wrong.

I do not know what to do next, because it is impossible to understand the error from the browser developer tools shown in the image. Please point me in the right direction.enter image description here

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

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

+2
source share
4 answers

@uamanager showed me a solution → to remove '/' right before the views in 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
source

You write routesbefore downloading the file angular-route.js. So you need to move routesbetween <script></script>to the end.

This will solve your problem.

+2
source 

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

to the end of "head", call angular and ngRoute are still not loaded. It’s better to store scripts below the "body"

+1
source

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 this code https://codepen.io/CarterTsai/pen/tfjqu

0
source

More articles:


All Articles