grunt-angular-templates cache all templates - angularjs

Question

So I ran into an issue when trying to use toastr as a global error notification system in my angular application.
This was logged as an issue with angular-toastr and the proposed solution was to push all templates into the templatecache. Apparently this is a good thing to do and after reading up on why, I have to agree.
My problem is that I am really new to grunt (only just installed it today) and although I have now managed to successfully set up my gruntfile.js and run some tasks (minification, concatination, etc) using grunt-angular-templates is a mystery to me.
I have set up my gruntfile like this:
ngtemplates: {
options: {
module: 'project',
},
dist: {
src: [
'wwwroot/lib/angular-toastr/**.html'
],
dest: 'wwwroot/js/templates.js'
}
}
But my templates file that is generated is empty.
I assume this is because scripts are creating in the JS files.
Does anyone know how I can get access to the them so I can add them to the cache?

Answer 1

I would guess that your source files are not being 'seen'. This worked for me with the following configuration and I am using a similar structure where the output is in a wwwroot/lib folder. I am also using the cwd (source directory option). Make sure that the templates are copied to the wwwroot folder before the grunt task is executed. I have other grunt tasks that 'clean' the wwwroot/lib folder so I store my source html(s) in another folder. That may also help if you are not doing that.
If all else fails, run in verbose -V (like alex said). The task source file is in the following location. You can also add additional debug in this file to further trouble shoot.
node_modules\grunt-angular-templates\tasks\angular-templates.js
this.files.forEach(function(file) {
if (!file.src.length) {
grunt.log.warn('No templates found');
}
This is the setup we use.
Project structure
Source
project/assets/templates/admin/partials/(html files here)
Output
project/wwwroot/lib/templates(html files here)
Grunt Task
ngtemplates: {
app: {
cwd: 'assets/templates',
src: '**/partials/*.html',
dest: 'assets/templates/partials.js',
options: {
module: 'cms.admin'
}
}
},
The Output Generates
angular.module('cms.admin').run(['$templateCache', function($templateCache) {
'use strict';
$templateCache.put('Admin/partials/navmenu.template.html',
"<nav class=\"navbar navbar-default navbar-fixed-top\">\r" +
"</nav>"
);
}]);

Answer 2

Your problem probably lies with your src: wwwroot/lib/angular-toastr/**.html
Maybe try using this grunt plugin, it's easy to use and does the same thing.
https://github.com/karlgoldstein/grunt-html2js
grunt.initConfig({
html2js: {
options: {
// custom options, see below
},
main: {
src: ['src/**/*.tpl.html'],
dest: 'tmp/templates.js'
},
},
})

Answer 3

Try running the task individually like this: grunt ngtemplates -v. The -v argument stands for verbose mode. You should get the filenames that have been read. If there are no files being read, you might have a file path problem.

Answer 4

For simplicity or to avoid the rabbit whole, you can also manually push the template to the cache so you can test the toastr issue.
Go to http://www.accessify.com/tools-and-wizards/developer-tools/html-javascript-convertor/
Convert the html to javascript
Use the output in the following code to cache manually.
var strVar = "";
strVar += "";
strVar += "<div class=\" container-fluid wrapper-md\">";
strVar += " <h3>Title<\/h3>";
strVar += " <div id=\"markupArea\"> <\/div>";
strVar += " ";
strVar += "<\/div>";
strVar += "";
angular.module('cms.admin').run(['$templateCache', function($templateCache) {
'use strict';
$templateCache.put('<CacheKEy>',strVar );
}]);