Map openlayer does not want to display - Angular 16

Question

I'm trying to integrate a map into my project via openlayer. I followed different tutorials but I can't do it:

• I have a div displayed but not the map
• I have no errors in the console
• I installed npm install --save ol

please help me find a solution

Mon ficher : App.component.ts

import { Component, OnInit } from '@angular/core';
import Map from 'ol/Map.js';
import View from 'ol/View.js';
import TileLayer from 'ol/layer/Tile.js';
import OSM from 'ol/source/OSM.js';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss'
})
export class AppComponent implements OnInit {
  title = 'threePercent';
  map!: Map;

  ngOnInit() {
    this.initMap();
  }

  private initMap(): void {
    this.map = new Map({
      view: new View({
        center: [1, 1],
        zoom: 1,
      }),
      layers: [
        new TileLayer({
          source: new OSM(),
        }),
      ],
      target: 'map',
    });
  }
}

Mon fichier App.component.html

<main>
    <div id="map" class="map-container"></div>
  </main>
<router-outlet></router-outlet>
<app-app-bar></app-app-bar>

Mon fichier App.component.scss

.map-container{
    width: 300px;
    height: 300px;
}

I tried to follow different tutorials but I can't find :

• https://dev.to/camptocamp-geo/openlayers-in-an-angular-application-mn1
• https://medium.com/@pro.gramistka/create-interactive-maps-in-angular-12-project-with-openlayers-ba6683d6fe5b

image of my app in google and the div

Error in consol tab Error in Network tab

Answer 1

Did you import the openlayers' css?

There are different ways to do so, one is in the angular.json

"styles": [
  "src/styles.css",
  "node_modules/ol/ol.css"
],

I thought there was noting in console. But based on that, you can take a look here? 504 (Outdated Optimize Dep) while using react-vite