Failed To Load Template Issue - angularjs

Question

Using AngularJS-1.6.5 & Angular-ui-router-1.0.6 && Gulp-3.9.1
I'm having this absolutely annoying issue. I have an angular app that seems to build fine but when I run gulp-connect to run it, I keep getting failed to load template errors in this order:
vendor.js:14803 Error: [$compile:tpload] Failed to load template: app/auth/views/login.tpl.html (HTTP status: undefined undefined)
vendor.js:34081 Transition Rejection($id: 0 type: 6, message: The transition errored, detail: Error: [$compile:tpload] Failed to load template: app/auth/views/login.tpl.html (HTTP status: undefined undefined)
Error: [$compile:tpload] Failed to load template: app/auth/views/login.tpl.html (HTTP status: undefined undefined)
If I run my gulp build process and then use something like httpster to provide the server, the page comes up fine with no error. However, when I add gulp-connect to my build process:
gulp.task("connect",["css", "vendor", "js", "watch", "webWorkers"], function
() {
connect.server({
port: 8888
});
});
I get the errors above.
This was working just a day ago and for whatever reason, even previous versions that worked are no longer working either. I've tried redirecting to another template, verified that all entries are in template cache, tried retrieving a file that was on network instead of the template cache, uninstall/reinstalling gulp-connect and nothing has worked. I'm just completely stumped at this point and need to figure something out soon for the sake of my sanity.
Any thoughts would be greatly appreciated.

Answer 1

Goodness. After a bunch of trial and error, I finally figured out the issue. The issue was actually with an http interceptor that I was configuring with a token that was retrieved from local storage. The token retrieved from local storage was corrupt or invalid in some way (havent figured this issue out yet) and it was silently erroring out without bubbling the error up.
I wrapped the local storage read method in a try catch and now the templates are loading again.
Man I wasted so much time on this, hopefully this helps someone else out.

Answer 2

In my case, it it was a missed return config; statement when I add an interceptor to my app.
app.factory('loadingInterceptor', [
'$rootScope',
function ($rootScope)
{
return {
request: function (config)
{
var loadingEl = $(".loading-element");
if (loadingEl)
{
showLoading(loadingEl, true);
}
// return config;
},
response: function (response)
{
var loadingEl = $(".loading-element");
if (loadingEl) {
showLoading(loadingEl, false);
}
}
};
}
]);
hope this will help someone.

Answer 3

This also got me going for a while. In my case it was adding my view to the anonymousEndpoints config section.
anonymousEndpoints: ['clientapp/modules/login/login.view.html'],
adalProvider.init({
instance: 'https://*.microsoftonline.com/',
tenant: '*.onmicrosoft.com',
clientId: 'Some-long-guid',
anonymousEndpoints: ['clientapp/modules/login/login.view.html'],
extraQueryParameter: 'nux=1',
},$httpProvider);
Hope it helps someone down the road.