CODEWITHSUNDEEP
angularjstypescriptbundling-and-minificationangularjs-ng-route
Ziv Weissman
Ziv Weissman

Reputation: 4516

Minification issue on route config angular js & typescript min safe

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?

Upvotes: 0

Views: 1670

Answers (1)

masimplo
masimplo

Reputation: 3774

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)

Upvotes: 2

Related Questions