feat: implement Angular specific package

.github/workflows/publish.yml

@@ -16,7 +16,13 @@ jobs:
           node-version: '12.x'
           registry-url: https://npm.pkg.github.com/
           scope: '@google-pay'
+      - name: prebuild
+        run: scripts/prebuild.sh
       - run: npm install
+      - name: npm install (button-angular)
+        run: |
+          cd src/button-angular
+          npm install
       - run: npm run build
       - name: publish all to github package repository
         run: npm run publish:all

.github/workflows/push.yml

@@ -23,6 +23,12 @@ jobs:
         uses: actions/setup-node@v1
         with:
           node-version: ${{ matrix.node-version }}
+      - name: prebuild
+        run: scripts/prebuild.sh
       - run: npm install
+      - name: npm install (button-angular)
+        run: |
+          cd src/button-angular
+          npm install
       - run: npm run build:all
       - run: npm test

.prettierignore

@@ -4,6 +4,7 @@ build/
 
 CHANGELOG.md
 
+src/button-angular/package.json
 src/button-element/package.json
 src/button-react/package.json
 

.vscode/settings.json

@@ -1,12 +1,7 @@
 {
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.formatOnSave": true,
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": true
-  },
-  "[javascript]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
-  },
-  "[typescript]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
   }
 }

README.md

@@ -39,6 +39,20 @@ npm install @google-pay/button-react
 
 Find out more about the [Google Pay React button][button-react].
 
+## Angular
+
+[![npm version](https://badge.fury.io/js/%40google-pay%2Fbutton-angular.svg)][npm-angular]
+
+An Angular version of the [Google Pay button][button-angular] as been created to make it just as easier to integrate
+Google Pay into your Angular website. The advantage of using the Angular version of the Google Pay button over the web
+component is that it eliminates the need to register `CUSTOM_ELEMENTS_SCHEMA`.
+
+```sh
+npm install @google-pay/button-angular
+```
+
+Find out more about the [Google Pay Angular button][button-angular].
+
 ## Other frameworks
 
 The intention is for the web component to support other web frameworks. Support for additional framework specific
@@ -47,7 +61,9 @@ libraries will be considered based on demand.
 [google-pay]: https://developers.google.com/pay/api/web/overview
 [button-element]: src/button-element
 [button-react]: src/button-react
+[button-angular]: src/button-angular
 [live-demo]: https://developers.google.com/pay/api/web/guides/resources/demos
 [custom-elements-compatible]: https://custom-elements-everywhere.com/
 [npm-element]: https://www.npmjs.com/package/@google-pay/button-element
 [npm-react]: https://www.npmjs.com/package/@google-pay/button-react
+[npm-angular]: https://www.npmjs.com/package/@google-pay/button-angular

angular.json

@@ -0,0 +1,28 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "src",
+  "projects": {
+    "google-pay-button": {
+      "projectType": "library",
+      "root": "src/button-angular",
+      "sourceRoot": "src/button-angular",
+      "prefix": "lib",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-ng-packagr:build",
+          "options": {
+            "tsConfig": "src/button-angular/tsconfig.lib.json",
+            "project": "src/button-angular/ng-package.json"
+          },
+          "configurations": {
+            "production": {
+              "tsConfig": "src/button-angular/tsconfig.lib.prod.json"
+            }
+          }
+        }
+      }
+    }
+  },
+  "defaultProject": "google-pay-button"
+}

examples/angular/package.json

@@ -11,26 +11,27 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^10.2.0",
-    "@angular/common": "^10.2.0",
-    "@angular/compiler": "^10.2.0",
-    "@angular/core": "^10.2.0",
-    "@angular/forms": "^10.2.0",
-    "@angular/platform-browser": "^10.2.0",
-    "@angular/platform-browser-dynamic": "^10.2.0",
-    "@angular/router": "^10.2.0",
-    "@google-pay/button-element": "file:../../src/button-element",
+    "@angular/animations": "^10.2.2",
+    "@angular/common": "^10.2.2",
+    "@angular/compiler": "^10.2.2",
+    "@angular/core": "^10.2.2",
+    "@angular/forms": "^10.2.2",
+    "@angular/platform-browser": "^10.2.2",
+    "@angular/platform-browser-dynamic": "^10.2.2",
+    "@angular/router": "^10.2.2",
+    "@google-pay/button-angular": "file:../../src/button-angular/dist",
+    "@types/googlepay": "^0.5.0",
     "rxjs": "~6.6.3",
     "tslib": "^2.0.0",
-    "zone.js": "~0.11.2"
+    "zone.js": "^0.11.3"
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "^0.1002.0",
     "@angular/cli": "^10.2.0",
-    "@angular/compiler-cli": "^10.2.0",
-    "@types/jasmine": "^3.6.0",
+    "@angular/compiler-cli": "^10.2.2",
+    "@types/jasmine": "^3.6.1",
     "@types/jasminewd2": "~2.0.3",
-    "@types/node": "^14.14.5",
+    "@types/node": "^14.14.6",
     "codelyzer": "^6.0.1",
     "jasmine-core": "~3.5.0",
     "jasmine-spec-reporter": "~5.0.0",

examples/angular/src/app/app.component.html

@@ -174,7 +174,8 @@
           (error)="onError($event)"
           (readytopaychange)="onReadyToPayChange($event)"
           [paymentAuthorizedCallback]="onPaymentDataAuthorized"
-        ></google-pay-button>
+        >
+        </google-pay-button>
       </div>
     </div>
   </div>

examples/angular/src/app/app.component.ts

@@ -14,10 +14,8 @@
  * limitations under the License.
  */
 
-import '@google-pay/button-element';
-
-import { ReadyToPayChangeResponse } from '@google-pay/button-element';
 import { Component } from '@angular/core';
+import { ReadyToPayChangeResponse } from '@google-pay/button-angular';
 
 @Component({
   selector: 'app-root',

examples/angular/src/app/app.module.ts

@@ -15,16 +15,16 @@
  */
 
 import { BrowserModule } from '@angular/platform-browser';
-import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 
 import { AppComponent } from './app.component';
+import { GooglePayButtonModule } from '@google-pay/button-angular';
 
 @NgModule({
   declarations: [AppComponent],
-  imports: [BrowserModule, FormsModule],
+  imports: [BrowserModule, FormsModule, GooglePayButtonModule],
   providers: [],
   bootstrap: [AppComponent],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA],
 })
 export class AppModule {}

examples/angular/tsconfig.app.json

@@ -2,8 +2,9 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "./out-tsc/app",
-    "types": ["googlepay"]
+    "types": ["googlepay", "node"]
   },
   "files": ["src/main.ts", "src/polyfills.ts"],
-  "include": ["src/**/*.d.ts"]
+  "include": ["src/**/*.d.ts", "../../src/lib"],
+  "exclude": ["../../src/**/*.test.ts", "../../src/**/__*__"]
 }

examples/angular/tsconfig.json

@@ -14,6 +14,7 @@
     "lib": ["es2018", "dom"]
   },
   "angularCompilerOptions": {
+    "enableIvy": false,
     "fullTemplateTypeCheck": true,
     "strictInjectionParameters": true
   }