Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to use it with Angular #751

Open
negue opened this issue Dec 26, 2019 · 8 comments
Open

How to use it with Angular #751

negue opened this issue Dec 26, 2019 · 8 comments

Comments

@negue
Copy link

@negue negue commented Dec 26, 2019

Is there any example to get it running with Angular?

I added import * as blockstack from 'blockstack'; but all I get is:


ERROR in node_modules/blockstack/lib/encryption/ec.d.ts:2:21 - error TS2497: This module can only be referenced with ECMAScript imports/exports by turning on the 'allowSyntheticDefaultImports' flag and referencing its default export.

2 import * as BN from 'bn.js';
                      ~~~~~~~
node_modules/blockstack/lib/network.d.ts:2:21 - error TS2497: This module can only be referenced with ECMAScript imports/exports by turning on the 'allowSyntheticDefaultImports' flag and referencing its default export.

2 import * as BN from 'bn.js';
                      ~~~~~~~
node_modules/blockstack/lib/operations/skeletons.d.ts:1:21 - error TS2497: This module can only be referenced with ECMAScript imports/exports by turning on the 'allowSyntheticDefaultImports' flag and referencing its default export.

1 import * as BN from 'bn.js';
                      ~~~~~~~
node_modules/blockstack/lib/operations/txbuild.d.ts:1:21 - error TS2497: This module can only be referenced with ECMAScript imports/exports by turning on the 'allowSyntheticDefaultImports' flag and referencing its default export.

1 import * as BN from 'bn.js';

Option allowSyntheticDefaultImports is enabled

Any ideas / workarounds ?

I hoped that Angular and blockstack both using typescript it shouldn't be a problem to use blackstack :/

@zone117x

This comment has been minimized.

Copy link
Member

@zone117x zone117x commented Dec 26, 2019

This is actually an issue with the @types/bn.js package, or at least how it is being imported.

I created this PR which should fix the issue if approved DefinitelyTyped/DefinitelyTyped#41255

For now, you can work around this by specifying skipLibCheck: true in your tsconfig.json

@negue

This comment has been minimized.

Copy link
Author

@negue negue commented Dec 26, 2019

Oh I see.

I added skipLibCheck: true this way it compiles fine.

But at runtime I got this:
Uncaught ReferenceError: global is not defined

Using this solution: https://stackoverflow.com/a/59249136/1298154

(window as any).global = window;
global.Buffer = global.Buffer || require('buffer').Buffer;
(window as any).process = {
  version: ''
};

Now it works at runtime too. 🎉

Maybe this should be somewhere in the docs, I guess many that tried with angular, got this issue and stopped after it ^^

In case anyone wants to have a "working" runtime demo: https://github.com/negue/blockstack-test

@negue

This comment has been minimized.

Copy link
Author

@negue negue commented Dec 26, 2019

Building ng build the angular app I also get this

ERROR in ./node_modules/blockstack/lib/keys.js
Module not found: Error: Can't resolve 'crypto'

I hope #737 will help with that

@zone117x

This comment has been minimized.

Copy link
Member

@zone117x zone117x commented Dec 27, 2019

You'll have to elaborate more on what you mean by "android app". Current blockstack.js depends on the node.js 'crypto' module, or for a bundler like webpack or browserify to polyfill it. That WebCrypto PR will remove the node.js 'crypto' module requirement for modern web browsers, however, the Android js runtime you are using may not provide the WebCrypto APIs.

@negue

This comment has been minimized.

Copy link
Author

@negue negue commented Dec 27, 2019

Oof sorry, I really did write android .. , brain auto correction :D sorry about that, I meant angular! (Edited the message above too)

I'll try a node crypto polyfill later today and post again with the results

@zone117x

This comment has been minimized.

Copy link
Member

@zone117x zone117x commented Dec 29, 2019

I took a cursory look at the ng build command (here: https://angular.io/cli/build) and it says webpack w/ default settings is used behind the scenes. Default webpack settings should have provided the various polyfills mentioned in this issue.

Could you post your build settings/config?

@negue

This comment has been minimized.

Copy link
Author

@negue negue commented Dec 29, 2019

Its finally compiling and working.

for the crypto error, I had to add this to my package.json:

"browser": {
  "crypto": false
}
@zone117x zone117x mentioned this issue Jan 4, 2020
6 of 9 tasks complete
@zone117x

This comment has been minimized.

Copy link
Member

@zone117x zone117x commented Jan 4, 2020

The bn.js skipLibCheck bug was fixed in the upstream dependencies. Once #753 is merged, the flag should no longer be necessary.

@negue

for the crypto error, I had to add this to my package.json: ...

That crypto package.json fix will no longer be necessary once #737 is merged.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
2 participants
You can’t perform that action at this time.