Search code examples
javascriptangularjsangularjs-directivetypescriptangularjs-factory

Angularjs service for directive is unknown if in same file

Error only if minimized and loaded in same file. If app.ts is loaded before Service or Directive it works.

(No problems with controllers)

How can i make it work?

Console Error:

site.js:119 Error: [$injector:unpr] http://errors.angularjs.org/1.5.0/$injector/unpr?p0=eProvider%20%3C-%20e%20%3C-%20routeNavigation%20%3C-%20navigationDirective
    at Error (native)
    at http://localhost:50308/js/site.js:11:416
    at http://localhost:50308/js/site.js:48:7
    at Object.d [as get] (http://localhost:50308/js/site.js:45:270)
    at http://localhost:50308/js/site.js:48:69
    at d (http://localhost:50308/js/site.js:45:270)
    at e (http://localhost:50308/js/site.js:46:1)
    at Object.invoke (http://localhost:50308/js/site.js:46:86)
    at Object.$get (http://localhost:50308/js/site.js:43:460)
    at Object.invoke (http://localhost:50308/js/site.js:46:295)(anonymous function) @ site.js:119

AngularJs Error Message:

Unknown provider: eProvider <- e <- routeNavigation <- navigationDirective

app.ts

enter code here
"use strict";
var app = angular.module('HouseConcertApp', ['ngCookies', 'pascalprecht.translate', 'ngRoute', 'houseconcertControllers', 'houseconcertServices', 'houseconcertDirectives']);

app.config([
'$translateProvider', '$routeProvider', function($translateProvider, $routeProvider) { ....

services.ts

var houseconcertServices = angular.module('houseconcertServices', []);

houseconcertServices.factory('routeNavigation', function ($route, $location) {
    var routes = [];
    angular.forEach($route.routes, function (route, path) {
        if (route.name) {
            routes.push({
                path: path,
                name: route.name
            });
        }
    });
    return {
        routes: routes,
        activeRoute: function (route) {
            return route.path === $location.path();
        }
    };
});

directives.ts

var houseconcertDirectives = angular.module("houseconcertDirectives", []);


houseconcertDirectives.directive('navigation', ['routeNavigation', routeNavigation => ({
    restrict: "E",
    templateUrl: "navigation-directive-tpl.html",
    controller($scope) {
        $scope.routes = routeNavigation.routes;
        $scope.activeRoute = routeNavigation.activeRoute;
    }
})]);

index.html

   <!doctype html>
    <html ng-app="HouseConcertApp">
    <head>
        <base href="/index.html">
        <title>House Concert</title>
        <meta charset="utf-8"/>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/Main.css"/>
        <script src="js/site.js" onload="Hc.Common.initialize()"></script>
    </head>
    <body>
    <navigation></navigation>

    <div ng-controller="HouseConcertCtrl">
            <div ng-view></div>
        </div>
    </div>

    </body>
    </html>

it works if html head script includes like this: but not if all in this order minimized in site.js (with gulp)

<script src="pathToFolder/app.ts"></script>
<script src="pathToFolder/services.ts"></script>
<script src="pathToFolder/controllers.ts"></script>
<script src="pathToFolder/directives.ts"></script>
Solution

  • To get files minified without error you should make sure to follow Dependency Injection pattern consistently. Only routeNavigation factory code is missing DI Inline Array annotation in your code.

    Change below

    houseconcertServices.factory('routeNavigation', function ($route, $location) {

    to

    houseconcertServices.factory('routeNavigation',['$route', '$location', 
  function ($route, $location) {

     //service code will be as is.

}]);

    Doc link for minification related warning