Html5Mode - refreshing the angularjs page issue

Question

I am working on an angularJS app, which has URLs in the format (in dev) -

http://localhost:6001/#/home/index
http://localhost:6001/#/content/index

As this app, will also be available on desktop browser, I wanted the URLs to be without '#', so I added this in my app's config section -

$locationProvider.html5Mode(true);

Which works fine and URLs don't show '#'. But there is a problem now. On refreshing a particular page in browser, now I get this error -

Cannot GET /home/index

Are there any other changes required to get this working?

Note: This app is using cordova CLI and is hosted on a Node.js server.

Using html5 mode requires URL rewriting on server side. See: stackoverflow.com/questions/16569841/… — borisdiakur
– borisdiakur, Commented Mar 30, 2015 at 13:42

Bazinga · Accepted Answer · 2015-03-30 10:31:04Z

1

Try to put in your as your route:

app.get(*, function(req,res) {
  //return the main index file
});

This will cause any unmatched route to serve the index page and from there angular take care of this route.

answered Mar 30, 2015 at 10:31

Bazinga

11.3k7 gold badges42 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Sam Over a year ago

I have route set up somewhat like this - pastie.org/10062399. Do you mean that I should create another route? Can you explain where to do what you said?

Bazinga Over a year ago

I mean in your node app not angular. if you are using express you can write what i showed you and if not just follow the same logic.

Sam Over a year ago

Oh. Actually the cordova library is currently taking care of running the app on node. I haven't programmed in node as such but I understand what you are trying to do. If you can lead me to any link or explain how to set it up, it would be great.

Bazinga Over a year ago

what do you mean cordova is running the node server? this is not what cordova does, they does not have a server running for you. you create your own server and connect the client to this server.

Sam Over a year ago

The cordova CLI which I am using for building cross platform app comes as a npm package and utlizes node as its web server. I am not sure how to tinker with its configuration.

|

marnikka · Accepted Answer · 2016-02-03 13:19:53Z

Try this:

Make sure you have these lines in your server.js file

var express = require('express');
var app = express();
app.use(express.static(__dirname + '/public.build'));
app.use(function(req, res) {
res.sendFile('index.html', { root: __dirname + "/public.build" });
});

Why so? Please read here - https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5mode

The first step resulted in my app in the following console.log message:
```
Resource interpreted as Stylesheet but transferred with MIME type
text/html: "http://localhost:8080/board/css/style.css". 
```
As you can see, the styles are trying to load from non-existent path (/board/ folder is not present in the app, it's one of the states in ui-router). To fix it I replaced the following line
```
<link rel="stylesheet" href="css/style.css">
```
with this one:
```
<link rel="stylesheet" href="/css/style.css">
```

Collectives™ on Stack Overflow

Html5Mode - refreshing the angularjs page issue

2 Answers 2

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related