Unable to build the SDK with angular 16

[AmoghBhagwat123]

I am using angular 16 in my application and the maptiler SDK. Facing the following issues during build -

Here are the relevant portions of my package.json for reference -

"dependencies": {
    "@angular/animations": "16.1.3",
    "@angular/cdk": "16.1.3",
    "@angular/common": "16.1.3",
    "@angular/compiler": "16.1.3",
    "@angular/core": "16.1.3",
    "@angular/forms": "16.1.3",
    "@angular/material": "16.1.3",
    "@angular/platform-browser": "16.1.3",
    "@angular/platform-browser-dynamic": "16.1.3",
    "@angular/router": "16.1.3",
    "@angular/service-worker": "16.1.3",
    "@auth0/angular-jwt": "^5.0.2",
    "@aws-sdk/client-lambda": "^3.338.0",
    "@aws-sdk/client-pinpoint": "^3.357.0",
    "@aws-sdk/client-pinpoint-email": "^3.338.0",
    "@aws-sdk/client-s3": "^3.338.0",
    "@aws-sdk/s3-request-presigner": "^3.338.0",
    "@azure/msal-angular": "^3.0.0-alpha.1",
    "@azure/msal-browser": "^3.0.0-alpha.1",
    "@azure/storage-blob": "^12.0.0",
    "@elastic/elasticsearch": "^8.2.1",
    "@fortawesome/angular-fontawesome": "^0.13.0",
    "@fortawesome/fontawesome-svg-core": "^6.4.0",
    "@fortawesome/free-brands-svg-icons": "^6.4.0",
    "@fortawesome/free-regular-svg-icons": "^6.4.0",
    "@fortawesome/free-solid-svg-icons": "^6.4.0",
    "@liaoliaots/nestjs-redis": "^9.0.5",
    "@maptiler/sdk": "^1.1.1",
    "@millicast/sdk": "^0.1.32",
    "@nestjs/axios": "^2.0.0",
    "@nestjs/common": "^9.0.0",
    "@nestjs/config": "^2.3.2",
    "@nestjs/core": "^9.0.0",
    "@nestjs/elasticsearch": "^9.0.0",
    "@nestjs/jwt": "^10.0.1",
    "@nestjs/mapped-types": "^1.2.0",
    "@nestjs/microservices": "^9.2.1",
    "@nestjs/mongoose": "^9.2.1",
    "@nestjs/platform-express": "^9.0.0",
    "@nestjs/platform-socket.io": "^9.4.0",
    "@nestjs/websockets": "^9.4.0",
    "@ngx-translate/core": "14.0.0",
    "@ngx-translate/http-loader": "6.0.0",
    "@ngxs/form-plugin": "^3.7.3",
    "@ngxs/router-plugin": "^3.7.3",
    "@ngxs/storage-plugin": "^3.7.2",
    "@ngxs/store": "^3.7.2",
    "@nx/node": "16.1.4",
    "@nx/webpack": "16.1.4",
    "@opentok/client": "2.23.2",
    "@swimlane/ngx-charts": "^20.1.2",
    "@tmcw/togeojson": "5.5.0",
    "@turf/buffer": "^6.5.0",
    "@types/dotenv": "^4.0.3",
    "@types/multer": "^1.4.7",
    "@types/node": "^18.16.12",
    "adm-zip": "^0.5.10",
    "agora-rtc-sdk-ng": "^4.14.0",
    "angular-calendar": "^0.31.0",
    "axios": "^1.3.1",
    "bcryptjs": "^2.4.3",
    "body-parser": "^1.18.3",
    "bootstrap": "^5.2.3",
    "browser-image-compression": "^1.0.13",
    "bull": "^4.10.4",
    "cache-manager": "^5.1.7",
    "cache-manager-redis-store": "^3.0.1",
    "chargebee-typescript": "^2.15.0",
    "class-transformer": "^0.5.1",
    "class-validator": "^0.14.0",
    "commitizen": "^4.2.4",
    "convert-units": "^2.3.4",
    "cors": "^2.8.4",
    "country-codes-list": "1.6.8",
    "date-fns": "^2.16.1",
    "dateformat": "^3.0.3",
    "diagnostics": "^2.0.2",
    "dotenv": "^6.0.0",
    "ejs": "^3.1.8",
    "elastic-apm-node": "^3.31.0",
    "express": "^4.16.3",
    "express-basic-auth": "^1.2.1",
    "file-saver": "^2.0.5",
    "font-awesome": "^4.7.0",
    "geolib": "^3.3.1",
    "hat": "0.0.3",
    "helmet": "^3.14.0",
    "http-proxy-middleware": "^2.0.6",
    "ioredis": "^5.3.1",
    "janus-gateway-js": "^2.0.2",
    "jasmine": "^3.7.0",
    "jasmine-spec-reporter": "^5.0.2",
    "joi": "^17.6.0",
    "jsonwebtoken": "^9.0.0",
    "jszip": "^3.10.1",
    "lodash": "^4.17.20",
    "luxon": "^1.28.0",
    "mathjs": "^9.4.4",
    "mixpanel": "^0.16.0",
    "moment": "^2.29.1",
    "mongodb-memory-server": "^8.12.1",
    "mongoose": "^6.7.4",
    "morgan": "^1.10.0",
    "morgan-body": "^2.6.8",
    "mqtt": "^4.3.7",
    "multer": "^1.4.5-lts.1",
    "ngx-slider-v2": "^16.0.1",
    "ngx-spinner16": "^16.0.1",
    "ngx-toastr": "^16.0.0",
    "node-cron": "^2.0.3",
    "node-fetch": "^2.6.1",
    "npm": "^9.3.1",
    "nx": "16.1.4",
    "obscenity": "^0.1.4",
    "opentok": "2.16.0",
    "passport": "~0.6.0",
    "passport-azure-ad": "~4.3.4",
    "password_hash": "^1.1.0",
    "polyline-encoded": "0.0.9",
    "puppeteer": "^19.6.1",
    "rand-token": "^0.4.0",
    "recordrtc": "^5.6.1",
    "redis": "^4.1.0",
    "reflect-metadata": "^0.1.13",
    "rewire": "^5.0.0",
    "roslib": "^1.3.0",
    "rrule": "^2.6.6",
    "rxjs": "^7.0.0",
    "rxjs-compat": "^6.6.6",
    "socket.io": "^4.6.1",
    "socket.io-client": "^4.6.1",
    "static-google-map": "0.0.4",
    "stream-http": "^3.2.0",
    "subsink": "^1.0.2",
    "swagger-ui-express": "^4.5.0",
    "tslib": "^2.3.0",
    "uniqid": "^5.4.0",
    "unzipper": "^0.10.14",
    "url": "^0.11.0",
    "util": "^0.12.4",
    "uuid": "^8.3.2",
    "winston": "^3.5.0",
    "winston-daily-rotate-file": "^4.6.0",
    "winston-elasticsearch": "^0.17.1",
    "xml2js": "^0.5.0",
    "zipyai": "1.3.21",
    "zone.js": "~0.13.0"
  },

and my typescript version is 4.9.5
Can someone please help resolve this issue with the SDK?

[jonathanlurie]

Hello @AmoghBhagwat123 ,
apologies for the late reply! We currently have a team member working on updating our Angular example to v16, we'll let you know when it's ready!

Though, after some investigation, I believe that Angular is not the issue here. Our SDK extends MapLibre GL JS and has it as part of its dependencies with compatible versions being "^3.1.0", which means that as long as the major version is 3, then it should work (compatible with "3.x.x").

In MapLibre 3.2.0 (released 2 weeks ago) this commit led to replacing some of GeolocateControl class method by "equivalent" arrow functions. They are equivalent in terms of the feature they provide but they are not in terms of OOP design and inheritance pattern and this is why TypeScript is yelling.

I will make an update ASAP on the SDK to use MapLibre 3.1.0 (fixed version) instead of ^3.1.0.

What you can do in the meantime is to explicitly install the SDK alongside a specific version of MapLibre:

npm install @maplibre/sdk [email protected]

Apologies for the inconvenience!

[AmoghBhagwat123]

Thanks a lot for the help @jonathanlurie . I will test this solution out and revert back in case of any issues.

[jonathanlurie]

Hello again @AmoghBhagwat123 ,
this morning I have published a patch to the SDK, now available as v1.1.2 (https://www.npmjs.com/package/@maptiler/sdk) . The change is so that the MapLibre version is now fixed (no longer accepting minor/patch updates).

If you install the latest SDK, now it should come with the MapLibre v3.1.0 by default. Please let me know if you are still having issues with this.