Search code examples
javascriptangularjsgulprequirejsgulp-uglify

Gulp Minify issues with angular app files using requirejs


We are using Requirejs as our module loader for our Angular app and tried to use gulp as the building tool. Minified all app files(as is the same folder structure) and used the same for publishing. while using the minified version getting the error Unknown provider: e. The error is thrown while bootstrapping the application from app.js file. (... indicate there are more like these)

define(['angularAMD', 'jquery', 'angular-ui-router', 'modelBuilderApp', ... ], function (angularAMD, $) {
    'use strict';
    var app = angular.module('app', ['ui.router',
        'modelBuilderApp',....]);
    ... DO configure app ...
    angularAMD.bootstrap(app); //ERROR HERE    
    return app;
});

original version

define(['angularAMD', 'angular-ui-router', 'routeResolver', 'RestService', 'AuthModule', 'smarttable', 'ngScrollable'],
    function (angularAMD) {
        'use strict';
        var app = angular.module('modelBuilderApp', ['ui.router', 'ngScrollable']);
        app.config(function ($locationProvider, $stateProvider, $urlRouterProvider, routeResolverProvider) {
            var route = routeResolverProvider.route;

            $stateProvider
                .state('model', angularAMD.route({...

minified version

define(["angularAMD", "angular-ui-router", "routeResolver", "RestService", "AuthModule", "smarttable", "ngScrollable"],
function (angularAMD) {
    "use strict";
    var e = angular.module("modelBuilderApp", ["ui.router", "ngScrollable"]);
    return e.config(function (e, l, r, t) { //ERROR HERE
        var o = t.route;
        l.state("model", angularAMD.route({....

Am I missing any, Is this the correct procedure of minifying requirejs files? Do I need to look into any other optimisation techniques?


Solution

  • Problem is not with minification. You need to use dependency injection in the Angular app

    app.config(['$locationProvider', '$stateProvider', '$urlRouterProvider', 'routeResolverProvider', function ($locationProvider, $stateProvider, $urlRouterProvider, routeResolverProvider) {
        //Your code
    }]);
    

    However, For faster development, You can use gulp-ng-annotate