Reloading page Angular html5mode with base as subdirectory - angularjs

I'm wondering what I've done incorrectly or what I'm missing. I'm trying to use html5mode with my base href as a subdirectory. If I go to a route off of that base and reload, the page tries to jump back to before the subdirectory.
If that doesn't make any sense, let me show you how I've configured...
In my app.js file I have set:
$locationProvider.html5Mode(true)
In my index.html file, in my tag I've set:
<base href="/subdirectory/">
Thus, if I navigate to http://url.com/subdirectory all is good.
If I then click a link to visit http://url.com/subdirectory/subpage, all is good.
However, if I RELOAD the subpage, OR, if I try to navigate directly to that subpage, it will not render. In fact, I believe the browser thinks it's trying to start back at http://url.com instead of starting from http://url.com/subdirectory/
Can someone who's experienced a similar problem explain a solution to this?
I've been banging my head against the wall. I'd really appreciate it. Thanks!

You have to configure your server to redirect all requests to http://url.com/subdirectory/subpage to the same location as http://url.com/subdirectory/ points to.

So this was the solution.
<IfModule mod_rewrite.c>
RewriteEngine on
RewriteCond %{REQUEST_FILENAME} -s [OR]
RewriteCond %{REQUEST_FILENAME} -l [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^.*$ - [NC,L]
RewriteRule ^(.*) /subdirectory/index.html [NC,L]
</IfModule>

Related

react-router not working on production build in LAMP

Hey has anyone experienced issues with react-router on a production build. I'm running a LAMP server and I've built my project put it in the http folder and when I go to a page I get Object not found!. I have setup react-router to go to certain pages based on certain conditions if I go to the root of the server i.e. localhost/ it loads the main page but then if I click on links it works fine as soon as you try and manually go to a link by typing in the search box I get the error message Object not found
This is my .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>
You need to configure your server to return index.html if file not found (404).
Example:
Let's say you have /users route the will show your users list.
It will be ok if first you'll go to / (which will return index.html by default) and then click some router link and it will redirect you to that page. It will work because you wont make any additional requests to the server.
But if you go to /users first - you'll request it from the server. In that case server will try to find users file and it will not be there.
If this configuration is not possible consider using hash router. The url will look like this /#/users

Refreshing a URL in AngularJS

We have built an application with AngularJS, it is currently hosted on a shared cPanel hosting. However, whenever we do a refresh on any page we are at with ? in the url. It will break.
I have read extensively on Stackoverflow, I understand it is because of the browser doesn't know which page to load and hence we need to set the base url in the header. We tried setting the base url and did some htaccess settings but it is still not working.
Try to click on any link from the website and refresh that page. You will notice it failed to work.
Any kind soul can point us to the right directions on how we can solve this?
Edit 1:
I have these in htaccess and notice the only url with ? will refuse to load correct.
Options +FollowSymLinks
IndexIgnore */*
RewriteEngine on
# if a directory or a file exists, use it directly
RewriteCond %{REQUEST_FILENAME} -s [OR]
RewriteCond %{REQUEST_FILENAME} -l [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteCond %{REQUEST_URI} !/api
# otherwise forward it to index.html
RewriteRule ^.*$ - [NC,L]
RewriteRule ^/* /index.html [NC,L]
I tried to reproduce the Issue but its not showing any # tag in the URL as mentioned. Can you please explain in details.
The issue didn't come from htaccess but the folder name. For instance,
config(function($stateProvider) {
$stateProvider.state('search', {
url: '/search?page&loc&seaters&owner&min_price&max_price',
The problem is when our folder is also call search, Apache will attempt to go to search folder first (due to the htaccess) and because they can find the folder, it will read the folder directory.
We fixed it by naming the folder example: search-html and change all the templateUrl required to search-html and it solves the issue.

AngularJS multilevel routing reload issue

I am working on AngularJs with HTML5 mode enabled for SEO friendly URLs, its working fine with the in app navigation but on reload.
Have written below .htaccess but still facing the same issues for nested navigation
RewriteEngine On
RewriteBase /akv/
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} !index
RewriteCond %{REQUEST_URI} !.*\.(css|js|html|png|jpeg|gif|)
RewriteRule (.*) index.html [L]
Its working fine for fist level navigation like base/Blog or base/Portfolio but base/Blog/MyBlogTitle/type/post/id/1
Is there is any way to fix it.
Thanks in advanced.
Problem is that you're using relative URLs in your css/image/js paths. Relative URLs are resolved as browser adds them to the current path thus giving you 404 when using pretty URLs.
To fix this problem you can add this in your page's HTML <head> section:
<base href="/kv/" />
so that every relative URL is resolved from that URL and not the current page's URL.

Bad base path when browser refreshes, ngView breaks

When I access my page from the index and start browsing everything works fine, but when I am on a route other than / for example in /details/123 and I refresh the page(I have URL rewriting configured) the route is not properly set.
It means, when I check the location path when browsing normally from the index and I am on /details/123 the location path is /details/123 as expected but when I refresh the page and I am still on /details/123 the location path changes to /123 causing ngView to display the wrong view.
I am using html5 mode and Angular v.1.1.5
UPDATE: I created a simple example here to illustrate the problem.
I don't have any special setup, I don't think is a server issue. I have the same problem with a different app in python where the redirection is done inside the application.
The .htaccess:
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*) /index.php
</IfModule>
This may be related to a nasty issue that showed up during Angular 1.1.5 and is a bug in the core library. A solution that has worked for many is to add the following tag to your index.html head.
If your application is running at the root of your domain.
<head>
...
<base href="/"></base>
...
</head>
Or if your application is running in a subdirectory, specify that subdirectory (e.g. 'myapp'):
<head>
...
<base href="/myapp/"></base>
...
</head>
Additionally, you may also try a new set of rewrite rules. This configuration has worked for many ui-router users.
<IfModule mod_rewrite.c>
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]
</IfModule>

How to make mod_rewrite silently redirect and pass parameter to index when the {REQUEST_FILENAME} is an existing directory or file

Synopsis:
localhost/root/admin is an existing folder
I want /root/admin to go to /root/index.php?url=admin without changing the url in the address bar.
The only except is if the requested file is an image
This is what I have written for the .htaccess file in localhost/root to try and do all this:
RewriteEngine On
RewriteBase /root/
RewriteCond %{REQUEST_URI} !index\.php$
RewriteCond %{REQUEST_URI} !(.*\.(png|jpg|gif))$ [NC]
RewriteRule (.*) index.php?url=$1 [QSA,L]
What this does instead is redirect localhost/root/admin to localhost/root/index.php and changes the url in the address bar to localhost/root/admin/?url=admin.
It will only not do this if I add a trailing slash (/) onto "admin".
I know that, on my mac laptop, this mod_rewrite code does exactly what it is meant to, but only when running it in the "Sites" folder and not in the localhost htdocs folder.
Any thoughts on what I can do to fix this?
I think you're just missing the "PT" flag to prevent an actual redirect. PT (Passthrough) means that Apache redirects the resource served internally, but the browser sees the same URL. (See the Apache wiki for more details: http://wiki.apache.org/httpd/RewriteFlags/PT)
RewriteEngine On
RewriteBase /root/
RewriteCond %{REQUEST_URI} !index\.php$
RewriteCond %{REQUEST_URI} !(.*\.(png|jpg|gif))$ [NC]
RewriteRule (.*) index.php?url=$1 [PT,QSA,L]
Note the only change was to add the flag. I tested this on my server and saw the behavior that I think you want.

Resources