Minification issue on route config angular js & typescript min safe

Question

I have a bundle with several js files (generated by typescript files)

When I use minification on the bundle, the page fails.

The error on chrome console:

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

I isolated the problem to one of two files, the app.module and the app.routes as follows:

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" });
        }
    }
}

(ignore the xxx and module names, I sanitized them)

I am guessing the error I am seeing is regarding the $routeProvider. Is there problem in the inject? How should I inject this min safe?

You are setting $inject on Routes but not configureRoutes. Try app.config(['$routeProvider', AppModule.Routes.configureRoutes]) — masimplo
– masimplo, Commented Oct 8, 2015 at 9:23

masimplo · Accepted Answer · 2015-10-08 10:52:01Z

2

You are asking for $routeProvider to be injected in your static function which is not min-safe. static $inject applies to Routes class constructor only. So you can either do:

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

Or if you want to make full use of Angular's 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" });
        }
    ...
    ...
    }

register it as a provider itself:

ie. app.provider('myRoutes', Routes);

and inject it into the config block:

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

(or sth similar)

edited Oct 8, 2015 at 10:52

answered Oct 8, 2015 at 9:28

masimplo

3,8042 gold badges34 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ziv Weissman Over a year ago

Thanks, the first option works. I tried the second option, but since the constructor expect 1 argument it doesn't work, what should i pass him?

masimplo Over a year ago

Ah of course. Was duck typing as usual and didn't think this through. Using the second solution would require the Routes class to be registered to angular's DI as a provider it self and you would have to inject that in the config (as services cannot be injected in config blocks).

Collectives™ on Stack Overflow

Minification issue on route config angular js & typescript min safe

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related