feat(package): add Angular 14 support

CONTRIBUTING.md

@@ -1,11 +1,21 @@
 ## Getting started
 
-- Simply running `yarn` should get you started for development purposes
+You should have [`nvm`](https://github.com/nvm-sh/nvm) and [`yarn@1`](https://classic.yarnpkg.com/lang/en/docs/install/) installed.
+
+- Run `nvm use` to make sure that you're on the right version of Node.js
+- Run `yarn` should get you started for development purposes
+- Run `yarn demo:file-gen` to ensure that auto-generated code files are present (otherwise linters will complain)
+- `yarn lib:build` needs to be run in order for the demo to work correctly (as well as for the linting to pass)
+
+### Testing
+
 - Use `yarn lint` during local development to ensure that your code will pass linting (which is also done during CI phase)
+- Use `yarn ng test` to run unit tests, `yarn ng e2e demo` to run a basic end-to-end smoke test.
 
 ## PR guidelines
 
 - Every PR should have an associated issue
+- PRs with failing builds **will not be accepted**
 - Use [Angular commit message conventions](https://gist.github.com/stephenparish/9941e89d80e2bc58a153)
   - Allowed scopes: `component`, `package`, `build`, `docs`. If you feel like these do not fit your use-case, consult with maintainer in PR comments section
   - Use `chore(docs)` instead of `docs(<scope>)`
@@ -15,7 +25,7 @@
 
 ## Running demo
 
-In order to run the demo you need to `yarn demo:serve`. Then the demo site will be served at http://localhost:4200/ng-recaptcha/.
+In order to run the demo you need to build the lib first by running `yarn lib:build`. Then use `yarn demo:serve` to see the demo site at http://localhost:4200/ng-recaptcha/.
 
 ## Maintainer notes
 
@@ -29,6 +39,7 @@ In order for everything to go smooth, you'll need to check prerequisites first:
 After you did that, follow the below process:
 
 - Pushed the latest changes to upstream: `git push`
+  - use `feat(package): add Angular X support` for commit messages that upgrade Angular version
 - Ensure that the build succeeds
 - To start with, make sure all the dependencies are up-to-date: `yarn && yarn clean`
 - Then you need to prepare a release.

angular.json

@@ -119,5 +119,7 @@
       }
     }
   },
-  "defaultProject": "ng-recaptcha"
+  "cli": {
+    "analytics": false
+  }
 }

package.json

@@ -27,54 +27,54 @@
   },
   "peerDependencies": {},
   "devDependencies": {
-    "@angular-devkit/build-angular": "^13.0.1",
-    "@angular-eslint/builder": "13.0.0-alpha.0",
-    "@angular-eslint/eslint-plugin": "13.0.0-alpha.0",
-    "@angular-eslint/eslint-plugin-template": "13.0.0-alpha.0",
-    "@angular-eslint/schematics": "13.0.0-alpha.0",
-    "@angular-eslint/template-parser": "13.0.0-alpha.0",
-    "@angular/animations": "^13.0.0",
-    "@angular/cdk": "^12.0.0",
-    "@angular/cli": "^13.0.1",
-    "@angular/common": "^13.0.0",
-    "@angular/compiler": "^13.0.0",
-    "@angular/compiler-cli": "^13.0.0",
-    "@angular/core": "^13.0.0",
-    "@angular/forms": "^13.0.0",
-    "@angular/material": "^12.0.0",
-    "@angular/platform-browser": "^13.0.0",
-    "@angular/platform-browser-dynamic": "^13.0.0",
-    "@angular/router": "^13.0.0",
+    "@angular-devkit/build-angular": "^14.0.3",
+    "@angular-eslint/builder": "14.0.0",
+    "@angular-eslint/eslint-plugin": "14.0.0",
+    "@angular-eslint/eslint-plugin-template": "14.0.0",
+    "@angular-eslint/schematics": "14.0.0",
+    "@angular-eslint/template-parser": "14.0.0",
+    "@angular/animations": "^14.0.3",
+    "@angular/cdk": "^14.0.0",
+    "@angular/cli": "^14.0.3",
+    "@angular/common": "^14.0.3",
+    "@angular/compiler": "^14.0.3",
+    "@angular/compiler-cli": "^14.0.3",
+    "@angular/core": "^14.0.3",
+    "@angular/forms": "^14.0.3",
+    "@angular/material": "^14.0.0",
+    "@angular/platform-browser": "^14.0.3",
+    "@angular/platform-browser-dynamic": "^14.0.3",
+    "@angular/router": "^14.0.3",
     "@types/core-js": "^2.5.4",
     "@types/jasmine": "^3.8.1",
     "@types/node": "^12",
     "@types/query-string": "^6.3.0",
-    "@typescript-eslint/eslint-plugin": "5.3.0",
-    "@typescript-eslint/parser": "5.3.0",
+    "@typescript-eslint/eslint-plugin": "^5.29.0",
+    "@typescript-eslint/parser": "^5.29.0",
     "conventional-changelog-cli": "^2.1.1",
     "conventional-github-releaser": "^3.1.5",
     "coveralls": "^3.1.1",
-    "eslint": "^8.1.0",
+    "eslint": "^8.18.0",
     "eslint-config-prettier": "^8.3.0",
     "highlight.js": "^11.1.0",
     "http-server": "^0.12.3",
     "husky": "^7.0.0",
     "jasmine-core": "^3.8.0",
     "jasmine-spec-reporter": "^7.0.0",
-    "karma": "^6.3.4",
+    "karma": "^6.4.0",
     "karma-chrome-launcher": "^3.1.0",
     "karma-coverage": "^2.0.3",
     "karma-jasmine": "^4.0.1",
     "karma-jasmine-html-reporter": "^1.7.0",
     "lint-staged": "^11.0.1",
-    "ng-packagr": "^13.0.2",
+    "ng-packagr": "^14.0.2",
     "prettier": "^2.3.2",
     "protractor": "^7.0.0",
     "query-string": "^7.0.1",
     "rimraf": "^3.0.2",
     "rxjs": "^6.5.3",
-    "ts-node": "^10.1.0",
-    "typescript": "^4.4.4",
+    "ts-node": "^10.8.1",
+    "typescript": "^4.7.4",
     "typescript-eslint": "^0.0.1-alpha.0",
     "zone.js": "~0.11.4"
   }

projects/demo/src/app/demo-wrapper/demo-wrapper.component.ts

@@ -1,5 +1,5 @@
 import { MediaMatcher } from "@angular/cdk/layout";
-import { ChangeDetectorRef, Component, Inject, InjectionToken, OnDestroy, OnInit } from "@angular/core";
+import { ChangeDetectorRef, Component, Inject, InjectionToken, OnDestroy, OnInit, VERSION } from "@angular/core";
 import { Title } from "@angular/platform-browser";
 import { Router, ResolveEnd, ActivatedRouteSnapshot, Data } from "@angular/router";
 import { parse, stringify } from "query-string";
@@ -44,6 +44,7 @@ export class DemoWrapperComponent implements OnInit, OnDestroy {
     title: "ng-recaptcha",
     description: "Angular component for Google reCAPTCHA",
   };
+  public logoTitle = `Angular v${VERSION.full}`;
   public page?: PageSettings;
   public mobileQuery: MediaQueryList;
   public sidebarOpened = false;

projects/demo/src/app/demo-wrapper/recaptcha-demo-wrapper.component.html

@@ -1,7 +1,7 @@
 <section class="recaptcha-demo-wrapper">
   <mat-toolbar color="primary">
     <mat-toolbar-row>
-      <img src="images/angular.svg" height="40px" style="margin-right: 8px" />
+      <img src="images/angular.svg" height="40px" [title]="logoTitle" style="margin-right: 8px" />
       <span>{{ site.title }}</span>
       <span class="filler"></span>
 

projects/demo/src/styles.css

@@ -1,3 +1,3 @@
 @import "./base.css";
 @import "./highlight.css";
-@import "~@angular/material/prebuilt-themes/indigo-pink.css";
+@import "@angular/material/prebuilt-themes/indigo-pink.css";

projects/ng-recaptcha/package.json

@@ -16,7 +16,7 @@
     "ng-recaptcha"
   ],
   "peerDependencies": {
-    "@angular/core": "^13.0.0"
+    "@angular/core": "^14.0.0"
   },
   "dependencies": {
     "@types/grecaptcha": "^3.0.3",

projects/ng-recaptcha/src/lib/recaptcha-v3.service.ts

@@ -116,7 +116,6 @@ export class ReCaptchaV3Service {
     const subject = new Subject<string>();
     if (this.isBrowser) {
       if (!this.grecaptcha) {
-        // todo: add to array of later executions
         if (!this.actionBacklog) {
           this.actionBacklog = [];
         }

projects/ng-recaptcha/src/lib/recaptcha-value-accessor.directive.spec.ts

@@ -1,6 +1,6 @@
 import { Component, NgZone } from "@angular/core";
 import { ComponentFixture, TestBed } from "@angular/core/testing";
-import { FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators } from "@angular/forms";
+import { UntypedFormControl, UntypedFormGroup, FormsModule, ReactiveFormsModule, Validators } from "@angular/forms";
 import { By } from "@angular/platform-browser";
 import { BehaviorSubject } from "rxjs";
 
@@ -120,9 +120,9 @@ describe("RecaptchaValueAccessorDirective -> formGroup", () => {
   })
   class TestComponent {
     public loading$ = new BehaviorSubject<boolean>(false);
-    public formGroup = new FormGroup({
+    public formGroup = new UntypedFormGroup({
       // eslint-disable-next-line @typescript-eslint/unbound-method
-      captcha: new FormControl(null, [Validators.required]),
+      captcha: new UntypedFormControl(null, [Validators.required]),
     });
 
     public testHideForm(): void {

tsconfig.json

@@ -13,7 +13,7 @@
     "experimentalDecorators": true,
     "moduleResolution": "node",
     "importHelpers": true,
-    "target": "es2017",
+    "target": "es2020",
     "module": "es2020",
     "lib": ["es2020", "dom"],
     "paths": {