Walletconnect migration issue from v1 to v2 for angular12

[renukag30]

Hello,

I was using @walletconnect/web3-provider npm for walletconnect earlier in our code with web3js support for metamask and walletconnect. But as WalletConnect's v1 SDKs are now deprecated walletconnect functionality is no longer working in my code.
Currently I am using 12.1.4 angular version for our existing codebase web3 1.4.0".
The issue is v2 migration packages for walletconnect requires angular latest i.e 16 version whereas web3 js will not support higher versions.
I want metamask + walletconnect functionality to be working with angular 12.

package.json file of angular and web3 configurations :-

"dependencies": {
"@angular-slider/ngx-slider": "^2.0.3",
"@angular/animations": "^12.1.2",
"@angular/cdk": "^12.2.4",
"@angular/common": "~12.1.0",
"@angular/compiler": "~12.1.0",
"@angular/core": "~12.1.0",
"@angular/flex-layout": "^12.0.0-beta.34",
"@angular/forms": "~12.1.0",
"@angular/localize": "~12.1.0",
"@angular/material": "^12.2.13",
"@angular/platform-browser": "~12.1.0",
"@angular/platform-browser-dynamic": "~12.1.0",
"@angular/router": "~12.1.0",
"@crossmint/client-sdk-vanilla-ui": "^0.0.1",
"@crossmint/connect": "0.0.9-alpha.6",
"@fortawesome/angular-fontawesome": "^0.9.0",
"@fortawesome/fontawesome-svg-core": "^1.2.36",
"@fortawesome/free-brands-svg-icons": "^5.15.4",
"@fortawesome/free-solid-svg-icons": "^5.15.4",
"@metamask/detect-provider": "^1.2.0",
"@ng-bootstrap/ng-bootstrap": "^10.0.0",
"@walletconnect/web3-provider": "^1.5.1",
"bootstrap": "^4.6.0",
"chart.js": "^3.7.0",
"downloadjs": "^1.4.7",
"elliptic": "^6.5.4",
"eth-rpc-errors": "^4.0.3",
"ethers": "^6.2.3",
"file-saver": "^2.0.5",
"html-to-image": "^1.9.0",
"jquery": "^3.6.0",
"lit": "^2.2.3",
"lodash": "^4.17.21",
"moment": "^2.29.1",
"ng-navigator-share": "^1.0.4",
"ng-recaptcha": "^8.0.1",
"ng-sidebar": "^9.4.2",
"ng2-charts": "^3.0.8",
"ngx-bootstrap-slider": "^1.9.0",
"ngx-color-picker": "^11.0.0",
"ngx-countdown": "^12.0.0",
"ngx-countdown-timer": "^0.2.0",
"ngx-easy-table": "^14.0.0",
"ngx-google-analytics": "^13.0.1",
"ngx-hotjar": "^11.0.0",
"ngx-lightbox": "^2.5.2",
"ngx-owl-carousel-o": "^6.0.0",
"ngx-sharebuttons": "^8.0.5",
"ngx-simple-countdown": "^1.2.3",
"ngx-toastr": "^14.0.0",
"ngx-ui-loader": "^11.0.0",
"popper.js": "^1.16.1",
"pretty-checkbox": "^3.0.3",
"process": "^0.11.10",
"rxjs": "~6.6.0",
"save-svg-as-png": "^1.4.17",
"simple-line-icons": "^2.5.5",
"timers-browserify": "^2.0.12",
"tslib": "^2.2.0",
"walletconnect": "^1.7.8",
"walletlink": "^2.2.6",
"web3": "^1.4.0",
"web3modal": "^1.9.3",
"zone.js": "~0.11.4"
},
"devDependencies": {
"@angular-devkit/build-angular": "~12.1.0",
"@angular/cli": "^12.1.1",
"@angular/compiler-cli": "~12.1.0",
"@types/elliptic": "^6.4.14",
"@types/file-saver": "^2.0.5",
"@types/jasmine": "~3.6.0",
"@types/jquery": "^3.5.16",
"@types/lodash": "^4.14.172",
"@types/node": "^12.20.16",
"@types/prop-types": "^15.7.4",
"@types/qs": "^6.9.7",
"@types/react": "^17.0.14",
"@webcomponents/webcomponentsjs": "^2.6.0",
"assert": "^2.0.0",
"crypto-browserify": "^3.12.0",
"https-browserify": "^1.0.0",
"jasmine-core": "~3.7.0",
"karma": "~6.3.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.0.3",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.5.0",
"os-browserify": "^0.3.0",
"stream-browserify": "^3.0.0",
"stream-http": "^3.2.0",
"typescript": "~4.3.2"
}

Any help will be appreciated!

[glitch-txs]

Hi, in tsconfig.js file add "skipLibCheck": true"