If it's not too much of a trouble, can you send me the code example with all the dependencies? I can't get the one provided to work since I lack the knowledge to do so. I also had to remove the LOAD_CONFIG objects, like you said. Also, thanks for all the help. This is the only time I got some insight on how to make this thing work

where do you load the scripts?
yes i'm perfectly fine with using windy in angular

import { DatePipe } from '@angular/common';
import { HttpClient } from '@angular/common/http';
import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
import { FormBuilder } from '@angular/forms';
import { MatDialog, MatDialogRef, MatDialogModule } from '@angular/material/dialog';
import { ActivatedRoute, NavigationStart, Router } from '@angular/router';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { Table } from 'primeng/table';
import { combineLatest, Observable, Subscription } from 'rxjs';
import { filter } from 'rxjs/operators';
import { environment } from 'src/environments/environment';
import { isAppIdentity } from '../../oc-core/app-defs/app-identity';
import { appLocationEndpointMap } from '../../oc-core/app-defs/app-location-endpoint-map';
import { CrudGenericService } from '../../oc-core/services/crud-generic.service';
import { BunkerFormComponent } from '../bunker-form/bunker-form.component';
import { VoyageCallsModel } from '../models/voyage-calls.model';
import { VoyageOverviewModel } from '../models/voyage-overview.model';
import { ScriptLoaderModule } from 'ngx-script-loader'
import { WindyScriptLoaderService } from 'windy'

declare function windyInit(options, callback);
@Component({
  selector: 'app-pool-overview',
  templateUrl: './pool-overview.component.html',
  styleUrls: ['./pool-overview.component.css'],
  
})


export class PoolOverviewComponent implements OnInit {

  private subscription: Subscription = new Subscription();
  
  @ViewChild(Table, {static: true}) dataTableComponent: Table;

  navStart: Observable;

  private windyMap: any;


  constructor(private route: ActivatedRoute, private router: Router, private crudService: CrudGenericService, private httpClient: HttpClient, 
    private fb: FormBuilder, private modalService: NgbModal, public dialog: MatDialog, public datepipe: DatePipe) { 
    this.navStart = router.events.pipe(
      filter(evt => evt instanceof NavigationStart)
    ) as Observable;
  }

  ngOnInit(){

  }

  ngAfterViewInit(): void {
   
      const options = {
        // Required: API key
        key: 'MdrN6Cm3LsiP40kv2Y8SUyXyhk4HEer4', // REPLACE WITH YOUR KEY !!!

        // Put additional console output
        verbose: false,

        // Optional: Initial state of the map
        lat: 35,
        lon: -30,
        zoom: 3
      };

      if (!window['copy_of_W']) {
        window['copy_of_W'] = Object.assign({}, window['W']);
      }
      if (window['W'].windyBoot) {
        window['W'] = Object.assign({}, window['copy_of_W']);
      }

      windyInit(options, windyAPI => {
        this.windyMap = windyAPI;
        this.windyMap.map.options.minZoom = 0;
        this.windyMap.map.options.maxZoom = 18;
      });

  }


}

Hey, as long as you are loading the scripts this should be like a basic setup to get it working.

(i can't write the div in one line since it will disappear than lol)

HTML

<
div #windyMap id="windy">

TS

declare function windyInit(options, callback);

@Component({
  selector: 'windy',
  templateUrl: './windy.component.html',
  styleUrls: ['./windy.component.scss'],
  encapsulation: ViewEncapsulation.None,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class WindyComponent implements OnInit, AfterViewInit, OnDestroy {
   @ViewChild('windyMap', {static: true}) windyMapElementRef: ElementRef;
 
  private _config: LoadConfig;
  private windyMap: any;

  constructor(@Inject(LOAD_CONFIG) private config: LoadConfig,             
              private _cdr: ChangeDetectorRef,
              private _windyScriptLoaderService: WindyScriptLoaderService) {
    this._config = config || {};
  }

  ngOnInit(): void {
    if (!this._config.apiKeyWindy) {
      throwError('Windy api key is missing!');
    }
  }

  ngAfterViewInit(): void {
    this._windyScriptLoaderService.load().then((test) => {
      const options = {
        // Required: API key
        key: 'APIKEY', // REPLACE WITH YOUR KEY !!!

        // Put additional console output
        verbose: false,

        // Optional: Initial state of the map
        lat: 35,
        lon: -30,
        zoom: 3
      };

      if (!window['copy_of_W']) {
        window['copy_of_W'] = Object.assign({}, window['W']);
      }
      if (window['W'].windyBoot) {
        window['W'] = Object.assign({}, window['copy_of_W']);
      }

      windyInit(options, windyAPI => {
        this.windyMap = windyAPI;
        this.windyMap.map.options.minZoom = 0;
        this.windyMap.map.options.maxZoom = 18;
      });
    });
  }

  ngOnDestroy() {
    this._windyScriptLoaderService.removeScripts();
  }
}