AngularJs Uncaught Error when deployed - javascript

I am seeing this error in AngularJS
Wierdly, it only occurs when I deploy it in Azure Cloud.
In my local instance - it doesn't occur.
Any ideas?
Update: this is the actual website
login using this sample account
sample#test.com / 1Sample
UPDATE! I suspect that this script causes the error
I dont know why the select.js fails to minify
https://github.com/angular-ui/ui-select
I actually installed the ui-select via bower command line - and then just include it manualy in the bundleconfig. Is this the issue here?
UPDATE - I pinpoint the error and seems like the config of the ui-select is the culprit
Any idea on this?

The issue is because it's getting a 404 error for this resource:
http://tradies-prototype.cloudapp.net/bundles/angular-animate.min.js.map
Make sure to include the .map files in your bundle.
EDIT:
As #CaspNZ pointed out in the comments bellow, if you have a look at this:
http://tradies-prototype.cloudapp.net/bundles/angular
you will see that you are getting this error:
/* Minification failed. Returning unminified contents.
(248,386-393): run-time error JS1019: Can't have 'break' outside of loop: break a
*/
Which means that there is something wrong with your ASP.Net MVC Bundling. It could be many things, but make sure that you are aware of this, so that your angularJs code can be minified properly.
EDIT 2
Also, have a look at this: Mvc4 bundling, minification and AngularJS services and this: http://www.codeproject.com/Tips/786205/ASP-NET-MVC-bundling-minification-with-angularjs-a

Related

Error while loading zone.js and main.js file

I have a django(1.6.11) project running perfectly fine. I want to use it with Angular2. So, I have been following this example. I am getting the following error on localhost:8000 page. By the way it shows Cannot GET / in localhost:3000.
Error: Zone$1http://localhost:8000/ng/node_modules/zone.js/dist/zone.js:232:1
Zone$1http://localhost:8000/ng/node_modules/zone.js/dist/zone.js:114:17
scheduleResolveOrReject/<#http://localhost:8000/ng/node_modules/zone.js/dist/zone.js:502:78
Zone$1http://localhost:8000/ng/node_modules/zone.js/dist/zone.js:265:1
Zone$1http://localhost:8000/ng/node_modules/zone.js/dist/zone.js:154:21
drainMicroTaskQueue#http://localhost:8000/ng/node_modules/zone.js/dist/zone.js:401:25
ZoneTask/this.invoke#http://localhost:8000/ng/node_modules/zone.js/dist/zone.js:339:25
Evaluating http://localhost:8000/ng/src/main.js Error loading
http://localhost:8000/ng/src/main.js localhost:8000:25
Following a suggestion for a question on stackoverflow, I changed loading long-stack-trace-zone.js instead of zone.js in my index.html code. But this says, Zone is not defined. Is this some version compatibility issue? I am using npm 4.1.1 and node v4.8.3. Please do comment if I need to show any of my files.

I'm trying to use Angular JS Timer, and am getting a 'humaniseDuration is not defined' error

I'm using: https://github.com/siddii/angular-timer#requirements
I've bower installed the 'humanize duration' library & have scripted it into my index.html correctly.
I went to the angular-timer.js file and required in 'humanize duration' - it didn't make a difference.
Anyone have any ideas?

Why do dependency problems cause javascript code not to run properly when within a Meteor project?

I have been trying to port HTML5 with js code into Meteor. I'm having Javascript dependency problems.
The code can be found at: https://github.com/cwilso/Audio-Input-Effects
I created a new basically empty meteor project (which runs fine) and then added all of the js files from the repo above (which also runs fine on its own).
In order to make sure that the load order was correct, I renamed all the js files using numeric prefixes so that they would definitely be in the same order that they are loaded in the github repo. Looking forward to Meteor coming up with a better solution to this particular issue. I made a local copy of one js file that was otherwise loaded from a url in the repo.
In order to try to initialize the js I also added a file hello.js:
if (Meteor.isClient) {
Meteor.startup(function () {
// code to run on server at startup
initAudio;
});
}
When meteor runs and I look in the console, I get the following errors:
Uncaught TypeError: o3djs.provide is not a function (120_shader.js)
Uncaught ReferenceError: initAudio is not defined (hello.js)
Uncaught ReferenceError: Matrix4x4 is not defined (110_visualizer.js)
Thank you for your help.
I was able to resolve this issue by putting all of the js source files into a single js file in the correct order.
Anybody still wanting information regarding meteor load order, Scotch.io wrote an update to the official docs which clears it up somewhat.
https://github.com/meteor/meteor/commit/a5bdf481dfece9ebc57107d71be478f9b48cbd1e

How to minify famous.angular without DI errors?

I'm running into some issues with famous-angular when minified.
A couple of the PRs I submitted yesterday were attempts to fix this, but these don't appear to have resolved the issue.
When built without minfication, everything works as expected.
When built with minification, but removing the dependency on 'famous.angular' from my app module,
the app degrades gracefully to angular only, so the layout is borked, but the underlying angular app works as expected, no errors.
When built with minification, and the app module depends on 'famous.angular',
the app does not load at all, with the following error:
Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:modulerr] Failed to instantiate module famous.angular due to:
Error: [$injector:unpr] Unknown provider: t
http://errors.angularjs.org/1.2.23/$injector/u...<omitted>...2)
By employing this method,
I was able to determine which function was not getting minified correctly,
and tripping up Angular'S dependency injection:
function LocationHashbangInHtml5Url(appBase, hashPrefix) { /* ... */ }
This is in the core angular file - angular.js,
and it does indeed minify correctly in other instances.
So I am not sure why when I include 'famous.angular' in my app module,
this introduces the error.
Anyone know whaty is amiss here?
Demo of problem:
git clone git#github.com:bguiz/browserify-gulp-starter.git
cd browserify-gulp-starter
npm install famous
bower install --save angular angular-route famous-angular
# edit gulpoptions.js
# appName: 'app',
# appFolder: './src-famousangular/app/',
gulp serve-dist
I submitted these two PR's to famous-angular previously, thinking that I had caught all of the $inject scenarios:
https://github.com/Famous/famous-angular/pull/191
https://github.com/Famous/famous-angular/pull/190
Turns out that there was a third one that I had missed, and have now submitted a patch for:
https://github.com/Famous/famous-angular/pull/195
In my question above, I said function LocationHashbangInHtml5Url(appBase, hashPrefix) { /* ... */ } in angular/angular.js was the function that was not minifying correctly.
This was incorrect, and the culprit was in fact a provider in famous-angular/src/scripts/directives/fa-input.js.
For the curious, here is the process that I used to figure the above out.
As an added bonus, I happen to have discovered an additional technique to use when debugging dependency injection errors in minified AngularJs apps.
It turns out that the technique that I linked to above ( https://stackoverflow.com/a/25126490/194982 ) does not always work correctly.
What did work in the end, was to traverse up the execution stack, until we get to the invoke() function, as described in that technique. Then, instead of inspecting only fn, look in the Scope Variables tab in the the developer tools, and inspect every scope member which is a function.
This casts a wider net, and results in more things which need to be inspected;
but was necessary in this case, and I suspect might apply in others.

Getting a 404 error when deploying production build

I'm getting an error about Application.js not being found once I've copied the application over to a web server.
http://site/app/Application.js?_dc=1404504339794 404 (Not Found)
But obviously, this is wrong since once you run sencha app build everything is minified to app.js.
I looked at the generated app.js and index.html and there is no mention of Application.js anywhere.
I'm running: sencha app build production and copying the content of the production build over.
I am also getting a C1009: Circular reference warning during the build. And here it is:
in /controller/MainContent.js at line 192
var w = Ext.widget('EditPortalUserWindow'); //this creates a widget defined in the MainContent.js VIEW
And within that view at some point in one of the widgets, I use this to define the URL of a form:
url: GlobalVars.contactPostApiUrl //if I comment this out, the warning goes away...
GlobalVars is defined in app.js
Ext.define('GlobalVars', {
singleton: true,
contactPostApiUrl: 'http://site/CustomerPortal.WebAPI/api/contact/post'
});
I want GlobalVars to be available from everywhere, which is why I put it in app.js.
Any ideas ? Thank you!
I have seen something similar already - the production build requiring files it shouldn't. The following should help:
run the development version and see if you get any synchronous loading warning, fix if yes.
run sencha app build --clean
If it does not help run this sequence
sencha ant clean
sencha app refresh
sencha app build
#Francis Ducharme Adding to the above coversation , i m sending u two links which i guess might help u with C1009 .
C1009 Link 1
C1009 Link 2
I "solved" this issue by actually creating the file it is looking for (an empty one) and this seems to work. Although I feel a bit uncomfortable with this fix.

Categories