title: My map won't move with openlayers 6.2 and angular 9, even with DragRotateAndZoom interaction
body: <p>I'm trying to create a map, and as I can see on other sites and examples, everyone can move their map with mouseclick and drag. But my map wont move at all, anyone have idea what I did wrong? </p>
  
  <p>These are the components.ts and the component.html files that I am using. I followed instructions on <a href="https://openlayers.org/en/latest/doc/tutorials/bundle.html" rel="nofollow noreferrer">https://openlayers.org/en/latest/doc/tutorials/bundle.html</a>, without installing parcel because I'm using angular.</p>
  
  <p>map.component.ts</p>
  
  <pre><code>ngOnInit(): void {
    this.mapInit();
    }
  
     mapInit() {
     var mousePositionControl = new MousePosition({
           coordinateFormat: createStringXY(4),
           projection: 'EPSG:4326',
           // comment the following two lines to have the mouse position
           // be placed within the map.
           className: 'custom-mouse-position',
           target: document.getElementById('mouse-position'),
           undefinedHTML: '&amp;nbsp;'
         });
  
            var source = new OSM();
            var overviewMapControl = new OverviewMap({
              layers: [
                new TileLayer({
                  source: source
                })
              ]
            });
  
            this.map = new Map({
            target: 'map',
            interactions: defaultInteractions().extend([
                new DragRotateAndZoom
              ]),
              layers: [
                new TileLayer({
                  source: source
                }),
              ],
              view: new View({
                center: fromLonLat([19.833549, 45.267136]),
                zoom: 7
              }),
              controls: defaultControls().extend([
              overviewMapControl,
              new FullScreen(),
              mousePositionControl,
              new ZoomToExtent({
              extent: [
                 813079.7791264898, 5929220.284081122,
                 848966.9639063801, 5936863.986909639,
               ]
               })
              ])
            });
  </code></pre>
  
  <p>map.component.html</p>
  
  <pre><code>&lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;title&gt;Drag, Rotate, and Zoom&lt;/title&gt;
    &lt;!-- The line below is only needed for old environments like Internet Explorer and Android 4.x --&gt;
    &lt;script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=fetch,requestAnimationFrame,Element.prototype.classList,URL"&gt;&lt;/script&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.1.1/build/ol.js"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="map" class="map"&gt;&lt;/div&gt;
  &lt;div id="mouse-position"&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>