I m using modularized routes and I want to remove the # tag from my URL. But as most articles says I added this code into my route
.config(function ($routeProvider, $locationProvider) {
$routeProvider
.otherwise({
redirectTo: '/'
});
// use the HTML5 History API
$locationProvider.html5Mode(true);
})
and I added this to my master page(index.html)
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- build:css(.) styles/vendor.css -->
<!-- bower:css -->
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<!-- endbower -->
<!-- endbuild -->
<!-- build:css(.tmp) styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild -->
<base href="/">
</head>
and I added base tag too. But the problem is when I enter the url like this
https://localhost:9000/loginselect
it says
Cannot GET /loginselect
But if I enter this as below(as previus) its working
https://localhost:9000/#/loginselect
but it shows the Url as
https://localhost:9000/loginselect
but when I refresh again the same error occurs. Could any one help me. I m using requireJs for loading files and modularized route files are loading using requireJs
You need to configure your server to serve index.html on that path.
html5Mode only sets Angulars behaviour when it comes to non-fragmented urls, but Angular only handles things -after- the first request, since on the first request the page and the javascript has not even loaded yet. The first request always hits the server, so when you enter the url https://localhost:9000/loginselect directly a request will be sent to the server, and if the server doesn't recognise the url you will get an error.
To solve this you need to configure your server to server your index.html file for that url, and for any other url your app uses. Typically you will set the server to sent index.html on any url except for those matching static assets, like images. If you do that, then on these urls the server will load index.html, Angular will start, and Angular will handle the route.
The reason it works for https://localhost:9000/#/loginselect is that by convention servers will ignore the fragment part of the url, i.e. '#/loginselect`. So the server grabs whatever is on / (since it ignores the rest) which is probably index.html. Angular then kicks in and handles the fragment part.
Edit:
To do this in nginx I would use something like this:
location / {
index index.html;
try_files $uri $uri/ /index.html =404;
}
This checks if there is a file on the path given (so if you ask for a static resource like an image it will give you that) and if it can't find one it will serve index.html instead.
Note that this is the simplest possible case and it has the drawback of serving your index.html on ANY 404. You could also be more specific and exclude certain directories (like /assets or /static) instead of doing a try_files. Then you could still have a 404 if you try to get a static asset that doesn't exist.
if you are running Apache on the server you can put this in your .htaccess file which should allow you to directly go to any valid url. But seriously, I have worked for over a year with Angular now in a professional environment: nobody cares about the # in the url. It is easier to leave it there than trying to remove it.
<ifModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} !index
RewriteCond %{REQUEST_URI} !.*\.(css¦js|html|png) #Add extra extensions needed.
RewriteRule (.*) index.html [L]
</ifModule>
Related
I have an application based on codeigniter3 framework hosted on VM bitnami lampstack. Initially I have set up the apache to serve the application from the root domain: example.com/. Furthermore I have an .htaccess file for removing the index.php from url as per CI3 documentation.
The content of my .htaccess is as follows:
RewriteEngine on
RewriteCond $1 !^(index\.php|assets|static|vendor|images|js|css|uploads|favicon.png)
RewriteCond %(REQUEST_FILENAME) !-f
RewriteCond %(REQUEST_FILENAME) !-d
RewriteRule ^(.*)$ index.php/$1 [L]
Recently I have changed the apache configuration as such that the application to be served from example.com/codeigniter and although the main page is loading correctly all the links in application are broken and when clicked they return not found message: The requested URL /about was not found on this server.
My routes in config/routes.php looks like this:
##---------------- Home Routes ------------------##
$route['about'] = 'home/about';
$route['login'] = 'home/login';
The link in the navbar is set like this:
<li class="navbar-item" role="presentation">
<a class="navbar-link" href="/about">
<i class="far fa-address-card"></i> About
</a>
</li>
When the link is clicked it is pointing to example.com/about instead of example.com/codeigniter/about. But even if I add as href="/codeigniter/about"it is still does not work. Seems to me that the somehow the codeigniter fails to map the path to the correct controller.
The problem is solved in part by adding index.php before the route (e.g. example.com/codeigniter/index.php/about). It is loading the correct page but fails to load the static files (css, js and images files).
So seems to me that problem results from .htaccess file but I do not know how to fix it. What should I add to or remove from that file?
Do you have any ideea how this problem may be solved?
Thanks!
Created a react app using create-react-app. Everything works fine on local system but getting issues when deploying it on Apache tomcat. Below are the steps i followed for deployment:
Added "homepage":"https://websiteName.com/react_web" in package.json.
Create .htaccess file in public folder of project and added below code
Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]
Run "npm run build" to create build files.
Copied the content of build file into 'react_web' folder in Apache tomcat.
There are no errors in console of browser.
Index.html:
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name="theme-color" content="#000000"><link rel="manifest" href="//websiteName.com/react_web/manifest.json"><link rel="shortcut icon" href="//websiteName.com/react_web/favicon.ico"><title>React App</title><link href="//websiteName.com/react_web/static/css/main.d17afb7e.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script type="text/javascript" src="//websiteName.com/react_web/static/js/main.b302e125.js"></script></body></html>
Below are few pics from browser console.
I am using BrowserRouter for routing. Do i have to change something there.
Also i see all the project files being loaded properly in console.
Any suggestion or direction will be helpful.
I found the issue. Was missing below part.
Note: If you are using react-router#^4, you can root <Link>s using the basename prop on any <Router>.
<BrowserRouter basename="/calendar"/>
<Link to="/today"/>
// renders <a href="/calendar/today">
ref: https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#building-for-relative-paths
After setting up a fresh copy of CakePHP project, the css reference from the code is:
/my_app_name/css/cake.css
While the real location of my css files is:
/my_app_name/webroot/css/cake.css
Why is that?
Why is that?
CakePHP, as with most frameworks, makes use of url rewriting by default (not a requirement, it can also be turned off). For apache users this is implemented via .htaccess files, such as this one in the root of your application:
<IfModule mod_rewrite.c>
RewriteEngine on
RewriteRule ^$ webroot/ [L]
RewriteRule (.*) webroot/$1 [L]
</IfModule>
And another in the webroot - the presence of these files mean url rewriting just-works for the majority of users.
The rules in the application root folder rewrite all requests to the webroot folder, thus these urls are actually equivalent:
http://localhost/my_app_name/some/file.css
http://localhost/my_app_name/webroot/some/file.css
The primary purpose of these rewrite rules is security - it prevents the possibility of accessing application files outside the webroot folder - something which is not necessary if using a production install. A side effect of this is that urls remain the same whether it's a development-style or production-style install.
Use helper classes
Classes such as the html helper take care of knowing where files are and linking to them appropriately, don't be tempted to hardcode the path to your assets in your template files i.e. don't do this:
<html>
<link rel="stylesheet" href="/my_app_name/css/cake.css" />
instead do this:
<html>
<?= $this->Html->css('forms'); ?>
Otherwise, you'll find that even something as simple as renaming your application mean links/assets break.
If your CSS files are located in /app/webroot/css/ (what is default location) you don't have to know nothing else, include them in your template absolute to webroot:
<link href="/css/cake.css" rel="stylesheet" type="text/css">
I followed this blog
http://www.michaelbromley.co.uk/blog/171/enable-rich-social-sharing-in-your-angularjs-app
for enabling rich sharing and there by changed my .htaccess file to redirect facebook crawler to a custom story.php
Here's the .htaccess file
RewriteCond %{HTTP_USER_AGENT} (facebookexternalhit/[0-9]|Twitterbot|Pinterest|Google.*snippet)
RewriteRule ^(.*)$ http://www.website.com/story.php/$1 [NC,L]
Everything in story.php and .htaccess is working fine because when i replace the www.website.com with another staging instance in which story.php exists, voila it works but when it comes to same url redirect its showing this disturbing image upon sharing
I exhausted all kind of open graph meta tags
property="og:title"
property="og:description"
property="og:image"
property="og:site_name"
property="fb:app_id"
Any help would be of help because redirecting it to another instance is showing that instance's ip in caption of fb card. And unfortunately there's no caption meta tag.
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