Angular js deployment on web server issue - javascript

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.

Related

Confusing error with AngularJS: Multiple Directive Resource Contention

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.

Setting up Sentry (Raven) with Sail.js

I am quiet new to sails.js and currently trying to integrate sentry with it. I read up the following tutorial on it.
https://docs.sentry.io/clients/node/
But i am not able to register error on sentry if i use patchGlobal command, it works on local errors when i declare it env/production file but if i define it in other places it doesn't even register local errors.
I also tried integrating it as a middleware but i am not able to integrate it correctly since the link they have provided is for express.
https://docs.sentry.io/clients/node/integrations/express/
Any help would be really appreciated !
Thanks
This might be a solution to your problem:
https://www.npmjs.com/package/sails-hook-sentry
In the end , i was able to use Winston to log errors using Sentry in Sails. Following is the link:
https://github.com/guzru/winston-sentry

Angular $compile:tpload error

I have seen quite a number of similar posts on SO about this error but so far don't think there has been any convincing answer, which is quite surprising given this error seems to be quite common in each version of Angular 1.x.
The official angular doc suggests the template path is probably misspelled but don't think that's the case; I have attached a photo of the folder structure. I get this error when routing to both main.html and second.html
EDIT1: tried to use absolute path and didn't make any difference.
EDIT2: Here is the full error:
Error: [$compile:tpload] http://errors.angularjs.org/1.5.6/$compile/tpload?p0=%2Fpage%2Fsecond.html&p1=-1&p2=
at Anonymous function (https://code.angularjs.org/1.5.6/angular.min.js:156:275)
at Anonymous function (https://code.angularjs.org/1.5.6/angular.min.js:130:399)
at m.prototype.$eval (https://code.angularjs.org/1.5.6/angular.min.js:145:96)
at m.prototype.$digest (https://code.angularjs.org/1.5.6/angular.min.js:142:158)
at m.prototype.$apply (https://code.angularjs.org/1.5.6/angular.min.js:145:399)
at l (https://code.angularjs.org/1.5.6/angular.min.js:97:233)
at D (https://code.angularjs.org/1.5.6/angular.min.js:101:373)
at e (https://code.angularjs.org/1.5.6/angular.min.js:102:448)
angular.js (13642,11)
First of all; thanks for the downvotes! Totally deserve it:D
As said in the original question, there are many similar questions on SO without good/accepted answers. I am posting my way to resolve it here in case it might help someone who, like me, are new to angular.
Secondly, Phil's comment about using un-minified version of angular during development is useful as it gives better error messages.
Thirdly, use a browser with better develop tool when learning or developing. This is partially why I got into this error without any clue how to fix it.
Finally, the real reason why I got this error is because I am opening the index.html file directly from a browser (Microsoft Edge, for some reason Chrome developer tool can't be open after an upgrade). In Edge, it only throws the error saying Error: $compile:tpload. Whereas if I use Chrome Canary, it throws two errors and the first errors saying xmlhttprequest Cross Origin requests are only supported for protocol schemes: http, https... This makes sense when I am opening the html file directly from a browser. This post has a number of good answers to resolve this.
In short, two ways to solve this: a) use a local server e.g. http-server if you have node.js install to render the html
b) Use ng-template directive to include the templates by adding the templates inside script tags in the index.html e.g. this is what I added to index.html for my case
<script type="text/ng-template" id="main.html">
This is {{name}}
</script>
<script type="text/ng-template" id="second.html">
This is {{name}}
</script>
Then when configuring the routing, simply use the template id e.g.
app.config(function ($routeProvider) {
$routeProvider.when('/', {
templateUrl: "main.html", //NOTE: use included template id
controller: 'mainCtrl'
})
.when('/second', {
templateUrl : 'second.html',
controller : 'secondCtrl'
})
.otherwise({redirectTo : '/'});
})
Then everything will work just fine when opening the html directly from a browser. For more information how this works see the official angular doc

factories within services in angular- load order issues

In my angular code, to avoid code duplication, I inject a same factory into multiple services. At first, when I did this it started throwing errors Error: [$injector:unpr] Unknown provider
After some debugging, it became obvious that this was a load order issue. To get around it, in my build.config.js file, I changed module.exports.app_files.js so that factories were loaded before services.
My build.config.js file now has this in it
module.exports = {
build_dir: 'build'
compile_dir: 'bin',
app_files: {
modules: [
'src/**/*.js',
'!src/**/*.spec.js',
'!src/**/*-service.js',
'!src/**/*-controller.js',
'!src/**/*-config.js',
'!src/**/*-directive.js',
'!src/**/*-factory.js',
'!src/**/*-filter.js',
'!src/**/*-run.js'
],
js: [
'src/**/*-factory.js',
'src/**/*-service.js',
'src/**/*-controller.js',
'src/**/*-config.js',
'src/**/*-directive.js',
'src/**/*-filter.js',
'src/**/*-run.js',
'!src/**/*.spec.js'
],
...
The source code of the angular application is here and the modification is here
It would seem that I'm forced to have a hierarchy and that I could never have a factory-named file that has a dependence on a service named file. Whether one should or shouldn't is not the debate here; I'm more concerned about the hierarchy.
I would like to know if there is an alternative way around this?
[edit] : I think I have found the source of the problem (fingers crossed that it stays fixed). I was developing using grunt watch. However, when I stopped the process and simply ran grunt, everything is happy again. Thanks to the people below for asking questions and ascertaining that this was not normal behaviour!

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