AngularJS doesn't run on browser reload - javascript

I have a new project with the following components in use:
Node.js (v0.10.37)
Express micro framework
Jade templating engine
Angular.js (latest)
Material design library (material.angularjs.org)
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.

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.

Related

Ionic(Angular) and Angular projects stop live-reloading code edits after a while when served

When I run ng serve or ionic serve for my ionic and angular projects, the live-reloading feature works for a while. However, after an hour or so it stops working. I can tell because I run into an error, make a change to the code, and notice that it is the same. Then I look into the source files of the project via inspect element to see my changes have not been made. So, I restart my angular or ionic project. Usually, that fixes things. However, this is quite an annoying problem. I have experienced it twice today, once on an ionic project and once on an angular project. Is anyone else having this experience or knows how to fix it? It has been going on for a few weeks now at least for me.

Turbolink (JS) reload issue within Rails app

I'm working on a Rails 5.2 app with Turbolink installed by default. I understand that Turbolink does not reload all assets when navigating through a site so some JS components of the site stop working until I manually reload the page. In my example the navigation dropdown and save button on the edit post page doesn't work. I've tried removing Turbolink from the project altogether and this seems to fix the issue but know that I need Turbolink for performance reasons in production. To my understanding, this is the reason turbolink comes as default with Rails after version 4. The solution I' found online is to add this code below to my JS code:
document.addEventListener("turbolinks:load", function() {
my_func();
})
The problem I have with this solution is that I don't know exactly how to wrap my code with that line. I'm working with a Bootstrap theme that has 4 JS files. The smallest of these files has 200 lines and has various functions. How to do you fix this Turbolink issue when using Bootstrap themes? Do you wrap the solution around the entire javascript file?
Do you need Turbolinks for performance?
Generally, good web caching (304 for assets), defer and async for scripts, etc. will cause a browser to behave almost like with Turbolinks enabled.
But in general, if your theme and/or bootstrap (I haven't used it) doesn't have a single init function, but every single element is initializing itself, then you're probably in for a rough ride.
I would look through the prettified version of the theme (or documentation) to see if there is a general init function you can call.
Hope this helps.

Debugging AngularJS Routes in WebStorm

I love the AngularJS integration with WebStorm. It makes development of angular apps even quicker and snappier than ever. However, I'm struggling to get Chrome debugging to work. Does anyone know if this is supported through the AngularJS plugin?
I've setup the javascript debugger, and I get the Chrome extension to connect to WebStorm. I then navigate to my app's main page (the login page) and any breakpoints on that page work great. But then as soon as I change to any other route in the app, the breakpoints and variable inspection just stop working.
I imagine that's because WebStorm doesn't know which javascript file (or angular module) is being executed after the route changes. Does anyone know if there is a way to configure this to make it work? It would be really great to be able to inspect/debug my $scope variables, bindings, services/directives, etc.
Thanks in advance for any help.
PS. I'm currently using the WebStorm 8 EAP, but I also have WebStorm 7 available.
UPDATE: After some more googling, I found that you have to setup the Run/Debug Configurations within WebStorm. My problem was that I had the wrong Remote URL for my project's root folder. After changing that configuration, it works great :)

How to inject javascript on tomcat server without changing jsp/html file

is there a way to inject javascript into pages served by tomcat?
I know it can be performed by http://httpd.apache.org/ but not sure about tomcat.
Reason: I do not wish to edit the deployment by project team to perform instrumentation, they might blame me for code change, but if I can inject without change to their code It will insulate myself from being blamed =x
Please provide reason when voting my question so I can improve.
If you don't care about persistent code, I think the fastest way to inject code is to open up the developer tools and copy&paste the javascript code you need to inject.
In chrome you can edit the source code and when you "save" the changes it will recompile all the javascript code.
Other browsers should have this "feature" as well.
Keep in mind that if you leave/close/refresh the page all the code you have injected will be lost.
Hope this helps

Rails asset pipeline hangs

I am running Rails 3.2 in the development environment. Somehow, I have gotten into a situation where any change to code while debugging hangs up in the asset pipeline while trying to deliver the new page. By hangs, I means it takes a very very long time which usually causes a timeout somewhere. At present I'm debugging some javascript so all of the assets are unchanged except for one JS file. There are no error messages I can see anywhere. When I use Chrome to look at network activity it is always hung on a pending delivery of application.js, which is where the js manifest lives.
The work around seems to be:
clear the cookies and cache on the browser
restart the app server
go to localhost:3000 to re-sign-in.
I have to do this every time I change a line of code in JS.
Clearly I am doing something wrong and this used to work fine. No new gems, so new workflow. I did not accidentally precompile assets to my knowledge.
Why would the pipeline hang delivering my custom JS (not bootstrap or angular)? Why in such a way that the work around works?
I notice several unresolved questions about this so if anyone has a clue it might help a few of us.
I just had the same experience. Deleting Rails' tmp folder seems to have solved it for now.

Categories

Resources