"moment is undefined" when launching angular app in node-webkit - momentjs

I want to launch my angular application which works in general, but when I get to use moment I got the error that "moment" is undefined.
I am using "angular-moment" from here
var app = angular.module("MyApp",
[
"ngRoute",
"ui.bootstrap",
"angularMoment",
'angular-jwt',
'angular-storage'
]);
My package.json looks like this
{
"name": "myapp",
"main": "index.html",
"toolbar":"true",
"dependencies": {
"moment": "*"
}
}
I am trying to use it with
app.config(function (moment) {
moment().format();
});
which says that moment ist undefined.
How do I have to modify my package.json to get node-webkit find moment? Or Angular-Moment?
Thanks in advance.

Make sure you have both moment and angular-moment loading in your HTML file.
Follow the instructions on the angular-moment github page. I don't think moment().format(); is valid because moment should not be a function..
Also try including "node-remote": "<local>" in your package.json file.

I encountered the same problem, I use this code snippet to solve it. You should replace vendor.js with your own files suce as angular, moment.
<script>
//hide global object
try {
window.globalTmp = global;
global = undefined;
} catch (e) {}
</script>
<script src="vendor.js"></script>
<script>
//recover global object
try {
global = window.globalTmp;
window.globalTmp = undefined;
} catch (e) {}
</script>
moment is undefined because it's added to global other than window. global is an object of node-webkit.If you type global in console, you will find global.moment in output.
I found this snippet in moment's source code which can support my explain.
var moment,
VERSION = '2.8.4',
// the global-scope this is NOT the global object in Node.js
globalScope = typeof global !== 'undefined' ? global : this,

Related

How to fix ( $ is not a function ) for gulp building js file?

I got an error: Uncaught TypeError: $ is not a function at app.min.js?ver=5.6.2:1 I know there are many answers to this question. But not in my case. For developing a theme, I am using gulp. So the app.min.js The file is constantly changing during development and I can't just add:
jQuery(document).ready(function($) {
});
If we were talking about a finished project, it always helps me. But not at this time. Here is part of my gulp file who is responsible for creating: app.min.js
function scripts() {
return src([
'../themes/themename/js/vendor/ajax-mail.js',
'../themes/themename/js/vendor/bootstrap.min.js',
'../themes/themename/js/vendor/imagesloaded.pkgd.min.js',
'../themes/themename/js/vendor/isotope.pkgd.min.js',
'../themes/themename/js/vendor/jquery.counterup.min.js',
'../themes/themename/js/vendor/jquery.magnific-popup.min.js',
'../themes/themename/js/vendor/owl.carousel.min.js',
'../themes/themename/js/vendor/plugins.js',
'../themes/themename/js/vendor/popper.js',
'../themes/themename/js/vendor/waypoints.min.js',
'../themes/themename/js/app.js',
])
.pipe(concat('app.min.js'))
.pipe(uglify())
.pipe(dest('../themes/themename/js'))
.pipe(browserSync.stream())
}
Maybe there is some way to automatically frame all content of the app.min.js in
jQuery(document).ready(function($) {
});
I cannot find a solution, I will be glad for the help. Thanks!

How to add FastClick to Next.JS?

When I try to modify pages/_document.js to add the FastClick event registration (see below) it complains that ReferenceError: document is not defined. I guess it's because it's executed on the server and the document is not defined there. Any way to resolve it?
if ('addEventListener' in document) {
document.addEventListener('DOMContentLoaded', function() {
FastClick.attach(document.body)
}, false)
}
pages/_document.js only rendered on server according to next.js documentation.
I suggest to use that code in pages/_app.js which will be shared between all components.
you can use process.browser to make sure your code is being executed in the front end only.
if (process.browser) {
document.addEventListener('DOMContentLoaded', function() {
FastClick.attach(document.body)
}, false)
}

Meteor.js: Using server.call when testing with Chimp

I'm having an issue triggering method calls while writing feature tests. I'm not actually given an error in the chimp terminal log, but the server.call line is where the failure is highlighted. I believe this might be related to the folder structure of the app (which I've loosely based on Letterpress) or the order in which the call is defined and then triggered. When I move the method call out to my main.js file (in the root folder of the app), it works without a problem.
hooks.js path: /app/tests/cucumber/features/support/hooks.js
(function(){
module.exports = function() {
this.Before(function() {
console.log("server calling");
server.call("fixtures/resetUsers"); //test stops here
});
};
})();
fixtures.js /app/packages/fixtures/fixtures.js
(function(){
'use strict';
Meteor.methods({
"fixtures/resetUsers": function() {
Meteor.users.remove({});
}
});
})();
package.js /app/packages/fixtures/packages.js
Package.describe({
name: 'forum:fixtures',
version: '0.0.1',
summary: '',
debugOnly: true
});
Package.onUse(function(api) {
api.versionsFrom('1.2.1');
api.use('ecmascript');
api.addFiles('fixtures.js', 'server');
});
Note: I originally didn't have the fixtures folder wrapped in the packages folder (it still didn't work then) but came across this post by #Xolv.io, the developers of Chimp.js who advised to do so.
with the new chimp, you can just use:
server.execute(function() {
// code you put here will run on the server
});
Check this repository for examples:
https://github.com/xolvio/automated-testing-best-practices/
In your sample repo, if you define a meteor method, 'something', you can call as server.call('something').
If you have a standard method definition (not even a meteor method), say something2=function(){}, with xolvio:backdoor, you can server.execute('something2'). ( calling chimp with --ddp switch)

Use wiredep to inject custom CSS

I need to inject custom CSS files everytime they are created after being compiled by gulp-less. So I tried to use wiredep with custom configurations, but without success.
I changed the tag from 'bower:css' to 'custom:css', specifically to my custom task. The bower:css for default wiredep injection is still there. But after run myinjection task nothing is injected even running the task without errors.
Another weird thing, when I run my task, the files injected by wiredep (the default) disappear.
What I'm missing?
Basicaly my files structure is like this:
|---app
|---styles
|---***
*.css
*.html
.custom.json
I'm not sure if I really need a file similar to bower.json, but I made may own custom.json
{
"name": "custom",
"version": "0.0.1",
"main": [
"app/styles/**/*.css",
"app/scripts/**/*.js //pretend to inject custom js later
]
}
The task in gulpfile.js is like this:
gulp.task('myinject', function () {
var myinject = require('wiredep').stream;
var combined = Combine (
gulp.src('app/*.html'),
myinject({
directory: 'app',
bowerJson: require('./custom.json'),
dependencies: false,
html:
{
block: /(([ \t]*)<!--\s*custom:*(\S*)\s*-->)(\n|\r|.)*?(<!--\s*endcustom\s*-->)/gi,
detect: {
js: /<script.*src=['"](.+)['"]>/gi,
css: /<link.*href=['"](.+)['"]/gi
},
replace: {
js: '<script src="{{filePath}}"></script>',
css: '<link rel="stylesheet" href="{{filePath}}" />'
}
}
}),
gulp.dest('app')
);
combined.on('error', function(err) {
console.warn(err.message);
});
return combined;
});
Thanks in advance
I had a similar issue that I resolved with gulp-inject rather than wiredep.
Wiredep works fine with me when I need to include a third-party dependency (e.g. a bower package with a valid main file declared in the bower.json or a file with the same name as the directory).
However, when you want to include only a specific file (e.g. only the main.css of html5-boilerplate) gulp-inject is much simpler. Here is an extract of the doc :
gulp.task('index', function () {
var target = gulp.src('./src/index.html');
var sources = gulp.src(['./src/**/*.js', './src/**/*.css'], {read: false});
return target.pipe(inject(sources))
.pipe(gulp.dest('./src'));
});

Meteor local package, phaser game, asset loading?

Ok I'm trying to make a package from a Phaser game, been researching this for a couple of days, but it doesn't seem to work.
I think I identified the problem though, hopefully somebody can help me with this!
I set everything up to make use of a local package, which all works.
Untill I'm preloading an asset.
This is my Menu class
Menu = function() {
console.log(this);
}
Menu.prototype = {
preload: function(){
this.load.image('background', 'assets/background.png');
console.log("ok in preload");
},
create: function(){
this.background = this.game.add.sprite(0, 0, 'background');
console.log("ok in create");
var text = "We're getting there";
var style = { font: "23px Arial", fill: "#ff0044", align: "center" };
var t = game.add.text(game.world.centerX, 0, text, style);
},
};
and I call this by doing
game = new Phaser.Game(400, 300, Phaser.AUTO, "gameWindow");
game.state.add('menu', Menu);
game.state.start('menu');
which all seems to work by looking at the console logs, as long as I don't try to load the image in the preload function, if I do it just keeps stuck in the preload function.
The background.png is located at my root folder going 'public/assets/background.png'.
So I'm thinking when I try to access this from a local package, it is having trouble getting there...
my package.js is this btw:
Package.describe({
summary: "game one"
});
Package.on_use(function (api, where) {
api.use(['phaserio'], 'client');
api.add_files(['states/menu.js'],
['client']);
api.export('Menu', ['client']);
});
Anybody out there, that sees what I'm doing wrong?
Thanks in advance!
you should be able to load public images from the app, but it depends when that preload sequence is running. Packages get parsed first. So is your new game created within a Meteor.startUp ->? by which time the app itself is initialized?
Also you can put assets in the package itself.
are you using 0.9? there are some issues with paths for static assets inside packages
see this thread:
https://github.com/meteor/meteor/issues/2602
for 0.9 packages you'll have to add a bit more info
Package.describe({
summary: "phaser for meteor",
version: '0.0.1',
git: 'https://github.com/dcsan/package-dev',
name: "YOURNAME:phaser"
});
currently if you use something like replacing colon with an underscore:
/packages/YOURNAME_phaser/added/path/to/asset.png
if you get phaser wrapped i would also be interested, so please publish it to atmosphere!

Resources