TS2503: Cannot find namespace 'ReCaptchaV2' (Angular 19)

[vanderjuh]

Summary

I'm submitting a:

• bug report
• feature request
• question / support request
• other

Description

I'm updating my application from v16 to v19 and once I try to build my custom angular library that contains dependency of ng-recaptchar-19 (this also happens with ng-recaptchar-2) I'm facing these errors below:

✖ Compiling with Angular sources in Ivy partial compilation mode.
node_modules/ng-recaptcha-19/lib/recaptcha-settings.d.ts:3:13 - error TS2503: Cannot find namespace 'ReCaptchaV2'.

3     theme?: ReCaptchaV2.Theme;
              ~~~~~~~~~~~
node_modules/ng-recaptcha-19/lib/recaptcha-settings.d.ts:4:12 - error TS2503: Cannot find namespace 'ReCaptchaV2'.

4     type?: ReCaptchaV2.Type;
             ~~~~~~~~~~~
node_modules/ng-recaptcha-19/lib/recaptcha-settings.d.ts:5:12 - error TS2503: Cannot find namespace 'ReCaptchaV2'.

5     size?: ReCaptchaV2.Size;
             ~~~~~~~~~~~
node_modules/ng-recaptcha-19/lib/recaptcha-settings.d.ts:6:13 - error TS2503: Cannot find namespace 'ReCaptchaV2'.

6     badge?: ReCaptchaV2.Badge;
              ~~~~~~~~~~~
node_modules/ng-recaptcha-19/lib/tokens.d.ts:110:26 - error TS2503: Cannot find namespace 'ReCaptchaV2'.

110     onLoaded?(recaptcha: ReCaptchaV2.ReCaptcha): ReCaptchaV2.ReCaptcha;
                             ~~~~~~~~~~~
node_modules/ng-recaptcha-19/lib/tokens.d.ts:110:50 - error TS2503: Cannot find namespace 'ReCaptchaV2'.

110     onLoaded?(recaptcha: ReCaptchaV2.ReCaptcha): ReCaptchaV2.ReCaptcha;
                                                     ~~~~~~~~~~~
node_modules/ng-recaptcha-19/lib/recaptcha-loader.service.d.ts:11:23 - error TS2503: Cannot find namespace 'ReCaptchaV2'.

11     ready: Observable<ReCaptchaV2.ReCaptcha>;
                         ~~~~~~~~~~~
node_modules/ng-recaptcha-19/lib/recaptcha.component.d.ts:6:66 - error TS2503: Cannot find namespace 'ReCaptchaV2'.

6 export type RecaptchaErrorParameters = Parameters<NeverUndefined<ReCaptchaV2.Parameters["error-callback"]>>;
                                                                   ~~~~~~~~~~~
node_modules/ng-recaptcha-19/lib/recaptcha.component.d.ts:13:13 - error TS2503: Cannot find namespace 'ReCaptchaV2'.

13     theme?: ReCaptchaV2.Theme;
               ~~~~~~~~~~~
node_modules/ng-recaptcha-19/lib/recaptcha.component.d.ts:14:12 - error TS2503: Cannot find namespace 'ReCaptchaV2'.

14     type?: ReCaptchaV2.Type;
              ~~~~~~~~~~~
node_modules/ng-recaptcha-19/lib/recaptcha.component.d.ts:15:12 - error TS2503: Cannot find namespace 'ReCaptchaV2'.

15     size?: ReCaptchaV2.Size;
              ~~~~~~~~~~~
node_modules/ng-recaptcha-19/lib/recaptcha.component.d.ts:17:13 - error TS2503: Cannot find namespace 'ReCaptchaV2'.

17     badge?: ReCaptchaV2.Badge;
               ~~~~~~~~~~~


 *  The terminal process "C:\WINDOWS\System32\WindowsPowerShell\v1.0\powershell.exe -Command npm run build-lib-prod" terminated with exit code: 1. 
 *  Terminal will be reused by tasks, press any key to close it.

My Angular version is 19.0.2 (local and global)
My NodeJs version is 20.15.0
My NPM version is 10.7.0

This is my package.json content:

{
  "name": "luby-angular",
  "version": "19.0.0",
  "private": true,
  "dependencies": {
    "@angular/animations": "19.0.1",
    "@angular/cdk": "19.0.1",
    "@angular/common": "19.0.1",
    "@angular/compiler": "19.0.1",
    "@angular/core": "19.0.1",
    "@angular/forms": "19.0.1",
    "@angular/material": "19.0.1",
    "@angular/material-moment-adapter": "19.0.1",
    "@angular/platform-browser": "19.0.1",
    "@angular/platform-browser-dynamic": "19.0.1",
    "@angular/router": "19.0.1",
    "@fingerprintjs/fingerprintjs": "4.5.1",
    "@microsoft/applicationinsights-angularplugin-js": "15.3.4",
    "@microsoft/applicationinsights-web": "3.3.4",
    "@ngx-translate/core": "16.0.3",
    "jwt-decode": "4.0.0",
    "lodash": "4.17.21",
    "moment": "2.30.1",
    "ng-recaptcha-19": "15.0.1",
    "ngx-countdown": "19.0.0",
    "ngx-mask": "19.0.0",
    "rxjs": "7.8.0",
    "tslib": "2.3.0",
    "zone.js": "0.15.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "19.0.2",
    "@angular-eslint/builder": "18.4.2",
    "@angular-eslint/eslint-plugin": "18.4.2",
    "@angular-eslint/eslint-plugin-template": "18.4.2",
    "@angular-eslint/schematics": "18.4.2",
    "@angular-eslint/template-parser": "18.4.2",
    "@angular/cli": "19.0.2",
    "@angular/compiler-cli": "19.0.1",
    "@types/jasmine": "5.1.5",
    "@types/jasminewd2": "2.0.13",
    "@types/lodash": "4.17.13",
    "@types/node": "20.14.8",
    "@typescript-eslint/eslint-plugin": "8.16.0",
    "@typescript-eslint/parser": "8.16.0",
    "codelyzer": "6.0.2",
    "eslint": "9.15.0",
    "eslint-plugin-import": "2.31.0",
    "eslint-plugin-jsdoc": "50.6.0",
    "eslint-plugin-prefer-arrow": "1.2.3",
    "eslint-plugin-unused-imports": "4.1.4",
    "jasmine-core": "5.4.0",
    "jasmine-spec-reporter": "7.0.0",
    "karma": "6.4.4",
    "karma-chrome-launcher": "3.2.0",
    "karma-coverage-istanbul-reporter": "3.0.3",
    "karma-jasmine": "5.1.0",
    "karma-jasmine-html-reporter": "2.1.0",
    "ng-packagr": "19.0.1",
    "ts-node": "10.9.2",
    "typescript": "5.6.2"
  }
}

Could someone support me?

[LakhveerChahal]

Will look into it in 1-2 days.

[kungufli]

Have someone found a temporary workaround for this problem, until @LakhveerChahal release a definitive fix? Thanks 🙏

[LakhveerChahal]

Sorry couldn’t look into it in the committed timeline. Will fix it on this weekend.

[LakhveerChahal]

I have published a new version 15.0.2 containing the fix. Let me know if it works.

However, the fix was weird. It had to be done after generating the dist of the library and adding the missing ``` in one of the d.ts file. Earlier, it used to be done automatically by ng-packagr but looks like there may be some regression in either Angular 19 or ng-packagr or typescript.

Update: This change in typescript was the reason behind this. See: https://devblogs.microsoft.com/typescript/announcing-typescript-5-5/#simplified-reference-directive-declaration-emit

Alternatively, it can also be fixed by adding "grecaptcha" in "types" property in your tsconfig.app.json

[vanderjuh]

It is working again! Thanks @LakhveerChahal.
Great job :)

[Saiuke]

@LakhveerChahal I can't find this last version (15.0.2) on NPM.