GithubHelp home page GithubHelp logo

dethariel / ng-recaptcha Goto Github PK

View Code? Open in Web Editor NEW
452.0 13.0 122.0 3.51 MB

Angular component for Google reCAPTCHA

Home Page: https://dethariel.github.io/ng-recaptcha/

License: MIT License

TypeScript 87.60% JavaScript 3.71% CSS 2.62% HTML 6.02% Shell 0.05%
captcha google-recaptcha angular-recaptcha ng-recaptcha recaptcha-api

ng-recaptcha's People

Contributors

bbarry avatar deathbearbrown avatar dependabot[bot] avatar dethariel avatar dockleryxk avatar edimitchel avatar gkaran avatar macbem avatar nosachamos avatar pedroqueiroga avatar sdorra avatar umairhm avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

ng-recaptcha's Issues

How it work's with angular dynamic forms

Hi, I want to know, as it's not specify in the documentation, how this new version work's with angular dynamic forms.
With the previous version i was able to handle the recaptcha with a "formControlName", but now i've got an error. Is there a solution or i need to pass via the resolve function? Thank's

"Cannot read property 'value' of null" when component is destroyed

This happens for both untouched captcha, and one that has been resolved.

TypeError: Cannot read property 'value' of null
at Object.mo [as getResponse] (https://www.gstatic.com/recaptcha/api2/r20170126104253/recaptcha__en_gb.js:298:137)
at RecaptchaComponent.reset (eval at ./node_modules/ng2-recaptcha/recaptcha/recaptcha.component.js (http://localhost:8000/app.1.js:11315:1), :38:33)
at RecaptchaComponent.ngOnDestroy (eval at ./node_modules/ng2-recaptcha/recaptcha/recaptcha.component.js (http://localhost:8000/app.1.js:11315:1), :33:14)

Not found issues when using systemjs loader

I can't seem to make it work on systemjs. It finds ng2-recaptcha.noforms.js but it fails on following requests:

[1] 17.01.30 04:46:34 404 GET /node_modules/ng2-recaptcha/recaptcha/recaptcha.component
[1] 17.01.30 04:46:34 404 GET /node_modules/ng2-recaptcha/recaptcha/recaptcha-loader.service
[1] 17.01.30 04:46:34 404 GET /node_modules/ng2-recaptcha/recaptcha/recaptcha-noforms.module

My system.config.js has followinf line to load:

'ng2-recaptcha' : 'node_modules/ng2-recaptcha/ng2-recaptcha.noforms.js'

And like readme explains I call from module

import { RecaptchaModule } from 'ng2-recaptcha';

Any idea what is wrong?

Question: Webpack sample

I was wondering if someone could point to webpack sample somewhere! I cannot get it up and running in webpack 2.

Peerdependency error when using angular v2.4.4 with the latest version 1.5.0

hi,

The current release gives conflicts on dependencies

Angular 2.4.4 uses zone 0.7.2, but the current release of ng2-captcha uses 0.6.26.

Angular 2.4.4 release works with the ng2-translate release 1.4.0.

The difference i found is that zone v0.6.26 is added to the "peerdependency section" in "package.json"

This is the reason i get conflicts.

How can i resolve this issue? if i want to use the 1.5.0 version of ng2-translate

farhad

"Calling function 'RecaptchaLoaderService', function calls are not supp..." when build -prod

When I apply new language, it works fine in development environment

ng serve

But when I try to build prod, I get error

ng build -prod

ERROR in Error encountered resolving symbol values statically. Calling function 'RecaptchaLoaderService', function calls are not supp
replacing the function or lambda with a reference to an exported function, resolving symbol AppComponent in /Users/
src/app/app.component.ts, resolving symbol AppComponent in /Users/ang/src/app/app.compone

ERROR in ./src/main.ts
Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory' in '/Users/ang/src
@ ./src/main.ts 4:0-74
@ multi ./src/main.ts

Then I have to remove RecaptchaLoaderService.

The captcha does not seem to work on v2

I can't seem to load the captcha and I get the following error
Uncaught (in promise): Error: DI Error

@angular/cli: 1.0.0
node: 6.9.5
os: win32 x64
@angular/common: 2.4.7
@angular/compiler: 2.4.7
@angular/core: 2.4.7
@angular/forms: 2.4.7
@angular/http: 2.4.7
@angular/material: 2.0.0-beta.2
@angular/platform-browser: 2.4.7
@angular/platform-browser-dynamic: 2.4.7
@angular/router: 3.4.7
@angular/cli: 1.0.0
@angular/compiler-cli: 2.4.7

AppModule

@NgModule({
    imports: [
        RecaptchaFormsModule

Unclear example

Hi,

The module looks interesting. But when looking at the instructions is not actually clear how to set it up.

See below:

import { RecaptchaModule } from 'ng2-recaptcha';
import { BrowserModule }  from '@angular/platform-browser';

@NgModule({
  bootstrap: [MyApp],
  declarations: [MyApp],
  imports: [
    BrowserModule,
    RecaptchaModule.forRoot(), // Keep in mind the "forRoot"-magic nuances!
  ],
})
export class MyAppModule { }

There you bootstrap and declare MyApp which is never imported in this module.
(By the way, forRoot did not do it for me. I get Property 'forRoot' does not exist on type 'typeof ReCaptchaModule' error. I can raise a separate issue with more information if that'd help).

And then here:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `<recaptcha (resolved)="resolved($event)" siteKey="YOUR_SITE_KEY"></recaptcha>`,
}) export class MyApp {
    resolved(captchaResponse: string) {
        console.log(`Resolved captcha with response ${captchaResponse}:`);
    }
}

platformBrowserDynamic().bootstrapModule(MyAppModule);

You declare a new component and then export MyApp class. But at the end of this example you bootstrap your AppModule which is never imported in the example.

Can you please check on that? I've been trying to use it and I'm not sure what I'm missing.
So if you can have the instructions corrected, that'd be awesome.

Thanks.
Cheers!

ReCaptcha stealing the focus

After loading, recaptcha steals the focus from the focused field.
It should be able to override the method Recaptcha.focus_response_field .
Thanks.

An angular variable/constant as sidekey?

I want to use the recaptcha multiple times, test it on my development with a different key as in production environment. In the latest angular 4 project created with angular/cli there is the following code within src/environment/environment.ts:

export const environment = {
  production: false,
  recaptcha_sitekey: '6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI' // site key for testing.
};

Later for production there will be another code. My question is: How to use this constant in the sidekey-Parameter of ng-recaptcha? It would be hard to exchange all occurences for production code.

Cannot find type definition file for 'grecaptcha' when running NG-XI18N

Hi,
when I try to extract translation strings from my app using ng-xi18n I'm getting this error in recaptcha module... How can I fix this?

./node_modules/.bin/ng-xi18n -p ./src/tsconfig.json Error: Error at /app/node_modules/ng2-recaptcha/recaptcha/recaptcha-loader.service.d.ts:1:1: Cannot find type definition file for 'grecaptcha'. Error at /app/node_modules/ng2-recaptcha/recaptcha/recaptcha-loader.service.d.ts:6:23: Cannot find namespace 'ReCaptchaV2'. Error at /app/node_modules/ng2-recaptcha/recaptcha/recaptcha.component.d.ts:1:1: Cannot find type definition file for 'grecaptcha'. Error at /app/node_modules/ng2-recaptcha/recaptcha/recaptcha.component.d.ts:10:12: Cannot find namespace 'ReCaptchaV2'. Error at /app/node_modules/ng2-recaptcha/recaptcha/recaptcha.component.d.ts:11:11: Cannot find namespace 'ReCaptchaV2'. Error at /app/node_modules/ng2-recaptcha/recaptcha/recaptcha.component.d.ts:12:11: Cannot find namespace 'ReCaptchaV2'. at UserError.Error (native) at new UserError (/app/node_modules/@angular/compiler-cli/node_modules/@angular/tsc-wrapped/src/tsc.js:22:34) at check (/app/node_modules/@angular/compiler-cli/node_modules/@angular/tsc-wrapped/src/tsc.js:73:15) at Tsc.typeCheck (/app/node_modules/@angular/compiler-cli/node_modules/@angular/tsc-wrapped/src/tsc.js:148:9) at /app/node_modules/@angular/compiler-cli/node_modules/@angular/tsc-wrapped/src/main.js:56:23 at process._tickCallback (internal/process/next_tick.js:103:7) at Module.runMain (module.js:606:11) at run (bootstrap_node.js:394:7) at startup (bootstrap_node.js:149:9) at bootstrap_node.js:509:3 Extraction failed

Best way to use ng-recaptcha with multiple forms

Hi have 2 components containing form on the same page, and I want to use invisible recaptcha in both of them.

I tried to use it twice, one recaptcha per component, and it looks to work almost, but I frequently get this JS error:

TypeError: null is not an object (evaluating 'a.style')
  at Th (/recaptcha/api2/r20170503135251/recaptcha__fr.js:130:152)
  at None (/recaptcha/api2/r20170503135251/recaptcha__fr.js:379:259)
  at None ([native code])
  at r (/vendor.e8ca299bdc7eb8a082ad.bundle.js:533:54252)
  at runTask (/polyfills.e973013abdce7c05a842.bundle.js:36:3206)

So, I guess it is probably better to create the recaptcha in my main component, then get a reference to it using @ViewChild, and pass it to each of my sub-components as an Input().

And when submitting a form in one of my component, manually trigger:

this.recaptchaRef.execute();

But infortunately, this method does not return an observable nor provide any callback mechanism, and make it tricky to execute the form action in my sub-component once the captcha has been resolved.

Any suggestion to solve my issue, or any plan to support such a scenario?

window is not defined ReferenceError: window is not defined

Hi, could you help me please with this error, some other package display the same message, what could be?

The error is in the /dist/main-server.js file.

I'm using a Net Core SPA project with angular 2, if you need more info tell me,
Thanks.

Issue installing on angular 4.0.3

Trying to use "npm i ng-recaptcha --save"
when importing, i get a 404 error in the console

login:18 Error: (SystemJS) XHR error (404 Not Found) loading http://10.0.0.5:3000/ng-recaptcha Error: XHR error (404 Not Found) loading http://10.0.0.5:3000/ng-recaptcha at XMLHttpRequest.wrapFn [as __zone_symbol___onreadystatechange] (http://10.0.0.5:3000/node_modules/zone.js/dist/zone.js:1230:39) [<root>] at XMLHttpRequest.ZoneTask.invoke (http://10.0.0.5:3000/node_modules/zone.js/dist/zone.js:460:38) [<root>] Error loading http://10.0.0.5:3000/ng-recaptcha as "ng-recaptcha" from http://10.0.0.5:3000/app/app.module.js at XMLHttpRequest.wrapFn [as __zone_symbol___onreadystatechange] (http://10.0.0.5:3000/node_modules/zone.js/dist/zone.js:1230:39) [<root>] at XMLHttpRequest.ZoneTask.invoke (http://10.0.0.5:3000/node_modules/zone.js/dist/zone.js:460:38) [<root>] Error loading http://10.0.0.5:3000/ng-recaptcha as "ng-recaptcha" from http://10.0.0.5:3000/app/app.module.js

Tried to set defaultJsExtension to js, no difference...

Tried adding to the map in the systemjs.config.js:
'ng-recaptcha': 'npm:ng-recaptcha/index.js',

then i get a different error:
GET http://10.0.0.5:3000/node_modules/ng-recaptcha/recaptcha/recaptcha.component 404 (Not Found) for service and module as well :/

Am I missing something basic? red the instructions like 16 times already

Question: compiling from source results in error due to Cannot find namespace 'ReCaptchaV2'

I'm compiling the library from the source, and tsc gives me these errors:

node_modules/ng2-recaptcha-src/recaptcha/recaptcha-loader.service.ts(15,41): error TS2503: Cannot find namespace 'ReCaptchaV2'.
node_modules/ng2-recaptcha-src/recaptcha/recaptcha-loader.service.ts(17,28): error TS2503: Cannot find namespace 'ReCaptchaV2'.
node_modules/ng2-recaptcha-src/recaptcha/recaptcha-loader.service.ts(17,28): error TS4031: Public property 'ready' of exported class has or is using private name 'ReCaptchaV2'.
node_modules/ng2-recaptcha-src/recaptcha/recaptcha-loader.service.ts(33,12): error TS2339: Property 'ng2recaptchaloaded' does not exist on type 'Window'.
node_modules/ng2-recaptcha-src/recaptcha/recaptcha-loader.service.ts(34,41): error TS2304: Cannot find name 'grecaptcha'.
node_modules/ng2-recaptcha-src/recaptcha/recaptcha-loader.service.ts(36,56): error TS2503: Cannot find namespace 'ReCaptchaV2'.
node_modules/ng2-recaptcha-src/recaptcha/recaptcha.component.ts(24,26): error TS2503: Cannot find namespace 'ReCaptchaV2'.
node_modules/ng2-recaptcha-src/recaptcha/recaptcha.component.ts(24,26): error TS4031: Public property 'theme' of exported class has or is using private name 'ReCaptchaV2'.
node_modules/ng2-recaptcha-src/recaptcha/recaptcha.component.ts(25,25): error TS2503: Cannot find namespace 'ReCaptchaV2'.
node_modules/ng2-recaptcha-src/recaptcha/recaptcha.component.ts(25,25): error TS4031: Public property 'type' of exported class has or is using private name 'ReCaptchaV2'.
node_modules/ng2-recaptcha-src/recaptcha/recaptcha.component.ts(26,25): error TS2503: Cannot find namespace 'ReCaptchaV2'.
node_modules/ng2-recaptcha-src/recaptcha/recaptcha.component.ts(26,25): error TS4031: Public property 'size' of exported class has or is using private name 'ReCaptchaV2'.
node_modules/ng2-recaptcha-src/recaptcha/recaptcha.component.ts(36,23): error TS2503: Cannot find namespace 'ReCaptchaV2'.
node_modules/ng2-recaptcha-src/recaptcha/recaptcha.component.ts(45,66): error TS2503: Cannot find namespace 'ReCaptchaV2'.

When I look into recaptcha.component.ts and recaptcha-loader.service.ts, I see uses of this namespace but this is never imported. I could not find where this is defined.

Where is this coming from?

Thank you!

Auto submit form when validating invisible captcha

Hi,

So I don't know if there is a way to do this, but my problem is the following:

I'm using the invisible captcha on my login page. It goes like this

<div class="form-buttons">
        <div [class.enabled]="isValid() && !isPristine()" (click)="onSubmit();" class="submit-button">Login</div>
        <re-captcha [size]="'invisible'" site_key="6Lfz2xsUAAAAABf0KnVEpLdJptBScodnOYpliVPA"></re-captcha>

    </div>

And then

  @ViewChild(ReCaptchaComponent) captcha: ReCaptchaComponent;


    /**
     * If the form is valid, handle form submission here
     */
    onSubmit() {
        if (this.isValid()) {
            this.captcha.execute();
            let token = this.captcha.getResponse();
            if (token != "")
               this.signIn();
        }
    }

So my problem is that when / if the captcha activates, the user validates it, but then has to click on the submit button again.

Would you know a way to submit the form at the captcha validation ?

Thanks in advance :)

How do I programmatically call resolve(event)?

I followed the guide on the front page for the invisible captcha.
I have referenced captcha in my .ts file
@ViewChild('captchaRef') public captcha: RecaptchaComponent;

and in my html I got this
<re-captcha #captchaRef="reCaptcha" size="invisible" siteKey="super-secret-key" (resolved)="resolved($event)"></re-captcha>

I am calling this.captcha.execute() to trigger execution but how do I call resolved(event)? When I try to assign this.captcha.resolved I get an EventEmitter. I am still pretty new to Angular so not sure what to do with that information. I tried using this.captcha.resolved.emit(); but what am I supposed to emit?

Errors in console

Recaptcha is working as expected in my app. however,
The following errors are thrown in to developer console:

`[default] C:\www\myapp\node_modules\ng2-recaptcha\recaptcha\recaptcha-loader.service.d.ts:3:22
Cannot find namespace 'ReCaptchaV2'.

[default] C:\www\myapp\node_modules\ng2-recaptcha\recaptcha\recaptcha.component.d.ts:9:11
Cannot find namespace 'ReCaptchaV2'.

[default] C:\www\myapp\node_modules\ng2-recaptcha\recaptcha\recaptcha.component.d.ts:10:10
Cannot find namespace 'ReCaptchaV2'.

[default] C:\www\myapp\node_modules\ng2-recaptcha\recaptcha\recaptcha.component.d.ts:11:10
Cannot find namespace 'ReCaptchaV2'.`

Thoughts on what is happening here?
I'd be happy to provide additional details if needed.

Angular2 - 2.0.0
[email protected]

DOMException when submitting a form

When I have <re-captcha> apart of the component when I submit a form I get the following error:

ERROR DOMException: Blocked a frame with origin "http://localhost:4200" from accessing a cross-origin frame.

I have the re-captcha component as part of the form:

<re-captcha siteKey="[removed]" formControlName="is_human"></re-captcha>

and only using it's value to validate the form. If it's not false, it is considered valid.

Bug: Using ng-recaptcha in different components on the same page navigated by router-outlet

Hello,

I use router-outlet for navigation of some pages, each of them has a form using your invisible recaptcha.
When I get into one of these pages, and then move to another, I get this exception in my web browser's console:

Uncaught TypeError: Cannot read property 'render' of null
    at Vp (recaptcha__en.js:380)
    at Np.Hk (recaptcha__en.js:381)
    at ZoneDelegate.webpackJsonp.606.ZoneDelegate.invokeTask (zone.js:414)
    at Zone.webpackJsonp.606.Zone.runTask (zone.js:181)
    at ZoneTask.invoke (zone.js:476)
    at timer (zone.js:1491)

As far as I understand, it happens since the captcha tries to render itself again on the same page, and fails to do that in that previous element since it's not there anymore, because we just routed to a different page. Since there is no bug in recaptcha itself, I assume this issue should be taken care of in your component.

It sounds similar to this #35 issue, however I get a different exception.

Hopefully you can take a look into it and get it fixed and/or suggest me please I can go around it til then.

Thanks in advance!

captchaRef.execute() not working in invisible captcha

When I tried to debug the code I found this function:

RecaptchaComponent.prototype.execute = function () {
        if (this.size !== 'invisible') {
            return;
        }
        if (this.widget != null) {
            this.grecaptcha.execute(this.widget);
        }
    };

and the problem is that this.widget is undefined.
"ng-recaptcha": "^3.0.0",
What am I missing here ?

Multiple reCAPTCHA components using custom provider error

I was able to create the custom provider to load the reCAPTCHA widget and allow for changing of the language. With two widgets on one page I get an error when loading:

The root looks to be that api.js is loaded multiple times.

Uncaught Error: ReCAPTCHA placeholder element must be empty
    at Object.Vp [as render] (recaptcha__en.js:384)
    at RecaptchaComponent.renderRecaptcha (recaptcha.component.js:69)
    at SafeSubscriber._next (recaptcha.component.js:18)
    at SafeSubscriber.__tryOrUnsub (Subscriber.js:238)
    at SafeSubscriber.next (Subscriber.js:185)
    at Subscriber._next (Subscriber.js:125)
    at Subscriber.next (Subscriber.js:89)
    at BehaviorSubject.Subject.next (Subject.js:55)
    at BehaviorSubject.next (BehaviorSubject.js:44)
    at window.ng2recaptchaloaded (locale-recaptcha-provider.ts:39)

After submitting and navigating away from the page,

ERROR Error: Uncaught (in promise): Error: Invalid ReCAPTCHA client id: 0
Error: Invalid ReCAPTCHA client id: 0
    at Object.Xp [as reset] (recaptcha__en.js:386)
    at recaptcha.component.js:63
    at ZoneDelegate.invoke (zone.js:381)
    at Zone.run (zone.js:141)
    at NgZone.runOutsideAngular (core.es5.js:4019)
    at RecaptchaComponent.grecaptchaReset (recaptcha.component.js:63)
    at RecaptchaComponent.ngOnDestroy (recaptcha.component.js:25)
    at callProviderLifecycles (core.es5.js:11145)
    at callElementProvidersLifecycles (core.es5.js:11114)
    at callLifecycleHooksChildrenFirst (core.es5.js:11098)
    at Object.Xp [as reset] (recaptcha__en.js:386)
    at recaptcha.component.js:63
    at ZoneDelegate.invoke (zone.js:381)
    at Zone.run (zone.js:141)
    at NgZone.runOutsideAngular (core.es5.js:4019)
    at RecaptchaComponent.grecaptchaReset (recaptcha.component.js:63)
    at RecaptchaComponent.ngOnDestroy (recaptcha.component.js:25)
    at callProviderLifecycles (core.es5.js:11145)
    at callElementProvidersLifecycles (core.es5.js:11114)
    at callLifecycleHooksChildrenFirst (core.es5.js:11098)
    at resolvePromise (zone.js:757)
    at resolvePromise (zone.js:728)
    at zone.js:805
    at ZoneDelegate.invokeTask (zone.js:414)
    at Object.onInvokeTask (core.es5.js:4119)
    at ZoneDelegate.invokeTask (zone.js:413)
    at Zone.runTask (zone.js:181)
    at drainMicroTaskQueue (zone.js:574)
    at HTMLFormElement.ZoneTask.invoke (zone.js:480)

Invisible ReCaptcha Support

It seems to work for the most part by simply using "invisible" as the size attribute, but in order for it to work this package needs to implement grecaptcha.execute() so one may call it in the component and get the response token if needed.

expired-callback not working as expected

The 'expired-callback' located within the "recaptcha.component.ts" is not working as expected - specifically, its not emitting a null via the "resolved" EventEmitter;

I verified that the call back is fired, ie: the following code does result in "reset()" being executed:

 'expired-callback': () => {
        this.zone.run(() => this.reset());
      },

However, within the reset method, the code never makes it past the "this.grecaptcha.getResponse" check; ie:

if (this.grecaptcha.getResponse(this.widget)) {
        // Only reset the captcha and emit an event in case if something would actually change.
        // That way we do not trigger "touching" of the control if someone does a "reset"
        // on a non-resolved captcha.
        this.grecaptcha.reset(this.widget);
        this.resolved.emit(null);
      }

It seems in every test I've performed, this method always returns an empty string after the recaptcha expires.

I'm not sure the best way to fix this; personally, I would think a good design would be to expose a new responseExpired EventEmitter, and let the developer subscribe to that to explicitly handle expiration; for example, perhaps we don't want to do an automatic reset of the recaptcha upon expiration.

Angular packages not found while compiling

Hi,

maybe there is some issue with Angular 4.1. :(

while trying to normally import your package, compiller throwing these errors:

I am using a lot of angular2 packages in my project, but there is no issue with tham.

ERROR in /Applications/XAMPP/xamppfiles/htdocs/hudebnizkusebny/node_modules/ng-recaptcha/recaptcha/recaptcha-loader.service.d.ts (2,29): Cannot find module '@angular/core'.

ERROR in /Applications/XAMPP/xamppfiles/htdocs/hudebnizkusebny/node_modules/ng-recaptcha/recaptcha/recaptcha-loader.service.d.ts (3,28): Cannot find module 'rxjs/Observable'.

ERROR in /Applications/XAMPP/xamppfiles/htdocs/hudebnizkusebny/node_modules/ng-recaptcha/recaptcha/recaptcha.component.d.ts (2,64): Cannot find module '@angular/core'.

ERROR in /Applications/XAMPP/xamppfiles/htdocs/hudebnizkusebny/node_modules/ng-recaptcha/recaptcha/recaptcha.module.d.ts (1,37): Cannot find module '@angular/core'.

ERROR in ./src/app/app.module.ts
Module not found: Error: Can't resolve 'ng-recaptcha' in '/Applications/XAMPP/xamppfiles/htdocs/hudebnizkusebny/public/frontend/src/app'
 @ ./src/app/app.module.ts 61:0-47
 @ ./src/main.ts
 @ multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts

Error in console, Template parse errors

HI,
I'm using anular-cli for this project.

  • Typescript version is 2.0.2
  • Angular 2.0.0
  • ng2-recaptcha 1.3.2

I've installed the typing using the following command

npm install @types/grecaptcha --save-dev

My root app module looks like this

import { BrowserModule } from '@angular/platform-browser';
import { NgModule,CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule } from '@angular/router';
import { RecaptchaModule } from 'ng2-recaptcha';
import { routes } from './app-routing.module';
import { AppComponent } from './app.component';
import { UserModule } from './user/user.module';
import { SharedModule } from './shared/shared.module';
import { ToasterModule, ToasterService } from 'angular2-toaster/angular2-toaster';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    RecaptchaModule.forRoot(),
    ToasterModule,
    RouterModule.forRoot(routes, { useHash: true }),
    SharedModule.forRoot(),
    UserModule
  ],
  providers: [ToasterService],
  bootstrap: [AppComponent],
  exports: [],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule { }

After importing the module, in another module, UserModule (which is imported here) I'm using the element.

Thats when I'm getting this error in browser console.

zone.js:355Unhandled Promise rejection: Template parse errors:
'recaptcha' is not a known element:

If 'recaptcha' is an Angular component, then verify that it is part of this module.

If 'recaptcha' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message.

After first time getting this message I added CUSTOM_ELEMENTS_SCHEMA in my root module as seen above, even after that I'm getting the same error.

Where I'm going wrong?

Thanks..

`.forRoot()` not working

Hi,

The forRoot() method does not seem to work for me.

Here's my package.json:

{
  "name": "my-project",
  "version": "1.0.0",
  "description": "My Project",
  "author": "Alphero",
  "contributors": [
    "Martín Martínez"
  ],
  "license": "UNLICENSED",
  "engines": {
    "node": ">=5.11.0",
    "npm": ">=3.8.6"
  },
  "scripts": {
    "reinstall": "rimraf node_modules && npm cache clean && npm install",
    "postinstall": "npm run typings",
    "typings": "typings install",
    "updatetypings": "typings ls | awk '$2 ~ /.+/ {print $2}' | xargs -I {} typings i dt~{} -SG",
    "prebuild": "rimraf dist",
    "build": "webpack --config config/webpack.prod.js --progress --profile --bail",
    "start": "webpack-dev-server --inline --progress --port 8079 --debug",
    "test": "karma start"
  },
  "keywords": [],
  "dependencies": {
    "@angular/common": "^2.0.1",
    "@angular/compiler": "^2.0.1",
    "@angular/core": "^2.0.1",
    "@angular/forms": "^2.0.1",
    "@angular/http": "^2.0.1",
    "@angular/platform-browser": "^2.0.1",
    "@angular/platform-browser-dynamic": "^2.0.1",
    "@angular/router": "^3.0.1",
    "angular2-recaptcha": "^0.3.4",
    "angular2-text-mask": "^2.1.0",
    "core-js": "^2.4.1",
    "headroom.js": "^0.9.3",
    "moment": "^2.17.0",
    "reflect-metadata": "^0.1.8",
    "rxjs": "5.0.0-beta.12",
    "zone.js": "^0.6.23"
  },
  "devDependencies": {
    "autoprefixer": "^6.4.1",
    "browser-sync": "^2.16.0",
    "browser-sync-webpack-plugin": "^1.1.3",
    "css-loader": "^0.25.0",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.9.0",
    "html-loader": "^0.4.4",
    "html-webpack-plugin": "^2.22.0",
    "jasmine-core": "^2.5.2",
    "karma": "^1.3.0",
    "karma-jasmine": "^1.0.2",
    "karma-phantomjs-launcher": "^1.0.2",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-spec-reporter": "0.0.26",
    "node-sass": "^3.10.0",
    "null-loader": "^0.1.1",
    "phantomjs-prebuilt": "^2.1.12",
    "postcss-loader": "^0.13.0",
    "raw-loader": "^0.5.1",
    "rimraf": "^2.5.4",
    "sass-loader": "^4.0.2",
    "style-loader": "^0.13.1",
    "ts-loader": "^0.8.1",
    "tslint": "^3.15.1",
    "typescript": "^2.1.0-dev.20160926",
    "typings": "^1.4.0",
    "webpack": "^1.13.2",
    "webpack-dev-server": "^1.16.1",
    "webpack-merge": "^0.14.1"
  }
}

I get the forRoot() is not a function error when going:

import { RecaptchaModule } from 'ng2-recaptcha';
import { BrowserModule }  from '@angular/platform-browser';

@NgModule({
  bootstrap: [MyApp],
  declarations: [MyApp],
  imports: [
    BrowserModule,
    RecaptchaModule.forRoot(), // Keep in mind the "forRoot"-magic nuances!
  ],
})
export class MyAppModule { }

Let me know if you need further information.

Cheers!
Martín.

Throwing error on build production

HI. I am developping a web app with ionic framework and when i try to build for production I get an error related to ng-recatcha.
Have you seen anything like this?
Error:
"Failed on type {"filePath":"/home/clovisjr/IonicProjs/PedidosOnline/Pedidos-V2-PizzariaBrasil-01/Pedidos-V2/node_modules/ng-recaptcha/recaptcha/recaptcha-loader.service.d.ts","name":"RecaptchaLoaderService","members":[]} with error Error: Error encountered resolving symbol values statically. Expression form not supported (position 29:55 in the original .ts file), resolving symbol RecaptchaLoaderService in /home/clovisjr/IonicProjs/PedidosOnline/Pedidos-V2-PizzariaBrasil-01/Pedidos-V2/node_modules/ng-recaptcha/recaptcha/recaptcha-loader.service.d.ts
Error: Error encountered resolving symbol values statically. Expression form not supported (position 29:55 in the original .ts file), resolving symbol RecaptchaLoaderService in /home/clovisjr/IonicProjs/PedidosOnline/Pedidos-V2-PizzariaBrasil-01/Pedidos-V2/node_modules/ng-recaptcha/recaptcha/recaptcha-loader.service.d.ts
at positionalError (/home/clovisjr/IonicProjs/PedidosOnline/Pedidos-V2-PizzariaBrasil-01/Pedidos-V2/node_modules/@angular/compiler/bundles/compiler.umd.js:24025:35)
at simplifyInContext (/home/clovisjr/IonicProjs/PedidosOnline/Pedidos-V2-PizzariaBrasil-01/Pedidos-V2/node_modules/@angular/compiler/bundles/compiler.umd.js:23868:27)
at StaticReflector.simplify (/home/clovisjr/IonicProjs/PedidosOnline/Pedidos-V2-PizzariaBrasil-01/Pedidos-V2/node_modules/@angular/compiler/bundles/compiler.umd.js:23882:13)
at StaticReflector.parameters (/home/clovisjr/IonicProjs/PedidosOnline/Pedidos-V2-PizzariaBrasil-01/Pedidos-V2/node_modules/@angular/compiler/bundles/compiler.umd.js:23403:65)
at CompileMetadataResolver._getDependenciesMetadata (/home/clovisjr/IonicProjs/PedidosOnline/Pedidos-V2-PizzariaBrasil-01/Pedidos-V2/node_modules/@angular/compiler/bundles/compiler.umd.js:14830:71)
at CompileMetadataResolver._getTypeMetadata (/home/clovisjr/IonicProjs/PedidosOnline/Pedidos-V2-PizzariaBrasil-01/Pedidos-V2/node_modules/@angular/compiler/bundles/compiler.umd.js:14755:26)
at CompileMetadataResolver._getInjectableMetadata (/home/clovisjr/IonicProjs/PedidosOnline/Pedidos-V2-PizzariaBrasil-01/Pedidos-V2/node_modules/@angular/compiler/bundles/compiler.umd.js:14741:21)
at CompileMetadataResolver.getProviderMetadata (/home/clovisjr/IonicProjs/PedidosOnline/Pedidos-V2-PizzariaBrasil-01/Pedidos-V2/node_modules/@angular/compiler/bundles/compiler.umd.js:15031:40)
at /home/clovisjr/IonicProjs/PedidosOnline/Pedidos-V2-PizzariaBrasil-01/Pedidos-V2/node_modules/@angular/compiler/bundles/compiler.umd.js:14960:49
at Array.forEach ()"

Second Page Loads, captcha not displayed

I've pulled in this component and it works great. I have run into one issue. When displaying the page with the captcha, then navigating away from this page and then going back, the captcha isn't shown on the second load of the page. No console errors or anything.

Any idea what could cause that?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.