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 <recaptcha> 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…

[DethAriel]

There are two ways of fixing that:

1. Add RecaptchaModule to the imports section of your UserModule
2. Add RecaptchaModule to the imports section of your SharedModule (given that you import SharedModule inside UserModule)

In both cases you should still leave the RecaptchaModule.forRoot() import in your AppModule.

Please, let me know if that resolves the issue that you see

[nitishatambi]

I used this, but getting error in re-captcha tag in html page

please help