One angular app using $location html5 mode, located in an app subdirectory.
when the user makes direct access on a subpage (/thing/123), angular gives a wrong css URL.
for example : the path of the css is site.com/app/css/styles.css, but when the user makes a direct access to site.com/app/thing/123, this page calls a wrong css path: site.com/app/thing/css/styles.css. It is like angular is looking for the css relatively to the current URL. Oddly, the javascript files paths on the same page are correct (site.com/app/js/scripts.js).
However, this problem is only on direct access to a subpage. When accessing from site.com/app/things and navigating to site.com/app/thing/123, the css is loaded correctly.
in index.html, the css link tag is like this :
<link rel="stylesheet" href="css/styles.css"/>
To solve this, I could set an absolute css path: /app/css/styles.css, but I would prefer to keep it relative to the app directory.
The .htaccess:
Options +FollowSymLinks
<ifModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} !index
RewriteCond %{REQUEST_URI} !.*\.(js|html|png|css)
RewriteRule (.*) index.html [L]
</ifModule>
How can i solve this wrong css path?
i found prepending the path to the stylesheet with a / solves the problem
<link rel="stylesheet" href="/css/styles.css"/>
This worked for me, together with a htaccess like above:
Set the base url, probably in the base index.html:
<base href="/">
Use paths starting with / to navigate relative base url
<link rel="stylesheet" href="/css/styles.css"/>
Related
what I'm trying to achieve is
domain.com/register/free
that would be
domain.com/register.php?type=free
When I go go domain.com/register the page loads fine, but if I put the next /free part it cant find the css or js images etc. Not too sure where I have gone wrong but this is my .htaccess file:
RewriteRule ^register$ register.php
RewriteRule ^register/$ register.php
RewriteRule ^register/([a-zA-Z0-9\-\_]+)$ register.php?type=$1
First, you can improve your rules
Options -MultiViews
RewriteEngine On
RewriteBase /
RewriteRule ^register/?$ register.php [L]
RewriteRule ^register/([a-zA-Z0-9_-]+)$ register.php?type=$1 [L]
Then, since you create a virtual folder because of your rule (/register/) and you're using relative paths (instead of absolute paths), your links are not good anymore.
Two options (both using absolute paths):
add a leading slash for all your css (and js, img, etc) links.
e.g: href="/css/style.css" instead of href="css/style.css"
add this tag just after <head> in all your concerned pages: <base href="/"> (this will avoid you to replace each link one by one)
I am using the following configuration in my .htaccess file to enable support for HTML5 pushState navigation on a website:
# HTML5 pushstate support
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^ / [L]
This works works great when the url of the website is something like:
www.example.com/foo
However, I begin to encounter errors when using a more complex URL such as:
www.example.com/foo/bar
I found this StackOverflow posts which directly addresses my issue. The proposed solution does work, but, to me, it seems like the wrong way to fix the problem. The suggested solution is to provide a <base> tag for the given page, such as:
<!DOCTYPE html>
<html>
<head>
<title></title>
<base href="/" />
</head>
<body>
</body>
</html>
This works because according to documentation the <base> tag corrects relative links.
Okay, fair enough, but that's what the .htaccess file should be doing for me already, right?
Is this something that can/should be configured at a server level rather than on a per-page basis? Or is it standard to use the <base> tag in this way?
It is actually a HTML source problem that is being solved by using:
<base href="/" />
so that every relative URL is resolved from that base URL and not from the current page's URL.
When you have your current URL as:
http://www.example.com/foo/bar
And include your css/js/image with a relative path such as:
<img src="images/header.jpg">
<link rel="stylesheet" type="text/css" href="styles/site.css">
Then browser will resolve above relative URLs from current's URL to make them:
http://www.example.com/foo/images/header.jpg
http://www.example.com/foo/styles/site.css
thus causing 404 for your image and css paths above.
With <base> as defined above browser will correctly request above URLs as:
http://www.example.com/images/header.jpg
http://www.example.com/styles/site.css
Sure some rewrite rules can be rewritten to redirect every image/css/js to root path by identifying these resources using extensions but those will be patches at the best.
<ifModule mod_rewrite.c>
RewriteEngine On
# Required to allow direct-linking of pages so they can be processed by Angular
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} !index
RewriteRule (.*) index.html [L]
</ifModule>
I am trying to implement clean urls on a website I'm developing.
I'm using .htaccess like this:
Options +FollowSymLinks
RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule ^(.*)$ index.php?page=$1 [QSA,L]
When the user goes to www.site.com/catalogue, apache is sending them to: www.site.com/index.php?page=catalogue. and that's ok.
But if the user goes to www.site.com/catalogue/item, the site loses the relative links (css, javascript, images).
If the css file is located in css/site.css, apache thinks the html is asking for catalogue/css/site.css.
So: how do I keep the relative links intact while using mod_rewrite?
Also, I would like the solution to be adaptive enough to be able to work inside a folder, ex: www.domain.com/folder/catalogue/item and still refer to www.domain.com/folder/index.php?page=catalogue.
Thank you
There is an easy workaround:
Use absolute path for resource files such as *.css, *.js, *.png, *.gif, *.jpg. ie,
You revise your HTML code from (BAD):
<style rel="stylesheet" type="text/css" href="catalogue/css/site.css" />
=> GOOD:
<style rel="stylesheet" type="text/css" href="/catalogue/css/site.css" />
This requires your re-programming of PHP scripts.
I'm having a problem with a rewrite rule that I'm using for auto versioning of my CSS and JS.
I have the following HTML code to include my stylesheet:
<link rel="stylesheet" type="text/css" href="includes/css/index_home.1364215354.css" />
I use this in my .htaccess to strip the dot and the 10 digits:
RewriteEngine On
RewriteRule ^(.*)\.[\d]{10}\.(css|js)$ $1.$2 [L]
When I load the site, the stylesheet fails to load even though if I point my browser to http://www.example.com/includes/css/index_home.css I can see the stylesheet.
The method I'm trying to use, I found here How to force browser to reload cached CSS/JS files?
I'm guessing the RewriteRule is the problem, but I don't know why.
The RewriteRule is fine so far. Maybe the problem lies in the relative URL and the request has some prefix.
If this is the case, you must be more specific (start with includes) and also don't anchor at the beginning of the request string. Also rewrite it to an absolute URL path
RewriteRule (includes/.*)\.[\d]{10}\.(css|js)$ /$1.$2 [L]
If you have multiple .htaccess files, the more specific (css) overrides the .htaccess nearer to the root directory. To merge these .htaccess files, you must use RewriteOptions Inherit or RewriteOptions InheritBeforein the css .htaccess file.
RewriteRule page/([0-9]+)$ page.php?id=$1
It works, but the included links like css or js don't work. page/ is seen like a folder, so the links (example: <link rel="stylesheet" type="text/css" media="screen" href="css/default.css" />) aren't found.
Another example: if "id" doesn't exist i do this ErrorDocument 403 /notfound.php, but you are redirected to domain.com/page/notfound.php. How i can solve this problem?
Try this instead :
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule page/([0-9]+)$ page.php?id=$1
This will redirect only if the requested file or directory does not realy exists.
More informations on mod_rewrite here
Edit :
As for you issue with resources not beeing found, you will have to add the base tag to you head section in you html page :
<base href="/">
More informations about the base tag here