We Keep Coding

Angular 4 + Redux (or ngrx/store) folder and file structure

Ref to Angular official site's style guile of file structure:
https://angular.io/docs/ts/latest/guide/style-guide.html#!#04-06
If I would like to implement Redux (or ngrx/store) to my new Angular 4 project, would it be better to structure my application in this way?
project root
├── src/
│ ├── app/
│ │ ├──stores/
│ │ │ ├── heros/
│ │ │ │ ├── heros.actions.ts|reducer|effects|store.ts
│ │ │ │
│ │ │ │── ..../
│ │ │ │ ├── .....
│ │ │
│ │ ├── containers/
│ │ │ ├── heros/
│ │ │ │ ├── heros.component.ts|html|css|spec.ts
│ │ │ │ │ └── ......
│ │ │
│ │ │
│ │ ├── components/
│ │ │ ├── hero-list/
│ │ │ │ │ ├── hero-list.component.ts|html|css|spec.ts
│ │ │ │ │ └── .......
│ │ │ ├── ....
I have been using second structure but as my app grows, it was getting difficult to maintain, and then I refactored the structure in this way, the plus point of this structure is, if in future you decide to remove or edit ngrx all you need to do is remove or edit the stores folder.
Note:
- containers folder hold my smart components
- components folder hold my dumb components
Or follow ngrx/store's example (https://github.com/ngrx/example-app), to structure the application in this way?
project root
├── src/
│ ├── app/
│ │ ├── actions/
│ │ │ ├── hero.js
│ │ │ ├── hero-list.js
│ │ │ └── ......
│ │ ├── reducers/
│ │ │ ├── hero.js
│ │ │ ├── hero-list.js
│ │ │ └── ......
│ │ ├── components/
│ │ │ ├── heros/
│ │ │ │ ├── hero/
│ │ │ │ │ ├── hero-list.component.ts|html|css|spec.ts
│ │ │ │ │ └── ......
│ │ │ │ ├── hero-list/
│ │ │ │ │ ├── hero-list.component.ts|html|css|spec.ts
│ │ │ │ │ └── ......
│ │ │ ├── ......
Is there any other better structure?

project root
├── src/
│ ├── app/
│ │ ├──stores/
│ │ │ ├── heros/
│ │ │ │ ├── heros.actions.ts|reducer|effects|store.ts
│ │ │ │
│ │ │ │── ..../
│ │ │ │ ├── .....
│ │ │
│ │ ├── containers/
│ │ │ ├── heros/
│ │ │ │ ├── heros.component.ts|html|css|spec.ts
│ │ │ │ │ └── ......
│ │ │
│ │ │
│ │ ├── components/
│ │ │ ├── hero-list/
│ │ │ │ │ ├── hero-list.component.ts|html|css|spec.ts
│ │ │ │ │ └── .......
│ │ │ ├── ....
I have been using second structure but as my app grows, it was getting difficult to maintain, and then I refactored the structure in this way, the plus point of this structure is, if in future you decide to remove or edit ngrx all you need to do is remove or edit the stores folder.
Note:
containers folder hold my smart components
components folder hold my dumb components

Web assembly: using emscripten with c++ library

I'm planning on using a c++ library for a web application and web assembly seemed like a good tool for this. I am using emscripten for compiling it.
I got the source code of this open source c++ library and made it using emmake make and emmake make install
After those two calls I had .a libraries in my /usr/local/<name of open source>/lib as well as header files in my /usr/local/<name of open source>/include
I also had an example cpp code that uses this open source library.
The question is: how do I create a html file for this cpp file?
The name of such file is "test.cpp"
and I tried this command, but it cause a lot of "unresolved symbols"
em++ -I/usr/local/<name of open source>/include -L/usr/local/<name of open source>/lib test.cpp -s WASM=1 -o final.html
Then I called emrun to run a web server on my local, but final.html was not displaying what I expected it to display.
Can you please help me?
unresolved symbol warnings in the console

The warnings (errors, actually) show that you have not compiled the included library's cpp files via emscripten. Besides the file test.cpp, you will need to provide every file that your project requires to the em++ command.
Read here for more information on this.
Now coming to the other part of your question, emscripten will only create a JS function for those C++ functions that you "expose". (Obviously the functions called by these exposed functions will also be compiled, rest are stripped off).
A small tutorial on achieving this can be found here
Once your functions are exposed, you call them from your own JS code(example: binding them on JS events)

It looks like your library may have dependencies that are not met (the unresolved symbols). An emscripten build is a cross build, meaning it cannot use your installed system libraries; instead you have to build all the dependencies with the emscripten compiler. Emscripten has the unfortunate behavior that the unresolved symbols are warnings (other linkers consider these as errors) but your program is unlikely to work if you have them.

Emscripten does not treat unresolved symbols as compile errors for various reasons.
When compiling your project, you also need to link the generated .a library.
The -I and -L options you used specify where to look for libraries that you want linked with your program, but it does not specify which libraries you want to link.
You need to add the option -l<name of your library> to your compile command to specify that you want the lib to be linked with your program.

First your open source library needs to be compiled in LLVM bitcode.
In my example I use Botan library. It previously was compiled in LLVM bitcode.
libbotan-2.a is in LLVM bitcode.
My file tree
HelloProject:.
│ hello.cpp
│ hello.js
│ hello.wasm
│ test.html
│
├───include
│ └───botan-2
│ └───botan
│ adler32.h
│ aead.h
│ aes.h
│ alg_id.h
│ argon2.h
│ aria.h
│ asn1_alt_name.h
│ asn1_attribute.h
│ asn1_obj.h
│ asn1_oid.h
│ asn1_print.h
│ asn1_str.h
│ asn1_time.h
│ assert.h
│ atomic.h
│ auto_rng.h
│ base32.h
│ base58.h
│ base64.h
│ basefilt.h
│ bcrypt.h
│ bcrypt_pbkdf.h
│ ber_dec.h
│ bigint.h
│ blake2b.h
│ blinding.h
│ block_cipher.h
│ blowfish.h
│ botan.h
│ bswap.h
│ buf_comp.h
│ buf_filt.h
│ build.h
│ calendar.h
│ camellia.h
│ cascade.h
│ cast128.h
│ cast256.h
│ cbc.h
│ cbc_mac.h
│ ccm.h
│ cecpq1.h
│ certstor.h
│ certstor_flatfile.h
│ certstor_sql.h
│ certstor_system.h
│ cert_status.h
│ cfb.h
│ chacha.h
│ chacha20poly1305.h
│ chacha_rng.h
│ charset.h
│ cipher_filter.h
│ cipher_mode.h
│ cmac.h
│ comb4p.h
│ compiler.h
│ comp_filter.h
│ cpuid.h
│ crc24.h
│ crc32.h
│ credentials_manager.h
│ crl_ent.h
│ cryptobox.h
│ ctr.h
│ curve25519.h
│ curve_gfp.h
│ curve_nistp.h
│ database.h
│ datastor.h
│ data_snk.h
│ data_src.h
│ der_enc.h
│ des.h
│ desx.h
│ dh.h
│ divide.h
│ dlies.h
│ dl_algo.h
│ dl_group.h
│ dsa.h
│ dyn_load.h
│ eax.h
│ ecc_key.h
│ ecdh.h
│ ecdsa.h
│ ecgdsa.h
│ ecies.h
│ eckcdsa.h
│ ec_group.h
│ ed25519.h
│ elgamal.h
│ eme.h
│ eme_pkcs.h
│ eme_raw.h
│ emsa.h
│ emsa1.h
│ emsa_pkcs1.h
│ emsa_raw.h
│ emsa_x931.h
│ entropy_src.h
│ exceptn.h
│ fd_unix.h
│ ffi.h
│ filter.h
│ filters.h
│ fpe_fe1.h
│ gcm.h
│ gf2m_small_m.h
│ ghash.h
│ gmac.h
│ gost_28147.h
│ gost_3410.h
│ gost_3411.h
│ hash.h
│ hash_id.h
│ hex.h
│ hkdf.h
│ hmac.h
│ hmac_drbg.h
│ hotp.h
│ http_util.h
│ idea.h
│ init.h
│ iso9796.h
│ kasumi.h
│ kdf.h
│ kdf1.h
│ kdf1_iso18033.h
│ kdf2.h
│ keccak.h
│ keypair.h
│ key_constraint.h
│ key_filt.h
│ key_spec.h
│ lion.h
│ loadstor.h
│ locking_allocator.h
│ lookup.h
│ mac.h
│ mceies.h
│ mceliece.h
│ md4.h
│ md5.h
│ mdx_hash.h
│ mem_ops.h
│ mgf1.h
│ misty1.h
│ mode_pad.h
│ monty.h
│ mul128.h
│ mutex.h
│ name_constraint.h
│ newhope.h
│ nist_keywrap.h
│ noekeon.h
│ numthry.h
│ oaep.h
│ ocb.h
│ ocsp.h
│ ocsp_types.h
│ ofb.h
│ oids.h
│ p11.h
│ p11_ecc_key.h
│ p11_ecdh.h
│ p11_ecdsa.h
│ p11_module.h
│ p11_object.h
│ p11_randomgenerator.h
│ p11_rsa.h
│ p11_session.h
│ p11_slot.h
│ p11_x509.h
│ package.h
│ parsing.h
│ par_hash.h
│ passhash9.h
│ pbes2.h
│ pbkdf.h
│ pbkdf1.h
│ pbkdf2.h
│ pem.h
│ pgp_s2k.h
│ pipe.h
│ pkcs10.h
│ pkcs11.h
│ pkcs11f.h
│ pkcs11t.h
│ pkcs8.h
│ pk_algs.h
│ pk_keys.h
│ pk_ops.h
│ pk_ops_fwd.h
│ point_gfp.h
│ poly1305.h
│ polyn_gf2m.h
│ pow_mod.h
│ prf_tls.h
│ prf_x942.h
│ psk_db.h
│ psk_db_sql.h
│ pssr.h
│ pubkey.h
│ pwdhash.h
│ rc4.h
│ reducer.h
│ rfc3394.h
│ rfc6979.h
│ rmd160.h
│ rng.h
│ rotate.h
│ rsa.h
│ salsa20.h
│ scan_name.h
│ scrypt.h
│ secmem.h
│ secqueue.h
│ seed.h
│ serpent.h
│ sha160.h
│ sha2_32.h
│ sha2_64.h
│ sha3.h
│ shacal2.h
│ shake.h
│ shake_cipher.h
│ siphash.h
│ siv.h
│ skein_512.h
│ sm2.h
│ sm2_enc.h
│ sm3.h
│ sm4.h
│ sodium.h
│ sp800_108.h
│ sp800_56a.h
│ sp800_56c.h
│ srp6.h
│ stateful_rng.h
│ stl_compatibility.h
│ stream_cipher.h
│ stream_mode.h
│ streebog.h
│ symkey.h
│ sym_algo.h
│ system_rng.h
│ threefish.h
│ threefish_512.h
│ tiger.h
│ tls_alert.h
│ tls_algos.h
│ tls_blocking.h
│ tls_callbacks.h
│ tls_channel.h
│ tls_ciphersuite.h
│ tls_client.h
│ tls_exceptn.h
│ tls_extensions.h
│ tls_handshake_msg.h
│ tls_magic.h
│ tls_messages.h
│ tls_policy.h
│ tls_server.h
│ tls_server_info.h
│ tls_session.h
│ tls_session_manager.h
│ tls_session_manager_sql.h
│ tls_version.h
│ totp.h
│ tss.h
│ twofish.h
│ types.h
│ uuid.h
│ version.h
│ whrlpool.h
│ workfactor.h
│ x509cert.h
│ x509path.h
│ x509self.h
│ x509_ca.h
│ x509_crl.h
│ x509_dn.h
│ x509_ext.h
│ x509_key.h
│ x509_obj.h
│ x919_mac.h
│ xmss.h
│ xmss_address.h
│ xmss_common_ops.h
│ xmss_hash.h
│ xmss_index_registry.h
│ xmss_key_pair.h
│ xmss_parameters.h
│ xmss_privatekey.h
│ xmss_publickey.h
│ xmss_tools.h
│ xmss_wots_parameters.h
│ xmss_wots_privatekey.h
│ xmss_wots_publickey.h
│ xtea.h
│ xts.h
│
└───libs
└───Botan
libbotan-2.a
Compiling
Run command
em++ hello.cpp libs/botan/libbotan-2.a -s WASM=1 -o hello.js -std=c++17 -s "EXTRA_EXPORTED_RUNTIME_METHODS=['ccall']" -O3 -I include/botan-2
C++ - hello.cpp
#include <iostream>
#include <vector>
#include <emscripten.h>
#include "botan/sha2_64.h"
#include "botan/base64.h"
#define EXTERNC extern "C"
int main(int argc, char ** argv) {
std::cout<<u8"Hello World from main\n";
}
EXTERNC const char * EMSCRIPTEN_KEEPALIVE GetSha512Hash(const char* data) {
std::cout<< "Received from JS: "<<data << std::endl;
Botan::SHA_512 sha;
std::vector<uint8_t> buffer(data, data + strlen(data));
//std::fread(&buffer[0], 1, buffer.size(), pFile);
return Botan::base64_encode(sha.process(buffer)).c_str();
}
HTML/JS - Test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script type="text/javascript" src="hello.js"></script>
<button onclick="native()">click</button>
<script type='text/javascript'>
function native() {
var result = Module.ccall(
'GetSha512Hash', // name of C function
"string", // return type
["string"], // argument types
["Joma"] // arguments
);
console.log("Returned from CPP: " + result);
}
</script>
</body>
</html>
Test WASM in browser
Run command
emrun --browser "C:\Program Files (x86)\Microsoft\Edge\Application\msedge.exe" .\test.html
** Results in browser**

TypeError: Cannot read property 'firstChild' of undefined While rendering the react page server side

I have used these npm dependencies while rendering the react using node on server side.
var React = require('react');
var ReactDOMServer = require('react-dom/server');
var request = require('request');
I can not use componentDidMount because it is never called while rendering server side. So, I used componentWillMount and my final code structure is like this :
var Content = React.createClass({
displayName: 'Content',
getInitialState: function getInitialState() {
console.log('getInitialState');
return {
xyz : [],
abc : ''
};
},
componentWillMount: function componentWillMount() {
console.log('componentWillMount');
request(
'some_url',
function (error, response, body) {
console.log(response.statusCode);
if (!error && response.statusCode == 200) {
console.log('Request Call');
this.setState = {
xyz : [],
abc : ''
}
}
}.bind(this));
},
render: function render() {
console.log('render');
return React.createElement(
'div',
{
className: 'clearfix container-fluid padding-none' },
React.createElement(TopSection, { title: this.state.title, slug: this.state.slug })
);
}
});
My LifeCycle is going as follow
getInitialState
componentWillMount
render
Request Call
render
and after the render is called second time i got this error
Warning: React can't find the root component node for data-reactid
value `.1va42hea328.1.0.1`. If you're seeing this message, it
probably means that you've loaded two copies of React on the page. At this
time, only a single copy of React can be loaded at a time.
/Users/me/Desktop/Projects/silly-poke/node_modules/react/lib/ReactMount.js:715
firstChildren[0] = deepestAncestor.firstChild;
^
TypeError: Cannot read property 'firstChild' of undefined
Output of npm ls is as below :
├─┬ compression#1.6.2
│ ├─┬ accepts#1.3.3
│ │ ├─┬ mime-types#2.1.11
│ │ │ └── mime-db#1.23.0
│ │ └── negotiator#0.6.1
│ ├── bytes#2.3.0
│ ├─┬ compressible#2.0.8
│ │ └── mime-db#1.23.0
│ ├─┬ debug#2.2.0
│ │ └── ms#0.7.1
│ ├── on-headers#1.0.1
│ └── vary#1.1.0
├─┬ express#4.14.0
│ ├─┬ accepts#1.3.3
│ │ ├─┬ mime-types#2.1.11
│ │ │ └── mime-db#1.23.0
│ │ └── negotiator#0.6.1
│ ├── array-flatten#1.1.1
│ ├── content-disposition#0.5.1
│ ├── content-type#1.0.2
│ ├── cookie#0.3.1
│ ├── cookie-signature#1.0.6
│ ├─┬ debug#2.2.0
│ │ └── ms#0.7.1
│ ├── depd#1.1.0
│ ├── encodeurl#1.0.1
│ ├── escape-html#1.0.3
│ ├── etag#1.7.0
│ ├─┬ finalhandler#0.5.0
│ │ ├── statuses#1.3.0
│ │ └── unpipe#1.0.0
│ ├── fresh#0.3.0
│ ├── merge-descriptors#1.0.1
│ ├── methods#1.1.2
│ ├─┬ on-finished#2.3.0
│ │ └── ee-first#1.1.1
│ ├── parseurl#1.3.1
│ ├── path-to-regexp#0.1.7
│ ├─┬ proxy-addr#1.1.2
│ │ ├── forwarded#0.1.0
│ │ └── ipaddr.js#1.1.1
│ ├── qs#6.2.0
│ ├── range-parser#1.2.0
│ ├─┬ send#0.14.1
│ │ ├── destroy#1.0.4
│ │ ├─┬ http-errors#1.5.0
│ │ │ ├── inherits#2.0.1
│ │ │ └── setprototypeof#1.0.1
│ │ ├── mime#1.3.4
│ │ ├── ms#0.7.1
│ │ └── statuses#1.3.0
│ ├── serve-static#1.11.1
│ ├─┬ type-is#1.6.13
│ │ ├── media-typer#0.3.0
│ │ └─┬ mime-types#2.1.11
│ │ └── mime-db#1.23.0
│ ├── utils-merge#1.0.0
│ └── vary#1.1.0
├── parent-require#1.0.0
├─┬ react#0.14.8
│ ├─┬ envify#3.4.1
│ │ ├─┬ jstransform#11.0.3
│ │ │ ├── base62#1.1.1
│ │ │ ├─┬ commoner#0.10.4
│ │ │ │ ├─┬ commander#2.9.0
│ │ │ │ │ └── graceful-readlink#1.0.1
│ │ │ │ ├─┬ detective#4.3.1
│ │ │ │ │ ├── acorn#1.2.2
│ │ │ │ │ └── defined#1.0.0
│ │ │ │ ├─┬ glob#5.0.15
│ │ │ │ │ ├─┬ inflight#1.0.5
│ │ │ │ │ │ └── wrappy#1.0.2
│ │ │ │ │ ├── inherits#2.0.1
│ │ │ │ │ ├─┬ minimatch#3.0.2
│ │ │ │ │ │ └─┬ brace-expansion#1.1.5
│ │ │ │ │ │ ├── balanced-match#0.4.1
│ │ │ │ │ │ └── concat-map#0.0.1
│ │ │ │ │ ├─┬ once#1.3.3
│ │ │ │ │ │ └── wrappy#1.0.2
│ │ │ │ │ └── path-is-absolute#1.0.0
│ │ │ │ ├── graceful-fs#4.1.4
│ │ │ │ ├── iconv-lite#0.4.13
│ │ │ │ ├─┬ mkdirp#0.5.1
│ │ │ │ │ └── minimist#0.0.8
│ │ │ │ ├── private#0.1.6
│ │ │ │ ├── q#1.4.1
│ │ │ │ └─┬ recast#0.10.43
│ │ │ │ ├── ast-types#0.8.15
│ │ │ │ ├── esprima-fb#15001.1001.0-dev-harmony-fb
│ │ │ │ └── source-map#0.5.6
│ │ │ ├── esprima-fb#15001.1.0-dev-harmony-fb
│ │ │ ├── object-assign#2.1.1
│ │ │ └─┬ source-map#0.4.4
│ │ │ └── amdefine#1.0.0
│ │ └── through#2.3.8
│ └─┬ fbjs#0.6.1
│ ├── core-js#1.2.6
│ ├─┬ loose-envify#1.2.0
│ │ └── js-tokens#1.0.3
│ ├─┬ promise#7.1.1
│ │ └── asap#2.0.4
│ ├── ua-parser-js#0.7.10
│ └── whatwg-fetch#0.9.0
├── react-dom#0.14.8
└─┬ request#2.72.0
├── aws-sign2#0.6.0
├── aws4#1.4.1
├─┬ bl#1.1.2
│ └─┬ readable-stream#2.0.6
│ ├── core-util-is#1.0.2
│ ├── inherits#2.0.1
│ ├── isarray#1.0.0
│ ├── process-nextick-args#1.0.7
│ ├── string_decoder#0.10.31
│ └── util-deprecate#1.0.2
├── caseless#0.11.0
├─┬ combined-stream#1.0.5
│ └── delayed-stream#1.0.0
├── extend#3.0.0
├── forever-agent#0.6.1
├─┬ form-data#1.0.0-rc4
│ └── async#1.5.2
├─┬ har-validator#2.0.6
│ ├─┬ chalk#1.1.3
│ │ ├── ansi-styles#2.2.1
│ │ ├── escape-string-regexp#1.0.5
│ │ ├─┬ has-ansi#2.0.0
│ │ │ └── ansi-regex#2.0.0
│ │ ├─┬ strip-ansi#3.0.1
│ │ │ └── ansi-regex#2.0.0
│ │ └── supports-color#2.0.0
│ ├─┬ commander#2.9.0
│ │ └── graceful-readlink#1.0.1
│ ├─┬ is-my-json-valid#2.13.1
│ │ ├── generate-function#2.0.0
│ │ ├─┬ generate-object-property#1.2.0
│ │ │ └── is-property#1.0.2
│ │ ├── jsonpointer#2.0.0
│ │ └── xtend#4.0.1
│ └─┬ pinkie-promise#2.0.1
│ └── pinkie#2.0.4
├─┬ hawk#3.1.3
│ ├── boom#2.10.1
│ ├── cryptiles#2.0.5
│ ├── hoek#2.16.3
│ └── sntp#1.0.9
├─┬ http-signature#1.1.1
│ ├── assert-plus#0.2.0
│ ├─┬ jsprim#1.3.0
│ │ ├── extsprintf#1.0.2
│ │ ├── json-schema#0.2.2
│ │ └── verror#1.3.6
│ └─┬ sshpk#1.8.3
│ ├── asn1#0.2.3
│ ├── assert-plus#1.0.0
│ ├── dashdash#1.14.0
│ ├── ecc-jsbn#0.1.1
│ ├── getpass#0.1.6
│ ├── jodid25519#1.0.2
│ ├── jsbn#0.1.0
│ └── tweetnacl#0.13.3
├── is-typedarray#1.0.0
├── isstream#0.1.2
├── json-stringify-safe#5.0.1
├─┬ mime-types#2.1.11
│ └── mime-db#1.23.0
├── node-uuid#1.4.7
├── oauth-sign#0.8.2
├── qs#6.1.0
├── stringstream#0.0.5
├── tough-cookie#2.2.2
└── tunnel-agent#0.4.3
means there is no other version of react loading as i have seen problem on searching this error.

Your problem is you are making a request inside componentWillMount. componentWillMount is called even for server side rendering so when this request comes back it'll try to setState on a component that doesn't exist (since server side rendering uses renderToString).
Move the request to componentDidMount so it only gets called on the client.
Additionally, if you'd still like to fetch data before rendering on the server then use something like redux-async-connect.

UNMET PEER DEPENDENCY generator-karma#>=0.9.0

I am installing version 5.6 of node.js on a CentOS 7 server with generator-angular, and am encountering the following error, in addition to some deprecation warnings:
UNMET PEER DEPENDENCY generator-karma#>=0.9.0
I am following instructions from this tutorial. How can I resolve this error so that npm is able to successfully install generator-angular? Also, are all the deprecation warnings anything to be concerned about? Is there a way to install generator-angular without using deprecated methods?
Here is the terminal output showing the ERROR along with the deprecation warnings:
[root#localhost ~]# npm install -g generator-angular
npm WARN deprecated CSSselect#0.4.1: the module is now available as 'css-select'
npm WARN deprecated CSSwhat#0.4.7: the module is now available as 'css-what'
npm WARN deprecated lodash#2.1.0: lodash#<3.0.0 is no longer maintained. Upgrade to lodash#^4.0.0.
/usr/lib
├─┬ generator-angular#0.15.1
│ ├─┬ chalk#1.1.1
│ │ ├── ansi-styles#2.1.0
│ │ ├── escape-string-regexp#1.0.4
│ │ ├── has-ansi#2.0.0
│ │ ├── strip-ansi#3.0.0
│ │ └── supports-color#2.0.0
│ ├─┬ wiredep#2.2.2
│ │ ├─┬ bower-config#0.5.2
│ │ │ ├── graceful-fs#2.0.3
│ │ │ ├── mout#0.9.1
│ │ │ ├─┬ optimist#0.6.1
│ │ │ │ ├── minimist#0.0.10
│ │ │ │ └── wordwrap#0.0.3
│ │ │ └── osenv#0.0.3
│ │ ├─┬ chalk#0.5.1
│ │ │ ├── ansi-styles#1.1.0
│ │ │ ├─┬ has-ansi#0.1.0
│ │ │ │ └── ansi-regex#0.2.1
│ │ │ ├── strip-ansi#0.3.0
│ │ │ └── supports-color#0.2.0
│ │ ├─┬ glob#4.5.3
│ │ │ ├─┬ inflight#1.0.4
│ │ │ │ └── wrappy#1.0.1
│ │ │ ├── inherits#2.0.1
│ │ │ ├─┬ minimatch#2.0.10
│ │ │ │ └─┬ brace-expansion#1.1.3
│ │ │ │ ├── balanced-match#0.3.0
│ │ │ │ └── concat-map#0.0.1
│ │ │ └── once#1.3.3
│ │ ├── lodash#2.4.2
│ │ ├── minimist#1.2.0
│ │ ├── propprop#0.3.0
│ │ └─┬ through2#0.6.5
│ │ ├─┬ readable-stream#1.0.33
│ │ │ ├── core-util-is#1.0.2
│ │ │ ├── isarray#0.0.1
│ │ │ └── string_decoder#0.10.31
│ │ └── xtend#4.0.1
│ ├─┬ yeoman-generator#0.16.0
│ │ ├── async#0.2.10
│ │ ├─┬ chalk#0.4.0
│ │ │ ├── ansi-styles#1.0.0
│ │ │ ├── has-color#0.1.7
│ │ │ └── strip-ansi#0.1.1
│ │ ├─┬ cheerio#0.13.1
│ │ │ ├─┬ CSSselect#0.4.1
│ │ │ │ ├── CSSwhat#0.4.7
│ │ │ │ └── domutils#1.4.3
│ │ │ ├── entities#0.5.0
│ │ │ ├─┬ htmlparser2#3.4.0
│ │ │ │ ├── domelementtype#1.3.0
│ │ │ │ ├── domhandler#2.2.1
│ │ │ │ ├── domutils#1.3.0
│ │ │ │ └── readable-stream#1.1.13
│ │ │ └── underscore#1.5.2
│ │ ├─┬ class-extend#0.1.2
│ │ │ └── object-assign#2.1.1
│ │ ├── dargs#0.1.0
│ │ ├── debug#0.7.4
│ │ ├── diff#1.0.8
│ │ ├─┬ download#0.1.19
│ │ │ ├─┬ decompress#0.2.5
│ │ │ │ ├── adm-zip#0.4.7
│ │ │ │ ├─┬ ext-name#1.0.1
│ │ │ │ │ └─┬ ext-list#0.2.0
│ │ │ │ │ └─┬ got#0.2.0
│ │ │ │ │ └── object-assign#0.3.1
│ │ │ │ ├─┬ stream-combiner#0.0.4
│ │ │ │ │ └── duplexer#0.1.1
│ │ │ │ ├─┬ tar#0.1.20
│ │ │ │ │ ├── block-stream#0.0.8
│ │ │ │ │ └─┬ fstream#0.1.31
│ │ │ │ │ ├── graceful-fs#3.0.8
│ │ │ │ │ └─┬ mkdirp#0.5.1
│ │ │ │ │ └── minimist#0.0.8
│ │ │ │ └─┬ tempfile#0.1.3
│ │ │ │ └── uuid#1.4.2
│ │ │ ├── each-async#0.1.3
│ │ │ ├── get-stdin#0.1.0
│ │ │ ├── get-urls#0.1.2
│ │ │ ├─┬ nopt#2.2.1
│ │ │ │ └── abbrev#1.0.7
│ │ │ ├─┬ request#2.69.0
│ │ │ │ ├── aws-sign2#0.6.0
│ │ │ │ ├── aws4#1.2.1
│ │ │ │ ├─┬ bl#1.0.3
│ │ │ │ │ └─┬ readable-stream#2.0.5
│ │ │ │ │ ├── process-nextick-args#1.0.6
│ │ │ │ │ └── util-deprecate#1.0.2
│ │ │ │ ├── caseless#0.11.0
│ │ │ │ ├─┬ combined-stream#1.0.5
│ │ │ │ │ └── delayed-stream#1.0.0
│ │ │ │ ├── extend#3.0.0
│ │ │ │ ├── forever-agent#0.6.1
│ │ │ │ ├─┬ form-data#1.0.0-rc3
│ │ │ │ │ └── async#1.5.2
│ │ │ │ ├─┬ har-validator#2.0.6
│ │ │ │ │ ├─┬ commander#2.9.0
│ │ │ │ │ │ └── graceful-readlink#1.0.1
│ │ │ │ │ ├─┬ is-my-json-valid#2.12.4
│ │ │ │ │ │ ├── generate-function#2.0.0
│ │ │ │ │ │ ├─┬ generate-object-property#1.2.0
│ │ │ │ │ │ │ └── is-property#1.0.2
│ │ │ │ │ │ └── jsonpointer#2.0.0
│ │ │ │ │ └─┬ pinkie-promise#2.0.0
npm WARN generator-angular#0.15.1 requires a peer of generator-karma#>=0.9.0 but none was installed.
│ │ │ │ ├─┬ hawk#3.1.3
│ │ │ │ │ ├── boom#2.10.1
│ │ │ │ │ ├── cryptiles#2.0.5
│ │ │ │ │ ├── hoek#2.16.3
│ │ │ │ │ └── sntp#1.0.9
│ │ │ │ ├─┬ http-signature#1.1.1
│ │ │ │ │ ├── assert-plus#0.2.0
│ │ │ │ │ ├─┬ jsprim#1.2.2
│ │ │ │ │ │ ├── extsprintf#1.0.2
│ │ │ │ │ │ ├── json-schema#0.2.2
│ │ │ │ │ │ └── verror#1.3.6
│ │ │ │ │ └─┬ sshpk#1.7.4
│ │ │ │ │ ├── asn1#0.2.3
│ │ │ │ │ ├─┬ dashdash#1.13.0
│ │ │ │ │ │ └── assert-plus#1.0.0
│ │ │ │ │ ├── ecc-jsbn#0.1.1
│ │ │ │ │ ├── jodid25519#1.0.2
│ │ │ │ │ ├── jsbn#0.1.0
│ │ │ │ │ └── tweetnacl#0.13.3
│ │ │ │ ├── is-typedarray#1.0.0
│ │ │ │ ├── isstream#0.1.2
│ │ │ │ ├─┬ mime-types#2.1.9
│ │ │ │ │ └── mime-db#1.21.0
│ │ │ │ ├── oauth-sign#0.8.1
│ │ │ │ ├── qs#6.0.2
│ │ │ │ ├── stringstream#0.0.5
│ │ │ │ ├── tough-cookie#2.2.1
│ │ │ │ └── tunnel-agent#0.4.2
│ │ │ └─┬ through2#0.4.2
│ │ │ └─┬ xtend#2.1.2
│ │ │ └── object-keys#0.4.0
│ │ ├─┬ file-utils#0.1.5
│ │ │ ├─┬ glob#3.2.11
│ │ │ │ └── minimatch#0.3.0
│ │ │ ├── isbinaryfile#0.1.9
│ │ │ ├── lodash#2.1.0
│ │ │ └─┬ minimatch#0.2.14
│ │ │ ├── lru-cache#2.7.3
│ │ │ └── sigmund#1.0.1
│ │ ├─┬ findup-sync#0.1.3
│ │ │ └─┬ glob#3.2.11
│ │ │ └── minimatch#0.3.0
│ │ ├─┬ glob#3.2.11
│ │ │ └── minimatch#0.3.0
│ │ ├── iconv-lite#0.2.11
│ │ ├─┬ inquirer#0.4.1
│ │ │ ├─┬ cli-color#0.2.3
│ │ │ │ ├── es5-ext#0.9.2
│ │ │ │ └─┬ memoizee#0.2.6
│ │ │ │ ├── event-emitter#0.2.2
│ │ │ │ └── next-tick#0.1.0
│ │ │ ├── mute-stream#0.0.4
│ │ │ ├─┬ readline2#0.1.1
│ │ │ │ └─┬ strip-ansi#2.0.1
│ │ │ │ └── ansi-regex#1.1.1
│ │ │ └── through#2.3.8
│ │ ├── isbinaryfile#2.0.4
│ │ ├── mime#1.2.11
│ │ ├── mkdirp#0.3.5
│ │ ├─┬ request#2.30.0
│ │ │ ├── aws-sign2#0.5.0
│ │ │ ├── forever-agent#0.5.2
│ │ │ ├─┬ form-data#0.1.4
│ │ │ │ ├── async#0.9.2
│ │ │ │ └─┬ combined-stream#0.0.7
│ │ │ │ └── delayed-stream#0.0.5
│ │ │ ├─┬ hawk#1.0.0
│ │ │ │ ├── boom#0.4.2
│ │ │ │ ├── cryptiles#0.2.2
│ │ │ │ ├── hoek#0.9.1
│ │ │ │ └── sntp#0.2.4
│ │ │ ├─┬ http-signature#0.10.1
│ │ │ │ ├── asn1#0.1.11
│ │ │ │ ├── assert-plus#0.1.5
│ │ │ │ └── ctype#0.5.3
│ │ │ ├── json-stringify-safe#5.0.1
│ │ │ ├── node-uuid#1.4.7
│ │ │ ├── oauth-sign#0.3.0
│ │ │ ├── qs#0.6.6
│ │ │ ├─┬ tough-cookie#0.9.15
│ │ │ │ └── punycode#1.4.0
│ │ │ └── tunnel-agent#0.3.0
│ │ ├── rimraf#2.2.8
│ │ ├── shelljs#0.2.6
│ │ ├── text-table#0.2.0
│ │ └── underscore.string#2.3.3
│ └─┬ yosay#1.1.0
│ ├── ansi-regex#2.0.0
│ ├── pad-component#0.0.1
│ ├─┬ repeating#2.0.0
│ │ └─┬ is-finite#1.0.1
│ │ └── number-is-nan#1.0.0
│ ├─┬ string-width#1.0.1
│ │ ├── code-point-at#1.0.0
│ │ └── is-fullwidth-code-point#1.0.0
│ ├─┬ taketalk#1.0.0
│ │ └── get-stdin#4.0.1
│ └── word-wrap#1.1.0
└── UNMET PEER DEPENDENCY generator-karma#>=0.9.0
[root#localhost ~]#

You must install all the components on one line, as reported here.
npm install -g grunt-cli bower yo generator-karma generator-angular

Electron error on canceling file open dialog

When I press the cancel button on file open dialog (code below) I receive the following error:
A JavaScript error occurred in the main process
Uncaught Exception:
TypeError: Error processing argument -1.
at TypeError (native)
at [object Object].Object.defineProperty.set (/Applications/Electron.app/Contents/Resources/atom.asar/browser/api/lib/web-contents.js:92:24)
at main.js:37:20
at Function.wrappedCallback (/Applications/Electron.app/Contents/Resources/atom.asar/browser/api/lib/dialog.js:80:16)
The error is presented as a modal popup:
I have only tested on a Mac so far.
My code is as follows:
The main process code that handles the creation of dialog is as follows:
import electron, { ipcMain } from 'electron'
const app = electron.app
const BrowserWindow = electron.BrowserWindow
electron.crashReporter.start()
let mainWindow = null
app.on('window-all-closed', () => {
if (process.platform != 'darwin') app.quit()
})
app.on('ready', () => {
mainWindow = new BrowserWindow({
width: 800,
height: 600
})
mainWindow.loadURL(`file://${__dirname}/index.html`)
mainWindow.webContents.openDevTools()
mainWindow.on('closed', () => {
mainWindow = null
})
ipcMain.on('file:open', (e, arg) => {
electron.dialog.showOpenDialog(mainWindow, {
properties: ['openFile'],
filters: [{
name: 'Outlines',
extensions: ['pxo']
}]
}, (filePathList) => {
debugger
e.returnValue = filePathList
})
})
})
My debugger statement is never reached. Also the code works fine when some files are actually selected, and only fails if cancel is pressed.
The code (ES6+JSX) that triggers the IPC call is as follows:
class Welcome extends React.Component {
render() {
const styles = this.getStyles()
return (
<div style={styles.outerContainer}>
<a style={styles.btnSetLink} onClick={this.initFileSelection.bind(this)}>
Open File
</a>
</div>
)
}
initFileSelection() {
const filePathList = ipcRenderer.sendSync('file:open')
}
...
The code is processed through babel 6. My .babelrc is as follows:
{
"presets": ["react", "es2015"]
}
Version of electron: v0.35.1.
Versions of babel dependencies:
├─┬ babel-preset-es2015#6.3.13
│ ├── babel-plugin-check-es2015-constants#6.3.13
│ ├── babel-plugin-transform-es2015-arrow-functions#6.3.13
│ ├── babel-plugin-transform-es2015-block-scoped-functions#6.3.13
│ ├─┬ babel-plugin-transform-es2015-block-scoping#6.3.13
│ │ ├─┬ babel-template#6.3.13
│ │ │ └── babylon#6.3.18
│ │ ├─┬ babel-traverse#6.3.19
│ │ │ ├── babylon#6.3.18
│ │ │ ├── globals#8.15.0
│ │ │ └─┬ repeating#1.1.3
│ │ │ └─┬ is-finite#1.0.1
│ │ │ └── number-is-nan#1.0.0
│ │ └─┬ babel-types#6.3.18
│ │ ├── esutils#2.0.2
│ │ └── to-fast-properties#1.0.1
│ ├─┬ babel-plugin-transform-es2015-classes#6.3.15
│ │ ├── babel-helper-define-map#6.3.13
│ │ ├── babel-helper-function-name#6.3.15
│ │ ├── babel-helper-optimise-call-expression#6.3.13
│ │ ├── babel-helper-replace-supers#6.3.13
│ │ └── babel-messages#6.3.18
│ ├── babel-plugin-transform-es2015-computed-properties#6.3.13
│ ├── babel-plugin-transform-es2015-destructuring#6.3.15
│ ├── babel-plugin-transform-es2015-for-of#6.3.13
│ ├── babel-plugin-transform-es2015-function-name#6.3.19
│ ├── babel-plugin-transform-es2015-literals#6.3.13
│ ├─┬ babel-plugin-transform-es2015-modules-commonjs#6.3.16
│ │ └── babel-plugin-transform-strict-mode#6.3.13
│ ├── babel-plugin-transform-es2015-object-super#6.3.13
│ ├─┬ babel-plugin-transform-es2015-parameters#6.3.18
│ │ ├─┬ babel-helper-call-delegate#6.3.13
│ │ │ └── babel-helper-hoist-variables#6.3.13
│ │ └── babel-helper-get-function-arity#6.3.13
│ ├── babel-plugin-transform-es2015-shorthand-properties#6.3.13
│ ├── babel-plugin-transform-es2015-spread#6.3.14
│ ├─┬ babel-plugin-transform-es2015-sticky-regex#6.3.13
│ │ └── babel-helper-regex#6.3.13
│ ├── babel-plugin-transform-es2015-template-literals#6.3.13
│ ├── babel-plugin-transform-es2015-typeof-symbol#6.3.13
│ ├─┬ babel-plugin-transform-es2015-unicode-regex#6.3.13
│ │ └─┬ regexpu#1.3.0
│ │ ├── esprima#2.7.1
│ │ ├─┬ recast#0.10.33
│ │ │ ├── ast-types#0.8.12
│ │ │ └── esprima-fb#15001.1001.0-dev-harmony-fb
│ │ ├── regenerate#1.2.1
│ │ ├── regjsgen#0.2.0
│ │ └─┬ regjsparser#0.1.5
│ │ └── jsesc#0.5.0
│ └─┬ babel-plugin-transform-regenerator#6.3.18
│ ├── babel-core#6.3.17
│ ├── babel-plugin-syntax-async-functions#6.3.13
│ ├── babylon#6.3.18
│ └── private#0.1.6
├─┬ babel-preset-react#6.3.13
│ ├── babel-plugin-syntax-flow#6.3.13
│ ├── babel-plugin-syntax-jsx#6.3.13
│ ├── babel-plugin-transform-flow-strip-types#6.3.15
│ ├── babel-plugin-transform-react-display-name#6.3.13
│ ├─┬ babel-plugin-transform-react-jsx#6.3.13
│ │ └── babel-helper-builder-react-jsx#6.3.13
│ └── babel-plugin-transform-react-jsx-source#6.3.13
├─┬ babel-register#6.3.13
│ ├─┬ babel-core#6.3.17
│ │ ├─┬ babel-code-frame#6.3.13
│ │ │ ├─┬ chalk#1.1.1
│ │ │ │ ├── ansi-styles#2.1.0
│ │ │ │ ├── escape-string-regexp#1.0.3
│ │ │ │ ├─┬ has-ansi#2.0.0
│ │ │ │ │ └── ansi-regex#2.0.0
│ │ │ │ ├── strip-ansi#3.0.0
│ │ │ │ └── supports-color#2.0.0
│ │ │ ├── js-tokens#1.0.1
│ │ │ └─┬ line-numbers#0.2.0
│ │ │ └── left-pad#0.0.3
│ │ ├─┬ babel-generator#6.3.19
│ │ │ ├─┬ detect-indent#3.0.1
│ │ │ │ ├── get-stdin#4.0.1
│ │ │ │ └── minimist#1.2.0
│ │ │ ├── is-integer#1.0.6
│ │ │ └── trim-right#1.0.1
│ │ ├── babel-helpers#6.3.13
│ │ ├── babylon#6.3.18
│ │ ├── convert-source-map#1.1.2
│ │ ├─┬ debug#2.2.0
│ │ │ └── ms#0.7.1
│ │ ├── json5#0.4.0
│ │ ├─┬ minimatch#2.0.10
│ │ │ └─┬ brace-expansion#1.1.2
│ │ │ ├── balanced-match#0.3.0
│ │ │ └── concat-map#0.0.1
│ │ ├── path-is-absolute#1.0.0
│ │ ├── shebang-regex#1.0.0
│ │ ├── slash#1.0.0
│ │ └── source-map#0.5.3
│ ├── babel-runtime#5.8.34
│ ├── core-js#1.2.6
│ ├─┬ home-or-tmp#1.0.0
│ │ ├── os-tmpdir#1.0.1
│ │ └── user-home#1.1.1
│ ├── lodash#3.10.1
│ ├── path-exists#1.0.0
│ └─┬ source-map-support#0.2.10
│ └─┬ source-map#0.1.32
│ └── amdefine#1.0.0
Any help resolving the error would be highly appreciated.

Same problem here, I solved it by coercing return value to false (it is undefined otherwise):
ipc.on 'request:save:dialog', (event, params) ->
params||={}
event.returnValue = dialog.showSaveDialog(params) || false

i use this to handle it
process.on('uncaughtException', function (exception) {
// handle or ignore error
});

For my case, I din't have any javascript error on the UI nor in the console. The app would just quit like you just closed it normally after cancelling the file open dialog. This was happening when I was using electron version 5. Updating to version 8 resolved this issue.