Can't resolve $element after minification - angularjs

Question

I've got a strange bug that only appears when running my web appliction in karaf but not on the webpack-dev-server. When running the web app from Karaf when I open the dialog, I get this error in the browser console
angular.js:14516 Error: [$injector:unpr] Unknown provider: nProvider <- n
http://errors.angularjs.org/1.6.3/$injector/unpr?p0=nProvider%20%3C-%20n
The component is responsible for displaying a table. The columns should be editable so i've implemented a stock dialog from the angular material demos. See -> https://material.angularjs.org/latest/demo/dialog and a multi select with the option to search -> https://material.angularjs.org/latest/demo/select
Here follows the code:
ctrl.editColumns = (event) => {
$mdDialog.show({
template: require('./edit-column-dialog.template.html'),
clickOutsideToClose: true,
scope: $scope,
preserveScope: true,
controller: EditColumnsDialogController
})
}
function EditColumnsDialogController ($element) {
ctrl.searchTerm = ''
ctrl.copySelectedColumns = ctrl.selectedColumns
// The md-select directive eats keydown events for some quick select
// logic. Since we have a search input here, we don't need that logic.
$element.find('input').on('keydown', (ev) => {
ev.stopPropagation()
})
}
I use $element for the reason detailed in the comment above. What I can't get my head around is that this works fine on the web pack dev server. The only difference between the settings for web pack are:
// Add build specific plugins
if (isProd) {
config.plugins.push(
// Only emit files when there are no errors
new webpack.NoEmitOnErrorsPlugin(),
// Minify all javascript, switch loaders to minimizing mode
new webpack.optimize.UglifyJsPlugin({
sourceMap: true
}),
// Copy assets from the public folder
// Reference: https://github.com/kevlened/copy-webpack-plugin
new CopyWebpackPlugin([{
from: path.join(__dirname, '/app/public')
}])
)}
Any answers are much appreciated.. or suggestions for isolating the problem!

Answer 1

Minifiers break code that uses Implicit Annotation. Instead, use $inject Property Annotation:
//USE $inject property annotation
EditColumnsDialogController.$inject = ["$element"];
function EditColumnsDialogController ($element) {
ctrl.searchTerm = ''
ctrl.copySelectedColumns = ctrl.selectedColumns
// The md-select directive eats keydown events for some quick select
// logic. Since we have a search input here, we don't need that logic.
$element.find('input').on('keydown', (ev) => {
ev.stopPropagation()
})
}
From the Docs:
Implicit Annotation
Careful: If you plan to minify your code, your service names will get renamed and break your app.
— AngularJS Developer Guide - Implicit Dependency Annotation