【问题标题】:Minification issue on route config angular js & typescript min safe路由配置 angular js 和 typescript min safe 的缩小问题
【发布时间】:2016-01-05 19:44:18
【问题描述】:

我有一个包含几个 js 文件的包(由 typescript 文件生成)

当我在捆绑包上使用缩小时,页面会失败。

chrome 控制台上的错误:

未捕获的错误:[$injector:modulerr] 无法实例化模块 AppModule 由于:错误:[$injector:unpr] 未知提供者: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 的。注入有问题吗?我应该如何安全地注射这个分钟?

【问题讨论】:

  • 您在 Routes 上设置了 $inject,但没有在 configureRoutes 上设置。试试app.config(['$routeProvider', AppModule.Routes.configureRoutes])

标签: angularjs typescript bundling-and-minification angularjs-ng-route


【解决方案1】:

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

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();
}]

(或类似的东西)

【讨论】:

  • 谢谢,第一个选项有效。我尝试了第二个选项,但是由于构造函数期望 1 个参数它不起作用,我应该传递给他什么?
  • 啊当然。是鸭子像往常一样打字,并没有考虑到这一点。使用第二种解决方案需要将 Routes 类作为它自己的提供者注册到 Angular 的 DI,并且您必须将其注入到配置中(因为服务不能注入到配置块中)。
猜你喜欢
  • 2016-09-23
  • 1970-01-01
  • 1970-01-01
  • 2016-12-07
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2016-08-05
  • 2014-05-22
相关资源
最近更新 更多