我遇到了一个问题,我的一个Angular 8应用程序在本地运行时没有问题,正如预期的那样(ng-serve(,但是,当在生产环境中构建和运行时(ng-build(,当在我的应用程序中单击组件并运行代码时,它会给我以下错误。
控制台中收到错误:
ERROR TypeError: Cannot read property 'call' of undefined
at d.l (main-es2015.5d76d03ab70e1112760a.js:1)
at new d (main-es2015.5d76d03ab70e1112760a.js:1)
at Giow.e.exports (main-es2015.5d76d03ab70e1112760a.js:1)
at e.df (main-es2015.5d76d03ab70e1112760a.js:1)
at e.stretch (main-es2015.5d76d03ab70e1112760a.js:1)
at e.getHashPassword (main-es2015.5d76d03ab70e1112760a.js:1)
at p.newAccount (main-es2015.5d76d03ab70e1112760a.js:1)
at Object.handleEvent (main-es2015.5d76d03ab70e1112760a.js:1)
at Object.handleEvent (main-es2015.5d76d03ab70e1112760a.js:1)
at Object.handleEvent (main-es2015.5d76d03ab70e1112760a.js:1)
br @ main-es2015.5d76d03ab70e1112760a.js:1
handleError @ main-es2015.5d76d03ab70e1112760a.js:1
Xp @ main-es2015.5d76d03ab70e1112760a.js:1
(anonymous) @ main-es2015.5d76d03ab70e1112760a.js:1
(anonymous) @ main-es2015.5d76d03ab70e1112760a.js:1
invokeTask @ polyfills-es2015.a8cec314c5933902d1c0.js:1
onInvokeTask @ main-es2015.5d76d03ab70e1112760a.js:1
invokeTask @ polyfills-es2015.a8cec314c5933902d1c0.js:1
runTask @ polyfills-es2015.a8cec314c5933902d1c0.js:1
invokeTask @ polyfills-es2015.a8cec314c5933902d1c0.js:1
y @ polyfills-es2015.a8cec314c5933902d1c0.js:1
b @ polyfills-es2015.a8cec314c5933902d1c0.js:1
使用以下堆栈litz禁用缩小后出错示例:
ERROR TypeError: Cannot read property 'call' of undefined
at Hmac.CipherBase (main-es2015.02649c002b843ca5ea1e.js:63726)
at new Hmac (main-es2015.02649c002b843ca5ea1e.js:63860)
at createHmac (main-es2015.02649c002b843ca5ea1e.js:63907)
at PasswordService.uno_hkdf (main-es2015.02649c002b843ca5ea1e.js:77684)
at PasswordService.stretch (main-es2015.02649c002b843ca5ea1e.js:77671)
at AppComponent.ngOnInit (main-es2015.02649c002b843ca5ea1e.js:77535)
at checkAndUpdateDirectiveInline (main-es2015.02649c002b843ca5ea1e.js:36518)
at checkAndUpdateNodeInline (main-es2015.02649c002b843ca5ea1e.js:47852)
at checkAndUpdateNode (main-es2015.02649c002b843ca5ea1e.js:47791)
at prodCheckAndUpdateNode (main-es2015.02649c002b843ca5ea1e.js:48645)
代码:
import { Injectable } from '@angular/core';
import { pbkdf2Sync } from 'pbkdf2';
import * as createHmac from 'create-hmac';
@Injectable()
export class PasswordService {
public stretch(emailInput, passwordInput) {
const salt = new Buffer('identity.mozilla.com/picl/v1/' + 'quickStretch' + ':' + emailInput, 'utf8');
const password = new Buffer(passwordInput, 'utf8');
const key: Buffer = pbkdf2Sync(password, salt, 1000, 128, 'sha256');
const info = new Buffer('identity.mozilla.com/picl/v1/' + 'authPW', 'utf8');
const outcome = this.df(key, info, '', 128);
return outcome;
}
df(key, info, salt, length) {
const k = createHmac('sha256', salt).update(key).digest(); /* <----------- FAILS HERE */
const k2 = createHmac('sha256', k);
const counter = new Buffer([1]);
k2.update(info);
k2.update(counter);
return k2.digest().toString('base64');
}
}
在通过开发人员控制台调试并逐步完成服务后,我发现它会在我的df函数的第一行失败,特别是在createHmac('sha256', salt)
;create-hmac
包似乎是未定义的,但我不确定为什么在这种情况下它会编译而没有错误。我在网上找不到任何与"创建hmac"程序包有关的类似问题,这让我相信这与我的应用程序的设置方式有关,但我不确定从哪里开始寻找。
我从网上的各种搜索中尝试过的东西,但总是导致相同的错误:
1. rm -rf /node_modules/ -> npm update -> npm install
2. require() instead of import()
3. es5 to es2015 in tsconfig.json
4. Updating create-hmac and pbkdf2 packages
5. Downgrading @angular/cli and @angular-devkit/build-angular
6. Build with other flags such as ```ng build --build-optimizer --aot```
7. Node v10.15, v10.16, and v12.16
8. Using a constructor for createHmac
9. Using import createHmac from 'create-hmac'
ng—版本
Angular CLI: 8.3.20
Node: 10.16.0
OS: linux x64
Angular: 8.2.14
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Package Version
-----------------------------------------------------------
@angular-devkit/architect 0.803.20
@angular-devkit/build-angular 0.803.20
@angular-devkit/build-optimizer 0.803.20
@angular-devkit/build-webpack 0.803.20
@angular-devkit/core 8.3.20
@angular-devkit/schematics 8.3.20
@angular/cdk 8.2.3
@angular/cli 8.3.20
@angular/http 7.2.16
@angular/material 8.2.3
@ngtools/webpack 8.3.20
@schematics/angular 8.3.20
@schematics/update 0.803.20
rxjs 6.5.4
typescript 3.5.3
webpack 4.39.2
任何见解都值得赞赏。谢谢
找到解决方案https://forum.aeternity.com/t/important-fix-for-angular-typeerror-cannot-read-property-call-of-undefined-at-hash-cipherbase-index-js-7/4153
看看我创建的这个堆栈(根据您的设置,角度为8(:
https://stackblitz.com/edit/so-60536842-create-hmac
为了让它在你的代码方面发挥作用,我不得不做的一个改变是:
import createHmac from 'create-hmac';
否则(import * as createHmac from 'create-hmac';
(会给我一个错误:createHmac is not a function