$injector:modulerr when including ['templates']

[sahat]

I followed the documentation to include templates.js in my app module:

angular.module('MyApp', ['ngRoute', 'ngAnimate', 'ngProgress', 'ngDisqus', 'ngTable', 'templates'])

templates.js

angular.module("MyApp", []).run(["$templateCache", function($templateCache) {$templateCache.put("views/404.html","<link href=\'http://fonts.googleapis.com/css?family=Monoton\' rel=\'stylesheet\'\n      type=\'text/css\'>\n<style>\n  body {\n    background: #3D4452;\n  }\n\n  .error {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    height: 150px;\n    width: 500px;\n    margin: -175px 0 0 -250px;\n    padding: 20px;\n    font-size: 75px;\n    font-family: \'Monoton\', cursive;\n    text-align: center;\n    text-transform: uppercase;\n    color: #e4545b;\n  }\n\n  .error p {\n    margin: 0;\n    text-shadow: 0 0 180px #e4545b, 0 0 70px #ff003e, 0 0 12px #ff3223;\n\n  }\n\n  #error {\n    color: #fff;\n    text-shadow: 0 0 200px #812eff, 0 0 80px #9982d8, 0 0 10px #bb4eff;\n  }\n</style>\n\n<div class=\"error\">\n  <p id=\"error\">E<span>r</span>ror</p>\n\n  <p id=\"code\">4<span>0</span><span>4</span></p>\n</div>");
$templateCache.put("views/contribute.html","<div class=\"container\">\n  <h3>Contributing Guidelines</h3>\n\n  <p>\n    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer leo est,\n    tincidunt placerat elit eu, feugiat rhoncus odio. Maecenas augue sem,\n    eleifend\n    et sapien sodales, semper mattis odio. Interdum et malesuada fames ac ante\n    ipsum primis in faucibus. Ut vestibulum nisi tincidunt, elementum quam nec,\n    dapibus eros. Quisque at augue sed dui fringilla tempus imperdiet eu nulla.\n    Etiam euismod est augue, laoreet eleifend lorem consequat porta. Proin\n    blandit\n    ante volutpat augue adipiscing, id convallis sem vulputate. Nullam et congue\n    sapien, nec euismod purus. Etiam suscipit eleifend libero, quis tempus lorem\n    viverra nec. Suspendisse ultrices nisi eu erat tristique, sed interdum lorem\n    rutrum. Nulla dapibus, eros vel iaculis rhoncus, quam risus elementum magna,\n    ac tincidunt metus nunc ac lorem. Donec placerat tristique ipsum. Vestibulum\n    hendrerit tristique nisl, eget pulvinar magna aliquam ut. Nam vulputate\n    augue\n    sem, eget feugiat mauris molestie at. Aliquam erat volutpat.\n  </p>\n\n  <h3>Top Contributors</h3>\n  <table class=\"table\">\n    <tr ng-repeat=\"user in contributors\">\n      <td class=\"col-xs-1\"><img src=\"{{ user.avatar_url }}\"></td>\n      <td><a href=\"{{ user.html_url }}\">{{ user.login }}</a></td>\n      <td>{{ user.contributions }} commits</td>\n    </tr>\n  </table>\n</div>");
$templateCache.put("views/detail.html","<div class=\"jumbotron\">\n    <h1>{{ post.title }}</h1>\n  <p>{{ post.description }}</p>\n</div>\n\n<div class=\"container\">\n  <div scroll markdown file=\"{{ post.file }}\"></div>\n\n\n  <i class=\"text-muted\">Last updated {{ lastUpdated }}</i>\n\n  <div disqus=\"post.file\"></div>\n</div>\n\n<a href=\"https://github.com/sahat/fullstack/edit/gh-pages/posts/{{ post.file }}\"\n   class=\"edit-on-github\"><i class=\"fa fa-file-text-o\"></i> Improve this doc</a>\n");
$templateCache.put("views/feedback.html","<div class=\"container\">\n  <br/>\n\n  <p><i class=\"fa fa-comments\"></i> If you have comments and/or suggestions, send me a message at\n    <a href=\"mailto:sahat@me.com\">sahat@me.com</a>.</p>\n  <hr/>\n  <p>For questions regarding a particular post,\n    plese open a new <a href=\"https://github.com/sahat/jsrecipes/issues\">GitHub Issue</a>.</p>\n</div>");
$templateCache.put("views/main.html","<div class=\"jumbotron\">\n  <h1>JS Recipes {{ title }}</h1>\n\n  <p>Description placeholder, update later with a more meaningful website\n    description.</p>\n</div>\n<div class=\"social-bar\">\n  <div class=\"container\">\n    <!--GitHub Star Button-->\n    <iframe\n      src=\"http://ghbtns.com/github-btn.html?user=sahat&repo=jsrecipes&type=watch&count=true\"\n      allowtransparency=\"true\" frameborder=\"0\" scrolling=\"0\" width=\"107\"\n      height=\"20\"></iframe>\n\n    <!--Facebook Like Button-->\n    <iframe\n      src=\"//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fjsrecipes.org&amp;width&amp;layout=button_count&amp;action=like&amp;show_faces=false&amp;share=false&amp;height=21&amp;appId=621491837925521\"\n      scrolling=\"no\" frameborder=\"0\"\n      style=\"border:none; overflow:hidden; width:107px; height:21px;\"\n      allowTransparency=\"true\"></iframe>\n\n    <!--Twitter Share Button-->\n    <a href=\"https://twitter.com/share\" class=\"twitter-share-button\" data-url=\"http://jsrecipes.org\" data-via=\"EvNowAndForever\">Tweet</a>\n    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?\'http\':\'https\';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+\'://platform.twitter.com/widgets.js\';fjs.parentNode.insertBefore(js,fjs);}}(document, \'script\', \'twitter-wjs\');</script>\n\n    <!--Google +1 Button-->\n    <script type=\"text/javascript\" src=\"https://apis.google.com/js/platform.js\"></script>\n    <div class=\"g-plusone\" data-size=\"medium\" data-href=\"http://jsrecipes.org\"></div>\n  </div>\n</div>\n\n<div class=\"container\">\n\n  <h2><i class=\"fa fa-hdd-o\"></i> Backend</h2>\n  <hr/>\n\n  <div class=\"panel panel-success\">\n    <div class=\"panel-heading\">\n      <h3 class=\"panel-title\">Beginner</h3>\n    </div>\n    <div class=\"list-group\"\n         ng-repeat=\"post in posts.backend.beginner | orderBy:\'title\'\">\n      <a href=\"#!/backend/{{ post.slug }}\" class=\"list-group-item\">{{ post.title\n        }}</a>\n    </div>\n  </div>\n\n  <div class=\"panel panel-warning\">\n    <div class=\"panel-heading\">\n      <h3 class=\"panel-title\">Intermediate</h3>\n    </div>\n    <div class=\"list-group\"\n         ng-repeat=\"post in posts.backend.intermediate | orderBy:\'title\'\">\n      <a href=\"#!/backend/{{ post.slug }}\" class=\"list-group-item\">{{ post.title\n        }}</a>\n    </div>\n  </div>\n\n  <div class=\"panel panel-danger\">\n    <div class=\"panel-heading\">\n      <h3 class=\"panel-title\">Advanced</h3>\n    </div>\n    <div class=\"list-group\"\n         ng-repeat=\"post in posts.backend.advanced | orderBy:\'title\'\">\n      <a href=\"#!/backend/{{ post.slug }}\" class=\"list-group-item\">{{ post.title\n        }}</a>\n    </div>\n  </div>\n\n  <h2><i class=\"fa fa-html5\"></i> Frontend</h2>\n  <hr/>\n\n  <div class=\"panel panel-success\">\n    <div class=\"panel-heading\">\n      <h3 class=\"panel-title\">Beginner</h3>\n    </div>\n    <div class=\"list-group\"\n         ng-repeat=\"post in posts.frontend.beginner | orderBy:\'title\'\">\n      <a href=\"#!/frontend/{{ post.slug }}\" class=\"list-group-item\">{{\n        post.title }}</a>\n    </div>\n  </div>\n\n  <div class=\"panel panel-warning\">\n    <div class=\"panel-heading\">\n      <h3 class=\"panel-title\">Intermediate</h3>\n    </div>\n    <div class=\"list-group\"\n         ng-repeat=\"post in posts.frontend.intermediate | orderBy:\'title\'\">\n      <a href=\"#!/frontend/{{ post.slug }}\" class=\"list-group-item\">{{\n        post.title }}</a>\n    </div>\n  </div>\n\n  <div class=\"panel panel-danger\">\n    <div class=\"panel-heading\">\n      <h3 class=\"panel-title\">Advanced</h3>\n    </div>\n    <div class=\"list-group\"\n         ng-repeat=\"post in posts.frontend.advanced | orderBy:\'title\'\">\n      <a href=\"#!/frontend/{{ post.slug }}\" class=\"list-group-item\">{{\n        post.title }}</a>\n    </div>\n  </div>\n\n  <h2><i class=\"fa fa-star\"></i> General</h2>\n  <hr/>\n\n  <div class=\"panel panel-primary\">\n    <div class=\"panel-heading\">\n      <h3 class=\"panel-title\">Best Practices</h3>\n    </div>\n    <div class=\"list-group\" ng-repeat=\"post in posts.general | orderBy:\'title\'\">\n      <a href=\"#!/general/{{ post.slug }}\" class=\"list-group-item\">{{ post.title\n        }}</a>\n    </div>\n  </div>\n\n</div>\n\n\n");}]);

I tried including it manually by placing it inside .run, it works, so there is nothing wrong with the templates.js.

I am getting this error which is probably because I am doing something wrong with Angular module system:

Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.3.0-beta.5/$injector/modulerr?p0=MyApp&p1=Err…ularjs.org%2F1.3.0-beta.5%2F%24injector%2Fmodulerr%3Fp0%3Dtemplates%26p1%3...<omitted>...4) 

Gulp Task

gulp.task('templates', function () {
  gulp.src('views/**/*.html')
    .pipe(templateCache({ root: 'views', module: 'MyApp' }))
    .pipe(gulp.dest('scripts'));
});

[miickel]

There is no need to add templates as a dependency unless you use the standalone option (use this if you want to create a new angular module for the templates).

Just remove the dependency when you create the MyApp module and it should work fine.

[sahat]

Thanks. I solved the problem by including templates.js in my index.html.

<script src="scripts/app.js"></script>
<script src="scripts/templates.js"></script>
<script src="scripts/controllers/main.js"></script>
<script src="scripts/directives/markdown.js"></script>
<script src="scripts/directives/scroll.js"></script>
<script src="scripts/services/posts.js"></script>
<script src="scripts/services/github.js"></script>