HTML5 Mode AngularJS ui.router - angularjs

Hi I want to use html5 mode. My file structure is as the following:
mypage.de/mysub
I can only mess around in mysub.
So far, I added into my index.html:
<base href="/mysub/">
And created a new (and the only one) .htaccess in /mysub/
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.html [L]
If I use an url:
mypage.de/mysub/#/site1 it is transformed into mypage.de/mysub/site1 and loaded
But if I use the transformed url directly, e.g.: mypage.de/mysub/site1 I get a 404
The server is an apache:
I looked into that tutorial:
https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5mode
But I'm not sure what server-name is & if /path/to/app is
/
or
/mysub/
Also it throws my already an internal server error when I just leave the virtual host & the part within the directory tags.
because the .htaccess is within the directory. I tried diff. varaitions but nothing worked here so I just used the part within Directory as mentioned here:
AngularJS: can't get html5 mode urls with ui-route $state

Try this
<IfModule mod_rewrite.c>
Options +FollowSymlinks
RewriteEngine On
RewriteBase /mysub/
# 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.html [L]
</IfModule>

Related

Configuring htaccess file for React Router on Apache Server

I have deployed a React app with React Router to my Bluehost server, and need to configure the htaccess file to redirect all of my routed URLs (/portfolio, /about, etc) to index.html instead of trying to fetch a new file from the server and throwing a 404.
I have read about countless similar problems in which the solution seems to be to add this into your htaccess file:
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule . /index.html [L]
</IfModule>
I tried this, but I am still getting 404's when I try to visit any page of my site directly that isn't the homepage. I'm wondering if there is anything else in my existing htaccess file that is preventing the above code from working?
There was some code already in there from Bluehost, and I see another IfModule statement, so I'm wondering if that one is overwriting the first one. However I am afraid to edit it and break something, as it clearly says "do not edit." Here is my full htaccess code:
Header always set Content-Security-Policy: upgrade-insecure-requests
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule . /index.html [L]
</IfModule>
# php -- BEGIN cPanel-generated handler, do not edit
# Set the “ea-php74” package as the default “PHP” programming language.
<IfModule mime_module>
AddHandler application/x-httpd-ea-php74 .php .php7 .phtml
</IfModule>
# php -- END cPanel-generated handler, do not edit
# BEGIN WordPress
# The directives (lines) between "BEGIN WordPress" and "END WordPress" are
# dynamically generated, and should only be modified via WordPress filters.
# Any changes to the directives between these markers will be overwritten.
# END WordPress
Any ideas? I've double-checked that my BrowserRouter is set up correctly and also tried a few other htaccess configurations. I want to avoid using HashRouter or Node if possible but am getting frustrated. I can provide my React code as well if needed, but I'm pretty sure the error is not with the React setup.
You can create a virtual host file in the /etc/apache/sites-available folder and add this:
<VirtualHost *:8080>
ServerName example.com
DocumentRoot /var/www/httpd/example.com
<Directory "/var/www/httpd/example.com">
...
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.html [L]
</Directory>
</VirtualHost>
This worked for me

How to remove hash(#) from URL with AngularJS on Apache server?

I am trying to remove hash (#) from my url for this I did following steps
Config file
$locationProvider.html5Mode(true)
index file
<base href="/" />
.htaccess file
# 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.html [L]
After did all that my single routes like localhost/login is working but nested ui-routes are not like localhost/home/contact.
Another this if I direct hit localhost its show blank page.
All working fine with #.

AngularJS HTML5 mode routing with apache2 .htaccess

I am building angularjs project with PHP, MySQL, apache2 on Ubuntu system
Project structure
var/www/html/demo/
Demo folder is my project folder,
demo=>js(All js file), index.php, addstudent.php file etc
I am facing problem while refreshing the whole page and also using routing concept in AngularJS with html5Mode(true) but it doesn't working properly with .htaccess file.
The requested URL /demo/addstudent was not found on this server.
htacces code here
DirectoryIndex demo/index.php
RewriteEngine On
RewriteBase /demo/
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]
RewriteRule ^ index.php [L]
In index.php added base ref is

how to hide id from the url of the angularjs website

my current URL is:http://xyz.services/50/home.
i want to change this URL to http://xyz.services/.
can anyone help me how to do this.50 is the id of the page.
the whole content of the page come from the database.
below is my .htaccess
RewriteEngine on
#RewriteRule /(.*)/(.*)/$ pages.html?menu_id=$1&page_title=$2
#RewriteRule /(.*)/(.*)/$ page.php?category=$1&product=$2
# 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.html [L]
Have a look at How can i hide the full url of my website?
This is not angular specific, but more of a configuration on the server you are deploying to.

.htaccess - Redirect everything to homepage except one directory

I'm creating an AngularJS app and want to avoid the # in the URL. I learned that I needed to add the following .htaccess rules to make it work:
RewriteEngine On
Options FollowSymLinks
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ /#/$1 [L]
That worked great. However, now my calls to my web services are not working. The web service files are inside an /api/ directory, e.g. http://example.com/api/. My guess is that when the api calls try to access those files, they also get redirected and break. So how can I modify the rules above to redirect everything to the homepage, except links that are going to any file inside the api folder? I tried to find an existing answer to this, but while there were many similar ones, none of them was exactly what I needed. Thanks!
I found the code I needed:
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 ^ /
That's all you need. Got it from: https://ngmilk.rocks/2015/03/09/angularjs-html5-mode-or-pretty-urls-on-apache-using-htaccess/

Resources