Openlayers: Pan and zoom does not work in an Angular Cli application with Openlayers 6.2.1

[ligtendag]

kiskunsag.zip

When upgrading my Angular Cli application to OpenLayers 6.2.1 from 5.3.3, zooming en panning using the mouse and mousewheel stopped working.

To Reproduce

Steps to reproduce the behavior:

1. Unzip the attached file.
2. Having node.js installed, open a console window in the directory kiskunsag
3. issue the command npm install
4. issue the command ng serve
5. open a browser and go to http://localhost:4200

Zooming and panning both work

1. Now, in \kiskunsagpackage.json, change lines 22 and 23 from:
   "@types/ol": "^5.3.4",
   "ol": "^5.3.3",

to:

"@types/ol": "^6.1.0",
"ol": "^6.2.1",

1. issue the command npm install
2. issue the command ng serve
3. open a browser and go to http://localhost:4200

Zooming and panning do not work
Expected behavior
Zooming and panning using the mouse should work in a minimal Angular Cli application.

[ahocevar]

You need to make sure that ol/ol.css is properly loaded. The import 'ol/ol.css'; line you have in your map component does not do what you expect it to do in a standard angular-cli config. See https://stackoverflow.com/questions/40071845/how-to-import-css-from-node-modules-in-webpack-angular2-app for more details.

[ligtendag]

Thanks! You nailed the problem. After I added "node_modules/ol/ol.css" to the styles section of angular.json, the Zoom In and Zoom Out buttons rendered correctly and the Zoom and Pan using the mouse did work. You need to give the map the focus first though...

[siyuan1995]

@ligtendag Your solution works, thanks !