Angular Template cache not working

Question

I have a project using gulp and angular. I want to click a button and a pop up containing the html to show.

In the build.js file i have the following code:

gulp.task('templates', function() {
  gulp.src(['!./apps/' + app + '/index.html', './apps/' + app + '/**/*.html'])
    .pipe(plugins.angularTemplatecache('templates.js', {
      standalone: true,
      module: 'templates'
    }))
    .pipe(gulp.dest(buildDir + '/js'));
});

in my app.js file i have:

.controller('PopupCtrl', function($scope, ngDialog) {
  $scope.clickToOpen = function () {
      ngDialog.open({ 
        template: 'templates/popup.html'
      });
  };
})

I get an error on clicking the button:

GET http://mylocalhost:3000/templates/popup.html 404 (Not Found) 

My templates.js file contains:

angular.module("templates", []).run(["$templateCache", function($templateCache) {
$templateCache.put("templates/popup.html", "my html") ...etc

Why does the template cache not recognise the call to templates/popup.html and show what is in the cache rather than looking at the 404'd URL?

Just to say what I have tried, I manually copied the template file into the directory it was looking and it found it. This is not the solution though as I want it taken from cache.

Thanks

Solution 1

You have to also specify the templates module as a dependency of your module. For example:

angular.module('myApp', ['templates', 'ngDialog'])

Hope this helps.

Solution 2

This answer is for anyone else that may have run across this issue, but they're sure they did include the dependency as the accepted answer states:

Make sure to verify the "key" you're using matches. In my scenario, the following was happening:

$templateCache.put('/someurl.html', 'some value');

but it was looking for 'someurl.html'. Once I updated my code to:

$templateCache.put('someurl.html', 'some value');

Everything started working.

Solution 3

You is one more method by which you can even remove your dependency on $templatecache.

You can use this gulp plugin which can read your routes,directives and replace the templateUrl with the template referenced in the templateUrl.

src
+-hello-world
  |-hello-world-directive.js
  +-hello-world-template.html

hello-world-directive.js:

angular.module('test').directive('helloWorld', function () {
    return {
        restrict: 'E',
        // relative path to template
        templateUrl: 'hello-world-template.html'
    };
});

hello-world-template.html:

<strong>
    Hello world!
</strong>

gulpfile.js:

var gulp = require('gulp');
var embedTemplates = require('gulp-angular-embed-templates');

gulp.task('js:build', function () {
    gulp.src('src/scripts/**/*.js')
        .pipe(embedTemplates())
        .pipe(gulp.dest('./dist'));
});

gulp-angular-embed-templates will generate the following file:

angular.module('test').directive('helloWorld', function () {
    return {
        restrict: 'E',
        template:'<strong>Hello world!</strong>'
    };
});

Solution 4

My 2 cents (coz i also banged my head on this.)

1) Ensure that you have a dependency in your main module. (if you are creating a separate module for templates).

2) Ensure that leading \ are taken care of in template urls.

3) Ensure that text casing used in file names matches with that used in template urls. (YES this one).

View more solutions

Comments

[tmanion]

Happened to me too. Darn Tootin!

[Burjua]

Upper and lower case matter too!

[jsbisht]

I was generating the '$templateCache' using gulp and the path were starting from the child folder of the actual folder referenced in 'templatesUrl'. This helped me figure out that.

[Cédric Guillemette]

I just ran into this problem and it turns out there was a space in front of the URL. 🤦

[adam0101]

In my case, I had an interceptor appending the app version to the url for cache busting. So I had to change my interceptor to not do that if the url was already loaded into the $templateCache.

[Gondy]

Thank you! You saved my day! (even 4 years later in 2018 :))