AngularJS doesn't run on browser reload

Question

I have a new project with the following components in use:

1. Node.js (v0.10.37)
2. Express micro framework
3. Jade templating engine
4. Angular.js (latest)
5. Material design library (material.angularjs.org)
6. Jquery

I have an issue when I do browser reload (hitting the browser refresh button). I am not using any of the Angular.js routing capabilities. I am using the Express router and I have a route for every page.

When I try to refresh, a page build with this components, sometimes (1 of 20 reloads) the AngularJS just doesn't run without any console errors.

The issue is more common when I navigate between routes like:

I am on localhost:3000/index and I go in localhost:3000/about

In this case is more likely to occur this issue.

EDIT: I am not using any of the AngularJS routing capabilities.

EDIT: I also tested the DOMContentLoaded wrapping solution.

EDIT: I attached a plunker but the issue doesn't reproduce. I think it has something to do with the server too. The plunker is really close to reality.

ng-app="StarterApp"
See the plunker :)

EDIT: http://plnkr.co/edit/Vi1AQxNxJTDBf4B1ZEhr?p=preview

EDIT: If you encount the error on plunker please tell me.

EDIT: I also tried to activate: $locationProvider.html5Mode(true);

EDIT: I also found that this occurs when the server and computer (running on localhost) is really stressed. (82% RAM - 1 CPU core at 99%)

I also tracked the requests and I found that the files are loaded correctly on main requests but the requests done in Angular (Ajax requests) doesn't fire.

I also installed some Chrome AngularJS debugging plugin and it doesn't run either when this occurs.

This happens on all my pages sometimes, so I don't think that some code will be useful.

To fix this I reload again and sometimes I reload 2 times to fire up the Angular.JS.

This are the following cases:

When it is working

The interface

The console

When it is not working

The interface

The console

It really annoys me. I will continue investigating this issue but I will really appreciate any help.

Answer 1

Evrika!

I found the problem. Thank you all for support.

It was a problem about angular.js debugging chrome/firefox extensions.

The Ng-Inspector loads on every load a script ng-inspector.js and in this script it is a controller that deals with $state service and declare how to load the user modules in order to push debugging data into the plugin.

Somehow this loading configuration messes with my loading configuration.

The code was well-written but I didn't thought about this.

So if you encount this problem make sure that your debugging plugins (ng-inspector and angular batarang) don't interact with your business logic inside your project.

I made some stress testing to make sure that this issue doesn't occur anymore.

Server load

Now everythink is ok.