AngularJS css styles lost when reloading page with parameter

Question

I am building an AngularJS page using UI router for routing. My problem is that when I reload a page with a parameter the css stylesheet is lost :(

The css file is referenced in my index.html like:

<link href="Content/css/style.css" rel="stylesheet" />

And my route config looks like:

  .state('member', {
        url: '/member/:userId',
        views: {
            'content': {
                templateUrl: 'app/views/member.html',
                controller: 'memberController'
            }
        },
        data: {
            access: 'access.user'
        }
    })

I also have html5mode(true) if thats make a difference. I have googled a lot without finding anyone else having this problem which leads me to the conclusion that I have completely misunderstood something :) Anyone who can point me in the right direction here?

The html5Mode exactly make the difference!! ;) ;) I would say, that this should be solved by propert ` — Radim Köhler, Mar 06 '15 at 07:54
I think that this is more to do with that `templateUrl` prepend it with a `/` so it looks like `templateUrl: '/app/views/member.html',` if you don't I believe it will be a relative path rather than an absolute. — Callum Linington, Mar 06 '15 at 08:03
`html5Mode(true)` is for turning off hash URLs, i.e. not looking like this: `http://examplesite.com/#/member` — Callum Linington, Mar 06 '15 at 08:06
Thanks guys! Unfortunately neither of your suggestions worked, I already have the base setting in my index file and the addition of slash before the templateurl does not solve the problem :( Reloading works perfectly fine for all parameterless views. — Jenny Pettersson, Mar 06 '15 at 08:15
Well I tried to create a simple plnkr [link](http://plnkr.co/edit/X26nvcz9r1DVxjBj0Wkb?p=preview) now but for some reason the views does not show when I add base href and html5Mode(true).. — Jenny Pettersson, Mar 06 '15 at 10:45

score 3 · Accepted Answer · edited May 23 '17 at 10:28

I've had a similar problem. I have always lost me stylesheets on refresh. I have tried to load the page in IE and seen some warnings I haven't seen in Chrome:

SEC7113: CSS was ignored due to mime type mismatch
File: reset.min.css

Link for SEC7113: https://msdn.microsoft.com/en-us/library/ie/hh180764(v=vs.85).aspx

-> check to make sure your css in the head are included this way:

<link rel="stylesheet" type="text/css" href="css/reset.css">

need to include type="text/css"

This also led me here: CSS is not loaded at all in Internet Explorer (SEC7113) and after examining my requests, I've found that the url of my style sheets was

viewName/css/reset.css

so I have changed my includes to

<link rel="stylesheet" type="text/css" href="/css/reset.css">

(additional slash on the start of the address to css) and all worked again ...

so in your case is should be

<link href="/Content/css/style.css" rel="stylesheet" type="text/css" />

Hope this help.

AngularJS css styles lost when reloading page with parameter

1 Answers1