AngularJS multilevel routing reload issue - angularjs

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.

Related

React Route: 404 Not Found after refreshing the deployed application

I'm working for a company and just deployed a project for them, but I encountered an issue. so, when you go to the link http://domain, you can go to the page, and from there you can go to any other page (react route), but if you go directly to http://domain/some-end-point, it shows 404 not found. does anyone know how to fix it?
That happened because your server side doesn't handle redirect to index.html, You can fix it by config your back end to always redirect to html, or simply you can fix it from react-router using HashRouter instead of BrowserRouter
here is a full explanation about Server side vs client side routing
Add the following code to the public folder file name should be
_redirects
/* /index.html 200
refer image
You can fix this with .htaccess in the root folder :
<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>

Reloading agnularjs app htaccess issue

I'm trying to set .htaccess file so after reload it will first load index.html and then change route so my routing will notice it.
I added
$locationProvider.html5Mode(true);
to angularjs .config
and my htaccess is:
RewriteEngine On
Options FollowSymLinks
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ /#/$1 [L]
the bahoviour is that my spa when I load index.html is working correctly but then when I navigate to some route and press refresh it say:
Cannot GET /mailbox
What's wrong with my htaccess file? It's in root directory of project.
I'm running my project by live-server.

My css file is requiring /index.php as part of the url

Ive taken a copy of expressionengine from our production server to a dev server and its installed and running. I can access the admin console fine and Ive updated my paths.
The problem is that when I try and view my site the main page loads but no CSS is downloaded. The error Im getting is
The requested URL /presentation/layout was not found on this server.
I cant access the file from http://localhost/presentation/layout but I can access from
http://localhost/index.php/presentation/layout
Ive updated my .htaccess file from the following guide
https://docs.expressionengine.com/latest/urls/remove_index.php.html
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
# Removes index.php from ExpressionEngine URLs
RewriteCond %{THE_REQUEST} ^GET.*index\.php [NC]
RewriteCond %{REQUEST_URI} !/system/.* [NC]
RewriteRule (.*?)index\.php/*(.*) /$1$2 [R=301,NE,L]
# Directs all EE web requests through the site index file
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ /index.php/$1 [L]
</IfModule>
I can access the site now from http://localhost without the index.php but its still looking for it for the CSS file. Any idea how I can resolve this?
First thing: don't put your css file in a template unless you absolutely have to.
You only need dynamical css files if the styles are depending on the data in a channel like
{exp:channel:entries}
.{title} {
color: #{color_custom_field};
}
{/exp:channel:entries}
If you put it in a template it will be processed by the template parser on every page view. This will add extra queries/processing which isn't needed for a static file.
What version of EE are you on?
All of us EE guys are over at https://expressionengine.stackexchange.com/ by the way

Angular Url not working after removing # in new tab or after reload

I am working in angular project. I am using angular ui routing. link is http://keraiz.com. I need to remove # from url. so I enable html5 mode by
$locationProvider.html5Mode(true);
The I define base href by <base href = '/' />
then I write rewite rules in .htassess file -
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_URI} !^(/index\.php|/img|/js|/css|/robots\.txt|/favicon\.ico)
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ./index.html [L]
Now on same tab it is working fine. but If I reload link or open line in new tab it jump on 404 page. so how can I resolve this issue. I don't want to go 404 page. like if there is request of keraiz.com/about then i want to go about page

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>

Resources