Angular css files not loading when controlling two Partials with a single Controller

Question

I'm working on a web-application built upon the MEAN stack. I use bootstrap as css lib, and have some css override in two files of mine "app.css" and "mio.css" the app works just fine until I hit refresh in a controller that handles two partials, than everything gets reloaded except for my 2 css files.

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css" rel="stylesheet">

 <link rel="stylesheet" href="css/app.css">
 <link rel="stylesheet" href="css/mio.css">

If I inspect them they contain the index.html data (head body dcc)

could you suggest what's happening??

Answer 1

Try using full file paths to the css files. For example..

<link rel="stylesheet" href="/assets/css/app.css">

The issue might be on the server side. Since angular apps are single page ajax applications, the server has to redirect all requests to the index.html page EXCEPT for assets. Your server might be returning the index.html page instead of your css files.