Angular 21 - Where to provide third party module for an injected service

I am working on a new angular v21 app, generated from the CLI, and am trying to make use of a service from the ng-recaptcha-2 library. In particular I am trying to inject the ReCaptchaV3Service into a service I am putting together, but I am getting a runtime error of

No provider found for `_ReCaptchaV3Service`. Source: Standalone[_App]. Path: _TokenService -> _ReCaptchaV3Service.


main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { App } from './app/app';

bootstrapApplication(App, appConfig)
.catch((err) => console.error(err));


app.config.ts

import { ApplicationConfig, provideBrowserGlobalErrorListeners } from '@angular/core';
import { provideRouter } from '@angular/router';

import { routes } from './app.routes';
import { provideHttpClient } from '@angular/common/http';
import { RECAPTCHA_SETTINGS, RecaptchaSettings } from "ng-recaptcha-2";
import { environment } from '../environments/environment';

export const appConfig: ApplicationConfig = {
providers: [
provideBrowserGlobalErrorListeners(),
provideRouter(routes),
provideHttpClient(),
{
provide: RECAPTCHA_SETTINGS,
useValue: { siteKey: environment.recaptchaSiteKey} as RecaptchaSettings,
}

]
};


app.ts

import { Component, inject, signal } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { BevaluedOffersService } from './bevalued-offers-service';
import { RecaptchaV3Module, ReCaptchaV3Service } from 'ng-recaptcha-2';
import { TokenService } from './token.service';

@Component({
selector: 'app-root',
imports: [RouterOutlet, RecaptchaV3Module],
templateUrl: './app.html',
styleUrl: './app.scss',
providers: []

})
export class App {
private tokenService = inject(TokenService);

getToken() {
tokenService.doStuff()
}
}


token.service.ts

import { inject, Injectable } from '@angular/core';
import { ReCaptchaV3Service } from 'ng-recaptcha-2';

@Injectable({
providedIn: 'root',
})
export class TokenService {

private recaptchaV3Service = inject(ReCaptchaV3Service);

doStuff():void {
}

}


I am unsure how to provide the RecaptchaV3Module, I have tried in the imports and 'providers' of my root level app component, with no luck.

What do I need to do to get resolve this?

Continue reading...