ERROR NullInjectorError: R3InjectorError(Standalone[DemoComponent])NullInjectorError: No provider for MapsAPILoader

Question

I have implemented google maps in my project of angular 17 , I am using @agm/core and @types/googlemaps I had implemented my AgmCoreModule in my main.ts file as my project is standalone I do not have app module in my project , so I have written the code in root module i.e main.ts in providers array. But it is not able to find AgmCoreModule and so the error comes. Please guide me what is alternative of @NgModule in angular 17 , where do we need to put that code, I have tried writting it in importProvidersFrom() in app.config but it does not work. Also when I pass AgmCoreModule inside imports array in demo.component.ts but it shows error. Any help will be appreciated.

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from 'app/app.component';
import { appConfig } from 'app/app.config';

bootstrapApplication(AppComponent, appConfig)
    .catch(err => console.error(err));

package.json

{
    "name": "fuse-angular",
    "version": "19.0.0",
    "description": "Fuse - Angular Admin Template and Starter Project",
    "author": "https://themeforest.net/user/srcn",
    "license": "https://themeforest.net/licenses/standard",
    "private": true,
    "scripts": {
        "ng": "ng",
        "start": "ng serve",
        "build": "ng build",
        "watch": "ng build --watch --configuration development",
        "test": "ng test"
    },
    "dependencies": {
        "@agm/core": "^3.0.0-beta.0",
        "@angular/animations": "17.0.3",
        "@angular/cdk": "17.0.1",
        "@angular/common": "17.0.3",
        "@angular/compiler": "17.0.3",
        "@angular/core": "17.0.3",
        "@angular/forms": "17.0.3",
        "@angular/material": "17.0.1",
        "@angular/material-luxon-adapter": "17.0.1",
        "@angular/platform-browser": "17.0.3",
        "@angular/platform-browser-dynamic": "17.0.3",
        "@angular/router": "17.0.3",
        "@ngneat/transloco": "^6.0.4",
        "@types/google.maps": "^3.55.1",
        "@types/googlemaps": "^3.39.12",
        "apexcharts": "3.44.0",
        "bootstrap": "^5.3.2",
        "crypto-js": "^4.2.0",
        "highlight.js": "11.9.0",
        "lodash-es": "4.17.21",
        "luxon": "3.4.4",
        "ng-apexcharts": "1.8.0",
        "ngx-cookie-service": "^17.0.1",
        "ngx-mask": "^17.0.4",
        "ngx-quill": "24.0.2",
        "perfect-scrollbar": "1.5.5",
        "quill": "1.3.7",
        "rxjs": "7.8.1",
        "tslib": "2.6.2",
        "zone.js": "0.14.2"
    },
    "devDependencies": {
        "@angular-devkit/build-angular": "17.0.1",
        "@angular/cli": "17.0.1",
        "@angular/compiler-cli": "17.0.3",
        "@tailwindcss/typography": "0.5.10",
        "@types/chroma-js": "2.4.3",
        "@types/crypto-js": "3.1.47",
        "@types/highlight.js": "10.1.0",
        "@types/jasmine": "5.1.2",
        "@types/lodash": "4.14.201",
        "@types/lodash-es": "4.17.11",
        "@types/luxon": "3.3.4",
        "autoprefixer": "10.4.16",
        "chroma-js": "2.4.2",
        "jasmine-core": "5.1.1",
        "karma": "6.4.2",
        "karma-chrome-launcher": "3.2.0",
        "karma-coverage": "2.2.1",
        "karma-jasmine": "5.1.0",
        "karma-jasmine-html-reporter": "2.0.0",
        "lodash": "4.17.21",
        "postcss": "8.4.31",
        "tailwindcss": "3.3.5",
        "typescript": "5.2.2"
    }
}

app.config

export const appConfig: ApplicationConfig = {
 providers: [
  importProvidersFrom(
            AgmCoreModule.forRoot({
                apiKey: environment.googleApiKey,
                libraries: ['places', 'geometry'],
              }),
          ),
]
}

demo.component.ts

import { PathService } from 'app/modules/shared/services/path.service';
import { MapsAPILoader } from '@agm/core';

 
 @ViewChild('search1')
  public searchElementRef: ElementRef;
  geoCoder: google.maps.Geocoder;
  constructor(
    private mapsAPILoader: MapsAPILoader,
    private ngZone: NgZone,
    private path: PathService
  ) {

  }
ngOnInit(){
  this.mapsAPILoader.load().then(() => {
      this.geoCoder = new google.maps.Geocoder;
      const autocomplete = new google.maps.places.Autocomplete(this.searchElementRef.nativeElement);
      autocomplete.addListener('place_changed', () => {
        this.ngZone.run(() => {
          const place: google.maps.places.PlaceResult = autocomplete.getPlace();
          const addressData = this.path.getGoogleAddress(place.address_components);
          // this.clickRegionValue = false;
          console.log("addressData",addressData);
          
          // this.form.controls.sourceAddress.patchValue(
          //   {
          //     'pinCode': addressData.pincode,
          //   });

          // this.sourceRegion = addressData.region;
          // this.sourcePinCode = addressData.pincode;

          // this.souceLat = place.geometry.location.lat();
          // this.souceLng = place.geometry.location.lng();
        });
      });
    });
}

demo.component.html

div class="sm:col-span-2">
            <mat-form-field class="w-full">
              <mat-label>pincode</mat-label>
              <input
                placeholder="Enter pincode"
                type="number" #search1 
                id="pac-input"
                matInput
                formControlName="pincode"
              
              />
            
            </mat-form-field>
          </div>