Question on importing OpenLayers module(s) to Angular 2+

Question

I'm using Angular 7, OpenLayers 5.3.0 (ol). I am new to OpenLayers. I don't seem to able to find examples of Angular 2+ withOverLayers. I try to follow the examples from https://openlayers.org/en/latest/examples/index.html and make the code work forAngular 2+.

Use OpenLayers 4 with Angular 5 is very helpful. But in other cases, I'm having hard time getting the OpenLayers modules import to work.

For example, here's a JavaScript version:

var map = new OpenLayers.Map({
    div: "map",
    layers: [new OpenLayers.Layer.OSM()],
    controls: [
        new OpenLayers.Control.Navigation({
            dragPanOptions: {
                enableKinetic: true
            }
        }),
        new OpenLayers.Control.Attribution(),
        new OpenLayers.Control.Zoom()
    ],
    center: [0, 0],
    zoom: 1
});

How do I import the OpenLayers 'Control' module to Angular 2+? I've tried

import OlMap from 'ol/Map';
import OlXYZ from 'ol/source/XYZ';
import OlTileLayer from 'ol/layer/Tile';
import OlView from 'ol/View';
import * as ol from 'ol';

this.map = new OlMap({
      target: 'map',
      layers: [this.layer],
      view: this.view,
      controls: [
        new ol.control.navigation({
            dragPanOptions: {
                enableKinetic: true
            }
        }),
        new ol.control.attribution(),
        new ol.control.zoom()
    ],
});

But got error export 'Control' (imported as 'ol') was not found in 'ol'. Any suggestions? Thanks.

Answer 1

Here an example and you can find a lot of example on the site of Openlayers

import {defaults as defaultControls, OverviewMap} from 'ol/control.js';

  var map = new Map({
    controls: defaultControls().extend([
      new OverviewMap()
    ]),
    layers: [
      new TileLayer({
        source: new OSM()
      })
    ],
    target: 'map',
    view: new View({
      center: [500000, 6000000],
      zoom: 7
    })
  });

Answer 2

The following should work:

import * as ol from 'openlayers';

export class MapComponent implements OnInit {
   map: ol.Map;
}

ngOnInit() {
  this.map = new ol.Map({
     ...
  });
}