mdPanel issue after minification.

[whittssg]

Actual Behavior:

• What is the issue? mdPanel stops working after minfying code. I have a grunt task that minifies my files and groups bower libraries into single js files. Before this process mdPanel works fine but afterwards i get an error in the vendor.js file. I use mdDialog (and many other material services) in my code and they work fine after this process.

I get the following error: [$injector:unpr] Unknown provider: aProvider <- a (in my vendor.js file)

The error occurs here: (in the function... f.apply(b, a)
this.$get = ["$window", function(c) { function e(a) { return a instanceof Error && (a.stack ? a = a.message && -1 === a.stack.indexOf(a.message) ? "Error: " + a.message + "\n" + a.stack : a.stack : a.sourceURL && (a = a.message + "\n" + a.sourceURL + ":" + a.line)), a } function f(a) { var b = c.console || {} , f = b[a] || b.log || n , g = !1; try { g = !!f.apply } catch (h) {} return g ? function() { var a = []; return d(arguments, function(b) { a.push(e(b)) }), f.apply(b, a) } : function(a, b) { f(a, null == b ? "" : b) } }

• What is the expected behavior? mdPanel should work correctly after minifying / grouping.

CodePen (or steps to reproduce the issue): *

• CodePen Demo which shows your issue:
• Details:

Angular Versions: *

• Angular Version:1.5
• Angular Material Version:1.1.0 RC5

Additional Information:

• Browser Type: *Chrome

---

Shortcut to create a new CodePen Demo.
Note: * indicates required information. Without this information, your issue may be auto-closed.

Do not modify the titles or questions. Simply add your responses to the ends of the questions.
Add more lines if needed.

[mckenzielong]

What does the code look like where you open the panel, or can you provide the code in a codepen? Are you doing dependency injection properly?

[whittssg]

This is how i call the panel:

   var position = $mdPanel.newPanelPosition()

                .center();

                var config = {
                    attachTo: angular.element(document.body),
                    templateUrl: 'app/casesearch/dialogs/queryPanel.html',
                    controller: PanelMenuCtrl,
                    controllerAs: 'queryPanel',
                    position: position,
                    openFrom: ev,
                    clickOutsideToClose: true,
                    escapeToClose: true,
                    focusOnOpen: false,
                    fullscreen: false,
                    locals: {
                        theme: $scope.theme,
                        CurrentCase: $scope.CurrentCase
                    },
                };

                $mdPanel.open(config);

Before building this works fine..

I also noticed that
var position = $mdPanel.newPanelPosition() actually works when built so i would assume that my dependency injection is working.

Just in case my dependency injection looks like this:

 static $inject = ["$scope", "$rootScope", "$state", "$stateParams", "elasticservice", "$mdDialog", "devicetypes", "casequeries", "Auth", "$q", "$mdToast", "$mdColors", "$mdPanel"];

        constructor($scope, $rootScope, $state, $stateParams, elasticservice, $mdDialog, devicetypes, casequeries, Auth, $q, $mdToast, $mdColors, $mdPanel) {

Thanks

[ofirmgr]

The easiest solution is to add ng-annotate task to your grunt build before the minification task

[whittssg]

ofirmgr: I already do that:

 grunt.registerTask('build', [
    'clean:dist',
    'concurrent:pre',
    'concurrent:dist',
    'injector',
    'wiredep:client',
    'useminPrepare',
    'postcss',
    'ngtemplates',
    'concat',
    'ngAnnotate',
    'copy:dist',
    'babel:server',
    'cdnify',
    'cssmin',
    'uglify',
    'filerev',
    'usemin'
  ]);

I am just trying to figure out why all of the other angular material services work fine apart from mdPanel.

Thanks

[whittssg]

I am using mdPanel as an advanced dropdown menu with sticky headers etc, when somone clicks an option it just sends the selected value back to the main controller.. Since mdDialog doesnt have any issues with my build process can mdDialog be used as a replacement? I have only used it so far for alerts so not quite sure if it can handle a custom drop down menu. Thanks EDIT I got mdMenu to do / look the same so i will stick with that.

[eduardosanzb]

hey @whittssg did u got any solution I have the same problem but with mdDialog...

[whittssg]

Hi @eduardosanzb, i never did figure it out. I ended up modifying mdmenu to do what i was trying to do with mdpanel. The funny thing was that mdpanel would initialize and i could access it but there were just certain things i couldnt do with it (like sets it position) without it giving me the error (once minified). For all other things i ended up using jsPanel since mdpanel was the only thing i couldnt get working with material (mdDialog also worked fine for me).

[apat183]

Any work around on this? Getting after minification as well. Also using ngAnnotate during grunt build.

[bradrich]

@apat183 I have added this to my current task list and hope to address it asap. Please check back soon.

[apat183]

Awesome @bradrich, let me know if I can provide anything in addition to what @whittssg provided above.