Category Archives: angular-routing

Remove the # from my URL when I use AngularJS Routing

I spent hours to resolve this issue, the questions was asked here:

Removing the fragment identifier from AngularJS urls (# symbol)

, but I got another issue

I already did these steps:

1-use of $locationProvider.html5Mode(true);

app.config(function($routeProvider, $locationProvider) {
$routeProvider
.when("/", {
    templateUrl : "pages/home.php"
})
.when("/services/electronic-design", {
    templateUrl : "pages/services/electronic-design.php"
})
.when("/contact-us", {
    templateUrl : "pages/contact-us.php"
})
.otherwise({ redirectTo: '/' });


$locationProvider.html5Mode(true);
});

2- In my html head section, I changed the base URL

<base href="/">

So the # was successfully removed from my URL, but when I reload my page using F5 I got an error 404 page not found!

to fix this I did the following step

3- I created the file .htaccess in my root folder and I included this code:

RewriteEngine on
# Don't rewrite files or directories
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]
# Rewrite everything else to index.html to allow html5 state links
RewriteRule ^ index.php [L]

but this causes this issue screen shot

Angular $routeProvider.html5Mode route crashes after manual refresh

After enabling $locationProvider.html5Mode(true); and <base href="/" /> in the index.html routes began crashes after manual reload.

Looking up for solutions I found that .htaccess rules will fix this problem, but different configurations didn't help.

Maybe this is because my index.html is in the subdirectory /views/index.html

.htaccess:

Options +FollowSymLinks

<ifModule mod_rewrite.c>
    RewriteEngine On
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_URI} !index
    RewriteRule (.*) index.html [L] # /views/index.html doesn't work as well
</ifModule>

route config

app.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
    $locationProvider.html5Mode(true);

    $routeProvider
        .when('/', {
            templateUrl: 'home.html',
            controller: 'AddTaskCtrl',
            controllerAs: 'AddTask'
        })
        .when('/chat', { //this route breaks on manual refresh  
            templateUrl: 'chat.html',
            controller: 'ChatCtrl',
            controllerAs: 'chat'
        })
}]);

Angular $routeProvider.html5Mode route crashes after manual refresh

After enabling $locationProvider.html5Mode(true); and <base href="/" /> in the index.html routes began crashes after manual reload.

Looking up for solutions I found that .htaccess rules will fix this problem, but different configurations didn't help.

Maybe this is because my index.html is in the subdirectory /views/index.html

.htaccess:

Options +FollowSymLinks

<ifModule mod_rewrite.c>
    RewriteEngine On
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_URI} !index
    RewriteRule (.*) index.html [L] # /views/index.html doesn't work as well
</ifModule>

route config

app.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
    $locationProvider.html5Mode(true);

    $routeProvider
        .when('/', {
            templateUrl: 'home.html',
            controller: 'AddTaskCtrl',
            controllerAs: 'AddTask'
        })
        .when('/chat', { //this route breaks on manual refresh  
            templateUrl: 'chat.html',
            controller: 'ChatCtrl',
            controllerAs: 'chat'
        })
}]);

remove # sign from URL in angularJS app with Apache server

I use Apache server in my PC. I read some tutorials for remove # sign from URL in angularJS app. Apache server replace all files of directive into index.html. while file name is same but it's content replace with index.html file content. please help me out. I add some code into C:\xampp\apache\conf\httpd.conf

# <VirtualHost> definition.  These values also provide defaults for
<VirtualHost *:8000>
    ServerName localhost

    DocumentRoot "C:/xampp/htdocs/googleSignin/"

    <Directory "C:/xampp/htdocs/googleSignin/">
        RewriteEngine On  
  # If an existing asset or directory is requested go to it as it is
  RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
  RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
  RewriteRule ^ - [L]

  # If the requested resource doesn't exist, use index.html
  RewriteRule ^ /index.html
    </Directory>
</VirtualHost>
# any <VirtualHost> containers you may define later in the file.

enter image description here look into figure angular.min.js file change into index.html

AngularJS navingating to a route gives 404 in Apache

When loading a page using Angular an Apache myserver.com everything works fine, when going to a subroute from the main page myserver.com/credits by clicking a link it'll work as well.

However, if I try to go directly to myserver.com/credits from the browser navigation bar it'll return a 404 error message:

Error Message

I'm aware that by working with node I can configure this so that it does work, however, my company website runs in an apache server which I have no access to.

I could make it so the server redirects to the main page myserver.com like so:

.htaccess

ErrorDocument 404 /index.html 

However the optimal resolution would be that going to myserver.com/credits works outright.

Is there a way to make Apache behave this way? And if so, how?