AngularJS $routeProvider doesn't route properly

Question

So I'm new to Angular and trying to figure out how multiple routes can lead to the same view/templateUrl and controller. Here is what I've written:

angular
  .module('mwsApp', [
    'ngAnimate',
    'ngCookies',
    'ngResource',
    'ngRoute',
    'ngSanitize',
    'ngTouch',
    'ui.bootstrap'
  ])
  .config(function ($routeProvider, $locationProvider) {
    // debugger
    $routeProvider
      .when('/', {
        templateUrl: 'index.html',
        controller: 'MainCtrl as vm',
      })
      .when('/rika', {
        templateUrl: 'index.html',
        controller: 'MainCtrl as vm',
      })
      // .otherwise({
      //   redirectTo: '/'
      // });

      $locationProvider.html5Mode(true).hashPrefix("!");
  });

Issue: Currently, if I go to "localhost:9000/" it shows me the correct version, but if I go to "localhost:9000/rika" it gives me "Cannot get /rika".

Debugging: I've narrowed down the problem to html5Mode. I'm trying to get rid of the #! that Angular adds automatically onto the URL, but when I do that, the error pops up.

Appreciate anyone's input!

Answer 1

You cant get rid of # in local development so you need to comment this line

$locationProvider.html5Mode(true).hashPrefix("!");

But when you're on some server on production then uncomment and use it to remove the #

otherwise you'll keep getting not get error on reloads in local development