net::ERR_EMPTY_RESPONSE when trying to find css file in angularjs directive

Question

I am receiving a net::ERR_EMPTY_RESPONSE when my webpage tries to access my css file from a directive.

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 net::ERR_EMPTY_RESPONSE in Chrome. Here's door3's documentation: http://door3.com/insights/introducing-angularcss-css-demand-angularjs#.VtPeDygrKM8

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?

Here is my app.js file that configures the css on-demand from door3:

angular.module('task2', ['ngRoute', 'ngResource', 'door3.css'])
.config(function($cssProvider) { 
        angular.extend($cssProvider.defaults, { 
            persist: true, 
            preload: true, 
            bustCache: true 
        }); 
});

Here is my directive that is getting the error, section1.js:

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'
};

Here is the associated css file, section1.css:

#section1Row {
    width: 100%;
}

#section1 {
    height: 100vh;/*100% of viewport height*/
    background-color: #D9435E;
    position: relative;
}

And here is the routes file that has a css file associated that is working just fine, routes.js:

//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'
     });
});

I am getting the following error in Chrome: GET http://localhost:8383/CompucorpTask2/n?cache=1456723626330 net::ERR_EMPTY_RESPONSE

I have the similar issue, but with *.html files. Did you find any solution? — Oleg Baranenko
– Oleg Baranenko, Commented Jan 14, 2017 at 13:04
No, I contacted door3 and they told me they would look into because it seems to be a bug. They never got back to me. I would send them an email. — Techgeekster
– Techgeekster, Commented Jan 30, 2017 at 19:55

Harsha Attray · Accepted Answer · 2016-02-29 06:42:06Z

0

The Css files aren't being served .. thats what the error means. Try and check if they are in the right folder in the sever side.

answered Feb 29, 2016 at 6:42

Harsha Attray

861 silver badge3 bronze badges

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

1 Comment

Techgeekster Over a year ago

I have checked, double checked, and triple checked. The path is correct, and the file is in the right folder.

Collectives™ on Stack Overflow

net::ERR_EMPTY_RESPONSE when trying to find css file in angularjs directive

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related