Gulp Minify issues with angular app files using requirejs

Question

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?

Satpal · Accepted Answer · 2017-08-28 11:27:26Z

4

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

edited Aug 28, 2017 at 11:27

answered Aug 28, 2017 at 11:21

Satpal

134k13 gold badges168 silver badges171 bronze badges

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

1 Comment

Nikhil Goud Over a year ago

gulp-ng-annotate sure helped me a lot thanks for recommending.

Collectives™ on Stack Overflow

Gulp Minify issues with angular app files using requirejs

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related