Why does Plunker give 404 errors with AngularJS?

Question

This code works fine when I run it locally but when I put it in this Plunker (http://plnkr.co/edit/RCMbxv7Peb83tRKWTMJM) I get the following looping 404 errors:

Failed to load resource: the server responded with a status of 404 (Not Found) http://run.plnkr.co/main.html
GET http://run.plnkr.co/main.html 404 (Not Found) angular.js:8521

What am I missing?

Answer 1

The accepted answer is only partially correct.

In general, url routing will work on Plunker exactly as it would work if your code were hosted in a sub directory (ie: not the root). This is important if you are using $locationProvider.html5Mode(true) as it may lead to unexpected behaviour if you want to use absolute urls (eg: /partials/template.html).

If you use one of the built-in Angular.js templates, you will notice that I have added a bit of a hack to get around the fact that previews are not hosted on subdomains:

<script>document.write('<base href="' + document.location + '" />');</script>

This takes advantage of how Angular.js' $locationProvider treats <base href=""> tags by injecting a dynamic base tag before Angular.js bootstraps. See the relative links section on: https://docs.angularjs.org/guide/$location

Answer 2

If you turn off HTML5 mode it will work fine.

Your app.js file:

// html5Mode is default to false so you could comment out or manually set it
//$locationProvider.html5Mode(true);

html5Mode requires server side configuration so I believe that is the conflict.