We Keep Coding

How can I ensure browser compatibility for the webcrypto API in Typescript?

So, what I'm trying to achieve is to use the Webcrypto API in Typescript and compile it to Javascript code that runs in the browser.
In the Browser, accessing the Webcrypto API is simple. Just window.crypto or crypto for short.
In node.js, you have to import it from the built-in "crypto" library first:
import { webcrypto as crypto } from "crypto"
Since I want to run it in the browser, I don't have to and also can not import it.
And here is the problem: For Typescript, I have to import the node library to get the necessary types. If I don't, this is the error:
src/main.ts:15:43 - error TS2503: Cannot find namespace 'crypto'.
So, for Typescript to compile, I have to import "crypto", but for the browser to run it I must not.
Possible work-arounds I can think of are:
tell Typescript that "crypto" (window.crypto) exists and is equivalent to crypto.webcrypto from the node library
tell Typescript to not include the line with the import in the output Javascript file
tell the browser to ignore that import
None of those I could find in the internet.
What I also tried is to use a dynamic import so I can conditionally import it, something like:
let _crypto: any = window?.crypto
if (!_crypto) {
_crypto = await import("crypto")
}
const crypto: any = _crypto
In theory, this should make the browser just ignore that "crypto" import since window.crypto exists.
But Typescript doesn't import the necessary types for dynamic imports for some reason.
In case this is needed, this is part of my code:
export function sign(privkey: crypto.CryptoKey, data: any) {
data = YSON.stringify(data)
data = new TextEncoder().encode(data).buffer
return crypto.subtle.sign({name: "ECDSA", hash: {name: "SHA-256"}}, privkey, data)
}
This function takes some data, stringifies it, and signs it using a private key.
The Y in YSON is intended.
The error is in the first line of that code snippet, I'm using the crypto.CryptoKey type.

Using a JS Class with static properties not working in Vue

I created a class with a static property in a seperate file in a Vue2 App:
export class TestUnit {
static testVar = "test";
}
When I try to import the class
import { TestUnit } from "../../poco/classes/TestUnit";
I get the "Failed to compile" - Error with the following message:
Module parse failed: Unexpected token (2:16)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| export class TestUnit {
> static testVar = "test";
I didn't find a solution searching after the error message. Do you have an idea what the problem is?
Update: Static methods in the TestUnit class are working: static test() { return "test" }; That confuses me.

You have to check your node version,
the static class fields are supported in version 12.4.0 and above.
the static methods are supported since 5.12
you can check node's supported features here: https://node.green

How to access native functionality from an included Java dependency

I'm looking to create a Nativescript wrapper for a Java library so I can utilize functionalities of it for a Nativescript app. There does not seem to be too many articles that go into this in detail, and there does not seem to be a clear way to do this within the Nativescript app itself which is why I am now making this a plugin wrapper.
The specific Java library I am working to include is Libsignal-protocol-java. I've gone ahead and cloned the Nativescript Plugin Seed and added this Java library as a dependency:
src/platforms/android/include.gradle
android {
}
dependencies {
compile 'org.whispersystems:signal-protocol-android:2.3.0+'
}
I then found the particular package that contains the method I am trying ro access within the Java source: KeyHelper.generateRegistrationId(); source. One article mentioned this is required as you'll have to specify the package when instantiating the class and method.
I then setup my libsignal-protocol.common.ts as follows to attempt and use the native method:
src/libsignal-protocol.common.ts
import { Observable } from 'tns-core-modules/data/observable';
export class Common extends Observable {
constructor() {
// does not work
let test1 = new org.whispersystems.libsignal.util.KeyHelper.generateRegistrationId();
// does not work
let test2 = org.whispersystems.libsignal.util.KeyHelper.generateRegistrationId();
console.log(test1);
console.log(test2);
}
}
To my dismay, the logger returned this error:
System.err: Error: java.lang.Exception: Failed resolving method generateRegistrationId on class org.whispersystems.libsignal.util.KeyHelper
I am not sure where else to go here now, I wanted to go this route as it seemed safer/cleaner to create a wrapper for this awesome Java library than trying to browserify their javascript library as it requires certain features not available within Nativescript.
Any help or suggestions would be appreciated! For sanity, I will include some articles I have found on this matter that has helped lead me to where I am now.
Sources
Using libsodium in Android/Nativescript
How to use JAR file in Nativescript

As you see in the source code generateRegistrationId method expects one boolean argument.
public static int generateRegistrationId(boolean extendedRange) {
try {
SecureRandom secureRandom = SecureRandom.getInstance("SHA1PRNG");
if (extendedRange) return secureRandom.nextInt(Integer.MAX_VALUE - 1) + 1;
else return secureRandom.nextInt(16380) + 1;
} catch (NoSuchAlgorithmException e) {
throw new AssertionError(e);
}
}
So you must pass a boolean to the method,
let test2 = org.whispersystems.libsignal.util.KeyHelper.generateRegistrationId(false);

Multipart file upload and ng serve: Angular 2

I am working on the front end of a file upload service. I am currently ignoring the service path with respect to the backend. I have run into a strange problem. I have a few generated components that sit within the app component. When I end the serve from console and do ng serve again, it errors out. It says:
The only way I have found to get rid of this is to erase my uploader service injection, save the file, then re-insert the injection. This is how it is supposed to look:
The only way to get ng serve to work is to by erasing the line private service: UploaderService
Any idea why this is happening? Am I missing something with my injection? My UploaderService is marked as Injectable() and the components that use it are under Directives.
Update:
What I found out is that it is unrelated to the UploaderService. I have a component that does not inject the UploaderService. I fix it the same way I fix the other components that inject the UploaderService. By deleting the parameters of the constructor, saving, and then putting the parameters back. Then it will serve
Update2:
The generated componenet, upload.component.t, has a spec file that is generated with it, upload.component.spec.ts
It has a error that asks for parameters like so:
My UploadComponent constructor has a parameter in it, where i inject the UploaderService. In the spec.ts file, a new UploadCompent is created, but does not contain any arguments. I am guessing this is where I am going wrong. How do I work around this?
Here is my UploaderService:
import { Injectable } from '#angular/core';
import {Http, Response, HTTP_PROVIDERS, Headers, HTTP_BINDINGS, RequestOptions} from '#angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/Rx';
import { ItemEntryComponent } from './item-entry';
import { Query } from './Query';
#Injectable()
export class UploaderService {
public URL: string;
private query: Query;
public filesSelected: Array<ItemEntryComponent> = [];
progress$: any;
progress: any;
progressObserver: any;
//CONSTRUCTOR
constructor(private http: Http) {
//***SET URL***
this.URL = 'http://localhost:7547/api/picker';
//Create Query for url
this.query = new Query(this.URL);
//Create progress attribute
this.progress$ = Observable.create(observer => {
this.progressObserver = observer
}).share();
}
}

Problem solved!
I had not realized the generated files included a spec testing file, in my example it was upload.component.spec.ts. Getting rid of those files gets rid of the errors that ask for parameters to be filled in inside the test files and now ng serve works.

Angular2 not working with basic javascript library

There seems to be an error in angular2-polyfills.js when getting a Javascript library (with its related Typescript typings) working in Angular 2 in the Browser.
It's a weird problem: I seem to be able to build and run when there is only 1 line of code from the library, but when I enter a 2nd line, it builds, but doesn't run?!?.
The library is AutobahnJS. It's a single .js file and the exact same library is designed to work in both the Browser and Node.
It works perfectly in both the Browser and Node as a normal (non-angular2) javascript library.
I have it working in Node using Typescript and it's related Typings (There is an example test at the Definitely Typed github page)
I have followed the basic Angular 2 Quickstart for Typescript and got it working no problems.
HERE is the code and output which DOES work. Note the last line in testAutobahn() is commented out:
import {Component} from 'angular2/core';
import autobahn = require('autobahn');
#Component({
selector: 'my-app',
template: `
<h1>Project: {{_projectName}}</h1>
`
})
export class AppComponent {
constructor() {}
private _projectName : string = "EXAMPLE7";
testAutobahn() {
var options: autobahn.IConnectionOptions =
{ url: 'wss://demo.crossbar.io/ws', realm: 'realm1' };
//var connection = new autobahn.Connection(options); // <- THIS line commented out, app runs fine
}
}
HERE is the code and output which does NOT work. Note the last line in testAutobahn() is left in:
import {Component} from 'angular2/core';
import autobahn = require('autobahn');
#Component({
selector: 'my-app',
template: `
<h1>Project: {{_projectName}}</h1>
`
})
export class AppComponent {
constructor() {}
private _projectName : string = "EXAMPLE7";
testAutobahn() {
var options: autobahn.IConnectionOptions =
{ url: 'wss://demo.crossbar.io/ws', realm: 'realm1' };
var connection = new autobahn.Connection(options); // <- THIS line left in, app not run!
}
}
The only difference is the commenting/uncommenting of that line.
The error seems to come from angular2-polyfills.js and system.src.js
I have used 'tsd' to install all the typings. They all look correct and my editor Atom has intellisense on the autobahn.* types just fine.
Possible issues?:
Using AutobahnJS v0.9.9 but the Typings seem to be for v0.9.6
-> I can't see this being a real problem
When building, Typescript emits the Javascript code, but it does give an error:
"Subsequent variable declarations must have the same type. Variable
'$' must be of type 'cssSelectorHelper', but here has type
'JQueryStatic'."
-> I have resolved this error by simply commenting out the line /* declare var $: JQueryStatic; */ in the jquery.d.ts file (I'm not using JQuery anyway)
Using Typescript v1.7.5, Angular 2 Beta 0 with the package.json, tsconfig.json and boot.ts files as per the Angular 2 Quickstart for Typescript.
My end goal is to get an Angular2 Service working with AutobahnJS (but just at the baby steps at the moment).
Any help would be greatly appreciated....

Well I have eventually got this working now and made some progress towards an AutobahnJS and Angular 2 Service. You may refer to my plunker:
[plunker](https://plnkr.co/edit/Dgipr76Rbhgh31PH4pmM)
however I'm still quite stuck. The problem is I can't simply 'call' a function (where this function will then go-ahead and execute the Autobahn session.call(...) method) which returns a value. For example, I'm wanting to do something simple like:
var x = myMessageService.DoFunct1( someParameter );