Typescript support of azure-maps-control for Angular 20+

Question

Hi, I'm trying to use azure-maps-control npm library for my Angular 20 project. Looks like there are some problems due to minimal typescript version (and imports inside azure-maps-control lib).

 [ERROR] TS2503: Cannot find namespace 'GeoJSON'. [plugin angular-compiler]
    node_modules/@maplibre/maplibre-gl-style-spec/dist/index.d.ts:605:9:
      605 │   "data": GeoJSON.GeoJSON | string;
          ╵           ~~~~~~~
X [ERROR] TS2344: Type 'T' does not satisfy the constraint 'EventArgs'. [plugin angular-compiler]
    node_modules/azure-maps-control/typings/index.d.ts:607:81:
      607 │ ...se<T = any> extends internal.EventEmitter<T> implements Control {
          ╵                                              ^
  This type parameter might need an `extends internal.EventArgs` constraint.
    node_modules/azure-maps-control/typings/index.d.ts:607:42:
      607 │ ... abstract class ControlBase<T = any> extends internal.EventEmi...

Is there any change to have a fix with upgraded version of typescript at least 5.8 as it was realeased on 28.02.2025 (https://devblogs.microsoft.com/typescript/announcing-typescript-5-8/)

Answer 1

Hi Eugene Semenyuk

Please install the package manually to see if it resolves the issue.

(Node Js 22.0 used here in my case)

npm install --save-dev @types/geojson

If it does not resolve the issue, please follow below steps (tested, able to load map with below changes)

1. npm install --save-dev typescript@5.8
2. Apply the tsconfig.js with below changes.

      {
        "compileOnSave": false,
        "compilerOptions": {
          /* ✅ Modern TypeScript target & module settings */
          "target": "ES2022",              // good default for Angular 20
          "module": "ESNext",              // ensures modern module syntax for TS 5.8
          "moduleResolution": "bundler",   // recommended for Angular 20 + TS ≥5.5
          /* ✅ Type checking options */
          "strict": true,
          "noImplicitOverride": true,
          "noPropertyAccessFromIndexSignature": true,
          "noImplicitReturns": true,
          "noFallthroughCasesInSwitch": true,
          /* ✅ Compilation performance / library compatibility */
          "skipLibCheck": true,            // keep this true to silence 3rd-party d.ts issues
          "isolatedModules": true,
          "esModuleInterop": true,         // ensures smooth interop with CJS libraries
          "forceConsistentCasingInFileNames": true,
          /* ✅ Decorators & helpers */
          "experimentalDecorators": true,
          "importHelpers": true,
          /* ✅ Output and module format (unchanged) */
          "sourceMap": true,
          "outDir": "./out-tsc",
          /* ✅ Libs that TS 5.8 expects for DOM apps */
          "lib": ["ES2022", "DOM", "DOM.Iterable"]
        },
        "angularCompilerOptions": {
          "enableI18nLegacyMessageIdFormat": false,
          "strictInjectionParameters": true,
          "strictInputAccessModifiers": true,
          "typeCheckHostBindings": true,
          "strictTemplates": true
        },
        "files": [],
        "references": [
          { "path": "./tsconfig.app.json" },
          { "path": "./tsconfig.spec.json" }
        ]
      }
      
   

3. Ensure Angular CLI and all dependencies are updated (ng update).
4. Keep "skipLibCheck": true if using 3rd-party libraries with outdated typings.
5. install @types/geojson- npm install --save-dev @types/geojson

Reference - https://learn.microsoft.com/en-us/azure/azure-maps/how-to-use-npm-package

Hope it fixes the issue at your side.

Thank you.