Can't get this to work with Angular > 12

[jmontana]

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)

[sophiebremer]

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';