10

Actualmente estoy implementando ng-recaptcha en mi proyecto Angular 6, implementando tal como en la documentación oficial.

Todo funciona bien con el reCaptcha V2 al estar desarrollando pero al momento de correr el ng build me marca el error:

ERROR in : Unexpected value 'RecaptchaCommonModule in /node_modules/ng-recaptcha/recaptcha/recaptcha-common.module.js' imported by the module 'RecaptchaModule in node_modules/ng-recaptcha/recaptcha/recaptcha.module.d.ts'. Please add a @NgModule annotation.

ERROR in : Unexpected value 'RecaptchaCommonModule. Please add a @NgModule annotation.

He buscado por todos lados y no encuentro algún caso igual.

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from "@angular/common/http";
....
import { RecaptchaModule } from 'ng-recaptcha';

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    ...
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    HttpClientModule,
    RecaptchaModule,
  ],
  providers: [AuthGuard],
  bootstrap: [AppComponent]
})
export class AppModule { }

my-component.html

...
<re-captcha (resolved)="resolved($event)" siteKey="MY-KEY"></re-captcha>
...

my-component.ts

...
 resolved(captchaResponse: string) {
    this.modelo.token_captcha = captchaResponse;
    this.http.post('MY BACKEND', JSON.stringify({
      token_captcha: this.modelo.token_captcha
    }), {
      }).subscribe(res => {
        if (res['Error']) {
          this.captcha_valido = false;
        }
        else {
          this.captcha_valido = true;
        }
      });
  }

package.json

{
  "name": "buzon",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^6.1.0",
    "@angular/common": "^6.1.0",
    "@angular/compiler": "^6.1.0",
    "@angular/core": "^6.1.0",
    "@angular/forms": "^6.1.0",
    "@angular/http": "^6.1.0",
    "@angular/platform-browser": "^6.1.0",
    "@angular/platform-browser-dynamic": "^6.1.0",
    "@angular/router": "^6.1.0",
    "@types/chart.js": "^2.7.53",
    "animate.css": "^3.7.0",
    "bootstrap": "^4.3.1",
    "chart.js": "^2.8.0",
    "chartjs-plugin-datalabels": "^0.6.0",
    "core-js": "^2.5.4",
    "font-awesome": "^4.7.0",
    "jquery": "^3.3.1",
    "jspdf": "^1.5.3",
    "ng-recaptcha": "^4.3.0",
    "ng2-charts": "^2.2.0",
    "popper.js": "^1.15.0",
    "rxjs": "6.3.3",
    "sweetalert2": "^8.8.5",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.7.0",
    "@angular/cli": "~6.1.1",
    "@angular/compiler-cli": "^6.1.0",
    "@angular/language-service": "^6.1.0",
    "@types/jasmine": "^2.8.16",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.2.1",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~1.7.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.0",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.3.0",
    "ts-node": "~5.0.1",
    "tslint": "~5.9.1",
    "typescript": "~2.7.2"
  }
}

Si alguien me pudiera ayudar el porqué de este error para solucionarlo.

3
  • 5
    Es posible que el fichero descargado por npm esté corrupto, yo probaría a borrar el directorio node_modules del proyecto y ejecutar npm install para descargarlos de nuevo Commented el 4 sept. 2019 a las 13:38
  • Funcionó de maravilla bro, ya compila sin problemas, gracias.
    – GerLucio
    Commented el 4 sept. 2019 a las 15:36
  • @PabloLozano sera conveniente que pongas tu comentario como respuesta para cerrar esta pregunta? Veo que tiene muchas vistas
    – Legna
    Commented el 28 feb. 2020 a las 16:51

2 respuestas 2

0

Luego de ejecutar un "ng build --prod", tenía este error:

ERROR in ./node_modules/ng-recaptcha/fesm5/ng-recaptcha.js
TypeError: Cannot read property 'kind' of undefined

Para solucionarlo, en el archivo "angular.json" cambié el valor de ""buildOptimizer": true" a ""buildOptimizer": false".

Espero te sirva.

Ambiente:

Angular CLI: 6.0.0
Node: 10.16.0
OS: win32 x64
Angular: 6.0.0
... animations, cli, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.6.0
@angular-devkit/build-angular     0.13.9
@angular-devkit/build-optimizer   0.13.9
@angular-devkit/build-webpack     0.13.9
@angular-devkit/core              0.6.0
@angular-devkit/schematics        0.6.0
@angular/platform-server          6.1.10
@ngtools/webpack                  7.3.9
@schematics/angular               0.6.0
@schematics/update                0.6.0
rxjs                              6.1.0
typescript                        2.7.2
webpack                           4.29.0
0

Es posible que el fichero descargado por npm esté corrupto, yo probaría a borrar el directorio node_modules del proyecto y ejecutar npm install para descargarlos de nuevo

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.