feat(package): add Angular 12 support

CONTRIBUTING.md

@@ -15,7 +15,7 @@
 
 ## Running demo
 
-In order to run the demo you need to `yarn demo`. Then the demo site will be served at http://localhost:4200/ng-recaptcha/.
+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/.
 
 ## Maintainer notes
 
@@ -31,10 +31,13 @@ After you did that, follow the below process:
 - Pushed the latest changes to upstream: `git push`
 - 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. Run `npm run prepare-release <VERSION>`. Use `npm` , not `yarn`!
-  - Possible forms of `<VERSION>`: `<MAJOR>.<MINOR>.<PATCH>`, `<MAJOR>.<MINOR>.<PATCH>-beta.<BETA_VERSION>`
-- Build a demo site after that: `yarn demo:build`
+- Then you need to prepare a release.
+
+  - Export the version variable for later use by scripts: `export NGR_VERSION=<VERSION>`
+    - Possible forms of `<VERSION>`: `<MAJOR>.<MINOR>.<PATCH>`, `<MAJOR>.<MINOR>.<PATCH>-beta.<BETA_VERSION>`
+  - Run `npm run prepare-release <VERSION>`. Use `npm`, not `yarn`!
+
 - Verify the latest commit, and run `git push && git push --tag` to push the changes to the origin
 - Wait for the build to succeed
 - Publish the package to npm _from the "/dist/ng-recaptcha" directory_: `cd dist/ng-recaptcha && npm publish` (or `cd dist/ng-recaptcha && npm publish --tag beta`)
-- Create a GitHub release and update the demo site by running `yarn github-release && yarn demo:publish`
+- Create a GitHub release and update the demo site by running `yarn github-release && yarn demo:build && yarn demo:publish`

angular.json

@@ -47,13 +47,18 @@
             "polyfills": "projects/demo/src/polyfills.ts",
             "tsConfig": "projects/demo/tsconfig.app.json",
             "baseHref": "/ng-recaptcha/",
-            "aot": true,
             "assets": [
               "projects/demo/src/favicon.ico",
               "projects/demo/src/images"
             ],
             "styles": ["projects/demo/src/styles.css"],
-            "scripts": []
+            "scripts": [],
+            "vendorChunk": true,
+            "extractLicenses": false,
+            "buildOptimizer": false,
+            "sourceMap": true,
+            "optimization": false,
+            "namedChunks": true
           },
           "configurations": {
             "production": {

package.json

@@ -1,19 +1,21 @@
 {
   "name": "ng-recaptcha-base",
   "private": true,
+  "version": "7.0.1",
   "scripts": {
     "demo:file-gen": "ts-node --project ./tsconfig.node.json ./projects/demo/bin/file-gen.ts",
     "demo:serve": "yarn demo:file-gen && ng serve demo",
-    "demo:build": "yarn demo:file-gen && ng build demo --prod && yarn demo:copy-entrypoints",
+    "demo:build": "yarn demo:file-gen && ng build demo --configuration production && yarn demo:copy-entrypoints",
     "demo:copy-entrypoints": "ts-node --project ./tsconfig.node.json ./projects/demo/bin/copy-entrypoints.ts",
     "demo:serve-http": "http-server ./dist/demo -a localhost -p 9000 -c-1",
     "demo:publish": "gh-pages -d dist/demo/ng-recaptcha",
     "clean": "rimraf dist",
     "changelog": "conventional-changelog --preset angular --infile CHANGELOG.md --same-file",
     "github-release": "conventional-github-releaser --preset angular",
-    "lib:build": "ng build ng-recaptcha --prod",
-    "prepare-release": "npm whoami && yarn lib:build && npm version $1",
-    "version": "yarn changelog && git add CHANGELOG.md && yarn demo:build && git add demo/yarn.lock",
+    "lib:build": "ng build ng-recaptcha --configuration production",
+    "version:lib": "cd projects/ng-recaptcha && npm version $NGR_VERSION --no-git-tag-version",
+    "prepare-release": "run-s version:lib lib:build",
+    "version": "yarn changelog && git add CHANGELOG.md",
     "lint": "eslint projects --ext .js,.ts,.html"
   },
   "husky": {
@@ -26,28 +28,26 @@
   },
   "dependencies": {
     "@types/grecaptcha": "^3.0.1",
-    "tslib": "^2.0.0"
-  },
-  "peerDependencies": {
-    "@angular/core": "^11.0.0"
+    "tslib": "^2.2.0"
   },
+  "peerDependencies": {},
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.1100.5",
+    "@angular-devkit/build-angular": "~12.0.0",
     "@angular-eslint/eslint-plugin": "^0.8.0-beta.3",
     "@angular-eslint/eslint-plugin-template": "^0.8.0-beta.3",
     "@angular-eslint/template-parser": "^0.8.0-beta.3",
-    "@angular/animations": "^11.0.5",
-    "@angular/cdk": "^11.0.3",
-    "@angular/cli": "^11.0.5",
-    "@angular/common": "^11.0.2",
-    "@angular/compiler": "^11.0.2",
-    "@angular/compiler-cli": "^11.0.2",
-    "@angular/core": "^11.0.2",
-    "@angular/forms": "^11.0.2",
-    "@angular/material": "^11.0.3",
-    "@angular/platform-browser": "^11.0.2",
-    "@angular/platform-browser-dynamic": "^11.0.5",
-    "@angular/router": "^11.0.5",
+    "@angular/animations": "^12.0.0",
+    "@angular/cdk": "^12.0.0",
+    "@angular/cli": "^12.0.0",
+    "@angular/common": "^12.0.0",
+    "@angular/compiler": "^12.0.0",
+    "@angular/compiler-cli": "^12.0.0",
+    "@angular/core": "^12.0.0",
+    "@angular/forms": "^12.0.0",
+    "@angular/material": "^12.0.0",
+    "@angular/platform-browser": "^12.0.0",
+    "@angular/platform-browser-dynamic": "^12.0.0",
+    "@angular/router": "^12.0.0",
     "@types/core-js": "^0.9.39",
     "@types/jasmine": "^3.6.2",
     "@types/query-string": "^6.3.0",
@@ -68,20 +68,20 @@
     "husky": "^4.3.0",
     "jasmine-core": "^3.6.0",
     "jasmine-spec-reporter": "^5.0.0",
-    "karma": "^5.2.3",
+    "karma": "^6.3.2",
     "karma-chrome-launcher": "^3.1.0",
     "karma-coverage": "^2.0.3",
     "karma-jasmine": "^4.0.1",
     "karma-jasmine-html-reporter": "^1.5.4",
     "lint-staged": "^10.5.2",
-    "ng-packagr": "^11.0.3",
+    "ng-packagr": "^12.0.0",
     "npm-run-all": "^4.1.2",
     "prettier": "^2.2.1",
     "protractor": "^7.0.0",
     "rimraf": "^3.0.2",
     "rxjs": "^6.5.3",
     "ts-node": "^9.1.1",
-    "typescript": "~4.0.0",
-    "zone.js": "~0.10.3"
+    "typescript": "~4.2.4",
+    "zone.js": "~0.11.4"
   }
 }

projects/demo/bin/file-gen.ts

@@ -21,7 +21,7 @@ function writeExampleFile(
     fileName
   );
 
-  fs.writeFileSync(location, contents, { encoding: "UTF8" });
+  fs.writeFileSync(location, contents, { encoding: "utf-8" });
 }
 
 function highlightRequire(file: string, lang: string) {
@@ -95,7 +95,7 @@ function generateLinks() {
 ];
 `;
 
-  fs.writeFileSync(location, contents, { encoding: "UTF8" });
+  fs.writeFileSync(location, contents, { encoding: "utf-8" });
 }
 
 function generateFiles() {

projects/demo/src/environments/environment.ts

@@ -13,4 +13,4 @@ export const environment = {
  * This import should be commented out in production mode because it will have a negative impact
  * on performance if an error is thrown.
  */
-// import 'zone.js/dist/zone-error';  // Included with Angular CLI.
+// import 'zone.js/plugins/zone-error';  // Included with Angular CLI.

projects/demo/src/polyfills.ts

@@ -1 +1 @@
-import "zone.js/dist/zone";
+import "zone.js";

projects/ng-recaptcha/CHANGELOG.md

@@ -0,0 +1 @@
+../../CHANGELOG.md

projects/ng-recaptcha/LICENSE

@@ -0,0 +1 @@
+../../LICENSE

projects/ng-recaptcha/README.md

@@ -0,0 +1 @@
+../../README.md

projects/ng-recaptcha/ng-package.json

@@ -1,8 +1,10 @@
 {
   "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
   "dest": "../../dist/ng-recaptcha",
+  "assets": ["README.md", "CHANGELOG.md", "LICENSE"],
+  "deleteDestPath": true,
   "lib": {
     "entryFile": "src/index.ts"
   },
-  "whitelistedNonPeerDependencies": ["@types/grecaptcha"]
+  "allowedNonPeerDependencies": ["@types/grecaptcha"]
 }

projects/ng-recaptcha/package.json

@@ -16,7 +16,7 @@
     "ng-recaptcha"
   ],
   "peerDependencies": {
-    "@angular/core": "^11.0.0"
+    "@angular/core": "^12.0.0"
   },
   "dependencies": {
     "@types/grecaptcha": "^3.0.1",

projects/ng-recaptcha/src/test.ts

@@ -1,7 +1,7 @@
 // This file is required by karma.conf.js and loads recursively all the .spec and framework files
 
-import "zone.js/dist/zone";
-import "zone.js/dist/zone-testing";
+import "zone.js";
+import "zone.js/testing";
 import { getTestBed } from "@angular/core/testing";
 import {
   BrowserDynamicTestingModule,