Angular 17 google maps: загрузите скрипт googleapis снаружи index.html

во всех примерах, которые я нашел в сети, скрипт всегда встроен в index.html. Я хотел бы сделать это в компоненте или службе, внедренной в компонент. К сожалению, у меня не получилось (я много пробовал!). У меня в консоли следующая ошибка: "Ошибка: пространство имен google не найдено, невозможно создать встроенную карту google" (вероятно, когда он пытается отобразить тег).

Есть ли кто-то, кто смог это сделать?

Заранее большое спасибо.

Например, в TS моего компонента:

Я также пытался внедрить службу:

и в моем компоненте:

`ngOnInit() {
    this.loadGoogleMapsScript().then(() => {
      console.log('Google Maps script loaded !');
    }).catch(err => {
      console.error('Error loading Google Maps script:', err);
    });
  }

 
  loadGoogleMapsScript(): Promise<void> {
    return new Promise((resolve, reject) => {
      if (document.querySelector(`script[src="https://maps.googleapis.com/maps/api/js?key=<my key>"]`)) {
        resolve();
        return;
      }

      const script = document.createElement('script');
      script.src = 'https://maps.googleapis.com/maps/api/js?key=<my key>';
      script.async = true;
      script.defer = true;
      script.onload = () => resolve();
      script.onerror = (err) => reject(err);
      document.head.appendChild(script);
    });
  }`

`import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class GoogleMapsLoaderService {
  private apiKey = '<my key>';
  private scriptLoaded = false;
  private scriptLoadingPromise: Promise<void> | null = null;

  load(): Promise<void> {
    if (this.scriptLoaded) {
      return Promise.resolve();
    }

    if (this.scriptLoadingPromise) {
      return this.scriptLoadingPromise;
    }

    this.scriptLoadingPromise = new Promise((resolve, reject) => {
      const script = document.createElement('script');
      script.src = `https://maps.googleapis.com/maps/api/js?key=${this.apiKey}`;
      //script.async = true;
      //script.defer = true;
      script.onload = () => {
        this.scriptLoaded = true;
        resolve();
      };
      script.onerror = (err) => reject(err);
      document.head.appendChild(script);
    });

    return this.scriptLoadingPromise;
  }
}`

`mapLoaded = false;

constructor(private googleMapsLoader: GoogleMapsLoaderService) {}

ngOnInit() {
    this.googleMapsLoader.load().then(() => {
      this.mapLoaded = true;
    }).catch(err => {
      console.error('Error loading Google Maps script:', err);
    });
}`