CODEWITHSUNDEEP
angularjswindowsyeoman
Frank Bryce
Frank Bryce

Reputation: 8456

Yeoman Directive Template Not Found

I have an angular website that I'm developing with Yeoman. My site works great when I'm iterating during development. When I go to deploy the minified, uglified, versionified site after development and I got the following error while loading a directive template in the console when the site loaded.

Error: [$compile:tpload] Failed to load template: views/template_name.html (HTTP status: 404 Not Found)

I'm using Windows 7 with the all of the yeoman web client tool set (grunt, npm, bower, compass, etc.).

Upvotes: 1

Views: 522

Answers (1)

Frank Bryce
Frank Bryce

Reputation: 8456

The reason for this error was that windows files are NOT case sensitive, and obviously javascript strings ARE. My solution was to make sure the case of my templateUrl field in my directives matched exactly with the case of the file in my views folder.

Explanation:

Yeoman does this great thing where it will create an angularjs template cache for you during it's minification/uglification/versionification/deployment process in the minified javascript file. It finds your templates referenced from your templateUrls and bundles them up into plain text in a javascript file, so that you don't have to do anything and it just works! The problem I ran into is that the template cache is indexed with the name of the file in the templateUrl field in my directive.

In development mode, node loads up the template from the file on the server (on my windows machine) and this load is case insensitive. In the so-called "dist" mode with this template cache, this templateUrl lookup is now case sensitive.

My solution was to make sure the case of my templateUrl field matched exactly with the case of the file in my views folder.

Upvotes: 2

Related Questions