Getting a 404 error when deploying production build - javascript

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.

Related

NullInjectorError: No provider for Overlay! NgxToastr

I have been scratching my head for last one day on this. I am using Ngx-Toastr package in my angular application. Below are the points which I think help you understand the problem.
In dev server (ng serve) I didn't get any error there was no Nullinjector problem, then I make a production build using the following command (ng build). Until this point everything works fine. Now I need to optimize the bundle size so I ran this (ng build --prod). Build was successful no error Now it's time to serve the code (I am using Node server to serve this). Here the problem starts -
First it's asking for
'NullInjectorError: No provider for ToastrService'
which is coming from the Ngx-Toastr Package it self and It makes sense so I add that service to the appmodules and also in other Lazy loaded modules in the providers array. So after this the error has gone . But next is what I want to talk about -
Next it is asking for 'NullInjectorError: No provider for Overlay!' So I though there must be this service from the package which needs to be added in the providers array. So I tried to import it from the package it self and to add it in the providers array like below:
import { Overlay } from 'ngx-toastr/overlay/overlay';;
doing so got the below error
Module not found: Error: Can't resolve 'ngx-toastr/overlay/overlay'
Next I tried searching for this problem and found some stackoverflow solutions which suggest to add the following line:
import {OverlayModule} from '#angular/cdk/overlay';
I added this module in the imports array of every modules. Nothing got changed.
Now I have no clue what to import and where to import. And I am also not sure whether I am going right or not or where should I start looking into it. I also doubt that this error is coming from that package or what!! cause It should work without implicitly importing those services.
I run the following command to get the error ahead of production build:
ng serve --prod --optimization=false
Please also mention how to debug the following error, sometime after production build we get error like this which is undoubtly makes no sense:
ERROR Error: "StaticInjectorError[t -> t]:
StaticInjectorError(Platform: core)[t -> t]:
NullInjectorError: No provider for t!"
I hope my explanation makes some sense to you. Thanks for your time and sorry for this long question.
Lastly FYI : I have already removed node-modules and re-installed it.
Make sure you're using a version of ngx-toastr compatible with your version of angular and typescript. https://github.com/scttcper/ngx-toastr#dependencies
ngx-toastr v13 requires angular >= 10

Webpack error, Loading chunk failed

Stack: Webpack 4.16.0, Node8, Vuejs2
I am seeing the below error, whilst serving my Vuejs application.
Error: Loading chunk 4 failed.
(missing: https://myapp.com/ui.chunk.bundle.js)
at HTMLScriptElement.s (demo:1)
This error is consistent across builds, the actual file itself is accesible via the URL.
I am using code splitting via import() and the initial app loads fine, but then the flow will break when another chunk is loaded, it can also vary between ui.chunk.bundle.js & vendors~ui.chunk.bundle.js.
When building for production, a new error is shown, but it seems related as also linked to loading modules:
demo:1 TypeError: Cannot read property 'call' of undefined
at o (demo:1)
at Object.349 (ui.chunk.bundle.js:1)
at o (demo:1)
at o.t (demo:1)
I have tried upgrading webpack and babel, but am at a loss as to what this could be down to as it was working perfectly fine before.
When running the application on my local machine and not Google App Engine, everything seems fine.
How the app is loaded:
It is loaded into other website via a script tag, so domainA.com runs the script tag which calls myapp.com/js and the flow begins, i.e the app loads various chunks based on some logic.
When accessing the webpack generated index page bundle at myapp.com everything loads correctly.
Please help!
That is rather deep and surely not easily fixed in two steps, best you create a new project using cli, if convenient with recommended presets, and if it still persist check the npm packages you installed and make sure none of them are discontinued and are up-to-date at least according to your version of vue.
Its might be due to "webpack.config.js" where you can just try with updating output object
module.exports = {
output: {
chunkFilename: '[id].chunk.[chunkhash].js',
}
};
Hope it should work!
This might be a cross site scripting problem.
Make sure that myapp.com sets the correct headers.
On myapp.com, set this header:
Access-Control-Allow-Origin: https://domainA.com
You should also make sure, that your script tag has async set to false:
<script async="false" …

How do I change Javascript without restarting the server?

I can't seem to change any of my JavaScript files without restarting the server - it really kills a lot of the live-reloading fun of working in Phoenix. I don't do a ton of JavaScript, so I'm not sure if I'm doing something wrong.
Phoenix version: 1.2.0
Steps to reproduce:
Create a new project with mix phoenix.new foo
Create web/static/js/foo.js file.
In that file, write alert("Hello, world!");
In app.js, include import "web/static/js/foo" at the bottom.
Start Phoenix with mix phoenix.server and navigate to localhost:4000.
It doesn't matter how many times you refresh the page, you'll see an alert box with "Hello world!" every time, without fail.
Edit the foo.js message to be "Hello worlds!"
I expect that I'll still get an alert message with updated text, but the alert boxes stop appearing - altogether. They only start appearing again when I restart the server.
Is this intended behavior? A bug in Phoenix? Am I writing my JS code in a way that Brunch doesn't expect it? Is this a Babel issue? Should I be organizing my code differently?
Should add that I'm developing in Chrome on Linux - in case this might be a browser issue
Edit: I can't reproduce this exact issue anymore, but I'm still having issues with my non-toy project:
My original issue was in the app I'm actually developing - where I have global.jQuery = require("jquery") and global.bootstrap = require("bootstrap") in app.js. If I comment those two lines, save, and uncomment, I get a Javascript error in the browser: app.js:16Uncaught Error: Cannot find module 'jquery' from 'web/static/js/app.js'
Is this intended behavior? Yes.
A bug in Phoenix? No.
Am I writing my JS code in a way that Brunch doesn't expect it? Right you are.
Is this a Babel issue? Nope.
Should I be organizing my code differently? Probably.
Brunch (or Node.js or any other module bundler) expects relative path in import statement: it fails to resolve web/static/js/foo from web/static/js/app.js and does not mark foo.js as dependency of app.js (entry point). That is why it does not rebuild app.js when foo.js is changed. When Brunch is restarted, it completely rebuilds app.js, with latest foo.js (Brunch includes it because of joinTo.javascripts in config) version from the disk.
Specify relative paths (import "./foo") and prefer import jquery from ... over global.jquery = ...
Disable caching (if enabled) in your client (browser).
Disable caching (if enabled) in your server.

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

AngularJs Uncaught Error when deployed

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

Categories