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
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

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.
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

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.
Avatar of leakim971
leakim971
Flag of Guadeloupe image

please post the minify version so we can compare, it look like a function was renamed
Avatar of eugene007
eugene007

ASKER

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
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

Blurred text
THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
Avatar of leakim971
leakim971
Flag of Guadeloupe image

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 ?
Avatar of eugene007
eugene007

ASKER

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

Avatar of eugene007
eugene007

ASKER

I am considering to move to angular 2 but i'm deciding whether to migrate or rewrite.
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

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

Angular 7 is the current version.
Avatar of eugene007
eugene007

ASKER

I'm taking a look at ngUpgrade.
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

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.
JavaScript
JavaScript

JavaScript is a dynamic, object-based language commonly used for client-side scripting in web browsers. Recently, server side JavaScript frameworks have also emerged. JavaScript runs on nearly every operating system and in almost every mainstream web browser.

127K
Questions
--
Followers
--
Top Experts
Get a personalized solution from industry experts
Ask the experts
Read over 600 more reviews

TRUSTED BY

IBM logoIntel logoMicrosoft logoUbisoft logoSAP logo
Qualcomm logoCitrix Systems logoWorkday logoErnst & Young logo
High performer badgeUsers love us badge
LinkedIn logoFacebook logoX logoInstagram logoTikTok logoYouTube logo