Error : AngularJs variable not defined , when running using grunt. ( zetzer )

Question

Here is the error while running GRUNT using the Terminal :

Error:

Running "zetzer:main" (zetzer) task Warning: template is not defined Use --force to continue.

Aborted due to warnings.

Code:

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-example83-production</title>
  <style>
 .slide-animate-container {
  position:relative;
  background:white;
  border:1px solid black;
  height:40px;
  overflow:hidden;
}

.slide-animate {
  padding:10px;
}

.slide-animate.ng-enter, .slide-animate.ng-leave {
  -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
  transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;

  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  display:block;
  padding:10px;
}

.slide-animate.ng-enter {
  top:-50px;
}
.slide-animate.ng-enter.ng-enter-active {
  top:0;
}

.slide-animate.ng-leave {
  top:0;
}
.slide-animate.ng-leave.ng-leave-active {
  top:50px;
}

  </style>


  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js">     
  </script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-animate.js">   
  </script>
  <script>

 (function(angular) {
 alert("hello");
angular.module('includeExample', ['ngAnimate'])
  .controller('ExampleController', ['$scope', function($scope) {
    $scope.templates =
      [ { name: 'template1.html', url: 'template1.html'},
        { name: 'template2.html', url: 'template2.html'} ];
    $scope.template = $scope.templates[0];
    $scope.name = "World";
  }]);
})(window.angular);

  </script>

</head>
<body ng-app="includeExample">
  <div ng-controller="ExampleController">
 <select ng-model="template" ng-options="t.name for t in templates">
     <option value="">(blank)</option>
 </select>
 url of the template: <code>{{template.url}}</code>
 <p>Hello, {{name}}! </p>
 <div ng-include="'template1.html'"></div>
 <div class="slide-animate-container">
    <div class="slide-animate" ng-include src="'template1.html'"></div>
 </div>
  </div>
   <div class="slide-animate-container">
    <div class="slide-animate" ng-include src="'template1.html'"></div>
 </div>
</body>
</html>

Other Info :

This code works well when directly run. ( from src folder, but I need to use it running GRUNT. )

Any help would be much appreciated.

Thanks!

I am a complete GRUNT beginner. No I haven't defined a template in the grunt task. I didn't know you need to defined AngularJs variables in the grunt tasks. I only defined the tasks needed such as zetzer, uglify, sass, etc. Can you give me a link or something on how to work with variables in grunt tasks. I am way out of my league here. Thanks so much ! — Artitude
I assume you are using github.com/brainshave/grunt-zetzer so this link should help, in your Gruntfile.js you should have a grunt.initConfig where zetner options are defined such as templates. In that github link it should give you some examples, I have not used zetzer before so I'm not certain on its usage but your error seems to refer to templates not being defined in the zetzer config. — Simon Staton
This error comes up with any variable used inside the " {{ }} ". Will look at the link and try to get around this. Thanks so much Simon ! — Artitude
Ha ! I already have the template defined as mentioned in the link. In my code, the "template" is just a variable used with the $scope. — Artitude

James Baker James Baker · Accepted Answer · 2015-03-04T16:40:35

I had the same error and for me it was because zetzer was conflicting with angularJS.

In my grunt file I changed the dot.templateSettings to reference triple curly brackets {{{ }}} for "evaluate", instead of two {{}} which is used by Angular.

doT.js documentation (which is used by zetzer) look under API heading

The line you need to check out in my code below is:

evaluate...

zetzer: {
  dev: {
    options: {
      partials: "dev/partials",
      templates: "dev/templates",
      dot_template_settings: {
        evaluate:    /\{\{\{([\s\S]+?)\}\}\}/g,
      }
    },
    files: [
      {
        expand: true,
        cwd: "dev/",
        src: ["**/*.html", "!partials/**/*.html"],
        dest: "dist/",
        ext: ".html",

      }
    ]
  },
},

Error : AngularJs variable not defined , when running using grunt. ( zetzer )

1 Answers