title: Angular8 and OpenLayers 6: ERROR TypeError: Cannot read property 'forEachFeatureAtPixel' of undefined
body: <p>I am trying to open popup whenever I click on a feature. I've managed to get onclick event on map, but when I try to get the feature clicked I am getting the above below. I would appriciate any help, thanks.</p>
  
  <p>app.component.html</p>
  
  <pre><code>&lt;div id="map" class="map"&gt;&lt;/div&gt;
  &lt;div id='popup-container'&gt;
      &lt;p id='popup-coordinates'&gt;&lt;/p&gt;
  &lt;/div&gt;
  &lt;div class="overlay-container"&gt;
      &lt;span class='overlay-text' id='feature-name'&gt;&lt;/span&gt;&lt;br&gt;
      &lt;span class='overlay-text' id='feature-additional-info'&gt;&lt;/span&gt;&lt;br&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>app.component.ts</p>
  
  <pre><code>import { ChangeDetectionStrategy, Component, Injector, OnInit } from '@angular/core';
  import { MatDialog } from '@angular/material';
  import { AppComponentBase } from '../../../shared/app-component-base';
  import Map from 'ol/Map';
  import View from 'ol/View';
  import Feature from 'ol/Feature';
  import Point from 'ol/geom/Point';
  import { fromLonLat } from 'ol/proj.js';
  import { Tile as TileLayer, Vector as VectorLayer } from 'ol/layer';
  import VectorSource from 'ol/source/Vector';
  import { Icon, Style } from 'ol/style';
  import OSM from 'ol/source/OSM';
  import Overlay from 'ol/Overlay';
  import * as olPixel from 'ol/pixel';
  
  export class app {
      temp;
      map;
      vectorSource;
      vectorLayer;
      rasterLayer;
      pixel;
  
  ngOnInit() {
      this.mapCreator();
  // Here I add some features from backend
  }
  
  mapCreator() {
      this.vectorSource = new VectorSource({
          features: []
      });
  
      this.vectorLayer = new VectorLayer({
          source: this.vectorSource
      });
  
      this.map = new Map({
          target: 'map',
          layers: [new TileLayer({
              source: new OSM()
          })],
          view: new View({
              center: fromLonLat([35.6027698, 38.5946197]),
              zoom: 6.8
          }),
      });
      this.map.addLayer(this.vectorLayer);
  
      // Vector Feature Popup 
      const overlayContainerElement = document.querySelector('.overlay-container')
      const overlayLayer = new Overlay({
          element: overlayContainerElement
      })
      this.map.addOverlay(overlayLayer);
      const overlayFeatureName = document.getElementById('feature-name');
      const overlayFeatureAdditionInfo = document.getElementById('feature-additional-info');
  
  
      // Vector Feature Popup
      this.map.on('click', function (e) {
          overlayLayer.setPosition(undefined);
          this.map.forEachFeatureAtPixel(e.pixel, function (feature, layer) {
              let clickedCoordinate = e.coordinate;
              let clickedFeatureName = feature.get('name');
              let clickedFeatureAdditionInfo = feature.get('additionalinfo');
              if (clickedFeatureName &amp;&amp; clickedFeatureAdditionInfo != undefined) {
                  overlayLayer.setPosition(clickedCoordinate);
                  overlayFeatureName.innerHTML = clickedFeatureName;
                  overlayFeatureAdditionInfo.innerHTML = clickedFeatureAdditionInfo;
              }
          })
      })      
  }
  }
  </code></pre>
  
  <p>Here is the error I get when I click on the map;</p>
  
  <pre><code>ERROR TypeError: Cannot read property 'forEachFeatureAtPixel' of undefined
  at Map.&lt;anonymous&gt; (app.component.ts:94)
  at Map.push../node_modules/ol/events/Target.js.Target.dispatchEvent (Target.js:113)
  at Map.push../node_modules/ol/PluggableMap.js.PluggableMap.handleMapBrowserEvent (PluggableMap.js:871)
  at MapBrowserEventHandler.push../node_modules/ol/events/Target.js.Target.dispatchEvent (Target.js:113)
  at MapBrowserEventHandler.push../node_modules/ol/MapBrowserEventHandler.js.MapBrowserEventHandler.emulateClick_ (MapBrowserEventHandler.js:97)
  at MapBrowserEventHandler.push../node_modules/ol/MapBrowserEventHandler.js.MapBrowserEventHandler.handlePointerUp_ (MapBrowserEventHandler.js:148)
  at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
  at Object.onInvokeTask (core.js:26247)
  at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422)
  at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195)
  at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:498)
  at invokeTask (zone.js:1693)
  at HTMLDocument.globalZoneAwareCallback (zone.js:1730)
  </code></pre>
  
  <p>I am using Angular 8 and Openlayers 6.1.1 as I mentioned on the title. I can not change them due to project rules but I got stuck here. I've tried many different solutions but I always got the same problem. </p>