路由配置的缩小问题 angular js & typescript min safe

Question

我有一个包含几个 js 文件的包（由 typescript 文件生成）

当我在包上使用缩小时，页面失败。

chrome 控制台上的错误：

Uncaught Error: [$injector:modulerr] Failed to instantiate module AppModule due to: Error: [$injector:unpr] Unknown provider: n

我将问题归结为两个文件之一，app.module 和 app.routes，如下所示：

app.module:

((): void=> {
    var app = angular.module("AppModule", ['ngRoute', 'ngMessages', 'app.xxx.xxx.xxxModule', 'ngSanitize']);
    app.config(AppModule.Routes.configureRoutes);
})();

app.routes:

/// <reference path="../../../../../scripts/typings/angularjs/angular.d.ts" />
/// <reference path="../../../../../scripts/typings/angularjs/angular-route.d.ts" />
module AppModule {
    declare var staticsDir: string;

    export class Routes {
        static $inject = ["$routeProvider"];
        static configureRoutes($routeProvider: ng.route.IRouteProvider) {
            $routeProvider.when("/xxx", { controller: "Uni.controllers.xxx", templateUrl: staticsDir + "/projects/xxx/xxx/xxx/xxx.html", controllerAs: "xxx" });
            $routeProvider.when("/xxx2", { controller: "Uni.controllers.xxx2", templateUrl: staticsDir + "/projects/xxx2/xxx2/xxx2/xxx2.html", controllerAs: "xxx2" });
        }
    }
}

（忽略 xxx 和模块名称，我对它们进行了清理）

我猜我看到的错误是关于 $routeProvider 的。注入有问题吗？我该如何注入这个最小安全值？

Answer 1

您要求将 $routeProvider 注入您的静态函数中，这不是最小安全的。 static $inject 仅适用于 Routes class 构造函数。所以你可以这样做：

app.config(['$routeProvider', AppModule.Routes.configureRoutes])

或者如果你想充分利用Angular的DI：

    export class Routes {
        static $inject = ["$routeProvider"];

        constructor(private $routeProvider: ng.route.IRouteProvider){
        }
        configureRoutes() {
            this.$routeProvider.when("/xxx", { controller: "Uni.controllers.xxx", templateUrl: staticsDir + "/projects/xxx/xxx/xxx/xxx.html", controllerAs: "xxx" });
            this.$routeProvider.when("/xxx2", { controller: "Uni.controllers.xxx2", templateUrl: staticsDir + "/projects/xxx2/xxx2/xxx2/xxx2.html", controllerAs: "xxx2" });
        }
    ...
    ...
    }

将其注册为提供商本身：

即。 app.provider('myRoutes', Routes);

并将其注入配置块：

app.config(['myRoutes', function(myRoutes){
    myRoutes.configureRoutes();
}]

（或类似的东西）

路由配置的缩小问题 angular js & typescript min safe

Minification issue on route config angular js & typescript min safe

angularjs

bundling-and-minification

typescript

angularjs-ng-route