Angularjs 如果在同一文件中，指令服务未知

Question

仅当最小化并加载到同一个文件时才会出错。如果 app.ts 在服务或指令之前加载，它会起作用。

（控制器没问题）

如何让它工作？

控制台错误：

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 错误信息：

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>

如果 html head 脚本包含如下内容，它会起作用：但如果所有按此顺序在 site.js 中最小化（使用 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>

Answer 1

要获取文件 minified 而不会出错，您应该确保始终遵循依赖注入模式。只有 routeNavigation 工厂代码在您的代码中缺少 DI 内联数组注释。

更改如下

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

到

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

     //service code will be as is.

}]);

Doc link 缩小相关警告

Angularjs 如果在同一文件中，指令服务未知

Angularjs service for directive is unknown if in same file

javascript

angularjs

angularjs-directive

typescript

angularjs-factory