Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature: add support for server-side rendering #34

Closed
DethAriel opened this issue May 9, 2017 · 1 comment
Closed

Feature: add support for server-side rendering #34

DethAriel opened this issue May 9, 2017 · 1 comment

Comments

@DethAriel
Copy link
Owner

As of the moment, including re-captcha into a server-side rendered page will result in an error (see #33). The component should gracefully handle server-side rendering instead of erring out.

@mohitkadelongraph
Copy link

mohitkadelongraph commented Jun 22, 2017

Angular version : 4
We we can fix it by wrapping window and document in isPlatfromBrowser.
RecaptchaLoaderService class in recaptcha-loader.service.ts

import { ... , PLATFORM_ID, Inject } from '@angular/core';

import { isPlatformBrowser, isPlatformServer } from '@angular/common';

// Injecting platform id in constructor
constructor(@Inject(PLATFORM_ID) private readonly platformId: any, ...) {
    ...
    if(isPlatformBrowser(this.platformId)) {
      this.ready = RecaptchaLoaderService.ready.asObservable();
    }
    else {
      this.ready = Observable.of();
    }
}

private init() {
    if (RecaptchaLoaderService.ready) {
      return;
    }
    // isPlatformBrowser condtion
    if(isPlatformBrowser(this.platformId)) {
        window['ng2recaptchaloaded'] = () => {
          RecaptchaLoaderService.ready.next(grecaptcha);
        };
        RecaptchaLoaderService.ready = new BehaviorSubject<ReCaptchaV2.ReCaptcha>(null);
        const script = document.createElement('script') as HTMLScriptElement;
        script.innerHTML = '';
        const langParam = this.language ? '&hl=' + this.language : '';
        script.src = `https://www.google.com/recaptcha/api.js?render=explicit&onload=ng2recaptchaloaded${langParam}`;
        script.async = true;
        script.defer = true;
        document.head.appendChild(script);
    }
}

sdorra added a commit to cloudogu/ng-recaptcha that referenced this issue Aug 28, 2017
Changes the RecaptchaLoaderService to render the recaptcha script tag
only, if the component is rendered in a browser environment.

Closes DethAriel#34
sdorra added a commit to cloudogu/ng-recaptcha that referenced this issue Aug 28, 2017
Changes the RecaptchaLoaderService to render the recaptcha script tag
only, if the component is rendered in a browser environment.

Closes DethAriel#34
DethAriel pushed a commit that referenced this issue Aug 30, 2017
Changes the RecaptchaLoaderService to render the recaptcha script tag
only, if the component is rendered in a browser environment.

Closes #34
DethAriel pushed a commit that referenced this issue Aug 30, 2017
Change the RecaptchaLoaderService to render the recaptcha script tag only in a browser environment.

Closes #34

BREAKING CHANGE:
Angular v2.x.x is no longer supported due to dependency on Platform capabilities that were added in [v4.0.0-rc.1](https://github.com/angular/angular/blob/master/CHANGELOG.md#features-20)
dockleryxk added a commit to dockleryxk/ng-recaptcha that referenced this issue Sep 20, 2017
Add an if statement to make sure this.subscription is defined.
This ensures safe component destruction in case it hasn't been fully initialized yet.

Closes DethAriel#46

chore(package): remove dev dependency on `@types/grecaptcha`

chore(demo): add clarifying comments for local debugging

docs(contrib): add contribution guidelines

closes DethAriel#42

docs(readme): remove rename notice from readme

Consumers had enough time to get learn about this change


feat(component): add the ability to specify component props globally

Now consumers can specify some of the `<re-captcha>` properties globally, including `siteKey`.

closes DethAriel#45

docs(demo): add example for specifying properties globally


chore(package): bump version to 2.2.0

fix(component): fix server-side rendering

Change the RecaptchaLoaderService to render the recaptcha script tag only in a browser environment.

Closes DethAriel#34

BREAKING CHANGE:
Angular v2.x.x is no longer supported due to dependency on Platform capabilities that were added in [v4.0.0-rc.1](https://github.com/angular/angular/blob/master/CHANGELOG.md#features-20)

docs(demo): fix active tab reference for global config example

chore(package): Future-proofing for Angular v5

build(package): fix builds by tweaking `tslint`

Update `tslint` dependency strategy to be tilde instead of caret to overcome potential breakage when new rules are added

chore(package): bump version to 3.0.0
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants