Menu
Ok, I'm fairly new to AngularJS, so please don't laugh if this is easy. I'm attempting to follow Todd Motto's Opinionated AngularJS Styleguide for Teams. I know it doesn't look much like it since I tried to reduce the code. I'm using Grunt to uglify my code. If I turn mangling off, it works. Otherwise, I get the error:
Error: [$injector:unpr] Unknown provider: aProvider <- a
I know this is because the name is getting mangled, so it doesn't know what to map it to, but I have no idea how/where to inject the correct name. I've tried to track it down. I think it is when we try to resolve the route, and the DataService is being injected, and because there is no inject for our DataService, I think it gets mangled.
I've tried to reduce my code down as much as possible. This also relies on angular and angular-route, as well as a file called data.json (which could be anything, it doesn't really matter). Then just run grunt debug.
Please let me know if I missed anything and thank-you for your time.
├── data.json
├── gruntfile.js
├── index.html
└── js
├── app
│ └── app.js
└── vendor
├── angular-route.js
└── angular.js
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
debugMine: {
options: {
wrap: true,
sourceMap: true,
mangle: false,
},
files: { 'js/production.min.js': [
'js/app/app.js',
]}
},
debugVendor: {
files: { 'js/vendor.min.js': [
'js/vendor/angular.js',
'js/vendor/angular-route.js',
]}
}
},
connect: {
server: {
options: {
port: 8000,
}
}
},
watch: {
myscripts: {
files: ['js/app/**'],
tasks: ['uglify:debugMine'],
},
options: {
livereload: true,
spawn: false
},
vendorscripts: {
files: ['js/vendor/**'],
tasks: ['uglify:debugVendor'],
}
}
});
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('debug',
'Create a debug build of the code',
[
'uglify:debugMine',
'uglify:debugVendor',
'connect:server',
'watch',
]);
};
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8">
<title>Mangled Names Test</title>
</head>
<body>
<h2>I'm above the content</h2>
<hr>
<!-- Begin Content -->
<div ng-view></div>
<!-- End Content -->
<hr>
<h2>I'm below the content</h2>
<!-- Begin Release Scripts -->
<script src='js/vendor.min.js'></script>
<script src='js/production.min.js'></script>
<!-- End Release Scripts -->
</body>
</html>
console.log('Define functions that make up app');
function DataService($http) {
console.log('Setting up data service');
var DataService = {};
DataService.getData = function() {
console.log('In DataService.getData, getting data');
return $http.get('/data.json');
};
return DataService;
}
function DocumentCtrl(data) {
console.log('In DocumentCtrl, check data');
var self = this;
self.data = data;
}
DocumentCtrl.resolve = {
data: function(DataService) {
console.log('Call DataService.getData()');
return DataService.getData();
},
}
function RouteConfig($routeProvider) {
console.log('Define routes');
$routeProvider
.when('/', {
template: "<h4>I'm in the content and above the data</h4><hr>{{docCtrl.data}}<hr><h4>I'm in the content and below the data</h4>",
controllerAs: 'docCtrl',
controller: 'DocumentCtrl',
resolve: {
data: function(DataService) {
console.log('Call DataService.getData()');
return DataService.getData();
},
}
})
.otherwise({ redirectTo: '/' })
}
console.log('Define module');
angular
.module('app', ['ngRoute'])
.factory('DataService', ['$http', DataService])
.controller('DocumentCtrl', ['data', DocumentCtrl])
.config(['$routeProvider', RouteConfig]);
761
Adding mangle:false to uglify.debugVendor.options will probably fix it. If not then you probably need to compile vendor and your files together so uglify can use them in the same scope.
uglify: {
// ...
debugVendor: {
options: {
mangle: false,
},
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
