ui-router html5mode not working with extend url or url with params

Question

First, I had this issue, link, and after some reading and some tests I noticed a problem with the url while refreshing the page using ui-router with html5 mode enabled.

Problem

The problem occurs when I used an extend url, for example /app/Welcome. At first, I tought it was because of the nested state, since I was only using this type of url when I had a child state. But the problem also happened when I tried to access an url with parameters. These are the url I've tested so far:

url: 'Service/Tools' url: '/Service/Tools' url: '/Service/:myParam' url: '/Service/Tools/:myParam'

For all of these url, when I refresh the page there is this error:

Uncaught SyntaxError: Unexpected token <

Uncaught ReferenceError: angular is not defined

Resource interpreted as Stylesheet but transferred with MIME type text/html:

The only way I was able to refresh the page using html5mode enabled, was using a url like this: url:'/Service'.

It doesn't matter if it's a single state, nested state, abstract, etc.. If the url has more than 1 /, the error apear.

Server

I'm running this on an apache server with this rewrite rule:

<IfModule mod_rewrite.c> 
    RewriteEngine On RewriteBase / 
    Options FollowSymLinks
    RewriteRule ^index\.html$ - [L] 
    RewriteCond %{REQUEST_FILENAME} !-f 
    RewriteCond %{REQUEST_FILENAME} !-d 
    RewriteRule . /index.html [L] 
</IfModule>

Does anyone have any idea on how to solve this?

do you have some sort of server side framework doing routing also ...besides htaccass? Or directories that match the virtual ones that angular uses? Also look at paths used for your scripts and stylesheets in dev tools network. Sounds like they are not set up right either — charlietfl
– charlietfl, Commented Jan 26, 2016 at 19:39
No. Just that peace of code. By the way, the tests I've made was done with a blank angularjs project. Only ui-router was used. Not even controllers were created. — celsomtrindade
– celsomtrindade, Commented Jan 26, 2016 at 19:40
is server localhost on your machine or other? It really sounds like you are getting 404 error html sent instead of resource files scripts/css — charlietfl
– charlietfl, Commented Jan 26, 2016 at 19:42
network in dev tools....look in the response bodies and look at url's used for scripts/css — charlietfl
– charlietfl, Commented Jan 26, 2016 at 19:44
@charlietfl before refreshing: (index):14 - after: Test:14. Test is the second part of the URL. Example: Service/Test. Also on the console log there is this: "localhost/Service/dist/css/app.min.css". — celsomtrindade
– celsomtrindade, Commented Jan 26, 2016 at 19:47

charlietfl · Accepted Answer · 2016-01-26 20:27:33Z

1

It seems you need to provide an absolute url for your extenal resources.

Add a leading / to reasource tags href or src. This will tell browser to start at site root when making requests

answered Jan 26, 2016 at 20:27

charlietfl

172k14 gold badges125 silver badges154 bronze badges

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

3 Comments

celsomtrindade Over a year ago

One more question i noticed while reading some of these answers. They say to use .hashPrefix('!'). What is it for? Where/When should I use it?

charlietfl Over a year ago

is more for hash based url when not using html5mode. Used by search engines in the past. Can read about in $location docs ... search angular hashbang

Justin Over a year ago

Just in case anyone else has this problem... The exact same thing was happening to me, just without any errors. Solved it by adding a leading slash to templateUrls in state config - so don't forget about that too!

Collectives™ on Stack Overflow

ui-router html5mode not working with extend url or url with params

Problem

Server

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Problem

Server

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related