Как импортировать google map api Autocomplite?

Question

[Romanuss]

Всем привет, имеется такая функция автокомплита:

getPlaceAutocomplete(adrr) {
        this.mapLoader.load().then(() => { 
            
            console.log('k');
            let geoCoder = new google.maps.Geocoder;

            const autocomplete = new google.maps.places.Autocomplete(this.searchElementRef.nativeElement, {
              types: ['address']
            });

            autocomplete.addListener("place_changed", () => {

                const place: google.maps.places.PlaceResult = autocomplete.getPlace();

                if (place.geometry === undefined || place.geometry === null) {
                  return null;
                } else {
                  return place;
                }
            });
        
          });
    }

Но Ангуляр выдаёт ошибку в Autocomplite (new google.maps.places.Autocomplete) - it's not a known element;
Хотя я тип googlemaps импортнул в ts.config.app.json и в ts.spec.json

Вот модуль:

import { BrowserModule, Title, HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import { GestureConfig } from '@angular/material/core';
import { MatProgressSpinnerModule } from '@angular/material';
import {MatStepperModule} from '@angular/material/stepper';
import { MatTooltipModule } from '@angular/material/tooltip';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {ReactiveFormsModule} from '@angular/forms';
import {HttpClientModule, HTTP_INTERCEPTORS} from "@angular/common/http";
import { ToastrModule } from 'ngx-toastr';

import {AppComponent} from './app.component';
import {RegisterStepsComponent} from './pages/register-steps/register-steps.component';
import { RegisterStepsModule } from './pages/register-steps/register-steps.module';

import {AppRoutingModule} from "./app-routing.module";
import {AuthModule} from "./pages/auth/auth.module";
import {AuthInterceptor} from "./interceptors/auth.interceptor";
import {AuthService} from "./services/auth.service";
import {AuthGuard} from "./guards/auth.guard";
import {RoleGuard} from "./guards/role.guard";
import { SafeHtmlPipe } from './pipes/safe-html.pipe';
import {DiscountService} from './services/discount.service';

import { BROWSER_FAVICONS_CONFIG } from "./favicons";
import { BrowserFavicons } from "./favicons";
import { Favicons } from "./favicons";
import { AgmCoreModule } from '@agm/core';

const toastrOptions = {
    positionClass: 'toast-bottom-right'
};

@NgModule({
    declarations: [
        AppComponent,
        RegisterStepsComponent,
        SafeHtmlPipe,

    ],
    imports: [
        AgmCoreModule.forRoot({apiKey: 'AIzaSyAsMfVTkpkYWSgC9eheUbVQLr1hrTczlrk', libraries: ['geometry', 'places‌']}),
        BrowserModule,
        MatStepperModule,
        MatProgressSpinnerModule,
        MatTooltipModule,
        BrowserAnimationsModule,
        ReactiveFormsModule,
        RegisterStepsModule,
        AppRoutingModule,
        AuthModule,
        HttpClientModule,
        ToastrModule.forRoot(toastrOptions),
    ],
    providers: [
        AuthService,
        AuthGuard,
        RoleGuard,
        {
            provide: HTTP_INTERCEPTORS,
            useClass: AuthInterceptor,
            multi: true
        },
      {provide: HAMMER_GESTURE_CONFIG, useClass: GestureConfig},
      {
        provide: Favicons,
        useClass: BrowserFavicons
      },
      {
        provide: BROWSER_FAVICONS_CONFIG,
        useValue: {
          icons: { },
          cacheBusting: true
        }
      },
      DiscountService,
      Title,
    ],
    bootstrap: [AppComponent]
})
export class AppModule {
}

Что подскажите? Спасибо [: