After enabling $locationProvider.html5Mode(true); and <base href="/" /> in the index.html routes began crashes after manual reload.
Looking up for solutions I found that .htaccess rules will fix this problem, but different configurations didn't help.
Maybe this is because my index.html is in the subdirectory /views/index.html
.htaccess:
Options +FollowSymLinks
<ifModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} !index
RewriteRule (.*) index.html [L] # /views/index.html doesn't work as well
</ifModule>
route config
app.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider
.when('/', {
templateUrl: 'home.html',
controller: 'AddTaskCtrl',
controllerAs: 'AddTask'
})
.when('/chat', { //this route breaks on manual refresh
templateUrl: 'chat.html',
controller: 'ChatCtrl',
controllerAs: 'chat'
})
}]);
step 1: use only $locationProvider.html5Mode(true);
step 2: Change your .htaccess
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]
When index.html is start load point your app, or see more methods https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5mode
Related
My app.js
app.config(['$routeProvider','$locationProvider', function($routeProvider,$locationProvider) {
$routeProvider.
when('/', {
templateUrl: 'interests.html',
controller: 'InterestsController'
})
.when('/interests',{
templateUrl: 'interests.html',
controller: 'InterestsController'
})
.when('/subjects',{
templateUrl: 'subjects.html',
controller: 'SubjectsController'
})
.when('/prequalification',{
templateUrl: 'prequalification.html',
controller: 'PreQualificationController'
})
.when('/qualification',{
templateUrl: 'qualification.html',
controller: 'QualificationController'
})
.when('/personalinfo',{
templateUrl: 'personalinfo.html',
controller: 'PersonalInfoController'
})
.otherwise({
redirectTo : '/interests'
});
if(window.history && window.history.pushState){
$locationProvider.html5Mode(true);
}
}]);
In index.html file. Path to index.html file: localhost:8080/cf/. All of the other views also resides with index.html
<base href="/cf/">
.htaccess file content(path to .htaccess file: localhost:8080/cf/.htaccess)
<ifModule mod_rewrite.c>
RewriteEngine on
# Don't rewrite files or directories
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]
RewriteRule ^ cf/index.html [L]
</ifModule>
Path to my project folder on server is: localhost:8080/cf. I have various rules in .htaccess file from other posts of stackoverflow but nothing is working. When even i reload or refresh the page, i get 404. With out refreshing and reloading everything is working fine. Please help!!!
Step 1: Add this in app config
if(window.history && window.history.pushState){
$locationProvider.html5Mode(true);
}
Step 2: Add this in index.html file
<base href="/your-app-name">
Step 3: Add .htaccess file on root directory
RewriteEngine on
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]
RewriteRule ^ index.html [L]
Use
<base href="/cf">
in document "head" section.
Hope this helps!!
My .htaccess looks like this:
RewriteEngine on
RewriteCond %{HTTP_HOST} ^thesite\.com\.cp\-45\.webhostbox\.net$ [OR]
RewriteCond %{HTTP_HOST} ^www\.thesite\.com\.cp\-45\.webhostbox\.net$
RewriteRule ^/?$ "http\:\/\/www\.thesite\.com\/" [R=301,L]
# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# END WordPress
RewriteEngine on
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]
My base URL is set to root in index.html:
<base href="/">
And I also have the following line of code in my AngularJS app configuration:
$locationProvider.html5Mode(true);
Despite all this, I am unable to get rid of a 404 when I try to directly access any page on my site without the # symbol in the URL. I can follow the links alright but once on a page, refreshing it returns a 404. Is there something I am missing in my rewrites?
Just in case it helps, my Angular app config looks like this (partial code below):
// create the module and name it asApp
var asApp = angular.module('asApp', ['ngRoute']);
// configure our routes
asApp.config(['$routeProvider', '$httpProvider', '$locationProvider', function($routeProvider, $httpProvider, $locationProvider) {
$routeProvider
// route for the home page
.when('/', {
title: 'Learn Spanish with thesite | Unconventional tricks for the crazy learner',
templateUrl : 'pages/thesitehome.html?v=1.1',
controller : 'mainController'
})
// route for the about page
.when('/about', {
title: 'About thesite and its penchant for cunning Spanish learning tricks',
templateUrl : 'pages/aboutus.html?v=2',
controller : 'mainController'
})
// route for dictionary term
.when('/dictionary/:word2lookup', {
templateUrl : 'pages/dictionary.html?v=1',
controller : 'dictController'
})
// route for dictionary
.when('/dictionary', {
title: 'The thesite dictionary – Look up Spanish or English words in a jiffy',
templateUrl : 'pages/dictionary.html?v=1',
controller : 'mainController'
})
// route for the 404 page not found error
.when('/notfound', {
templateUrl : 'pages/404.html',
controller : 'mainController'
})
// route otherwise
.otherwise({
controller: 'mainController',
templateUrl: 'pages/404.html'
});
$locationProvider.html5Mode(true);
}]);
Any nudge in the right direction will be highly appreciated! Oh and the website in question is live just in case you wish to take a look and see the problem first-hand.
Try following tuts.
https://scotch.io/quick-tips/pretty-urls-in-angularjs-removing-the-hashtag
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<base href="/">
</head>
First time using browserify and module exports with Angular, and my usual setup for html5Mode is not working.
app.js
.config(function myAppConfig($stateProvider, $urlRouterProvider, $locationProvider) {
$urlRouterProvider.otherwise('/');
$locationProvider.html5Mode(true);
})
index.html
<head>
...
<base href="/">
</head>
What the above code is doing wrong...
The routing works until the app is refreshed, and then the page assets disappear. Also if an in-correct url is given the app won't redirect to '/' like I'm intending.
Any thoughts/solutions?
Update: I'm having the same issue with and without the .htaccess that is rewriting the /index.html from the url, so I kinda thought that it wasn't related to the web server. If you think that it might be related to the web server, here is the .htaccess:
<ifModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} !index
RewriteRule (.*) index.html [L]
</ifModule>
I am a n00b with this stuff, I am trying to set up a testing environment for prerender.io.
I've downloaded prerender here: https://github.com/prerender/prerender.git and I've run this from the commandline:
$ npm install
$ node server.js
I read the documentation here: https://github.com/zf-fr/zfr-prerender
Instead of:
return array(
'zfr_prerender' => array(
'prerender_url' => 'http://myprerenderservice.com'
)
);
I did this:
return array(
'zfr_prerender' => array(
'prerender_url' => 'http://localhost'
)
);
This is my angular router:
var ListerApp = angular.module('ListerApp',[
'ListerAppFilters',
'sharedFactoryApp',
'sharedServiceApp',
'ListerAppController',
'infinite-scroll',
'angular-inview',
'ngRoute',
'itemsReady'
]);
ListerApp.config(['$routeProvider', '$httpProvider', '$locationProvider', function($routeProvider, $httpProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$locationProvider.hashPrefix('!');
$routeProvider
.when('/list/:page?',
{
templateUrl : '/assets/services/partials/list.html',
controller : 'ListerCtrl',
reloadOnSearch : false,
js : ['/assets/min/shoplist_js.min.js', '/assets/min/bootstrap-typeahead.min.js'],
resolve : {
sharedServiceAppData: function($sharedData){
return $sharedData.promise();
}
}
}
)
.when('/detail/:id?',
{
templateUrl: '/assets/services/partials/detail.html',
controller: 'DetailCtrl',
css : ['/assets/min/star-rating.min.css'],
resolve : {
sharedServiceAppData: function($sharedData){
return $sharedData.promise();
}
}
}
).otherwise({ redirectTo: '/list/1' });
}]);
This url works fine: http://localhost/shop/api/list
This url returns "Access Forbidden!": http://localhost/shop/api/list?_escaped_fragment_=/list
The error.log contrains:
[core:error] [pid 5952:tid 1864] (20024)The given path is misformatted or contained invalid characters: [client ::1:50262] AH00127: Cannot map GET /http://localhost/shop/api/list?_escaped_fragment_=/list HTTP/1.1 to file
My .htaccess file:
RewriteEngine On
RewriteRule ^\.htaccess$ - [F]
RewriteCond %{REQUEST_URI} =""
RewriteRule ^.*$ /public/index.php [NC,L]
RewriteCond %{REQUEST_URI} !^/public/.*$
RewriteRule ^(.*)$ /public/$1
RewriteCond %{REQUEST_FILENAME} -s [OR]
RewriteCond %{REQUEST_FILENAME} -l [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^.*$ - [NC,L]
RewriteRule ^public/.*$ /public/index.php [NC,L]
Are you seeing any console output on the Prerender server?
First, the URL you probably want to use is http://localhost/shop/api/list?_escaped_fragment_=
but you probably don't want to prerender an API call. That should really probably be http://localhost/shop/list/1?_escaped_fragment_= or whatever your url structure is for an actual page.
The basic routing method like below,
angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives', 'myApp.controllers']).
config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider.when('/view1', {templateUrl: 'partials/partial1.html', controller: 'MyCtrl1'});
$routeProvider.when('/view2', {templateUrl: 'partials/partial2.html', controller: 'MyCtrl2'});
$routeProvider.otherwise({redirectTo: '/view1'});
$locationProvider.html5Mode(true);
}]);
I want make user can access view1 by typing url "://host/view1" on browser. but this is not work..
By using $routeProvider and $locationProvider, if user click "href=/view1" this link, then
page routed host/view1.
But If user access directly to the url "://host/view1" it emit 404 error.
To make user can access /view1 directly by url, I have to remove html5Mode then, user can access by "://host/#/view1"
but How can I remove the # symbol!? not only just html5mode, the method user can access the page directly by typing that url.
Thanks. Yoshi
I create .htaccess file on DocumentRoot folder and add below
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]
into .htaccess file.
that works as I expected!
ps.
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
above two lines means if the file with the specified name in the browser doesn't exist, or the directory in the browser doesn't exist then procede to the rewrite rule below