生产构建中的 Angular 问题，但在本地开发中没有。错误类型错误：无法读取未定义的属性“调用”

Posted 2023-03-07

技术标签:

【中文标题】生产构建中的 Angular 问题，但在本地开发中没有。错误类型错误：无法读取未定义的属性“调用”【英文标题】：Angular Issue in production build, but not in local development. ERROR TypeError: Cannot read property 'call' of undefined 【发布时间】：2020-06-17 13:58:22 【问题描述】：

我遇到了一个问题，我的 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

使用下面的 stackblitz 示例禁用缩小后出错：

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 包似乎是未定义的，但我不确定为什么在这种情况下它会编译而没有错误。我一直无法在网上找到与“create-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 --version

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

【问题讨论】：

尝试添加构造函数？您在尝试 (ng build --aot) 或 (ng build --prod) 时是否遇到任何构建错误？ @akhouri 我在运行这两个命令时都没有遇到构建错误，但是应用程序在运行相同的代码时会返回相同的错误。 【参考方案1】：

看看我创建的这个 stackblitz（根据您的设置使用角度 8）：

https://stackblitz.com/edit/so-60536842-create-hmac

要使其对您的代码起作用，我必须做的一项更改是：