'Not Found' when routeProvider has id

Question

I set my routeProvider as such:

routeProvider.when('/', {templateUrl: 'views/index.html', controller: 'IndexCtrl'});
  // $routeProvider.when('/ayat/:surah/:from/:to', {templateUrl: 'views/quran.html', controller: 'AyatCtrl'});
  $routeProvider.when('/:id/:range?', {templateUrl: 'views/quran.html', controller: 'QuranCtrl'});
  $routeProvider.when('/search?', {templateUrl: 'views/search.html', controller: 'SearchCtrl'});
  $routeProvider.when('/about', {templateUrl: 'views/about.html'});
  $routeProvider.when('/contact', {templateUrl: 'views/contact.html'});
  $routeProvider.when('/sorry', {templateUrl: 'views/sorry.html'});
  $routeProvider.otherwise({redirectTo: '/'});
  $locationProvider.html5Mode(true);
})

Whenever I refresh the page, I get 'Not Found'

I didn't run into this problem when previously I had

$routeProvider.when('/:extension/:id/:range?', {templateUrl: 'views/quran.html', controller: 'QuranCtrl'});
$locationProvider.html5Mode(false);

will have to set up virtual directory(s) on server using htaccess , web.config or whatever is applicable to your server — charlietfl, Jul 05 '14 at 18:20
I am using the angular-seed and starting the server with `npm start` no idea where that is or if there is a htaccess — Mohamed El Mahallawy, Jul 05 '14 at 18:20
not hard to find out how in a web search ....`node virtual directory` — charlietfl, Jul 05 '14 at 18:22
otherwise just run with the hash using `false` for `html5Mode` — charlietfl, Jul 05 '14 at 18:24
I did the search, came to this: http://stackoverflow.com/questions/10618418/how-can-i-implement-virtual-directories-with-node-js-and-express No idea how to configure this stuff — Mohamed El Mahallawy, Jul 05 '14 at 18:39

score 0 · Answer 1 · answered Oct 07 '14 at 21:40

the package.json file in the seed project specifies that npm start just runs http-server, which is a node module. It didn't seem to handle html5mode correctly, because in order to handle that, it needs to redirect all requests that aren't for a specific file to your index.html file. You can make a custom node server instead that is pretty simple and just serves the correct files, and allows for refreshing your browser and everything.

Check out this simple example

add that at the root of your application (same level as app folder) and then change package.json by changing the start property of scripts to "start": "node server.js"

the method that determines whether or not to route the request to index.html or not is this one

function isSpecificFile(path){
  var regex = /^\/(bower_components|css|img|js|partials)\/.*/;
  return regex.test(path);
}

If you have a request like localhost:8000/foo, that needs to be done in angular, so index.html will be loaded and angular will load the specific files with requests of the form '/js/controllers/foo_ctrl.js', which the server won't route to index.html.

I would look for a more robust solution for anything production like though.

'Not Found' when routeProvider has id

1 Answers1