Angular 7.1.3 и Openlayers 5.3.0 не работают

Question

Я пытаюсь настроить openlayers на своем угловом 7.1.3 сайте.Я пробовал несколько примеров, но ни один из них не работает.Я не получаю сообщение об ошибке на консоли, но карта не показывает, Вы можете мне помочь?

Мой код:

map.component.html:

<div id="map" class="map"></div>

map.component.css

.map { height: 600px; width: 100%; }

map.component.ts

import { Component, OnInit, Inject, ElementRef, ViewChild } from '@angular/core';
import { CacheService } from '../../services/cache.service';
import { MaputilsService } from '../../services/maputils.service';
import { TranslateService } from '@ngx-translate/core';
import { GlobalSettingsService } from '../../../services/globalsettings.service';
import 'ol/ol.css';
import OlMap from 'ol/Map';
import OlXYZ from 'ol/source/XYZ';
import OlTileLayer from 'ol/layer/Tile';
import OlView from 'ol/View';

@component({
selector: 'app-mapdata',
templateUrl: './mapdata.component.html',
styleUrls: ['./mapdata.component.css'],
})
export class MapdataComponent implements OnInit {
public map: OlMap; 
public source: OlXYZ;
public layer: OlTileLayer;
public view: OlView;

constructor(@Inject(CacheService) private cacheService: CacheService, private mapUtils: MaputilsService, public globalsSettings: 
GlobalSettingsService, private translate: TranslateService
) {translate.setDefaultLang(globalsSettings.getDefaultLanguage()); }

ngOnInit(): void {
this.source = new OlXYZ({
url: 'http://tile.osm.org/{z}/{x}/{y}.png'
});

this.layer = new OlTileLayer({
  source: this.source
});

this.view = new OlView({
  center: [6.661594, 50.433237],
  zoom: 3
});

this.map = new OlMap({
  target: 'map',
  layers: [this.layer],
  view: this.view
}); 
}

Answer 1

В map.component.html

<div id="mapId" class="map-css"></div>

В map.componenet.css

::ng-deep .map-css {
    height: 600px !important;
    width: 100% !important;
}

Answer 2

Кажется, проблема в вашем источнике XYZ.Посмотрите в консоли сети, чтобы увидеть проблему.

См. здесь рабочий пример с OSM