Angularjs templateUrl error does not find html file

Question

PROBLEM

I have a problem with the minification of my project when it calls the templateUrl on the route, I am using Grunt to generate my build. In my development environment it works correctly, only has this error in my build generated.

Research

I searched to see if it was no DI problem but it’s all right.

CODE

app js.

angular
      .module('myModule', [
        'ngResource',
        'ngRoute',
        'myModule.agenda',
        'myModule.agenda.controller',
        'myModule.agenda.services',
        'myModule.agenda.filters'
      ])
      .config(function ($routeProvider) {
        $routeProvider
            .when('/', {
                templateUrl: 'app/scripts/agenda/views/welcome.html',
                controller: 'mainCtrl'
            })
      });

Folders

• App
  • scripts
    • agenda
      • views
        • main.html
    • html app.

Answer 1

No stackoverflow in English I found a similar question.

https://stackoverflow.com/questions/17238759/angular-module-minification-bug

It says you should define the property mangle:false. To be more specific that way:

uglify: {
  options: {
    mangle: false
  },

If there is any doubt, just ask in the comments that I complement the answer.

Answer 2

DEDUCTION OF THE PROBLEM

The error occurred because it was not carrying the file. Together, Grunt made the script folder only try to concatenate the JS files and take the final file and the remaining (that would be my html) would not go in the build.

SOLUTION

My solution was to create a folder a directory before the scripts (app root) called views, where I follow the order of the modules created in the script folder.

Thus remaining: /app/views/agenda/index.html

EXTRA

I’m sure there must be other possible solutions, even in the Grantfile.js file, if you have any solutions, I will be interested to see. Thank you all for your help!

Answer 3

Understanding the problem

Angularjs Injects service dependency according to argument name when you do not specify this.

In this case, the argument $routeProvider is being minified and therefore prevented from being injected. So probably the error you are logging in is undefined is not a function.

The solution

You must call the config passing not straight to function, but a array where the values are the dependencies and the last position of the array is the Function that will use it:

Example:

.config(['$dependencia1', '$dependencia2', function($dependencia1,$dependencia2){} ]);

That way, the minification would not cause problems, because it keeps the strings in the original states. The minified file would look like this:

.config(['$dependencia1','$dependencia2',function(a,b){}]);

Where a received the injection of $dependencia1 and b received the injection of $dependencia2. If you didn’t have this array, Angular would search for registered services wherever their names were a and b

Copy 'n' Paste

One should only say explicitly which is the injection of $routeProvider specifying this in the dependency array that goes to the config:

angular
      .module('myModule', [
        'ngResource',
        'ngRoute',
        'myModule.agenda',
        'myModule.agenda.controller',
        'myModule.agenda.services',
        'myModule.agenda.filters'
      ])
      .config(['$routeProvider',function ($routeProvider) {
        $routeProvider
            .when('/', {
                templateUrl: 'app/scripts/agenda/views/welcome.html',
                controller: 'mainCtrl'
            });
      }]);