ERROR TypeError: Cannot read properties of undefined (reading 'addControls') in Angular 13

See original GitHub issue

Similar to #1220 (and have also had that problem), I am running into map.pm being undefined, and I am not sure why. I created a demo project as a POC and it worked great. I take that same code into my actual project and map.pm always ends up being undefined. Leaflet is imported, then geoman at the head of the ts file, and then my map is init’d the exact same way as my POC, but no dice. Would love any suggestions on where to look.

    this.map = map(this.mapId, {
      center: [39.8282, -98.5795],
      zoom: 3,
    });
    const tiles = tileLayer(
      'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
      {
        maxZoom: 18,
        minZoom: 3,
        attribution:
          '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
      }
    );

    tiles.addTo(this.map);
    control.scale().addTo(this.map);
    this.featureGroup.addTo(this.map);
    function logEvent(e: any) {
      console.log(e);
    }
    this.map.pm.addControls({})

This fails at the addControls() in the real project, but not in POC, with the only difference between real and POC and the mapId. A map is displayed with scale and +/- controls.

Edit: Trying to get pm working, I tried PM.reInitLayer which also failed with PM being undefined.

Issue Analytics

State:
Created a year ago
Comments:11

Top GitHub Comments

1reaction

TheTiGuRcommented, Oct 20, 2022

So, having fiddled and fiddled and fiddled… I saw somewhere someone did a “console.log(L.PM); console.log(L.map.pm)” to get PM initialized. I tried it. It worked. I removed those logs. It still worked. I put it all back to the L import, rebuilt a few times, reload after clearing cache, still seems to be working. I assume I caught something magic in there somewhere that I missed before, but man, I wish I knew what. Thanks for prodding at it with me!

0reactions

TheTiGuRcommented, Oct 20, 2022

  "dependencies": {
    "@angular/animations": "13.3.11",
    "@angular/cdk": "13.3.9",
    "@angular/common": "13.3.11",
    "@angular/compiler": "13.3.11",
    "@angular/core": "13.3.11",
    "@angular/forms": "13.3.11",
    "@angular/platform-browser": "13.3.11",
    "@angular/platform-browser-dynamic": "13.3.11",
    "@angular/router": "13.3.11",
    "@geoman-io/leaflet-geoman-free": "^2.13.0",
    "@ng-idle/core": "^11.1.0",
    "@ng-idle/keepalive": "^11.0.3",
    "@turf/turf": "^6.5.0",
    "@zxcvbn-ts/core": "^2.0.3",
    "@zxcvbn-ts/language-common": "^2.0.1",
    "@zxcvbn-ts/language-en": "^2.0.1",
    "angular-password-strength-meter": "^4.3.1",
    "chart.js": "^3.8.2",
    "coordinator": "^0.5.0",
    "dayjs": "^1.11.4",
    "file-saver": "^2.0.5",
    "guid-typescript": "^1.0.9",
    "leaflet": "^1.7.1",
    "primeflex": "^3.1.3",
    "primeicons": "^5.0.0",
    "primeng": "^13.4.1",
    "prismjs": "^1.27.0",
    "ramda": "^0.28.0",
    "rxjs": "^7.5.6",
    "tslib": "^2.3.1",
    "zone.js": "^0.11.7",
    "zxcvbn3": "^0.1.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^13.3.9",
    "@angular-eslint/builder": "^13.5.0",
    "@angular-eslint/eslint-plugin": "^13.5.0",
    "@angular-eslint/eslint-plugin-template": "^13.5.0",
    "@angular-eslint/schematics": "^13.5.0",
    "@angular-eslint/template-parser": "^13.5.0",
    "@angular/cli": "13.3.9",
    "@angular/compiler-cli": "13.3.11",
    "@fortawesome/fontawesome-free": "^6.1.2",
    "@types/jasmine": "^4.0.2",
    "@types/jasminewd2": "~2.0.8",
    "@types/leaflet": "^1.7.9",
    "@types/node": "^17.0.45",
    "@types/ramda": "^0.28.15",
    "@typescript-eslint/eslint-plugin": "^5.32.0",
    "@typescript-eslint/parser": "^5.32.0",
    "codelyzer": "^6.0.0",
    "eslint": "^8.21.0",
    "eslint-plugin-import": "2.26",
    "eslint-plugin-prefer-arrow": "^1.2.3",
    "jasmine-core": "^4.3.0",
    "jasmine-spec-reporter": "^7.0.0",
    "karma": "^6.3.4",
    "karma-chrome-launcher": "^3.1.0",
    "karma-coverage-istanbul-reporter": "^3.0.3",
    "karma-jasmine": "^4.0.1",
    "karma-jasmine-html-reporter": "^1.7.0",
    "ts-node": "^10.9.1",
    "typescript": "~4.6.3"
  }