Confusing error with AngularJS: Multiple Directive Resource Contention - javascript

We are having an odd issue in our angular project. The project runs fine on my machine, but when it's run from the development server we get the following error:
Multiple directives [organizationConfiguration, organizationConfiguration] asking for new/isolated scope on: <organization-configuration ng-show="tab.id == 'organization'" organization="organization">
organizationConfiguration is an AngularJS component. The code that is causing the error is below:
<organization-configuration ng-show="tab.id == 'organization'"
organization="organization">
</organization-configuration>
I can't see anything wrong with the code and have no idea where the second scope is coming from. And like I said, the code runs fine on my local machine, but once Jenkins deploys it to the dev server it starts to break. We've been using Jenkins for years without issue so I doubt it's an issue with that.
Thanks

Did you miss to close the "organization-configuration" tag properly? I could see you give it as "/organization-configuration>" in the example.

Related

Debugging JavaScript in client

I'm facing an issue while debugging my application. Following is the architecture:
Server: Java (Servlet)
Client: React+D3
Problem: Whenever, I change some react or d3 code and if an error occurs then it just shows me that some react (or d3) error has occurred but never tells me which function the error occurred (as seen in snapshot). Now, I know that simply debugging it by having the information like variable name and searching where I defined that variable. However, situation becomes tough when I use same object multiple times (say window) and had made several changes in the code. In this case, a specific line number where the error occured can be handy and quick. Let me know if I'm missing some basics about debugging such applications?
EDIT1:
1. In the snapshot, http://localhost:8080/..../Server Server is the main servlet application, kind of launchpad, which triggers several other react-based js files.
2. The mentioned ReferenceError is inside a function updateWindow() but the console never mentions this (and that's my problem).
PS: I'm using Eclipse tomcat on server-side
I think there's no straight forward solution to this problem. So, I'll post the method that worked for me with few additional points:
Problem: It doesn't gives a nice error trace like standard Java application, probably because it mixes with JavaScript code.
At every line of the error trace, line:column specifies the error line. I used this as a reference and started manual debugging from where my application launches i.e. Server.java and look where I defined the createChart() in the JS file and drill-down until I found the referenced variable.
In case of ReactJS' error (an error after resolving reference issue), I debugged it with normal react.js (not minified version react.min.js) so that it shows me exact line of error. Minified version is cluttered and is useless while debugging.
PS: If someone has better answer I'll edit this in future.

Error in Rails with JS code

Rails will not let me run JS code, I have these errors
1)
2)
whenever you add JS code, the errors appear.
Some idea why this happening?
Just because you're getting error highlights in your IDE, doesn't necessarily mean your code is wrong. Try running your server, navigate to your site from your browser, and check the developer console. Do you still see javascript errors?
This warning (it is not an error) is being displayed because your IDE thinks that the variable $ is not defined in your code. However, it is not able to find out that $ is a global variable defined in the jQuery library, imported a few lines before.
The IDE is just saying that the presence of that variable is not guaranteed unless you properly import the needed libraries to make it exist (jQuery in this case). Your code should work properly. In order to identify errors in your javascript code, I would recommend you to use the built in console in the web browser.

Debugging Angular front-ends

We are working on a relatively simple Angular front-end (version 1.4x), and we're constantly battling very small bugs caused by typos. For example, we get data from the server and then put it in the scope:
...
$scope.result = data.results
...
See the plural there? This code just works, putting undefined in $scope.result. We would like to get some sort of warning of notification when this happens. Static analysis tools such as JSLint can't help us there, because they have absolutely no way of knowing what the server returns.
This problem manifests itself again in HTML templates:
...
<p>The result is: <emph>{{results}}</emph></p>
...
Here, too, we get no notification whatsoever we tried accessing an undefined property.
Is there a way to get any kind of notification for this? We find ourselves spending a lot of time on these bugs.
WebStorm will handle these sorts of issue for you. For example in my code {{f.$error}} I placed an extra r on the end and WS flags this a both a misspelling and Unresolved variable $errorr. WebStorm does an execlent job of handling many different frame works to include Angular and Node.

Angular js deployment on web server issue

I've developed my first spa application in Angular js but I've done it on localhost.
Now it's time to test it online. I'm sure that everything works localy but simply I can't make it work online.
It seems to me like controllers are not being loaded although they are linked well.
Routing works because html templates change but THERE ARE NO CONTROLLERS ???.
Here is sample output from console :
First,for every controller in my app I get this (total 5 times) :
Uncaught SyntaxError: Unexpected token <
And after that I get this for controller that is being used right now:
Error: [ng:areq] http://errors.angularjs.org/1.3.5/ng/areq?p0=homeCtrl&p1=not%20aNaNunction%2C%20got%20undefined
at Error (native)
at https://code.angularjs.org/1.3.5/angular.min.js:6:416
For every single controller I get the same error.
I followed rule to inject dependacys (found that on stackowerflow but it doesn't help at all) so my every controller looks like this:
myApp.controller('nearCtrl',
['$scope', 'geolocation', 'nearApartments', 'uiGmapGoogleMapApi',
function ($scope, geolocation, nearApartments, uiGmapGoogleMapApi) {...}])
Does anyone have an idea what could I do to fix this ?
Ok I found the solution,as usual it was trivial and now I feel like I shot myself in leg.
The thing was that I was very stupid and didn't follow good
practices as NAMING CONVENTION from the BEGINING of the
project !
In my index.html file there was an issue because few controllers were named by lowercase like myController.js and their real name on server was different like MyController.js so there's a problem.
I worked with git,merged branches and stuff and probabbly git messed up something with names(explains how it worked on localhost I guess) but that wouldn't happen if I had followed rules from the start.
To every wannabe Angular.js developer like me there are some great design guides and good practices described on link below.
Use them !
https://github.com/mgechev/angularjs-style-guide
Tnx everyone who tried to help me, Angular has really great community.
The trouble is with your server routing. You're serving your whole app instead of the individual JS files. First thing you should do is make sure 188.226.150.65/app/components/about/aboutController.js serves correctly the JS for aboutController.js.
Looking at each of your component folders, it seems all your controller.js files all have the same error:
Error in exception handler: The stream or file "/var/www/html/zimmer-
production/app/storage/logs/laravel.log" could not be opened: failed to open stream:
Permission denied in /var/www/html/zimmer-production/bootstrap/compiled.php:9016
The only controllers that seem to actually have any Javascript are the signup controllers and the apartmentControler. I'd check the permissions in your production environment, as that seems to be the problem.

AngularJS + Testem + Jasmine: Why is inject() giving this $injectorr error?

I'm using Testem with Jasmine to set up an environment to start unit testing in my AngularJS app. Everything was working great until the first time I tried to use the injector. This is what I got back:
test.js
describe('Custom events', function(){
beforeEach(module('AlchemyAdmin'));
beforeEach(inject());
it('should work', function() {
});
});
Error console output:
Custom events should work.
✘ Error: [$injector:modulerr] http://errors.angularjs.org/1.2.25/$in
jector/modulerr?p0=AlchemyAdmin&p1=Error%3A%20%5B%24injector%3Amodulerr%
5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.2.25%2F%24injector%2Fmodulerr
%3Fp0%3DdateRangePicker%26p1%3DError%253A%2520%255B%2524injector%253Amod
ulerr%255D%2520http%253A%252F%252Ferrors.angularjs.org%252F1.2.25%252F%2
524injector%252Fmodulerr%253Fp0%253Dpasvaz.bindonce%2526p1%253DError%252
53A%252520%25255B%252524injector%25253Anomod%25255D%252520http%25253A%25
252F%25252Ferrors.angularjs.org%25252F1.2.25%25252F%252524injector%25252
Fnomod%25253Fp0%25253Dpasvaz.bindonce%25250A%252520%252520%252520%252520
at%252520Error%252520(native)%25250A%252520%252520%252520%252520at%25252
0http%25253A%25252F%25252Flocalhost%25253A7357%25252Fvendor%25252Fangula
r%25252Fangular.min.js%25253A6%25253A450%25250A%252520%252520%252520%252
520at%252520http%25253A%25252F%25252Flocalhost%25253A7357%25252Fvendor%2
5252Fangular%25252Fangular.min.js%25253A20%25253A494%25250A%252520%25252
0%252520%252520at%252520http%25253A%25252F%25252Flocalhost%25253A7357%25
252Fvendor%25252Fangular%25252Fangular.min.js%25253A21%25253A502%25250A%
252520%252520%252520%252520at%252520http%25253A%25252F%25252Flocalhost%2
5253A7357%25252Fvendor%25252Fangular%25252Fangular.min.js%25253A33%25253
A267%25250A%252520%252520%252520%252520at%252520r%252520(http%25253A%252
52F%25252Flocalhost%25253A7357%25252Fvendor%25252Fangular%25252Fangular.
min.js%25253A7%25253A290)%25250A%252520%252520%252520%252520at%252520e%2
52520(http%25253A%25252F%25252Flocalhost%25253A7357%25252Fvendor%25252Fa
ngular%25252Fangular.min.js%25253A33%25253A207)%25250A%252520%252520%252
520%252520at%252520http%25253A%25252F%25252Flocalhost%25253A7357%25252Fv
endor%25252Fangular%25252Fangular.min.js%25253A33%25253A284%25250A%25252
Seems like there is something obvious I'm missing, but I can't quite grasp it. Note that taking out the line with the beforeEach(inject()); and writing standard tests in the it block works like a charm. Also, if I just declare an angular.module('myApp'); and then try to module() and inject() that, it works fine. Seems like something is going on in my module definition, maybe, but the app itself works fine with no errors from what I can tell!
Anybody run into this or know what I should look into? Thanks in advance!
Edit:
I thought it might make more sense if I gave a little context to my question. I have been developing an Angular app for a few weeks now, and I've been bit one to many times by not having unit tests. Having decided to TDD from here on out, I setup Testem, wrote a .spec.js file and tried to get started. I'm not testing any existing code, which will come later, but just trying to test-drive the part of the app I'm on. Before even writing my first piece of code or test, just setting up the module() and inject() calls per the docs failed miserably. That is where I am right now.
Well, I shouldn't have gotten frustrated with the angular error links. If you keep clicking through them, I eventually found a sub-dependency that I was not linking to! If anyone else finds themselves in this particular pickle, I hope this helps them! I am closing the plunker I made to remove my live code from the public. Special thanks to PSL for responding so quickly and being so willing to try to understand my issue.

Categories