0

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?

Community
  • 1
  • 1
celsomtrindade
  • 4,501
  • 18
  • 61
  • 116
  • 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 Jan 26 '16 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 Jan 26 '16 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 Jan 26 '16 at 19:42
  • network in dev tools....look in the response bodies and look at url's used for scripts/css – charlietfl Jan 26 '16 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: "http://localhost/Service/dist/css/app.min.css". – celsomtrindade Jan 26 '16 at 19:47
  • i don't know how your directories are structured, assume that is correct path on one of the bad url's in address bar that throws errors? Errors I would look at is `angular not defined` ...and see if file is loading – charlietfl Jan 26 '16 at 19:49
  • Just to be clear, you only serve one main page html file correct? – charlietfl Jan 26 '16 at 19:51
  • the correct path should be: `localhost/dist/css/app.min.css`, or `dist/js`, but always like this `localhost/dist`. About the one main page, I only request index.html. Every other .html is loaded via templateURL on the state config – celsomtrindade Jan 26 '16 at 19:53
  • ohhh so you see 2 `localhost` ...//localhost/localhost? Doesn't show up that way up above. Seems like you need to modify href and src in those tags... or base maybe wrong? – charlietfl Jan 26 '16 at 19:56
  • I bet if you look inside body of those files it's sending default 404 html or something like that – charlietfl Jan 26 '16 at 19:59
  • No no, only one `localhost` the problem is, it's adding an extra argument after localhost and before dist. like this `localhost/service/dist`. It should always be only `localhost/dist`. About the base tag, its just like this: `base href="/"` Also, nothing else is loaded, not even the main view It stops right at the beggining. – celsomtrindade Jan 26 '16 at 20:00
  • put a leading `/` in front of relative url's in script and css tags. Or make them full `http://localhost/dist` path and see if that works – charlietfl Jan 26 '16 at 20:02
  • Well.. Thank you sir. Leading `/` seems to be working. I've read about this before, but the answer was saying to put a leading slash on the nested state url, not on the main requests. – celsomtrindade Jan 26 '16 at 20:23
  • thatt leading `/` makes it an absolute url to browser....will always start at site root when it makes request. Has nothing to do with angular...it's due to the virtual directories in url. To browser it sees those as real directories – charlietfl Jan 26 '16 at 20:24
  • I did had tried this before, but was still with other problems, so removed it and continued working.. But now it's solved. Thanks.If you could make an answer so i can close the topic – celsomtrindade Jan 26 '16 at 20:25

1 Answers1

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

charlietfl
  • 170,828
  • 13
  • 121
  • 150
  • 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? – celsomtrindade Jan 26 '16 at 21:00
  • 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` – charlietfl Jan 26 '16 at 21:03
  • 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! – Justin Aug 04 '16 at 14:13