html5mode and direct entering of URL

[LutzNewbie]

I'm fairly new to AngularJS and so far I was building a new app just successfully. And because it is recommended I use the html5mode:

$locationProvider
.hashPrefix( '!' )
.html5Mode( true );

So far so good. But ...

I have links in my app like "http://localhost/angular-ib/app/detail?procID=6281". If these links are embedded in the code like 

<a href="/angular-ib/app/detail?procID={{project.id}}">{{project.title}}</a> all is ok.

If I copy this link into the address bar of my browser or do a simple reload  I got a download instead of rendering the page. Chrome says: "Resource interpreted as Document but transferred with MIME type text/json: "http://localhost/angular-ib/app/detail?procID=6038"."

And if I switch back to hashbang mode [ $locationProvider.html5Mode( false );  ] all is fine (after altering the hrefs in code to "#!/.." of course). 

What I'm doing wrong? Should I do something on the server side and if yes, what?

Lutz

[DjebbZ]

In my app I didn't use the .hashPrefix at all and it works fine. It looks like your links trigger a call to your server. Should your route responds with JSON or HTML page ? It may be a kind of conflict between client-side routes and server side routes.

[Lutz Epperlein]

Maybe you are right with the hashPrefix. I will test it.

To your question: my route should response with a template and json:

$routeProvider.when( '/detail', { templateUrl: 'partials/projectdetail.html', controller: DetailCtrl } )

The real problem isn't the copy and paste of an URL from and in the addressbar, the problem is reloading. Every time I reload the page the error occurs (*). All other interactions like clicking links in the page, back and forward work fine.

(*) And I reload the pages while testing very often :-(

[DjebbZ]

It looks like something I'm experiencing as well. I have a client-side route that doesn't exist on the server. Let's say it's your "/detail" route. When I reload (cmd+R) I effectively get a 404 response. Check your server log or your browser's dev tools and see if the "Resource interpreted as Document but transferred with MIME type text/json: "http://localhost/angular-ib/app/detail?procID=6038"." is a 404 too. Or maybe your server can answer to a new "/detail" request, but can't answer it in the context of the angular app.

[Saverio Trioni]

The point is that a route that's loaded by angularJS with the routeProvider never reaches the server. The same route, when typed or accessed by external link or bookmark, reaches the server.

The typical way to solve this is to respond to any request for a view (not the API) with the initial page. You can do it with a rewrite in nginx, with a rack middleware, with a nodejs middleware, anything that is able to anlyze the request path and headers, and change what the actual servers sees as the request path.

When the app page (say, "index.html") comes back to the browser, angular sees the original path and loads the correct view.

[lokesh malpani]

I am also facing same issue...if you have the solutions than please let me know.thanks in advance.

[Saverio Trioni]

It is quite easy, just set up a filter in the router or in ApplicationController, which intercepts all requests that accept html and renders the main app page. You can check something like request.format.html?, it should work in general. 

--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/G7d3Oklxk0M/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[Sander Elias]

Hi lokesh,

This should be fix at your server side. What server are you using?

Regards

Sander