I used $locationProvider to remove hashtag # from this url
http://localhost/angular-phonecat/app/#/phones
using the following code:
phonecatApp.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider.
when('/phones', {templateUrl: 'partials/phone-list.html', controller: 'PhoneListCtrl'}).
when('/phones/:phoneId', {templateUrl: 'partials/phone-detail.html', controller: 'PhoneDetailCtrl'}).
otherwise({redirectTo: '/phones'});
$locationProvider.html5Mode(true);
}]);
and in index.html added this in the head
<base href="/angular-phonecat/app/">
this worked and my current url is:
http://localhost/angular-phonecat/app/phones
But when I directly access this url it is not showing the webpage because it is not calling the index.html file. Instead, it is showing the contents of /app/phones directory
I tried by creating an .htaccess file also
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]
There is a small error in your rule, the rewrite rule requires one more parameter.
Furthermore, when you write RewriteCond %{REQUEST_FILENAME} !-d you prevent redirection if a directory with this name exists. Since /anular-phonecat/app/phones exist you need to also remove this line.
You dont need the RewriteCond %{REQUEST_URI} !^(/index\.php|/img|/js|/css|/robots\.txt|/favicon\.ico) condition, since files won't be redirecte thanks to the RewriteCond %{REQUEST_FILENAME} !-f condition
The result is:
RewriteEngine On
RewriteBase /angular-phonecat/app/
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule .* ./index.html [L]
Edited response based on comments
Related
I am new to vue js. I have created a project using vue cli 3.
The URLs generated contain #/ at the end, example http://localhost:8080/vuejs#/
I want to get rid of trailing #/, I have tried mode: "history" in router.js file as well as added .htaccess file in root directory with following code:
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>
but it returns a blank page without any error.
Can anyone please help me
Replace
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>
with
FallbackResource /index.html
https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations
I am working on an Ember 2.6 app and have hit a snag when it comes to refreshing the page. This looks to be a common issue so I have found and updated my .htaccess file as follow:
Options FollowSymLinks
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>
So this works whenever I refresh on a URL like: http://danyuschick.com/projects
However, it does not load whenever I refresh on: http://danyuschick.com/projects/14
Here is my router:
Router.map(function() {
this.route('about');
this.route('blogs');
this.route('projects', function() {
this.route('index', { path: '/' });
this.route('project', { path: '/:project_id' });
});
this.route('error', { path: '*path' });
this.route('loading');
});
And my route defining the model
model(params) {
return this.store.findRecord('projects', params.project_id);
}
I'm not sure where this update would need to take place, htaccess or my router or what.
If you try this, it should work:
RewriteEngine on
RewriteCond %{REQUEST_FILENAME} -s [OR]
RewriteCond %{REQUEST_FILENAME} -l [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^.*$ - [NC,L]
RewriteRule ^(.*) /index.html [NC,L]
What it does, is check if the the %{REQUEST_FILENAME} is a file with a size, OR is a symlink, OR a directory. If not, it will rewrite the request to index.html
Every time when I click on an URL I get a 404. That's because the page can't be found. But when I add a question mark right after the .domain the page is found. This was not the problem when I had the website hosted in a subdomain folder. A question mark is required to visit a page and I don't want to have the question mark.
Please see the url: http://www.ankehesselmann.nl/
I'm using StaceyApp
This is my .htaccess
RewriteEngine on
# Some hosts require a rewritebase rule, if so, uncomment the RewriteBase line below. If you are running from a subdirectory, your rewritebase should match the name of the path to where stacey is stored.
ie. if in a folder named 'stacey', RewriteBase /stacey
RewriteBase /stacey
ErrorDocument 404 /404.html
# Rewrite any calls to *.html, *.json, *.xml, *.atom, *.rss, *.rdf or *.txt if a folder matching * exists
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_URI} !public/
RewriteCond %{DOCUMENT_ROOT}/public/$1.$2 !-f
RewriteRule (.+)\.(html|json|xml|atom|rss|rdf|txt)$ $1/ [L]
#Add a trailing slash to directories
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} !(\.)
RewriteCond %{REQUEST_URI} !(.*)/$
RewriteRule ([^/]+)$ $1/ [L]
# Rewrite any calls to /* or /app to the index.php file
RewriteCond %{REQUEST_URI} /app/$
RewriteRule ^app/ index.php [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)/$ index.php?$1 [L]
# Rewrite any file calls to the public directory
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} !public/
RewriteRule ^(.+)$ public/$1 [L]
I'm guessing the RewriteBase is set to the wrong folder in your .htaccess
Though I cannot explain why it works with the question mark as you said, I would try setting the RewriteBase correctly.
You have to put the sub-folder (path from domain name until your index-file) if you have any. E.g.:
Website located at: example.com/folder1/sub/
RewriteBase /folder1/sub/
If your website doesn't have a sub-folder:
RewriteBase /
You may try removing the line if you haven't got a sub-folder, but it should not make any problems if set to / (slash).
I have a strange problem, i tried to rewrite urls via htaccess on a music sharing script but now every time i change page the music playing stops.
The rules I have is:
Options +FollowSymLinks
DirectorySlash Off
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} -f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*) $1 [L]
RewriteRule ^admin$ index.php?a=admin [L]
If i click the link www.domain.com/index.php?a=admin it works great
If i click www.domain.com/admin
The title of the page change to
undefined
I used to use this code in .htaccess .. I really can't remember from where I got this code but it works for me .. hope it will work with you
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule ^(.*)$ /index.php?a=$1 [QSA,L]
if it not work .. try to remove / from /index.php to be just index.php and try again
From what I understand doesn't $locationProvider.html5Mode(true); remove the hash from your URL?
While it does that for me only the home page seems to be ok when you refresh the page.
Isn't that what redirectTo: supposed to handle?
var rustyApp = angular.module('rustyApp', ['ngRoute','viewController',
'mm.foundation','angular-flexslider','ui.router'],
function($routeProvider, $locationProvider) {
$routeProvider.when('/', {
templateUrl: '/partials/home.html',
controller: 'HomeController'
});
// When you put /home, it also automatically handles /home/ as well
$routeProvider.when('/work', {
templateUrl: '/partials/work.html',
controller: 'WorkController'
});
$routeProvider.when('/contact', {
templateUrl: '/partials/contact.html',
controller: 'ContactController'
});
$routeProvider.otherwise({
redirectTo: '/'
});
$locationProvider.html5Mode(true).hashPrefix('!');
});
And this is my html:
This is in the head:
<base href="/"/>
This is the naviagation...
<section class="top-bar-section uk-navbar-flip">
<ul class="uk-navbar-nav ">
<li my-active-link="/"><i class="uk-icon-home uk-icon-medium "> </i>home</li>
<li my-active-link="/#work"><i class="uk-icon-photo uk-icon-medium "></i> work</li>
<li my-active-link="/#contact"><i class="uk-icon-envelope-o uk-icon-medium "></i> contact
</ul>
</section>
UPDATE
I changed this in my app.js file.
$locationProvider.html5Mode(true).hashPrefix('!'); //changed this
to
$locationProvider.html5Mode(true);
And added this to a .htaccess file.
<IfModule mod_rewrite.c>
RewriteEngine on
RewriteCond %{REQUEST_FILENAME} -s [OR]
RewriteCond %{REQUEST_FILENAME} -l [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^.*$ - [NC,L]
RewriteRule ^(.*) /index.html [NC,L]
</IfModule>
However, this seemed to work when I was running a server via apache.
I suppose my problem was the static server which gulp spawns was not configured to handle that request. I am sure there is some add-on to gulp-open etc...
This is because the webserver will handle the request first, so if you don't have URL Rewriting in any form set up it will just look for a folder in the webserver with the name you have put in your 'route'.
If you're using a Node Express webserver, you can set the rewrites like this:
app.all('/*', function(req, res) {
res.sendfile(__dirname + '/index.html'); // Or whatever your public folder is
});
For Apache servers you could use a .htaccess, with something like this:
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*) /index.php/#/$1 // Might have to fiddle with the hash and/or other prefix you want to use
</IfModule>
From the docs on $location, it says that you need to have server-side rewriting for HTML5 mode to work with page refreshes. This page details the different server configurations.