Issues running in Angular 16

[CuriouslyCory]

Current Behavior

Minimal install in angular 16 is resulting in fatal errors.
Here's a repo to replicate: https://github.com/CuriouslyCory/angular16-web3onboard

Error: node_modules/@walletconnect/modal/dist/_types/src/client.d.ts:14:34 - error TS2307: Cannot find module 'packages/core/dist/_types/src/controllers/ModalCtrl' or its corresponding type declarations.

14     openModal: (options?: import("packages/core/dist/_types/src/controllers/ModalCtrl").OpenOptions | undefined) => Promise<void>;
                                    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


Error: node_modules/@walletconnect/modal/dist/_types/src/client.d.ts:16:50 - error TS2307: Cannot find module 'packages/core/dist/_types/src/types/controllerTypes' or its corresponding type declarations.

16     subscribeModal: (callback: (newState: import("packages/core/dist/_types/src/types/controllerTypes").ModalCtrlState) => void) => () => void;
                                                    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


Error: node_modules/@web3-onboard/common/dist/types.d.ts:3:51 - error TS2307: Cannot find module 'eip-712' or its corresponding type declarations.

3 import type { TypedData as EIP712TypedData } from 'eip-712';
                                                    ~~~~~~~~~


Error: node_modules/@web3-onboard/common/dist/types.d.ts:5:51 - error TS2307: Cannot find module 'eip-712' or its corresponding type declarations.

5 export type { TypedData as EIP712TypedData } from 'eip-712';
                                                    ~~~~~~~~~


Error: node_modules/@web3-onboard/core/dist/types.d.ts:3:22 - error TS2307: Cannot find module '@web3-onboard/gas' or its corresponding type declarations.

3 import type gas from '@web3-onboard/gas';
                       ~~~~~~~~~~~~~~~~~~~


Error: node_modules/@web3-onboard/core/dist/types.d.ts:4:40 - error TS2307: Cannot find module '@web3-onboard/unstoppable-resolution' or its corresponding type declarations.

4 import type unstoppableResolution from '@web3-onboard/unstoppable-resolution';
                                         ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


Error: node_modules/@web3-onboard/core/dist/types.d.ts:5:44 - error TS2307: Cannot find module '@web3-onboard/transaction-preview' or its corresponding type declarations.

5 import type { TransactionPreviewAPI } from '@web3-onboard/transaction-preview';
                                             ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


Error: node_modules/@web3modal/core/dist/_types/src/controllers/ClientCtrl.d.ts:5:22 - error TS2307: Cannot find module 'chains/ethereum' or its corresponding type declarations.

5     client(): import("chains/ethereum").EthereumClient;
                       ~~~~~~~~~~~~~~~~~


Error: node_modules/@web3modal/core/dist/_types/src/types/controllerTypes.d.ts:1:37 - error TS2307: Cannot find module '@web3modal/ethereum' or its corresponding type declarations.

1 import type { EthereumClient } from '@web3modal/ethereum';
                                      ~~~~~~~~~~~~~~~~~~~~~




** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **


✖ Failed to compile.

All I've done is to create a service app/services/wallet.service.ts
And reference it from the App component in the constructor: app/app.component.ts
I've tried 2.0, 2.1, and 2.2 versions, but all are resulting in similar or the same errors.
I've also tried npm v16 and 18.
Tested and got failures with no wallet, injected wallet, and wallet connect.
Tested on Mac OS and WSL2.

Expected Behavior

App should compile and run.

Steps To Reproduce

1. clone [email protected]:CuriouslyCory/angular16-web3onboard.git
2. cd angular16-web3onboard
3. npm i
4. npm run start

What package is effected by this issue?

@web3-onboard/core

Is this a build or a runtime issue?

Build, Runtime

Package Version

2.*

Node Version

16 & 18

What browsers are you seeing the problem on?

No response

Relevant log output

Error: node_modules/@walletconnect/modal/dist/_types/src/client.d.ts:14:34 - error TS2307: Cannot find module 'packages/core/dist/_types/src/controllers/ModalCtrl' or its corresponding type declarations.

14     openModal: (options?: import("packages/core/dist/_types/src/controllers/ModalCtrl").OpenOptions | undefined) => Promise<void>;
                                    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


Error: node_modules/@walletconnect/modal/dist/_types/src/client.d.ts:16:50 - error TS2307: Cannot find module 'packages/core/dist/_types/src/types/controllerTypes' or its corresponding type declarations.

16     subscribeModal: (callback: (newState: import("packages/core/dist/_types/src/types/controllerTypes").ModalCtrlState) => void) => () => void;
                                                    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


Error: node_modules/@web3-onboard/common/dist/types.d.ts:3:51 - error TS2307: Cannot find module 'eip-712' or its corresponding type declarations.

3 import type { TypedData as EIP712TypedData } from 'eip-712';
                                                    ~~~~~~~~~


Error: node_modules/@web3-onboard/common/dist/types.d.ts:5:51 - error TS2307: Cannot find module 'eip-712' or its corresponding type declarations.

5 export type { TypedData as EIP712TypedData } from 'eip-712';
                                                    ~~~~~~~~~


Error: node_modules/@web3-onboard/core/dist/types.d.ts:3:22 - error TS2307: Cannot find module '@web3-onboard/gas' or its corresponding type declarations.

3 import type gas from '@web3-onboard/gas';
                       ~~~~~~~~~~~~~~~~~~~


Error: node_modules/@web3-onboard/core/dist/types.d.ts:4:40 - error TS2307: Cannot find module '@web3-onboard/unstoppable-resolution' or its corresponding type declarations.

4 import type unstoppableResolution from '@web3-onboard/unstoppable-resolution';
                                         ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


Error: node_modules/@web3-onboard/core/dist/types.d.ts:5:44 - error TS2307: Cannot find module '@web3-onboard/transaction-preview' or its corresponding type declarations.

5 import type { TransactionPreviewAPI } from '@web3-onboard/transaction-preview';
                                             ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


Error: node_modules/@web3modal/core/dist/_types/src/controllers/ClientCtrl.d.ts:5:22 - error TS2307: Cannot find module 'chains/ethereum' or its corresponding type declarations.

5     client(): import("chains/ethereum").EthereumClient;
                       ~~~~~~~~~~~~~~~~~


Error: node_modules/@web3modal/core/dist/_types/src/types/controllerTypes.d.ts:1:37 - error TS2307: Cannot find module '@web3modal/ethereum' or its corresponding type declarations.

1 import type { EthereumClient } from '@web3modal/ethereum';
                                      ~~~~~~~~~~~~~~~~~~~~~




** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **


✖ Failed to compile.

Anything else?

No response

Sanity Check

• If this is a build issue, I have included my build config. If this is a runtime issue, I have included reproduction steps and/or a Minimal, Reproducible Example.

[taylorjdawson]

Hey @CuriouslyCory thanks for bringing this to our attention, we'll take a look at your example see what the issue is. We don't have many angular users so but this will benefit those who do use it 👍

[CuriouslyCory]

Thank you!

I just tried installing with yarn and got the same results.

I'm not super experienced with projects like this, but it looks like there are a number of deps missing from package.json files, or miscatagorized as devDependencies when they should be runtime deps.
e.g. common/package.json has eventemitter3, and eip-721 as dev deps, but they appear to be included in runtime files.

[glitch-txs]

Hey could you try adding "skipLibCheck": true in the ts.config file?

[CuriouslyCory]

@glitch-txs Yes, that does stop the errors!

I'm not sure I'm comfortable leaving it on for my entire project, but it is a viable workaround for the time being and I'll look deeper into what the skipLibCheck is doing and if there's any way to apply it to specific dependencies.

Thank you!

[glitch-txs]

I think you can try
// @ts-nocheck – ignore <package-name>
On top of your files before importing

Seems to be a conflict with typescript config that might come from wagmi or web3modal.
https://wagmi.sh/core/typescript

[CuriouslyCory]

Looks like @ts-nocheck is one of those hyperlocal things. I messed around with it a few different ways but the skipLibCheck is still my main workaround for now.
Thanks again.

[RronKurtishi]

Facing the same issues with Angular 16. Changed the import path from packages to @walletconnect to solve the first two errors.

I also installed eip-712, @web3-onboard/gas, @web3-onboard/unstoppable-resolution and @web3-onboard/transaction-preview (added to dependencies in package.json) to solve the other errors.

The last two errors are from @web3modal which I haven't integrated.

Manually editing packages is not the best solution, but still better than "skipLibCheck": true.

[RronKurtishi]

Issue is fixed on @web3-onboard/[email protected]