Can't get this to work with Angular > 12

The library works well up through Angular 12. When I try to use it with any version of Angular greater than 12, I get errors like this and nothing loads. If I revert to Angular 12, the app runs. Is this library compatible with Angular 13 and up?

[Error] TypeError: undefined is not an object (evaluating 't.ArrayBuffer') (anonymous function) (vendor.js:5654) (anonymous function) (vendor.js:5657) t (vendor.js:3342) (anonymous function) (vendor.js:5628) t (vendor.js:3342) (anonymous function) (vendor.js:5387) t (vendor.js:3342) (anonymous function) (vendor.js:5353) t (vendor.js:3342) (anonymous function) (vendor.js:4923) (anonymous function) (vendor.js:4976) t (vendor.js:3342) (anonymous function) (vendor.js:3467) t (vendor.js:3342) (anonymous function) (vendor.js:3356) t (vendor.js:3342) (anonymous function) (vendor.js:3332) 5741 (vendor.js:3333) __webpack_require__ (runtime.js:23) 1367 (main.js:200:96) __webpack_require__ (runtime.js:23) 5041 (main.js:16:96) __webpack_require__ (runtime.js:23) 6747 (main.js:171:92) __webpack_require__ (runtime.js:23) 4431 (main.js:521:93) __webpack_require__ (runtime.js:23) (anonymous function) (runtime.js:57) (anonymous function) (main.js:560) webpackJsonpCallback (runtime.js:145) webpackJsonpCallback Module Code (main.js:1)

Hi @jmontana, thanks for the report. The library only provides the TypeScript information, the implementation comes from Apple.

It does look like CloudKit JS can not find ArrayBuffer in its global scope.

Angular 12 had deprecated support for Internet Explorer, which was probably removed with Angular 13. This might affect CloutKit JS.
Another possibility is that the project configuration needs an upgrade, so Webpack routines of Angular integrate CloudKit JS with global scope.

I am not much familiar with Angular, but is there any documentation how one can access third-party libraries, that are defined on the global window scope? CloudKit JS itself (provided by Apple) expects to get defined in these different ways:

!function(e,t){
  "object"==typeof exports&&"object"==typeof module?
    module.exports=t(require("crypto"),require("fs")):
    "function"==typeof define&&define.amd?
      define(["crypto","fs"],t):
      "object"==typeof exports?
        exports.CloudKit=t(require("crypto"),require("fs")):
        e.CloudKit=t(e.crypto,e.fs)
}(this,function(e,t){
// ...

You see a UMD pattern.

First is a check for CommonJS (Node.js, server-side),
Second is a check for AMD (client or server),
Third is a check for SystemJS (client or server),
Fourth sets CloudKit on e=this (window on client)

Note that the t in the UMD pattern is not the same as the t in the last line of the snippet. Because of compression there are probably more ts with different meanings. It looks like this is an issue for the Apple Forum.

https://developer.apple.com/forums/search/?tags=cloudkit+js%2Cmapkit+js&condition=ANY&q=angular
This here looks like a solution: https://developer.apple.com/forums/thread/706389?answerId=714882022#714882022

You can also consider a bug report to Apple:

https://feedbackassistant.apple.com/

So the solution might be a "sloppy" mode for CloudKit JS:

<script src="https://cdn.apple-cloudkit.com/ck/2/cloudkit.js" />

and then importing tsl-apple-cloudkit:

import * as CloudKit from 'tsl-apple-cloudkit';

typescriptlibs / tsl-apple-cloudkit

Can't get this to work with Angular > 12 #23