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

Answer 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.

Answer 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.

Answer 3

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

You can use this gulp plugin[ https://github.com/laxa1986/gulp-angular-embed-templates] 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>'
    };
});

Answer 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 ).