Question

因此，在我的角度应用程序中尝试将toastr用作全局错误通知系统时遇到了问题。这被记录为angular-toastr的问题，建议的解决方案是将所有模板推送到模板缓存中。显然这是一件好事，在阅读了原因之后，我必须同意。

我的问题是我对grunt真的很新（今天只安装了它）虽然我现在设法成功设置了我的gruntfile.js并使用grunt-angular-运行一些任务（缩小，连接等）模板对我来说是一个谜。

我已经设置了这样的gruntfile：

ngtemplates: {
    options: {
        module: 'project',
    },
    dist: {
        src: [
            'wwwroot/lib/angular-toastr/**.html'
        ],
        dest: 'wwwroot/js/templates.js'
    }
}

但我生成的模板文件为空。我认为这是因为脚本是在JS文件中创建的。有谁知道我怎么能访问它们所以我可以将它们添加到缓存中？

Answer 1

我猜你的源文件没有被“看到”。这对我有用，具有以下配置，我使用类似的结构，其输出位于 wwwroot / lib 文件夹中。我也在使用cwd（源目录选项）。确保在执行grunt任务之前将模板复制到wwwroot文件夹。我有其他grunt任务'清理' wwwroot / lib 文件夹，所以我将源html存储在另一个文件夹中。如果你不这样做，这也可能有所帮助。

如果所有其他方法都失败了，请运行详细-V（就像alex说的那样）。任务源文件位于以下位置。您还可以在此文件中添加其他调试以进一步解决问题。

node_modules \咕噜-角模板\任务\角templates.js

this.files.forEach(function(file) {
  if (!file.src.length) {
    grunt.log.warn('No templates found');
  }

这是我们使用的设置。

项目结构

来源

project / assets / templates / admin / partials /（这里是html文件）

输出

project / wwwroot / lib / templates（这里是html文件）

Grunt任务

   ngtemplates:  {
        app:        {
            cwd:      'assets/templates',
            src:      '**/partials/*.html',
            dest: 'assets/templates/partials.js',
            options: {
                module: 'cms.admin'
            }
        }
    },

输出生成

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

您的问题可能在于您的src：wwwroot / lib / angular-toastr / **。html

也许尝试使用这个grunt插件，它易于使用并做同样的事情。 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

尝试单独运行任务：grunt ngtemplates -v。 -v参数代表详细模式。您应该获取已读取的文件名。如果没有正在读取的文件，则可能存在文件路径问题。

Answer 4

为了简单起见或者为了避免兔子整体，你也可以手动将模板推送到缓存中，以便测试toastr问题。

转到http://www.accessify.com/tools-and-wizards/developer-tools/html-javascript-convertor/
将html转换为javascript

使用以下代码中的输出手动缓存。

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

grunt-angular-templates缓存所有模板

4 个答案:

项目结构

来源

输出

Grunt任务

输出生成