title: net::ERR_EMPTY_RESPONSE when trying to find css file in angularjs directive
body: <p>I am receiving a <code>net::ERR_EMPTY_RESPONSE</code> when my webpage tries to access my css file from a directive.</p>
  
  <p>I'm using door3's on-demand css which allows you to lazy load css files only when you need them.  This works perfectly in my route file, but in my directive file it gets the <code>net::ERR_EMPTY_RESPONSE</code> in Chrome.
  Here's door3's documentation: <a href="http://door3.com/insights/introducing-angularcss-css-demand-angularjs#.VtPeDygrKM8" rel="nofollow">http://door3.com/insights/introducing-angularcss-css-demand-angularjs#.VtPeDygrKM8</a>  </p>
  
  <p>When researching this error, I came across someone who suggested it might be my ad blocker, so I turned that off and nothing changed.  I couldn't find anything else on StackOveflow or google that was similar to my problem.  I double, and tripled checked the name and the path of the css file and everything looks good.  What could be causing this?</p>
  
  <p>Here is my app.js file that configures the css on-demand from door3:</p>
  
  <pre><code>angular.module('task2', ['ngRoute', 'ngResource', 'door3.css'])
  .config(function($cssProvider) { 
          angular.extend($cssProvider.defaults, { 
              persist: true, 
              preload: true, 
              bustCache: true 
          }); 
  });
  </code></pre>
  
  <p>Here is my directive that is getting the error, section1.js:</p>
  
  <pre><code>angular.module('task2')
  .directive('section1', function() {
      return {
          restrict: 'E',
          templateUrl: 'partials/home/section1.html',
          controller: function() {
              this.getLogo = function() {
                  return logoImage;
              };
              this.brandName = "Geek Label";
  
              this.section1Desc = "A team of self confessed geeks who are all about great digital design";
         },
         controllerAs: 'section1Ctrl',
         css: 'css/partials/home/section1.css'
      };
  });
  
  var logoImage = {
      name: 'eyeglasses logo',
      url: 'content/images/eyeglassesLogo.png'
  };
  </code></pre>
  
  <p>Here is the associated css file, section1.css:</p>
  
  <pre><code>#section1Row {
      width: 100%;
  }
  
  #section1 {
      height: 100vh;/*100% of viewport height*/
      background-color: #D9435E;
      position: relative;
  }
  </code></pre>
  
  <p>And here is the routes file that has a css file associated that is working just fine, routes.js:</p>
  
  <pre><code>//Routes
  angular.module('task2')
  .config(function($routeProvider) {
       $routeProvider.
       when('/home', {
           templateUrl: 'partials/home/home.html',
           name: "Home",
           controller: 'HomeController',
           controllerAs: "homeCtrl",
           css: 'css/partials/home/home.css'
       }).
       otherwise({
         redirectTo: '/home'
       });
  });
  </code></pre>
  
  <p>I am getting the following error in Chrome: 
  <code>GET http://localhost:8383/CompucorpTask2/n?cache=1456723626330 net::ERR_EMPTY_RESPONSE</code></p>