Angular JS removing hash results in 404 - javascript

I have removed hash from my angular JS website using below code.
$locationProvider.html5Mode(true);
so my current url http://dev.dummpurl.loc/#/courses is replaced with http://dev.dummpurl.loc/courses.
my problem is browser gives me 404 if I ctrl+f5 http://dev.dummpurl.loc/courses.
is there any possible solution by which I can remove # from URL and at the same time runs if refreshed.

Use this code in the head
<base href="/">
And always return the index html file on request , if you are on to SPA(single page application)

Related

Navigating to angularJS page from url

How come I can't navigate to a page using a regular url? For example I have a page at /about, but if I open a new tab and try to go to http://localhost:3000/about I'll get the general Cannot GET '/about' error.
But if I go to http://localhost:3000/#!/about it renders the page and changes the url to a clean url without the #!.
I have html5Mode(true) set.
I'm using version 1.6.6 of angular and angular-route

How to change file:// to http:// in angular / ionic when calling external scripts such as the disqus directive

I am trying to integrate the disqus directive - can be found here
I am running into a few issues due to the way my app is set up. There is a line in the script where the embed .js is called like this
dsq.src = '//' + scope.config.disqus_shortname + '.disqus.com/embed.js';
This is returning the following error in the console:
GET file://mywebsitename.disqus.com/embed.js net::ERR_FILE_NOT_FOUND
This is happening because the url is returning as file:// and to fix it needs to be http://
I changed the url directly in the line of code and it works however the script calls further external files and injects them in the dom and these also return as file:// hence I get the same error.
I am sure all this it has to do with the location module within angualr/ionic but don't know how to modify these as I have been using this 2 only a few months now.
Thanks in advance
Why don't you call it from index.html?
That way it will be part of the Ionic application, and changing the path to it, it should load it.
In index.html
<script type="text/javascript" src="path/to/disqus.js"></script>
And then just call
disqus.src = "path/to/disqus.js";

Page redirection not working with AngularJS

I am using angularjs routing in my web app, and I have included the $locationProvider and the base tag in HTML head which is <base href="/webapp/"> in order to remove the hash symbol in the URL, it works fine when I redirect using anchor tags e.g. Home but gives a 404 error when I redirect using javascript e.g. window.location.href = '/webapp/home';. Tried everything but so far nothing, any help will be highly appreciated. Thank you in advance.
Try : Home
When you are using angular(JavaScript) routing; JavaScript routing start after # keyword in URL, other wise browser think this is the server side routing trigger; or page will get refresh.
USE : Home
$locationProvider will remove the # after redirecting to the the view.

Throwing cannot get error after enabling html5Mode in AngularJS

I am using UI-Router for routes/states in my app and URLs were having "#" so to remove this , I used $locationProvider like -
function configState($stateProvider, $urlRouterProvider, $locationProvider) {
$locationProvider.html5Mode(true);
Added ngRoute in module dependency and added <base href="/" > in my index.html.
Problem -
If I am using it as a normal app like in same tab and navigates to other state, it works BUT whenever I pasted the URL in another tab and hit enter its throwing Cannot GET /app_views/contacts URL is like - http://localhost:9000/app_views/contacts
Though with hash in URL it works in both way manner.
You are likely getting this error because your server is not configured correctly. In other words when you manually enter /app_views/contacts it will make a request to the server for that page. For this to work properly you need configure your server to route all traffic to your index.html page in order for Angular to properly take over and display the correct view.
Here is a related post Reloading the page gives wrong GET request with AngularJS HTML5 mode

Make angular page refresh without Hash links?

How can I get angular to page refresh without Hash links? On page refresh my angular app would error and not show the page it was just displaying, so I changed the html5Mode to false ( $locationProvider.html5Mode(false).hashPrefix(""); ) and now I can refresh the page. But I'm also getting the nasty prefix #/ in the link path.
How do I remove # in the url path while at the same time be able to refresh the page?
Explore this thread:
$location / switching between html5 and hashbang mode / link rewriting
You need to make sure all your links are absolute relative to index.html and you probably need a server rewrite.
Server rewrite will work on refresh, try to add middleware in your server.
Sample grunt configuration id below.
check https://github.com/parmod-arora/angular-url-rewrite for nginx and grunt serve rewrite.
middleware: function (connect) {<br>
var middlewares = [];<br>
middlewares.push(modRewrite([
'!/assets|\\.html|\\.js|\\.css|\\woff|\\ttf|\\swf$ /index.html'
]));
middlewares.push(connect.static('.tmp'));
middlewares.push(connect().use(
'/bower_components',
connect.static('./bower_components')
));
middlewares.push(connect.static(appConfig.app));
//middlewares.push(require('grunt-connect-proxy/lib/utils').proxyRequest);
return middlewares;
}
Have you tried setting base in the head section of your html?
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<base href="/">
</head>

Categories