Using gulp-angular-templatecache to combine HTML into template.js, getting $injector Module Unavailable error

Question

I'm using gulp-angular-templatecache, to grab all my partial HTML template files and combined them into 1 template.js file.

The first part I was able to complete, I can run my Gulp task and it creates templates/templates.js.

templates.js:

angular.module("templates").run(["$templateCache", function($templateCache) {$templateCache.put("beta.html","<div class=\"login-container\" ng-controller=\"BetaCtrl as beta\">\n    <section class=\"login-form-block\">\n        <header>\n            <div class=\"tickertags-logo-big\"></div>\n            <h1>Welcome to the TickerTags beta! Enter the email address where your beta invitation was sent below. We will send you an email with your temporary password.</h1>\n        </header>\n\n        <div class=\"login-form\">\n\n            <form name=\"loginForm\" ng-submit=\"beta.beta(credentials)\" novalidate>\n\n                <div class=\"login-alert\" ng-class=\"{ hideLoginMsg: beta.hideMessage == true }\">{{ beta.message }}</div>\n\n                <input type=\"email\"\n                       id=\"email\"\n                       placeholder=\"Email\"\n                       name=\"email\"\n                       ng-model=\"credentials.email\">\n\n                <button type=\"submit\" class=\"login-btn\">Email Password</button>\n            </form>\n\n            <p class=\"terms-of-use-line\">By signing up you agree to our <a href=\"assets/files/tickertags-terms-of-use.pdf\" target=\"_blank\">Terms of Use</a> and <a href=\"assets/files/privacypolicy.pdf\" target=\"_blank\">Privacy Policy</a></p>\n\n        </div>\n    </section>\n</div>\n");

Now I've linked to the templates.js file correctly in my index:

<script src="templates/templates.js"></script> <<--
<script src="authentication/authFactory.js"></script>
<script src="help/helpController.js"></script>
etc...

And I've included it in the main app module:

var app = angular.module('tickertags', [
    'ui.router',
    'templates',  // <--
    'authFactory',
    'betaController',
    'passResetController',
    'loginController',
    'apiFactory',
    'scopeFactory',
    etc...

Yet getting this error still: https://docs.angularjs.org/error/$injector/nomod?p0=templates

Error: $injector:nomod Module Unavailable

Ideas on why I'm seeing that?

Preston Van Loon Preston Van Loon · Accepted Answer · 2015-07-15T18:55:00

Because that module wasn't declared properly.

You need to declare the templates module somewhere in your app like this: angular.module("templates", []); Or use options.standalone = true in the gulp plugin

From the documentation:

Note: this plugin will not create a new AngularJS module by default, but use a module called templates. If you would like to create a new module, set options.standalone to true.

Using gulp-angular-templatecache to combine HTML into template.js, getting $injector Module Unavailable error

1 Answers