grunt an angular project then it errors as Cannot find Module

Question

Hi I have a problem :) I developed an angular project and it works fine in my localhost apache. I'm using angular 1.4.3 for frontend things and node.js for backend things. Now I need to use Grunt to version it. I did many config (such as that maple thing disabled.it changes all variables names such as a,b,c from indexCounter,PersonCounter,AgencyCounter and it causes some problems.) But I get an error everytime I try to run. It is like [module] cannot found. My project works on my local machine If I dont grunt it but after the grunt I take 3 files as vendor.js vendor2.js and app.js. In vendor.js I have native angular js files. In vendor2.js I have plugins. and lastly In app.js I have controllers. I'm added them in my index HTML in this order;

vendor.js vendor2.js app.js

Do you have any idea about that?

cbass · Accepted Answer · 2016-02-12 14:55:55Z

Problem: In angular you cannot minify your code without using either .$inject or array syntax.

Solution

For each controller, directive, service etc. that you add to your module, you will have to add en extra array of strings specifying the dependencies that should be injected into you service, controller etc.

Example

Using $inject property

function mainController(indexCounter,PersonCounter,AgencyCounter) {
    //Controller implementation
}
mainController.$inject=['indexCounter','PersonCounter','AgencyCounter'];

angular
    .module('mymodule')
    .controller('mainController', mainController);

Using array

var mainController;
function controller(indexCounter,PersonCounter,AgencyCounter) {
    //Controller implementation
}
mainController=['indexCounter','PersonCounter','AgencyCounter', controller];

angular
    .module('mymodule')
    .controller('mainController', mainController);

When you don't specify the dependecies in an array, angular will try to find an registered dependency based on its' parameter name. e.g. function mainController(indexCounter) {}, then angular will try to find a registered dependency called indexCounter. It works perfectly fine when the code is not minified. However, when minified the indexCounter parameter name will be changed to a shorter name, e.g. a. And when trying to find dependency a which is not registered in your app. It's gonna fail to instaciate your angular module.

Thank you so much but I already disabled that function of grunt. Now it is not change the names of the parameters. I believe there is something different. But your answer is great Thank you again.

Collectives™ on Stack Overflow

grunt an angular project then it errors as Cannot find Module

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related