TypeError: crypto.createHmac is not a function

[LProemer]

AppComponent_Host.html:1 ERROR TypeError: crypto.createHmac is not a function
at sign (jwt.js:177)
at Object.jwt_encode [as encode] (jwt.js:143)
at JWTTokenBuilder.build (builder.js:221)
at AppComponent.get [as token] (app.component.ts:37)
at new AppComponent (app.component.ts:41)
at createClass (core.es5.js:10922)
at createDirectiveInstance (core.es5.js:10756)
at createViewNodes (core.es5.js:12197)
at createRootView (core.es5.js:12092)
at callWithDebugContext (core.es5.js:13475)
View_AppComponent_Host_0 @ AppComponent_Host.html:1
proxyClass @ compiler.es5.js:14971
DebugContext_.logError @ core.es5.js:13415
ErrorHandler.handleError @ core.es5.js:1080
(anonymous) @ core.es5.js:4409
ZoneDelegate.invoke @ zone.js:392
Zone.run @ zone.js:142
NgZone.runOutsideAngular @ core.es5.js:3844
(anonymous) @ core.es5.js:4409
ZoneDelegate.invoke @ zone.js:392
onInvoke @ core.es5.js:3890
ZoneDelegate.invoke @ zone.js:391
Zone.run @ zone.js:142
(anonymous) @ zone.js:844
ZoneDelegate.invokeTask @ zone.js:425
onInvokeTask @ core.es5.js:3881
ZoneDelegate.invokeTask @ zone.js:424
Zone.runTask @ zone.js:192
drainMicroTaskQueue @ zone.js:602
Promise resolved (async)
scheduleMicroTask @ zone.js:585
ZoneDelegate.scheduleTask @ zone.js:414
Zone.scheduleTask @ zone.js:236
Zone.scheduleMicroTask @ zone.js:256
scheduleResolveOrReject @ zone.js:842
ZoneAwarePromise.then @ zone.js:932
PlatformRef_.bootstrapModuleWithZone @ core.es5.js:4537
PlatformRef.bootstrapModule @ core.es5.js:4522
108 @ main.ts:11
webpack_require @ bootstrap ced7892d9f33aa4d8ee3:52
255 @ main.bundle.js:153
webpack_require @ bootstrap ced7892d9f33aa4d8ee3:52
webpackJsonpCallback @ bootstrap ced7892d9f33aa4d8ee3:23
(anonymous) @ main.bundle.js:1
AppComponent_Host.html:1 ERROR CONTEXT DebugContext_ {view: {…}, nodeIndex: 1, nodeDef: {…}, elDef: {…}, elView: {…}}
View_AppComponent_Host_0 @ AppComponent_Host.html:1
proxyClass @ compiler.es5.js:14971
DebugContext_.logError @ core.es5.js:13415
ErrorHandler.handleError @ core.es5.js:1085
(anonymous) @ core.es5.js:4409
ZoneDelegate.invoke @ zone.js:392
Zone.run @ zone.js:142
NgZone.runOutsideAngular @ core.es5.js:3844
(anonymous) @ core.es5.js:4409
ZoneDelegate.invoke @ zone.js:392
onInvoke @ core.es5.js:3890
ZoneDelegate.invoke @ zone.js:391
Zone.run @ zone.js:142
(anonymous) @ zone.js:844
ZoneDelegate.invokeTask @ zone.js:425
onInvokeTask @ core.es5.js:3881
ZoneDelegate.invokeTask @ zone.js:424
Zone.runTask @ zone.js:192
drainMicroTaskQueue @ zone.js:602
Promise resolved (async)
scheduleMicroTask @ zone.js:585
ZoneDelegate.scheduleTask @ zone.js:414
Zone.scheduleTask @ zone.js:236
Zone.scheduleMicroTask @ zone.js:256
scheduleResolveOrReject @ zone.js:842
ZoneAwarePromise.then @ zone.js:932
PlatformRef_.bootstrapModuleWithZone @ core.es5.js:4537
PlatformRef.bootstrapModule @ core.es5.js:4522
108 @ main.ts:11
webpack_require @ bootstrap ced7892d9f33aa4d8ee3:52
255 @ main.bundle.js:153
webpack_require @ bootstrap ced7892d9f33aa4d8ee3:52
webpackJsonpCallback @ bootstrap ced7892d9f33aa4d8ee3:23
(anonymous) @ main.bundle.js:1
zone.js:661 Unhandled Promise rejection: crypto.createHmac is not a function ; Zone: ; Task: Promise.then ; Value: TypeError: crypto.createHmac is not a function
at sign (jwt.js:177)
at Object.jwt_encode [as encode] (jwt.js:143)
at JWTTokenBuilder.build (builder.js:221)
at AppComponent.get [as token] (app.component.ts:37)
at new AppComponent (app.component.ts:41)
at createClass (core.es5.js:10922)
at createDirectiveInstance (core.es5.js:10756)
at createViewNodes (core.es5.js:12197)
at createRootView (core.es5.js:12092)
at callWithDebugContext (core.es5.js:13475) TypeError: crypto.createHmac is not a function
at sign (http://localhost:4200/vendor.bundle.js:68918:24)
at Object.jwt_encode [as encode] (http://localhost:4200/vendor.bundle.js:68884:17)
at JWTTokenBuilder.build (http://localhost:4200/vendor.bundle.js:68694:20)
at AppComponent.get [as token] (http://localhost:4200/main.bundle.js:87:16)
at new AppComponent (http://localhost:4200/main.bundle.js:66:25)
at createClass (http://localhost:4200/vendor.bundle.js:11954:26)
at createDirectiveInstance (http://localhost:4200/vendor.bundle.js:11788:37)
at createViewNodes (http://localhost:4200/vendor.bundle.js:13229:49)
at createRootView (http://localhost:4200/vendor.bundle.js:13124:5)
at callWithDebugContext (http://localhost:4200/vendor.bundle.js:14507:42)

[dc00p]

Can you tell us a little more about your development environment?
What version of AngularJS are you using?
Are you using JavaScript or TypeScript?
Is this a CLI error or a browser error?
It's possible that crypto may not natively be supported by AngularJS.

[LProemer]

I use Angular4+ and Typescript.
Usually I keep my global packages updated.
This little project was meant so I don't have to enter my data manually on the online jwt token generator but can config it to my needs.

The error happens when compiling Angular.
ng serve --aot returns:
`ERROR in W:/sboJwtCreator/src/app/app.component.ts (38,24): Property 'createHmac' does not exist on type 'Crypto'.

ERROR in ./src/main.ts
Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory' in 'W:\sboJwtCreator\src'
@ ./src/main.ts 4:0-74
@ multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts
webpack: Failed to compile.
`

Here are the versions

angular/cli: 1.0.0
node: 6.10.0
os: win32 x64
npm 5.4.0
typescript: ~2.2.0

[dc00p]

If possible, can you please commit a sample project demonstrating the issue?

[salemajestee]

Crypto is now a built-in node module. Update your node.js
https://nodejs.org/api/crypto.html