Angular OpenLayers未显示自定义指针功能

import { Component, OnInit } from '@angular/core';
import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';
import Feature from 'ol/Feature';
import Point from 'ol/geom/Point';
import Style from 'ol/style/Style';
import Icon from 'ol/style/Icon';

@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.css']
})
export class MapComponent implements OnInit {
  map: Map;

  ngOnInit() {
    const map = new Map({
      target: 'map',
      layers: [
        new TileLayer({
          source: new OSM()
        })
      ],
      view: new View({
        center: [0, 0],
        zoom: 2
      })
    });

    const pointerStyle = new Style({
      image: new Icon({
        src: 'path/to/custom-pointer.png',
        size: [32, 32],
        offset: [0, 0]
      })
    });

    const pointerFeature = new Feature({
      geometry: new Point([0, 0])
    });

    pointerFeature.setStyle(pointerStyle);

    const pointerLayer = new VectorLayer({
      source: new VectorSource({
        features: [pointerFeature]
      })
    });

    map.addLayer(pointerLayer);
  }
}