Angular ngRoute suddenly converts URL into encoded characters #!/#%2F

Question

Everything in my app was working fine until I tried to add ngAnimate, ngMaterial and ng-image-gallery. I don't know whether adding these modules is the source of the problem, but I didn't change anything else before the problem occurred.

Since then (even after I removed the dependencies from app.js and index.html) all URLs are converted to encoded characters...

Before it looked like:

http://.../app/index.html#/workshops

not it's converted to:

http://.../app/index.html#!/#%2Fworkshops

and of course nothing is found. The navigation is not working, nothing happens.

Why the hell is the URL encoded now?! Even just running index.html n the webserver gives me the following URL:

 http://.../app/index.html#!/

Did anyone have the same problem? Why is it like that? And more importantly: how do I solve this?! Thanks very much in advance.

My route config:

    'use strict';

    angular.module('myApp').config(['$locationProvider', '$routeProvider',
    function($locationProvider, $routeProvider) {

    $routeProvider
    .when('/', {
        templateUrl : 'modules/start/views/start.html',
        controller: 'StartController'
    })  

    .when('/galerie', {
        templateUrl : 'modules/galerie/views/galerie.html',
        controller: 'GalerieController'
    })
    .when('/kontakt', {
        templateUrl : 'modules/kontakt/views/kontakt.html',
        controller: 'KontaktController'
    })
    .when('/workshops', {
        templateUrl : 'modules/workshops/views/workshops.html',
        controller: 'WorkshopsController'
    })  
    ;
    }]);

ANd here how I switch the routes in navigation:

                <div class="navbar navbar-top hidden-xs">
                    <ul class="nav navbar-nav">
                        <li>
                            <a href='#/'>Start</a>
                        </li>                       
                        <li>
                            <a href='#/workshops'>Workshops</a>
                        </li>
                        <li>
                            <a href='#/galerie'>Galerie</a>
                        </li>
                        <li>
                            <a href='#/kontakt'>Kontakt & Buchung</a>
                        </li>
                    </ul>
                </div>

This is how scripts are included:

     <script src="bower_components/angular/angular.js"></script>
     <script src="bower_components/angular-route/angular-route.js"></script>
     <script src="https://use.fontawesome.com/936815fb51.js"></script>
     <script src="app.js"></script>     
     <script src="modules/config/routes.js"></script>
     <script src="modules/start/start.js"></script>
     <script src="modules/start/controllers/StartController.js"></script>
     ...

Addition The console says nothing. No problems, no errors.

Answer 1

Gosh, I just found the answer... indirectly, it had to do with adding dependencies, because I changed the used angular version from 1.58 to 1.61 - I just read that the hash prefix changed to '!'.

The Link to the answering question is here: Angular Route - Extra # in URL

The folowing line in the route config makes the router work like before:

$locationProvider.hashPrefix('');

Thanks to Arjan Einbu for answering that question in the link. That saved my day.