Avatar of eugene007
eugene007 asked on

$uibModal issue after uglify

I am using angularjs 1. When I invoke the "updateProfile" below, it would display a modal dialog:

$scope.updateProfile = function(){
      modalService.showModal({}, modalOptions).then(function (result) {
        //my code
      });
}

Open in new window


angular.module('myApp')
		.service('modalService', ['$uibModal',
    function ($uibModal) {

        var modalDefaults = {
            backdrop: true,
            keyboard: true,
            modalFade: true,
            templateUrl:'../assets/templates/main/modal.php'
        };

        var modalOptions = {
            closeButtonText: 'Close',
            actionButtonText: 'OK',
            headerText: 'Proceed?',
            bodyText: 'Perform this action?'
        };
		
        this.showModal = function (customModalDefaults, customModalOptions) {
            if (!customModalDefaults) customModalDefaults = {};
            customModalDefaults.backdrop = 'static';
            return this.show(customModalDefaults, customModalOptions);
        };
		
        this.show = function (customModalDefaults, customModalOptions) {
            //Create temp objects to work with since we're in a singleton service
            var tempModalDefaults = {};
            var tempModalOptions = {};

            //Map angular-ui modal custom defaults to modal defaults defined in service
            angular.extend(tempModalDefaults, modalDefaults, customModalDefaults);

            //Map modal.html $scope custom properties to defaults defined in service
            angular.extend(tempModalOptions, modalOptions, customModalOptions);
			
            if (!tempModalDefaults.controller) {
                tempModalDefaults.controller = function ($scope, $uibModalInstance) {
                    $scope.modalOptions = tempModalOptions;
                    $scope.modalOptions.ok = function (result) {
                        $uibModalInstance.close(result);
                    };
                    $scope.modalOptions.close = function (result) {
                        $uibModalInstance.dismiss('cancel');
                    };
                }
            }

            return $uibModal.open(tempModalDefaults).result;
        };

}]);

Open in new window


However after I uglify the code an error is raised.

[$injector:unpr] http://errors.angularjs.org/1.6.3/$injector/unpr?p0=oProvider%20%3C-%20o

Your help is kindly appreciated.
JavaScriptAngular

Avatar of undefined
Last Comment
Julian Hansen

8/22/2022 - Mon
Julian Hansen

You need to make sure that your code is properly formatted.

Use strict mode in your modules.

Make sure all statements are terminated by a semi-colon - the last one is important because when code is minified or uglified it changes the structure and if two statements that were originally separated by a CR are now on the same line and there is no ; between them it changes the context and generates an error.
Julian Hansen

Also consider moving to Angular (2.x +).
1. AngularJS entered 3 year LTS in July t his year so it is going to die soon
2. Angular already obfuscates the code as part of its compiling process
3. The benefits of the impoved everything makes it a good move.
leakim971

please post the minify version so we can compare, it look like a function was renamed
Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!
James Murphy
ASKER
eugene007

Thank you all for your valuable feedback.

Previous line of code:

tempModalDefaults.controller = function ($scope, $uibModalInstance) {
                    $scope.modalOptions = tempModalOptions;
                    $scope.modalOptions.ok = function (result) {
                        $uibModalInstance.close(result);
                    };
                    $scope.modalOptions.close = function (result) {
                        $uibModalInstance.dismiss('cancel');
                    };
                }

Open in new window


Current line of code:

tempModalDefaults.controller = ['$scope','$uibModalInstance', function ($scope, $uibModalInstance) {
                    $scope.modalOptions = tempModalOptions;
                    $scope.modalOptions.ok = function (result) {
                        $uibModalInstance.close(result);
                    };
                    $scope.modalOptions.close = function (result) {
                        $uibModalInstance.dismiss('cancel');
                    };
                }]

Open in new window


With the current line of code i am able to minify the code with laravel-mix.
ASKER CERTIFIED SOLUTION
Julian Hansen

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
See how we're fighting big data
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
leakim971

With the current line of code i am able to minify and uglify the code with laravel-mix.

This the uglify version, result of laravel-mix, that I would like to see
maybe you can post a link to that page ?
ASKER
eugene007

My minified code.

!function(t){var o={};function e(n){if(o[n])return o[n].exports;var r=o[n]={i:n,l:!1,exports:{}};return t[n].call(r.exports,r,r.exports,e),r.l=!0,r.exports}e.m=t,e.c=o,e.d=function(t,o,n){e.o(t,o)||Object.defineProperty(t,o,{configurable:!1,enumerable:!0,get:n})},e.n=function(t){var o=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(o,"a",o),o},e.o=function(t,o){return Object.prototype.hasOwnProperty.call(t,o)},e.p="",e(e.s=0)}([function(t,o,e){t.exports=e(1)},function(t,o){angular.module("myApp").service("modalService",["$uibModal",function(t){var o={backdrop:!0,keyboard:!0,modalFade:!0,templateUrl:"../assets/templates/main/modal.php"},e={closeButtonText:"Close",actionButtonText:"OK",headerText:"Proceed?",bodyText:"Perform this action?"};this.showModal=function(t,o){return t||(t={}),t.backdrop="static",this.show(t,o)},this.show=function(n,r){var a={},c={};return angular.extend(a,o,n),angular.extend(c,e,r),a.controller||(a.controller=["$scope","$uibModalInstance",function(t,o){t.modalOptions=c,t.modalOptions.ok=function(t){o.close(t)},t.modalOptions.close=function(t){o.dismiss("cancel")}}]),t.open(a).result}}])}]);

Open in new window

Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
ASKER
eugene007

I am considering to move to angular 2 but i'm deciding whether to migrate or rewrite.
Julian Hansen

Migration is essentially a rewrite - the paradigm is completely different.

Angular 7 is the current version.
ASKER
eugene007

I'm taking a look at ngUpgrade.
All of life is about relationships, and EE has made a viirtual community a real community. It lifts everyone's boat
William Peck
Julian Hansen

Not familiar with ngUpgrade - personally I would prefer to go Native 2/4/5/6/7 - but understand there maybe 100s / hours dev in 1.x that you don't want to lose.

If you were developing on 1.5 / 1.6 with components the transition should be a lot easier.