fix(@cubejs-client/ngx): Update APF configuration and build settings for Angular 12+ compatibility (#9152) Thanks to @HaidarZ!

Author: HaidarZ

packages/cubejs-client-ngx/README.md

@@ -7,7 +7,7 @@
 
 # Cube.js Angular Client
 
-Cube.js Angular is an Angular Module for Angular 6+.
+Cube.js Angular is an Angular Module for Angular 12+.
 
 [Learn more](https://github.com/cube-js/cube.js#getting-started)
 

packages/cubejs-client-ngx/angular.json

@@ -12,16 +12,22 @@
         "build": {
           "builder": "@angular-devkit/build-angular:ng-packagr",
           "options": {
-            "tsConfig": "tsconfig.json",
-            "project": "ng-package.json",
-            "aot": true
-          }
+            "project": "ng-package.json"
+          },
+          "configurations": {
+            "production": {
+              "tsConfig": "tsconfig.prod.json"
+            },
+            "development": {
+              "tsConfig": "tsconfig.json"
+            }
+          },
+          "defaultConfiguration": "production"
         }
       }
     }
   },
-  "defaultProject": "cubejs-client-ngx",
   "cli": {
     "analytics": "24ffae35-fafc-41e6-b395-db5f2f6f12d4"
   }
-}
+}

packages/cubejs-client-ngx/package.json

@@ -9,22 +9,18 @@
     "directory": "packages/cubejs-client-ngx"
   },
   "description": "Cube.js client for Angular",
-  "main": "dist/bundles/cubejs-client-ngx.umd.js",
   "files": [
     "dist"
   ],
   "license": "MIT",
-  "watch": {
-    "dev:publish": "dist/*"
-  },
   "scripts": {
-    "build": "./node_modules/ng-packagr/cli/main.js -c tsconfig.json -p  ng-package.json && rm dist/package.json",
-    "ng:watch": "./node_modules/ng-packagr/cli/main.js -c tsconfig.json -p  ng-package.json --watch && rm dist/package.json",
+    "build": "ng build",
+    "ng:watch": "ng build --watch --configuration development",
     "dev": "yarn build && yalc publish --push"
   },
   "dependencies": {
     "fast-deep-equal": "^3.1.3",
-    "tslib": "^2.0.0"
+    "tslib": "^2.3.0"
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "^13.3.11",
@@ -33,26 +29,11 @@
     "@angular/compiler-cli": "^13.3.11",
     "@angular/core": "^13.3.11",
     "ng-packagr": "^13.3.1",
-    "npm-watch": "^0.7.0",
-    "tsickle": "^0.39.1",
-    "typescript": "~4.5.5"
+    "rxjs": "~7.5.0",
+    "typescript": "~4.6.2"
   },
   "peerDependencies": {
     "@cubejs-client/core": ">=0.28.1",
     "rxjs": ">=6.6.0"
-  },
-  "publishConfig": {
-    "access": "public"
-  },
-  "module": "dist/fesm2015/cubejs-client-ngx.js",
-  "es2015_ivy_ngcc": "__ivy_ngcc__/dist/fesm2015/cubejs-client-ngx.js",
-  "es2015": "dist/fesm2015/cubejs-client-ngx.js",
-  "esm5": "dist/esm5/cubejs-client-ngx.js",
-  "esm2015": "dist/esm2015/cubejs-client-ngx.js",
-  "fesm5": "dist/fesm5/cubejs-client-ngx.js",
-  "fesm2015_ivy_ngcc": "__ivy_ngcc__/dist/fesm2015/cubejs-client-ngx.js",
-  "fesm2015": "dist/fesm2015/cubejs-client-ngx.js",
-  "typings": "dist/cubejs-client-ngx.d.ts",
-  "metadata": "dist/cubejs-client-ngx.metadata.json",
-  "sideEffects": false
+  }
 }

packages/cubejs-client-ngx/src/query-builder/query-members.ts

@@ -8,7 +8,7 @@ import {
   BinaryFilter,
 } from '@cubejs-client/core';
 import { BehaviorSubject } from 'rxjs';
-import equal from 'fast-deep-equal';
+import equal from 'fast-deep-equal/es6';
 
 import { Query } from './query';
 

packages/cubejs-client-ngx/tsconfig.json

@@ -2,17 +2,22 @@
   "compilerOptions": {
     "baseUrl": "./",
     "outDir": "../../out-tsc/lib",
-    "target": "es2015",
-    "module": "es2015",
     "moduleResolution": "node",
     "declaration": true,
+    "declarationMap": true,
     "sourceMap": true,
     "inlineSources": true,
     "experimentalDecorators": true,
     "importHelpers": true,
     "allowSyntheticDefaultImports": true,
+    "strict": false,
     "types": [],
-    "lib": ["dom", "es2018"],
+    "target": "es2017",
+    "module": "es2020",
+    "lib": [
+      "es2020",
+      "dom"
+    ],
     "paths": {
       "@angular/*": ["./node_modules/@angular/*"],
       "@cubejs-client/core": ["../cubejs-client-core"]
@@ -25,8 +30,7 @@
     "fullTemplateTypeCheck": true,
     "strictInjectionParameters": true,
     "enableResourceInlining": true,
-    "enableIvy": true,
-    "preserveSymlinks": true
+    "preserveSymlinks": true,
   },
   "exclude": ["src/test.ts", "**/*.spec.ts"],
   "include": ["index.ts", "src/*"]

packages/cubejs-client-ngx/tsconfig.prod.json

@@ -0,0 +1,9 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "declarationMap": false
+  },
+  "angularCompilerOptions": {
+    "compilationMode": "partial"
+  }
+}

packages/cubejs-playground/src/hooks/deep-compare-memoize.ts

@@ -1,5 +1,5 @@
 import { useRef } from 'react';
-import equals from 'fast-deep-equal';
+import equals from 'fast-deep-equal/es6';
 
 export function useDeepCompareMemoize(value) {
   const ref = useRef([]);