CODEWITHSUNDEEP
angularjstemplatesgruntjs
r3plica
r3plica

Reputation: 13367

grunt-angular-templates cache all templates

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?

Upvotes: 1

Views: 6615

Answers (4)

Rentering.com
Rentering.com

Reputation: 399

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.

  1. Go to http://www.accessify.com/tools-and-wizards/developer-tools/html-javascript-convertor/
  2. Convert the html to javascript

  3. 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 );
  }]);

Upvotes: -1

yeouuu
yeouuu

Reputation: 1913

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'
    },
  },
})

Upvotes: 1

Rentering.com
Rentering.com

Reputation: 399

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>"
  );

}]);

Upvotes: 1

Alex Stoicuta
Alex Stoicuta

Reputation: 902

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.

Upvotes: 0

Related Questions