How to solve Failed to execute ‘send’ on ‘XMLHttpRequest’: Failed to load [filename]

So, the other day I was writing my AngularJS Routing Example for the WCG community and I suddenly got in a kind of trouble: I couldn’t seem to get it working!!!

My app’s critical point was that I was trying to deploy an app that included ng-view, to a browser.

By default, a browser doesn’t allow AJAX requests to files located on your local file system. This happens for security reasons. But, ng-view uses an AJAX request to load templates, so the options are:

  • Configuring your browser in order to allow local files access; (this link explains how to implement this action in Google Chrome)
  • Run your app in a local web server.
The first option is quite straightforward, so I’ll stick with the second one. I recommend users that don’t have locally a web-server, to go for an open-source solution, like http-server, which can be configured very easily.
I’m a Java lover and I have installed one distribution of Tomcat in all of my working instances, so the following demonstration is about running an Angular app to Tomcat:
  • Copy or move your app’s folder to Tomcat’s /webapps folder and execute:
  • Navigate to Tomcat’s /bin folder and execute the startup script:

  • Verify that Tomcat deployed your app:
  • Access your app from Tomcat, you should have a clear console now: