I have an angularJS quiz application that works fine on localhost. Once uploaded to a live server the app doesnt load and the console fires an error. I have no idea what could be wrong as the app is working locally. Here is the error:
Error: [$injector:modulerr] http://errors.angularjs.org/1.6.3/$injector/modulerr?p0=ng&p1=%5B%24compile%3Abaddir%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.6.3%2F%24compile%2Fbaddir%3Fp0%3Dng%2520%0AM%2F%3C%40http%3A%2F%2Fexpertonlinetraining.info%2Fwp-content%2Fplugins%2Feot_quiz%2Fpublic%2Fjs%2Fangular.min.js%2Cqver%3D1.0.0.pagespeed.jm.L2GCHQP8hk.js%3A1%3A425%0Ac%40http%3A%2F%2Fexpertonlinetraining.info%2Fwp-content%2Fplugins%2Feot_quiz%2Fpublic%2Fjs%2Fangular.min.js%2Cqver%3D1.0.0.pagespeed.jm.L2GCHQP8hk.js%3A4%3A16055%0Ay%40http%3A%2F%2Fexpertonlinetraining.info%2Fwp-content%2Fplugins%2Feot_quiz%2Fpublic%2Fjs%2Fangular.min.js%2Cqver%3D1.0.0.pagespeed.jm.L2GCHQP8hk.js%3A4%3A16467%0AIc%2F%3C%40http%3A%2F%2Fexpertonlinetraining.info%2Fwp-content%2Fplugins%2Feot_quiz%2Fpublic%2Fjs%2Fangular.min.js%2Cqver%3D1.0.0.pagespeed.jm.L2GCHQP8hk.js%3A1%3A1416%0Ap%40http%3A%2F%2Fexpertonlinetraining.info%2Fwp-content%2Fplugins%2Feot_quiz%2Fpublic%2Fjs%2Fangular.min.js%2Cqver%3D1.0.0.pagespeed.jm.L2GCHQP8hk.js%3A1%3A1201%0Ay%40http%3A%2F%2Fexpertonlinetraining.info%2Fwp-content%2Fplugins%2Feot_quiz%2Fpublic%2Fjs%2Fangular.min.js%2Cqver%3D1.0.0.pagespeed.jm.L2GCHQP8hk.js%3A4%3A16968%0ACe%2F%3C%40http%3A%2F%2Fexpertonlinetraining.info%2Fwp-content%2Fplugins%2Feot_quiz%2Fpublic%2Fjs%2Fangular.min.js%2Cqver%3D1.0.0.pagespeed.jm.L2GCHQP8hk.js%3A4%3A3365%0Ainvoke%40http%3A%2F%2Fexpertonlinetraining.info%2Fwp-content%2Fplugins%2Feot_quiz%2Fpublic%2Fjs%2Fangular.min.js%2Cqver%3D1.0.0.pagespeed.jm.L2GCHQP8hk.js%3A4%3A10908%0Ad%40http%3A%2F%2Fexpertonlinetraining.info%2Fwp-content%2Fplugins%2Feot_quiz%2Fpublic%2Fjs%2Fangular.min.js%2Cqver%3D1.0.0.pagespeed.jm.L2GCHQP8hk.js%3A4%3A9758%0Ag%2F%3C%40http%3A%2F%2Fexpertonlinetraining.info%2Fwp-content%2Fplugins%2Feot_quiz%2Fpublic%2Fjs%2Fangular.min.js%2Cqver%3D1.0.0.pagespeed.jm.L2GCHQP8hk.js%3A4%3A9905%0Ap%40http%3A%2F%2Fexpertonlinetraining.info%2Fwp-content%2Fplugins%2Feot_quiz%2Fpublic%2Fjs%2Fangular.min.js%2Cqver%3D1.0.0.pagespeed.jm.L2GCHQP8hk.js%3A1%3A1011%0Ag%40http%3A%2F%2Fexpertonlinetraining.info%2Fwp-content%2Fplugins%2Feot_quiz%2Fpublic%2Fjs%2Fangular.min.js%2Cqver%3D1.0.0.pagespeed.jm.L2GCHQP8hk.js%3A4%3A9667%0Aeb%40http%3A%2F%2Fexpertonlinetraining.info%2Fwp-content%2Fplugins%2Feot_quiz%2Fpublic%2Fjs%2Fangular.min.js%2Cqver%3D1.0.0.pagespeed.jm.L2GCHQP8hk.js%3A4%3A11811%0Ac%40http%3A%2F%2Fexpertonlinetraining.info%2Fwp-content%2Fplugins%2Feot_quiz%2Fpublic%2Fjs%2Fangular.min.js%2Cqver%3D1.0.0.pagespeed.jm.L2GCHQP8hk.js%3A3%3A373%0APc%40http%3A%2F%2Fexpertonlinetraining.info%2Fwp-content%2Fplugins%2Feot_quiz%2Fpublic%2Fjs%2Fangular.min.js%2Cqver%3D1.0.0.pagespeed.jm.L2GCHQP8hk.js%3A3%3A686%0Aue%40http%3A%2F%2Fexpertonlinetraining.info%2Fwp-content%2Fplugins%2Feot_quiz%2Fpublic%2Fjs%2Fangular.min.js%2Cqver%3D1.0.0.pagespeed.jm.L2GCHQP8hk.js%3A2%3A5429%0A%40http%3A%2F%2Fexpertonlinetraining.info%2Fwp-content%2Fplugins%2Feot_quiz%2Fpublic%2Fjs%2Fangular.min.js%2Cqver%3D1.0.0.pagespeed.jm.L2GCHQP8hk.js%3A9%3A72076%0Ai%40http%3A%2F%2Fexpertonlinetraining.info%2Fwp-includes%2Fjs%2Fjquery%2Fjquery.js%2Cqver%3D1.12.4.pagespeed.jm.pPCPAKkkss.js%3A1%3A27444%0AfireWith%40http%3A%2F%2Fexpertonlinetraining.info%2Fwp-includes%2Fjs%2Fjquery%2Fjquery.js%2Cqver%3D1.12.4.pagespeed.jm.pPCPAKkkss.js%3A1%3A28213%0Aready%40http%3A%2F%2Fexpertonlinetraining.info%2Fwp-includes%2Fjs%2Fjquery%2Fjquery.js%2Cqver%3D1.12.4.pagespeed.jm.pPCPAKkkss.js%3A1%3A30004%0AK%40http%3A%2F%2Fexpertonlinetraining.info%2Fwp-includes%2Fjs%2Fjquery%2Fjquery.js%2Cqver%3D1.12.4.pagespeed.jm.pPCPAKkkss.js%3A1%3A30366%0A
Does anyone have any insights? I have developed the quiz as a wordpress plugin with some variables localized to the angular script.
I am using angular 1.6 with angular route. Some of my code is below:
(function(){
/*
* Declaration of main angular module for this appllication.
*
* It is named quiz and has no dependencies (hence the
* empty array as the second argument)
*/
angular
.module("quiz", []);
})();
Controllers:
(function () {
angular
.module("quiz")
.controller("quizCtrl", QuizController);
QuizController.$inject = ['quizmanager'];
function QuizController(quizmanager)
{
...
Controllers:
(function () {
angular
.module("quiz")
.controller("resultsCtrl", ResultsController);
ResultsController.$inject = ['quizmanager'];
function ResultsController(quizmanager)
{
var vm = this;
vm.quizmanager = quizmanager;
}
})();
CONTROLLER:
(function () {
angular
.module("quiz")
.controller("welcomeCtrl", WelcomeController);
WelcomeController.$inject = ['quizmanager'];
function WelcomeController(quizmanager)
{
var vm = this;
vm.quizmanager = quizmanager;
vm.activateQuiz = activateQuiz;
/*
* STARTING POINT OF APPLICATION. All the other views are hidden
*/
quizmanager.loadQuiz();
function activateQuiz()
{
quizmanager.changeState("quiz", true);
quizmanager.countdown();
}
}
})();
Based on your responses, heres where i think the problem lies:
FACTORIES:
(function () {
angular
.module("quiz")
.factory("quizmanager", QuizManager)
.filter('formatTimer', function () {
return function (input)
{
function z(n) {
return (n < 10 ? '0' : '') + n;
}
var seconds = input % 60;
var minutes = Math.floor(input / 60);
var hours = Math.floor(minutes / 60);
return (z(hours) + ':' + z(minutes) + ':' + z(seconds));
};
});
QuizManager.$inject = ['$http', '$timeout', '$httpParamSerializer', '$filter'];
......
I have modified the app and added the filter as a seperate module like so:
(function () {
angular
.module("quiz")
.filter('formatTimer', function () {
return function (input)
{
function z(n) {
return (n < 10 ? '0' : '') + n;
}
var seconds = input % 60;
var minutes = Math.floor(input / 60);
var hours = Math.floor(minutes / 60);
return (z(hours) + ':' + z(minutes) + ':' + z(seconds));
};
});
})();
The app still works in localhost but Im still getting an error:
Error: [$injector:modulerr] http://errors.angularjs.org/1.6.3/$injector/modulerr?p0=ng&p1=%5B%24compile%3Abaddir%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.6.3%2F%24compile%2Fbaddir%3Fp0%3Dng%2520%0AM%2F%3C%40http%3A%2F%2Fexpertonlinetraining.info%2Fwp-content%2Fplugins%2Feot_quiz%2Fpublic%2Fjs%2Fangular.min.js%2Cqver%3D1.0.0.pagespeed.jm.L2GCHQP8hk.js%3A1%3A425%0Ac%40http%3A%2F%2Fexpertonlinetraining.info%2Fwp-content%2Fplugins%2Feot_quiz%2Fpublic%2Fjs%2Fangular.min.js%2Cqver%3D1.0.0.pagespeed.jm.L2GCHQP8hk.js%3A4%3A16055%0Ay%40http%3A%2F%2Fexpertonlinetraining.info%2Fwp-content%2Fplugins%2Feot_quiz%2Fpublic%2Fjs%2Fangular.min.js%2Cqver%3D1.0.0.pagespeed.jm.L2GCHQP8hk.js%3A4%3A16467%0AIc%2F%3C%40http%3A%2F%2Fexpertonlinetraining.info%2Fwp-content%2Fplugins%2Feot_quiz%2Fpublic%2Fjs%2Fangular.min.js%2Cqver%3D1.0.0.pagespeed.jm.L2GCHQP8hk.js%3A1%3A1416%0Ap%40http%3A%2F%2Fexpertonlinetraining.info%2Fwp-content%2Fplugins%2Feot_quiz%2Fpublic%2Fjs%2Fangular.min.js%2Cqver%3D1.0.0.pagespeed.jm.L2GCHQP8hk.js%3A1%3A1201%0Ay%40http%3A%2F%2Fexpertonlinetraining.info%2Fwp-content%2Fplugins%2Feot_quiz%2Fpublic%2Fjs%2Fangular.min.js%2Cqver%3D1.0.0.pagespeed.jm.L2GCHQP8hk.js%3A4%3A16968%0ACe%2F%3C%40http%3A%2F%2Fexpertonlinetraining.info%2Fwp-content%2Fplugins%2Feot_quiz%2Fpublic%2Fjs%2Fangular.min.js%2Cqver%3D1.0.0.pagespeed.jm.L2GCHQP8hk.js%3A4%3A3365%0Ainvoke%40http%3A%2F%2Fexpertonlinetraining.info%2Fwp-content%2Fplugins%2Feot_quiz%2Fpublic%2Fjs%2Fangular.min.js%2Cqver%3D1.0.0.pagespeed.jm.L2GCHQP8hk.js%3A4%3A10908%0Ad%40http%3A%2F%2Fexpertonlinetraining.info%2Fwp-content%2Fplugins%2Feot_quiz%2Fpublic%2Fjs%2Fangular.min.js%2Cqver%3D1.0.0.pagespeed.jm.L2GCHQP8hk.js%3A4%3A9758%0Ag%2F%3C%40http%3A%2F%2Fexpertonlinetraining.info%2Fwp-content%2Fplugins%2Feot_quiz%2Fpublic%2Fjs%2Fangular.min.js%2Cqver%3D1.0.0.pagespeed.jm.L2GCHQP8hk.js%3A4%3A9905%0Ap%40http%3A%2F%2Fexpertonlinetraining.info%2Fwp-content%2Fplugins%2Feot_quiz%2Fpublic%2Fjs%2Fangular.min.js%2Cqver%3D1.0.0.pagespeed.jm.L2GCHQP8hk.js%3A1%3A1011%0Ag%40http%3A%2F%2Fexpertonlinetraining.info%2Fwp-content%2Fplugins%2Feot_quiz%2Fpublic%2Fjs%2Fangular.min.js%2Cqver%3D1.0.0.pagespeed.jm.L2GCHQP8hk.js%3A4%3A9667%0Aeb%40http%3A%2F%2Fexpertonlinetraining.info%2Fwp-content%2Fplugins%2Feot_quiz%2Fpublic%2Fjs%2Fangular.min.js%2Cqver%3D1.0.0.pagespeed.jm.L2GCHQP8hk.js%3A4%3A11811%0Ac%40http%3A%2F%2Fexpertonlinetraining.info%2Fwp-content%2Fplugins%2Feot_quiz%2Fpublic%2Fjs%2Fangular.min.js%2Cqver%3D1.0.0.pagespeed.jm.L2GCHQP8hk.js%3A3%3A373%0APc%40http%3A%2F%2Fexpertonlinetraining.info%2Fwp-content%2Fplugins%2Feot_quiz%2Fpublic%2Fjs%2Fangular.min.js%2Cqver%3D1.0.0.pagespeed.jm.L2GCHQP8hk.js%3A3%3A686%0Aue%40http%3A%2F%2Fexpertonlinetraining.info%2Fwp-content%2Fplugins%2Feot_quiz%2Fpublic%2Fjs%2Fangular.min.js%2Cqver%3D1.0.0.pagespeed.jm.L2GCHQP8hk.js%3A2%3A5429%0A%40http%3A%2F%2Fexpertonlinetraining.info%2Fwp-content%2Fplugins%2Feot_quiz%2Fpublic%2Fjs%2Fangular.min.js%2Cqver%3D1.0.0.pagespeed.jm.L2GCHQP8hk.js%3A9%3A72076%0Ai%40http%3A%2F%2Fexpertonlinetraining.info%2Fwp-includes%2Fjs%2Fjquery%2Fjquery.js%2Cqver%3D1.12.4.pagespeed.jm.pPCPAKkkss.js%3A1%3A27444%0AfireWith%40http%3A%2F%2Fexpertonlinetraining.info%2Fwp-includes%2Fjs%2Fjquery%2Fjquery.js%2Cqver%3D1.12.4.pagespeed.jm.pPCPAKkkss.js%3A1%3A28213%0Aready%40http%3A%2F%2Fexpertonlinetraining.info%2Fwp-includes%2Fjs%2Fjquery%2Fjquery.js%2Cqver%3D1.12.4.pagespeed.jm.pPCPAKkkss.js%3A1%3A30004%0AK%40http%3A%2F%2Fexpertonlinetraining.info%2Fwp-includes%2Fjs%2Fjquery%2Fjquery.js%2Cqver%3D1.12.4.pagespeed.jm.pPCPAKkkss.js%3A1%3A30366%0A angular.min.js,qver=1.0.0.pagespeed.jm.L2GCHQP8hk.js:1:425
Description
This error occurs when a module fails to load due to some
exception. The error message above should provide additional context.
A common reason why the module fails to load is that you've forgotten
to include the file with the defined module or that the file couldn't
be loaded.
Using ngRoute
In AngularJS 1.2.0 and later, ngRoute has been moved to
its own module. If you are getting this error after upgrading to 1.2.x
or later, be sure that you've installed ngRoute.
Monkey-patching AngularJS's ng module
This error can also occur if you
have tried to add your own components to the ng module. This has never
been supported and from 1.3.0 it will actually trigger this error. For
instance the following code could trigger this error.
angular.module('ng').filter('tel', function (){}); Instead create your
own module and add it as a dependency to your application's top-level
module. See #9692 and #7709 for more information
What version of AngularJS are you using? You might be running into the second issue description here.
Related
I have this simple angular app: janev.ga with a custom JS file for the countdown (I am using the classycountdown script).
THE PROBLEM: when I run it locally everything loads great, however, once I deployed it to the server I realized it doesn't work the same as my localhost testing. What I mean by that is when I try to access it online, it would never load the JS script on the first go, even though there are no errors. I have to refresh the page and only then would the countdown script start working...
The way I use it in the component is by declaring it in angular.json (the custom.js file):
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js",
"src/assets/js/custom.js",
"src/assets/js/jquery.classycountdown.min.js",
"src/assets/js/jquery.classycountdown.js",
"src/assets/js/jquery.knob.js",
"src/assets/js/jquery.throttle.js"
]
, then I use it in the component like this:
declare const myDate: any;
export class AppComponent implements OnInit {
myDate = myDate()[0];
scnds = (myDate()[0] * 86400) - myDate()[1];
toSec = {
seconds: this.scnds
}
}
And this is the custom.js:
function myDate(){
var rightNow = new Date();
// var theDate = rightNow.toISOString().slice(0,10).replace(/-/g,"");
var goLiveDate = new Date("08/22/2020");
var Result = Math.round(goLiveDate.getTime() - rightNow.getTime()) / (1000*3600*24);
var toTheSecond = (rightNow.getHours() * 3600) + (rightNow.getMinutes() * 60) + (rightNow.getSeconds());
return [Result.toFixed(), toTheSecond];
}
$(document).ready(function() {
var remainingSec = $('.countdown').data('remaining-sec');
$('.countdown').ClassyCountdown({
theme: "flat-colors-very-wide",
end: $.now() + remainingSec
});
});
Can anyone suggest what may the problem be? Any input would be appreciated.
Thanks!
I'm getting grey haired here because I can't get this clock to display on my SPA. I'm haveing a clock that should be displayed on the page but I can't seem to get it right. I have tried the things we were taught at the course but I can't seem to get it right. Could you please take a look at it and lend a hand perhaps. Not even the console.log is printed out.
Code in Clock.js:
function clock () {
let now = new Date()
let h = now.getHours()
let m = now.getMinutes()
let s = now.getSeconds()
m = checkTime(m)
s = checkTime(s)
let target = document.querySelector('#footer-clock')
let clockText = document.createTextNode(h + ':' + m + ':' + s)
target.appendChild(clockText)
setInterval(clock, 500)
}
function checkTime (i) {
if (i < 10) {
i = '0' + i
}
return i
}
module.exports = clock
Code in app.js:
const clock = require('./clock.js')
document.querySelector('#footer-clock').onload = function () {
clock()
console.log('Loaded')
}
And in HTML I have:
footer>
<div id="footer-clock">
</div>
</footer>
The browser doesn't understand what
module.exports = {}
const clock = require('./clock.js')
this will work when you use something like webpack for bundling and using commonjs Module
also if you look at the console in devtools in chrome you will see this error
Uncaught ReferenceError: require is not defined
note that : when you developing sites using html you should put any scripts in the script tag
like this
<script src="app.js"></script>
<script src="clock.js"></script>
now the code in clock.js will be available any where so in
app.js you can call the method without require function
clock()
also you need to use window.onload instead of
document.querySelector('#footer-clock').onload = function () {
clock()
console.log('Loaded')
}
here you can learn more about global events
I'm implement cucumber on my framework working with protractor,
this is the tree of my framework
- FM_cucumber
- features
- steps
* my_steps.js
* login.feature
- node_modules
- test
* conf.js
* package.json
Inside of my my_steps.js i have this
var steps = function(){
this.Given(/^Open google$/, function () {
this.browser.get('http://www.google.com').then(function(result){
callback(result);
});
});
};
module.exports = steps;
So to execute this feature i'm using the command cucumber.js of course i'm in the folder where I have my FM_cucumber but after I execute the cucumber.js is displaying this typeError
TypeError: Cannot read property 'get' of undefined
at World.<anonymous> (/Users/myname/Documents/FM_cucumber/features/steps/my_steps.js:4:19)
Is anybody se something wrong in my code?
I think this is because you are binding the protractor browser-object to the this(World) of CucumberJS. Protractor can 'live' on it's own in combination with CucumberJS. You only use CucumberJS to:
create featurefiles
create the binding between the featurefiles and the step implementation (with the RegEx)
use it for Hooks / Reporting
The code within the step implementation can be native Protractor syntax. So for you problem, change this
var steps = function(){
this.Given(/^Open google$/, function () {
this.browser.get('http://www.google.com').then(function(result){
callback(result);
});
});
};
module.exports = steps;
into this
var steps = function(){
this.Given(/^Open google$/, function () {
browser.get('http://www.google.com')
.then(function(result){
callback(result);
});
});
};
module.exports = steps;
Be aware of the fact that the browser.get() doesn't have a result, see here
Hope it helps
I am trying to create a AngularJS and WEB API application but this is my first time. I am getting following error...
0x800a1391 - JavaScript runtime error: 'MyApp' is undefined
My AngularJS Service file is like below and this is where it gives the error above...
MyApp.factory('CityService', ['$http', function ($http) {
var urlBase = 'http://localhost:58057/api';
var CityService = {};
CityService.getCities = function () {
return $http.get(urlBase + '/Cities');
};
return CityService;
}]);
Where should I define MyApp?
I decided to switch from socketIO to sockjs for my Angularjs app. I never had problems building my project before (with socketIO) which involves minification and concat but when I build my project now I think that this file is giving me issues which is from here: https://github.com/bendrucker/angular-sockjs as it's the only new file.
/*
* angular-sockjs v0.0.1
* (c) 2014 Ben Drucker http://bendrucker.me
* Based on https://github.com/btford/angular-socket-io
* License: MIT
*/
'use strict';
angular.module('bd.sockjs', [])
.provider('socketFactory', function () {
// when forwarding events, prefix the event name
var ioSocket;
// expose to provider
this.$get = function ($timeout) {
var asyncAngularify = function (socket, callback) {
return callback ? function () {
var args = arguments;
$timeout(function () {
callback.apply(socket, args);
}, 0);
} : angular.noop;
};
return function socketFactory (options) {
options = options || {};
var socket = options.socket || new SockJS(options.url);
var wrappedSocket = {
callbacks: {},
setHandler: function (event, callback) {
socket['on' + event] = asyncAngularify(socket, callback);
return this;
},
removeHandler: function(event) {
delete socket['on' + event];
return this;
},
send: function () {
return socket.send.apply(socket, arguments);
},
close: function () {
return socket.close.apply(socket, arguments);
}
};
return wrappedSocket;
};
};
});
Is there any reason why this file won't minify?
I am aware of the typical Angularjs minification issues so I've used string-injection syntax in all of my files. However, I can't see an opportunity to do that with this file and there isn't a minified file included with the Bower install.
This is the error in the browser console which looks to me like an injection issue:
Error: [$injector:unpr] http://errors.angularjs.org/1.3.0-beta.13/$injector/unpr?p0=aProvider%20%3C-%20a%20%3C-ocketFactory%20%3C-%socket
UPDATE:
To test that it was this file causing the issue I hosted the file on a CDN instead of minifying it. Everything works fine now so it must be this file causing the issue. It would be interesting to know what the problem is if anyone comes across this question.
Solved this on Github. #efeder was mostly correct (although it's this.$get and not this.get). The issue is that v0.0.1 didn't have proper annotations but v0.1 (latest) fixed that.