I have a PHP page over at mysite.com/somedir/script.php.
When I have <a> tags in my Angular views that point to this script, Angular's routing always brings me back to mysite.com/index.html when I click on them.
This is my $routeProvider configuration:
siteModule.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl:'/views/blog.html',
controller:'blogController'
})
.when('/blog',{
templateUrl:'/views/blog.html',
controller:'blogController'
})
.when('/work',{
templateUrl:'/views/work.html',
controller:'workController'
});
// For Pretty URLs
$locationProvider.html5Mode(true);
});
I'm also using some Apache mod_rewrite to handle 404s / page refreshes in an .htacess file that I think may be interfering:
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} !index
RewriteRule (.*) index.html [L]
The aforementioned PHP page is a valid (existing) resource so I'm not sure why Angular or Apache would redirect / rewrite away from it. I'm using the target="_blank" on the <a> tags and have the <base href="/"> set in the index page's <head> tag as well.
I just want to be able to access my script normally instead of being pointed back to the index page.
In javascript you can still use window.location.href to escape the router, so in the 'otherwise' section of your router, use window.location.href = {the route} instead of allowing it to use the default index.
See these other answers to this question:
Angular routes - redirecting to an external site?
Using $routeProvider to redirect to routes outside of Angular
Related
I have a decentralized app with a React frontend. If I go to the homepage (https://app.valerianprotocol.com/), everything works fine and I can refresh the page without any problem. On the other hand, if I navigate to another page (for example https://app.valerianprotocol.com/pool), I will get a 404 page if I refresh. I have been debugging for 3 hours but I couldn't find anything.
Can someone help me with what can be the problem?
Maybe the page doesn't save the sessionid if it is not the home page?
The problem is that when using react with a router library (e.g React-router) you are not fetching the page "/pool" you simply change the content of the main html element inside index.html, and it works fine if you use links and navigation inside the React application. But when loading a page which is not the root, the server will try to serve the folder /pool which doesn't exist so it returns a 404 error. The options to solve this is to switch to a HashRouter for example or change the server configuration to redirect all into ìndex.html. Example of .htaccess rule:
<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>
I'm using react router 4 on a server which uses Apache and have a simple set up for a particular route:
<Route path="/:id/list" component={List} />
The page get's the id (this.props.match.params.id), then does an api call for some of the page content.
When navigating around the app it's fine and works perfectly. However, if the current url is e.g.
https://example.com/123/list
and I refresh the page, it fails to load. No errors, no content.
I'm using the following in my .htaccess files which works perfectly for refreshing non-dynamic pages, but not dynamic
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule . /index.html [L]
How could I do things differently so it loads dynamic content too on page refresh?
Page refresh on localhost when developing works as it should.
As suggested by the first answer, I did try:
RewriteRule ^(.*)$ /index.html [NC,L,QSA]
But no difference.
For anyone else having the same issue, I switched to using HashRouter instead of BrowserRouter and it works as planned. Not ideal as I don't personally like hash symbols in a URL but for now, it's a solution.
<HashRouter>
<App />
</HashRouter>
Likely the issue is that your apache server doesn't know to serve your app when it gets a request for /123/list. You basically need to set up a wildcard rule to redirect all unknown requests to be handled by your index page (which will do client-side routing).
Here is a relevant question I found: Redirect all to index.php htaccess
Following is my code where I am configuring my routes:
/**
* Main AngularJS Web Application
*/
var app = angular.module('chocomelte', [
'ngRoute'
]);
/**
* Configure the Routes
*/
app
.controller('HomeCtrl',HomeCtrl)
.controller('AboutCtrl',AboutCtrl)
.config(['$routeProvider','$locationProvider', function ($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider
.when("/", {
templateUrl: "partials/home.html",
controller: "HomeCtrl"
})
.when("/about", {
templateUrl: "partials/about.html",
controller: "AboutCtrl"
})
}]);
This removes # from my url. When I try to go to the /about route by clicking on a button in my UI, it works fine. But when I manually try to type the URL and go to it or refresh the page on /about url, I get this error:
500 internal server error.
I am not using node in the backend. A simple website using angular in the frontend. How to I configure this on the client side?
Make sure you're setting the base url with this meta tag:
<base href="/my-base">
Also, you may have to implement URL rewriting on your server when using html5 mode, to make sure that any requests are redirected to the root of your application instead of being interpreted as GET requests.
From the documentation:
Using this mode requires URL rewriting on server side, basically you have to rewrite all your links to entry point of your application
I am using Apache server. Finally fixed it. Had to rewrite the urls in the .htaccess file as follows:
Options +FollowSymLinks
<ifModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} !index
RewriteRule (.*) index.html [L]
</ifModule>
Had to specify index.html as the entry point.
I have a pretty extensive ngRoute router right now with around 15 different URL paths. The website I am working on displays pages with heavy data, lots of charts, etc. for a logged in user. My issue is that when I refresh the page, it will redirect me to my default page. I have tried adding these:
app.config
if(window.history && window.history.pushState){
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
}
< head> tag
<base href="/"/>
.htaccess
<ifModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} !index
RewriteRule (.*) index.html [L]
</ifModule>
This didn't work for me. It seems that switching to ui-router fixed this same issue for this guy in this link: AngularJS Route breaks on manual refresh
My questions:
Will ui-router really handle the manual refresh properly?
Is it worth it to migrate from ngRoute to ui-router or is it better to find the solution to manually refresh properly with ngRoute?
I made the move, the migration was smooth, and it fixed my refresh issue! Feeling good about the switch.
I'm trying to biuld an app with L4 and Angular. I'm struggling a bit with routes. I'm using the html5Mode(true) to have nice looking urls. It all works fine as long as I don't reload.
If I reload a page with a url other than /, L4 takes over and tries to send me to the appropriate page. I don't want that. I'd like all pages to be routed to the homepage where angular can take over.
I found a way to redirect all traffic to the home by using this:
Route::get('{all}', function($uri){
return View::make('home');
})->where('all', '.*');
Only issue is that once I try doing request with angular it sends me back the HTML of the homepage instead of the resource I need.
Any idea how I could solve this problem?
Thanks
I am also making the same and my solution is, make some api routes which is grouped and call this in angular. This route should be placed before your main route.
/*
API Routes
*/
Route::group(array('prefix' => 'api/v1', 'before' => 'auth.basic'), function()
{
Route::resource('pages', 'PagesController', array('only' => array('index', 'store', 'show', 'update', 'destroy')));
Route::resource('users', 'UsersController');
});
Route::get('{all}', function($uri){
return View::make('home');
})->where('all', '.*');
And access this like api/v1/pages in angular js. If you don't want to authenticate, you can remove 'before' => 'auth.basic'
I was battling this for a few hours as well and came up with a solution. In my project i am using angular to control the actual view switching. so what i did was to define two separate route groups in L4, one that returns actual pages directly from laravel's routing system and another that returns HTML fragments for angulars routing system.
Here is an example of my routing
//Laravel pages and API routes
Route::get('/', function()
{
return View::make('hello');
});
Route::get('/register',function(){
return View::make('registration');
});
//Angular SPA routes(HTML fragments for angulars routing system)
Route::get('/getstarted', function(){
return View::make('getStarted');
});
Route::get('/terms',function(){
return View::make('terms');
});
So in this scenario, laravel sends your home page when you call "/", and the ng-view asks for "/getstarted" by ajax which returns your html fragment. Hope this helps :)
What web server software do you use, server side? Apache? Nginx?
You must configure your http server to support your push state app.
Here is a sample Apache .htaccess that can do this:
# html5 pushState support
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} !index
RewriteRule (.*) index.html [L]
</IfModule>