Develop Reference

Vuejs eventbus triggers multiple times due to webpack import outport?

In a vuejs project I use the vue eventbus like this. Emitting this event:
icontag.addEventListener('click', testFunction, false)
function testFunction () {
console.log('click1')
Events.$emit('click2')
}
And receiving it in another module I get as output one click1, but multiple click2's. It looks very much like every time there is some code which requires webpack import/ export it triggers an additional result on the eventbus of the same event..., or something..., since in chrome devtools the related code close to the click2's has code like __WEBPACK_IMPORTED_MODULE_5__util nearby.
Any idea what is going on?
EDIT:
I think it might have been a 'corrupted hot-reload setup'. After rebuilding the dev hot-reload build, the issue seems gone now. Still interested in similar experiences as the issue was pretty ugly and persistent.

I think the comment from Bert is right. You can actually register many times the same eventhandlers on the same event.
Try removing the eventhandler before adding it again.
icontag.removeEventListener("click", testFunction);
icontag.addEventListener('click', testFunction, false)
function testFunction () {
console.log('click1')
Events.$emit('click2')
}

ng:test no injector found for element argument to getTestability

There other question on SO with same problem, but the solutions didnt worked for me.
Here my spec.js
describe('Protractor Demo App', function() {
it('should have a title', function() {
browser.driver.get('http://rent-front-static.s3-website-us-east-1.amazonaws.com/');
expect(browser.getTitle()).toEqual('How It Works');
});
});
And here my conf.js
exports.config = {
framework: 'jasmine',
rootElement: 'body',
seleniumAddress: 'http://localhost:4444/wd/hub',
specs: ['spec.js']
}
So when i try to run my test im getting the error
Message:
Failed: Error while waiting for Protractor to sync with the page: "[ng:test] no injector found for element argument to getTestability\nhttp://errors.angularjs.org/1.5.0/ng/test"
Stack:
Error: Failed: Error while waiting for Protractor to sync with the page: "[ng:test] no injector found for element argument to getTestability\nhttp://errors.angularjs.org/1.5.0/ng/test"
at C:\Users\ShapeR\PycharmProjects\ratest\node_modules\jasminewd2\index.js:101:16
at Promise.invokeCallback_ (C:\Users\ShapeR\PycharmProjects\ratest\node_modules\selenium-webdriver\lib\promise.js:1329:14)
at TaskQueue.execute_ (C:\Users\ShapeR\PycharmProjects\ratest\node_modules\selenium-webdriver\lib\promise.js:2790:14)
at TaskQueue.executeNext_ (C:\Users\ShapeR\PycharmProjects\ratest\node_modules\selenium-webdriver\lib\promise.js:2773:21)
1 spec, 1 failure
I have a manual bootstrapping for body element and set the rootElement to body in config, but it didnt help. I even tried to remove manual boostraping and just add ng-app='rentapplicationApp' to body element, but it changes nothing, still same error.
So what is wrong?

The core value of Protractor is that it manages the angular loading for you, including sync, so you are very right in not wanting to use: browser.ignoreSynchronization = true.
The error message you are getting is that protractor is unable to locate angular in order to sync. This is because of a combination of two issues:
The page isn't ready, angular isn't loaded
It is unable to locate the ng-app, even once the page is loaded
Firstly, from Protractor setup page.
If your page does manual bootstrap Protractor will not be able to load your page using browser.get. Instead, use the base webdriver instance - browser.driver.get. This means that Protractor does not know when your page is fully loaded, and you may need to add a wait statement to make sure your tests avoid race conditions.
Solution 1
Add a wait statement.
Solution 2
If you don't have a good reason for manually bootstrapping, or don't want to wait:
Stop manually bootstrapping the app
Use browser.get over browser.driver.get

[ng:test] no injector found for element argument to getTestability
I suspect there is something wrong with the application itself, the way it is bootstrapped, since Protractor actually finds the root element (you can explicitly set the rootElement: "body.root" inside your config as well), but fails to setup the injector for the root element.
I'd try to figure out what is happening it step by step - first, try running the protractor test against a non-built application started directly from the source to ensure that this is not the webpack's or other part's of the build fault.
Then, I'd try upgrading to the latest 1.x Angular and Protractor (3.3.0 is the most recent version).
The most simple workaround at the moment would be to turn the sync between Protractor and Angular off, by using browser.ignoreSynchronization = true:
describe("Strange Protractor/Angular problem", function () {
beforeEach(function () {
browser.ignoreSynchronization = true;
browser.get("https://dl.dropboxusercontent.com/u/597502/vxcv/index.html");
var elm = $(".navbar-brand");
browser.wait(EC.presenceOf(elm), 5000);
});
it("should have an expected title", function () {
expect($(".navbar-brand").getText()).toEqual('RENT APPLICATION');
});
});
Of course, there are downsides to this approach - you would have to use browser.wait calls here and there to tackle the timing issue. The test flow would not be as natural and simple as it would be when sync is on.

The problem was in bootstrapping my app. For some reason it doesnt work with ng-app tag. The only working solution was to manual bootstrap it
angular.bootstrap(document, ["rentapplicationApp"]);
And first argument should be dom node, not a string, like it was in my case, although with string the app will work, but getTestability will fail.

Meteor.js : .find() returns nothing even though the database is not empty

So I'm making a pretty simple web app and I am currently trying to use a database in it.
However, even though I create the collection, then make the appropriate helper, when I try to use it nothing seems to be rendering. So I went into console and tried to see what Unis.find().fetch() would return (Unis being my collection), and it returns an empty array, so that explains why nothing is rendering. However, when using the mongo command prompt I can find items as well as insert them. I am really confused as to what might be happening.
My JavaScript related to the collection, so the helper for my template and defining the collection:
Unis = new Mongo.Collection("unis");
if (Meteor.isClient) {
// Rendering
Template.dashboard.helpers({
unis: function() {
return Unis.find();
}
});
}
if (Meteor.isServer) {
Meteor.startup(function () {
// code to run on server at startup
});
}
HTML for using the collection, but I don't think this is the problem here
<template name="dashboard">
<div class="container">
<div class="row"></div>
<div class="row"></div>
{{#each unis}}
{{> uni}}
{{/each}}
</div>
</template>
<template name="uni">
{{name}}
</template>
Using Unis.find().fetch(); doesn't return anything but it does in mongo
Any help would be really appreciated, as I don't have much of an idea what to do. I am also new to Meteor, so not sure if this is really obvious or not.
EDIT: Added actual code instead of pictures.

I fixed it and it was a very obvious mistake, just I failed to disclose important information.
The JavaScript I posted was in "website.js" in "client" folder inside my directory, so it was only getting defined on the client.
I simply just made a "shared.js" on the root of my directory and put that line in there and done!
Still thank you all for your replies!

RequireJS main require call back never invoked

I've tried this post's advice to no avail. No matter what I do, RequireJS's primary callback is never fired. Here's my dependency graph:
/module/main.js
-- /module/mainController.js
--/vendor/preloadjs
--/module/itemController.js
--/module/router.js
--/vendor/crossroads.js
--/vendor/signals.js
--/vendor/hasher.js
--/vendor/signals.js
require.config({
baseUrl: "script/module",
paths: {
signals: "vendor/signals"
}
});
require(["main", function(){
console.log("main function!");
}]);
The "main" module makes use of js-signals, and actually gets invoked. In fact the entire dependency tree is loaded (confirmed via the web inspector). I have a single entry point for the application. All modules start up and actually run fine. You'd think that if the main application callback doesn't run that one or all of its dependencies would have failed.
I'm sure there is some stupid reason I'm not kicking off the primary require's callback. For the record I've tried using the requirejs() method and get the same results.
No files have code in them except for dependencies and console.logs.
Does anyone have any ideas for what I'm doing wrong?

I'll answer my own silliness. The problem is right there in the source. I'm using Angular module injection syntax, and passing the callback as part of the dependency array. Oops. It needs to be the second argument!
Long story short, the code is right, but this is the change:
require.config({
baseUrl: "script/module",
paths: {
signals: "vendor/signals"
}
});
require(["main"], function(){
console.log("main function!");
});

Hold splashscreen with launch-screen

I've tried everything and I can't get https://atmospherejs.com/meteor/launch-screen to work.
I'd like to hold the Android's splashscreen with var handle = LaunchScreen.hold(); but it doesn't seem to affect my app at all.
I tried to put it in different folders of my application (root, client root...), to wrap it with Meteor.startup, to use multiple handles, to put it in my iron-router... No chance yet.
Then I started to play with mobile-config since I suspected the config.xml to be the source of my problem. I tried to change "AutoHideSplashScreen" to true (meh, you never know...), to change the delay... It doesn't work either.
Finally, I took a shot at deleting completely the "launch-screen" package, but even when it doesn't appear with "meteor list", it's still there when I inspect my Android application. Maybe it needed to be overriden...
Anyway, I really need your help, thanks a lot !
EDIT : samples of my code
in /both/routes.js
Router.configure({
layoutTemplate : 'mainLayout',
loadingTemplate: 'launchScreen',
// Transitions
// TODO : Use CSS or transition.js ? Slide or fade ?
onBeforeAction : function(){
$('.container').css({opacity: 0});
this.next();
},
onAfterAction : function(){
$('.container').transition({ opacity: 1 });
}
});
// Routes
Router.map(function() {
this.route('home', {path: '/'});
this.route('news', {path: '/news'});
});
And if I try to put :
var handle = LaunchScreen.hold();
Anywhere in a file located in /client/*, it doesn't do anything.
Nothing special at the moment in my mobile-config, I deleted everything I tried...
// Allow XMLHttpRequest
App.accessRule("*");

You have to put var handle = LaunchScreen.hold(); at the very "beginning" of your client code so it is loaded before everything else.
To do this you can put it in a file located in the yourApp/client/lib/ folder (loaded before every other folders) and name the file with an underscore as files are loaded in alphabetical order.

Ok, it seems like I figured out a hack arround this for now.
I added App.setPreference("SplashScreenDelay", 90000); in my mobile-config.js, since I noticed that even if the splashscreen is on hold, if the delay is out, its fades anyway.
It's hacky but I'll deal with it for now. :/