I want to remove # from my angularjs app, I am developing an website, I think it may help to make SEO friendly website, May be i am wrong, Please help
Thanks
I agree with Joe Lloyd for the way to remove the # from your url but it won't help you to make your angularjs website crawlable.
Check out the following steps :
Configure the html5mode
config(function ($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
Add <meta name="fragment" content="!"> to your pages so the google bot knows to add the ?_escaped_fragment_= at the end of your request.
Handle the ?_escaped_fragment_=on the server side and serve a static snapshot of the requested html page (phantomjs can make the job) so the bot will index the rendered version of the html page.
Populate your sitemap.xml and send it to google using www.google.com/webmasters/
Have fun !
Config
To remove the # in your url you need to add this to your main module. You put the app into html5 mode.
//This config is used to remove the # in the html
app.config(["$locationProvider", function($locationProvider) {
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
}]);
Server Side (NodeJS)
This will have a server side effect when you hit refresh you need to add an extra route that is able to find the new url. this will work in your express js app.js file. Where the public folder contains your angular app and you have your index.html file in there
// ### CATCH REFRESH TO INDEX ###
app.all('/*', function(req, res, next) {
// Just send the index.html for other files to support HTML5Mode
res.sendFile('public/index.html', { root: __dirname });
});
Related
I am trying to remove the hashtags from my Angularjs app's URLs using the locationProvider, and it works well until I refresh a page manually. When I am refreshing page my angularjs js and css file now loading.
Please help me on that.
In index.jsp
App.js
myapp.config(function($routeProvider, USER_ROLES, IdleProvider, KeepaliveProvider, $locationProvider) {
$locationProvider.html5Mode(true);
}
urlrewrite.xml
/login resources/partials/login.html /login/brandname resources/partials/login.html /home resources/partials/home.html
web.xml:
http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" version="3.0"> Archetype Created Web Application UrlRewriteFilter org.tuckey.web.filters.urlrewrite.UrlRewriteFilter confPath /WEB-INF/urlrewrite.xml UrlRewriteFilter /* REQUEST FORWARD
adding base base tag could also help you solve the # problem. And also did you checked this link? https://scotch.io/tutorials/pretty-urls-in-angularjs-removing-the-hashtag
How to remove #! getting added to url in my AngularJS application?
I have tried:- $locationProvider.html5Mode(true).hashPrefix('!'); and adding <base href="/"> but to no avail. When I navigate to a particular url, #! disappears but when I tried to reload, it gives the error:- Cannot GET.
So I looked online, and found out that doing above is only half of the solution. We also need to rewrite the logic on server side as well. So I am using NodeJS and browserSync package to fire up localhost. So what is the solutioin to this?
Note:- My backend and frontend code are separate and both handle routing.
There is a option in Browsersync called single which serves the index.html as a fallback if the url does not exist.
Serve an index.html file for all non-asset routes. Useful when using client-routers
See documentation:
https://www.browsersync.io/docs/options#option-single
browserSync.init({
server: {
baseDir: 'dist',
},
single: true
});
I would like to ask for a help on my problem with url in an angular site.
I added this on my app.js
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
the problem is that when i try to put into my url like
wwww.websitename.com/admin
it will throw an server error page.. but if i will input
www.websitename.com/#admin
it will go to the page then the hashtag will be remove
i want it that it will go the page even without putting # on the url.
thank you guys ! :)
You need to make sure that your server is configured to return the same index.html file for any path specified after your domain. You also need to specify your base href for html5mode.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<base href="/">
</head>
Here is a good article explaining how to configure your angular app to use html5mode.
If you want to enable HTML5 mode for your Angularjs app, you will also have to configure your server so that whenever an unknown route is requested, it serves the index.html file.
For example with expressJS server,
After your routes definition, add a catchall route.
// Add a catchall route here
expressApp.get('*', (req, res) => res.status(200).send({
// #TODO serve index.html here
}));
I have remove (#) hashbangs by $locationProvider.html5Mode(true) in ui-route.
and set <base href="/public/">
when I have tried to localhost:59940/public/#/home url # is remove and url look localhost:59940/public/home and getting home view.
but when I have tried localhost:59940/public/home url. I have getting 404 Not Found error.
help me for getting home view when try to access localhost:59940/public/home in browser.
The problem is that the browser resolves urls before your angular app responds, and indeed the resource for that route is not there. The solution I have used is to make your 404 route return the index.html page and use ui-router to handle real 404 cases. But another idea is to match all of the client routes to routes on your server which return the index.html.
To enable $locationProvider.html5Mode in angular, you also need to some side server changes.
Other then your static assets and apis path, all other routes should server index.html(your main SPA page) only.
See below code.
This is how you can do it in node.js using express server.
var app = require('express')();
app.configure(function() {
// Static files - all js, css, images, etc go into the static path
app.use('/static', express.static('/static'));
// If a static file is invalid so we send 404
app.use('/static', function(req, res, next) {
res.send(404);
});
// This route deals enables HTML5Mode by forwarding missing files to the index.html
app.all('/*', function(req, res) {
res.sendfile('index.html');
});
});
app.listen(3000);
I'm trying to remove # from my angularjs urls using
$locationProvider.html5Mode(true);
$locationProvider.hashPrefix('!');
and <base href="/"> in my index.html and i have changed the hrefs in my partials from #/abc to /abc
it works fine when navigating through links within the site, however except my home page, on every other page, when i try to reload the page or copy and paste the link(and hit enter) it gives me error. i have done alot of search online with no luck. i'm hoping someone here has already gone through this and can help me.
thanks
So if you are using jade you shall do the following:
app.get('/', index);
// while index is defined in routes.js and jade is defined as template engine
If you're using angularjs templating engine with normal html files, do the following:
exports.index = function(req, res) {
res.sendfile(__dirname + "/public/index.html");
};
app.get('/', index);