Angular async/await handling makes LangChainJS fail

[gsans]

Which @angular/* package(s) are the source of the bug?

compiler-cli, zone.js

Is this a regression?

No

Description

While trying the getting started code for LangChainJS I’ve noticed that async/await code in base.js fails to work. It’s supposed to wait for a request to comeback but it fails immediately as it doesn’t wait.

Zones and a Generator wrapper seems to be involved. It’s not clear if it’s Angular fault or LangChainJS built or both. A babel plugin that is used to wrap promises into generators could also be involved.

Without a fix LangChainJS the most popular library for GenerativeAI is unusable with Angular. It seems that OpenAI library may cause similar issues.

In order to reproduce you need an OpenAI api key.

More details available in this issue at LangChainJS
langchain-ai/langchainjs#3105 (comment)

Please provide a link to a minimal reproduction of the bug

langchain-ai/langchainjs#3105 (comment)

Please provide the exception or error you saw

ERROR Error: Uncaught (in promise): TypeError: Cannot read properties of undefined (reading 'message')
TypeError: Cannot read properties of undefined (reading 'message')
    at base.cjs:233:34
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (asyncToGenerator.js:3:1)
    at _next (asyncToGenerator.js:22:1)
    at _ZoneDelegate.invoke (zone.js:368:26)
    at Object.onInvoke (core.mjs:11083:33)
    at _ZoneDelegate.invoke (zone.js:367:52)
    at Zone.run (zone.js:129:43)
    at zone.js:1257:36
    at _ZoneDelegate.invokeTask (zone.js:402:31)
    at resolvePromise (zone.js:1193:31)
    at zone.js:1100:17
    at zone.js:1116:33
    at asyncGeneratorStep (asyncToGenerator.js:6:1)
    at _throw (asyncToGenerator.js:25:1)
    at _ZoneDelegate.invoke (zone.js:368:26)
    at Object.onInvoke (core.mjs:11083:33)
    at _ZoneDelegate.invoke (zone.js:367:52)
    at Zone.run (zone.js:129:43)
    at zone.js:1257:36

Please provide the environment you discovered this bug in (run ng version)

Angular CLI: 16

Anything else?

No response

[alan-agius4]

Can you setup a minimal repro please?

You can read here why this is needed. A good way to make a minimal repro is to create a new app via ng new repro-app and adding the minimum possible code to show the problem. Then you can push this repository to github and link it here.

This might be related to your directory structure so its really important to get an accurate repro to diagnose this.

[gsans]

Sure. I’ll do that. The main issue is that it requires an OpenAI API key.

…

On Thu, 2 Nov 2023 at 13:47, Alan Agius ***@***.***> wrote: Can you setup a minimal repro please? You can read here <https://github.com/angular/angular-cli/blob/master/CONTRIBUTING.md#-submitting-an-issue> why this is needed. A good way to make a minimal repro is to create a new app via ng new repro-app and adding the minimum possible code to show the problem. Then you can push this repository to github and link it here. This might be related to your directory structure so its really important to get an accurate repro to diagnose this. — Reply to this email directly, view it on GitHub <#26204 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABDRYXCAVBDLXYJXXWYUDQTYCOP6BAVCNFSM6AAAAAA623N76WVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTOOJQG43DQNZRGY> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[gsans]

Created a repo for easy reproduction.
https://github.com/gsans/repro-app

Needs OpenAI API key. Instructions
https://www.maisieai.com/help/how-to-get-an-openai-api-key-for-chatgpt

1. Run this Angular CLI command to create the local environment

ng g environments

2. Fill in OpenAI API key

// src/environments/environment.development.ts
export const environment = {
  OPENAI_API_KEY: "<<ADD-HERE>>"
};

3. Run locally at http://localhost:4200/

ng serve

4. Click on call button to reproduce error in the console

5. Console

core.mjs:10614 ERROR Error: Uncaught (in promise): TypeError: Cannot read properties of undefined (reading 'message')
TypeError: Cannot read properties of undefined (reading 'message')
    at base.js:229:34
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (asyncToGenerator.js:3:1)
    at _next (asyncToGenerator.js:22:1)
    at _ZoneDelegate.invoke (zone.js:368:26)
    at Object.onInvoke (core.mjs:11083:33)
    at _ZoneDelegate.invoke (zone.js:367:52)
    at Zone.run (zone.js:129:43)
    at zone.js:1257:36
    at _ZoneDelegate.invokeTask (zone.js:402:31)
    at resolvePromise (zone.js:1193:31)
    at resolvePromise (zone.js:1147:17)
    at zone.js:1260:17
    at _ZoneDelegate.invokeTask (zone.js:402:31)
    at core.mjs:10757:55
    at AsyncStackTaggingZoneSpec.onInvokeTask (core.mjs:10757:36)
    at _ZoneDelegate.invokeTask (zone.js:401:60)
    at Object.onInvokeTask (core.mjs:11070:33)
    at _ZoneDelegate.invokeTask (zone.js:401:60)
    at Zone.runTask (zone.js:173:47)

Wait for response in the Network tab. Call is successful.

{
  "id": "chatcmpl-8GV5Yh4366uVozlQ1NeceMvwoM70P",
  "object": "chat.completion",
  "created": 1698943444,
  "model": "gpt-4-0613",
  "choices": [
    {
      "index": 0,
      "message": {
        "role": "assistant",
        "content": "1. Rainbow Steps\n2. Colorful Cozy Toes\n3. Spectrum Socks\n4. Vibrant Footprints\n5. Popsicle Peds\n6. Bright Steps\n7. Colorama Socks\n8. Hue Crew Socks\n9. Kaleidoscope Socks \n10. ColorSplash Footwear\n11. Technicolor Toes\n12. Dazzle Digits\n13. Footnote Colors\n14. Chromatic Comforts\n15. Tinted Toes\n16. Shade Parade Socks\n17. Rainbow Wrappings\n18. Palette Peds\n19. Prism Paws\n20. ColorWheel Socks\n21. Spectrum Strides\n22. Jazzy Jamboree Socks\n23. Bright Feet Beat\n24. Radiant Rambles\n25. Pigment Patter Socks."
      },
      "finish_reason": "stop"
    }
  ],
  "usage": {
    "prompt_tokens": 22,
    "completion_tokens": 178,
    "total_tokens": 200
  }
}

As an overview. The call throws immediately without waiting for the response to come back. The issue seems to be the asyncToGenerator wrapper that fails to replace the original async/await code from LangChain base.js pointing to either: 1) a possible build issue or 2) implementation issue at base.js.

This issue is important as it seems LangChain cannot be used with Angular at the moment.

[rattrayalex]

Related/dup: angular/angular#53380

[alan-agius4]

Duplicate of angular/angular#53380

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}