Clustering markers async data at openlayers 5 angular - angular7

Question

I see markers on my local project when I use mock data, but unfortunately I can't see them when I get data from the backend. The exception is when i get one marker from backend, then he appears on the map.
I send feature from marker-component do map-component:
ngOnInit(): void {
this.initMarker();
console.log("#! MARKER INIT");
}
ngAfterContentInit() {
this.setStyle();
}
initMarker() {
const { longitude, latitude } = this.coordinates;
const coordinates = [longitude, latitude];
this.marker = new Feature({
geometry: new Point(fromLonLat(coordinates)),
coordinates: coordinates,
data: this.data,
selected: false,
name: this.data.type
});
}`enter code here`
setStyle() {
const markerStyle = this.mMarkerStyleComponent.markerStyle;
this.marker.setStyle(markerStyle);
this.mapService.setMarker(this.marker);
}
In map-component:
private subscribeMarkerLayerChange(): void {
this.subscriptions.add(
this.mapService.markerChanges$.subscribe(resp => {
this.addMarkerLayers(resp);
})
);
}
private addMarkerLayers(feature: Feature) {
const allMapLayersCollection = this.map.getLayers();
allMapLayersCollection.forEach(existingLayer => {
if (existingLayer && existingLayer.get('name') === 'MARKERS') {
const layersMarkersCollection = existingLayer.getLayers();
layersMarkersCollection.forEach(layerType => {
if (layerType && layerType.get('vectorType') === 'MARKERS') {
const cluster = layerType.getSource();
const vectorSource = cluster.getSource();
vectorSource.addFeature(feature);
console.log('# cluster.getFeatures()', cluster.getFeatures());
}
});
}
});
}
private addMarkersLayer() {
var vectorSource = new VectorSource({ features: [] });
var clusterSource = new Cluster({
distance: 40,
source: vectorSource,
clusterType: 'MARKERS'
});
const styleCache = {};
const vectorLayer = new VectorLayer({
vectorType: 'MARKERS',
source: clusterSource,
style: function(feature) {
console.log('# INIT feature');
const size = feature.get('features').length;
let style = styleCache[size];
if (!style) {
style = new Style({
image: new Circle({
radius: 10,
stroke: new Stroke({
color: '#fff'
}),
fill: new Fill({
color: '#3399CC'
})
}),
text: new Text({
text: size.toString(),
fill: new Fill({
color: '#fff'
})
})
});
styleCache[size] = style;
}
return style;
}
});
const markersGroup = new LayerGroup({
layers: [vectorLayer],
name: 'MARKERS',
id: constants.MARKERS.id
});
const layersCollection = this.map.getLayers();
layersCollection.insertAt(this.map.get('id'), markersGroup);
}
Console.log
Local with mock:
# cluster.getFeatures() (2) [Feature, Feature]
# cluster.getFeatures() (3) [Feature, Feature, Feature]
# cluster.getFeatures() (4) [Feature, Feature, Feature, Feature]
# cluster.getFeatures() (5) [Feature, Feature, Feature, Feature, Feature]
From backend async (build)
# cluster.getFeatures() (2) [e, e]
# cluster.getFeatures() (2) [e, e]
# cluster.getFeatures() (2) [e, e]
# cluster.getFeatures() (2) [e, e]
# cluster.getFeatures() (3) [e, e, e]
# cluster.getFeatures() (4) [e, e, e, e]
# cluster.getFeatures() (4) [e, e, e, e]
# cluster.getFeatures() (9) [e, e, e, e, e, e, e, e, e]
console log # INIT feature

Answer 1

Solution:
When at least one marker from backend has latitude and longitude null, there is no error but markers don't show that is why it was difficult for me to find.
I added if statement if (longitude && latitude) and it works.
initMarker() {
const { longitude, latitude } = this.coordinates;
if (longitude && latitude) {
const coordinates = [longitude, latitude];
this.marker = new Feature({
geometry: new Point(fromLonLat(coordinates)),
coordinates: coordinates,
data: this.data,
selected: false,
name: this.data.type
});
}
}