AngularJS error templateUrl can not find html file

2

PROBLEM

I'm having a minification problem in my project when it calls the templateUrl in the route, I'm using grunt to generate my build. In my development environment it works fine, it only has this error in my build.

Search

I searched to see if it was no ID problem but everything is correct.

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
      • app.html
asked by anonymous 24.07.2014 / 23:32

3 answers

0

Understanding the problem

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

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

The solution

You should call config passing not directly to function , but a array where values are the dependencies and the last position of the array is the function that will use them:

Example:

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

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

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

Where a received injection of $dependencia1 and b received injection of $dependencia2 . If you do not have this array, Angular would look for registered services where their names were a and b

Copy 'n' Paste

You should just say explicitly what the injection of $routeProvider is by 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'
            });
      }]);
    
25.07.2014 / 13:25
2

In stackoverflow in English I found a similar question.

link

In it, it says that you should set the mangle:false property. To be more specific, this way:

uglify: {
  options: {
    mangle: false
  },

If there are any questions, just ask in the comments that I supplement the answer.

    
25.07.2014 / 15:08
0

PROBLEM DEDUCTION

The error occurred because it was not taking the .html file together, the grunt made the script folder only concatenate the JS files and take the final file and the rest (which would be my html) would not go in 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.

Looking like this: /app/views/agenda/index.html

EXTRA

I'm sure they should have other possible solutions even by tinkering with the Grantfile.js file, if they have any solutions I'll be interested to see. Thank you all for your help!

    
25.07.2014 / 21:36