[SOLVED] Why isn't the angular google-map component recognized by angular even though its module has been added to the app module?

I have added the google maps module to my app.module.ts but it keeps giving me an error.

I suspected the issue might be from the version of the packages I installed. I updated angular to angular 15 (latest now), and updated all the packages I had installed. I run npm cache verify to ensure that it was not a caching problem. I restarted the angular server several times, but I still kept getting the error NG8001: 'google-map' is not a known element.

Error: app/components/home/home.component.html:3:3 - error NG8001: 'google-map' is not a known element:

If 'google-map' is an Angular component, then verify that it is part of this module.
If 'google-map' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. 3

src/app/components/home/home.component.ts:13:16 13 templateUrl: './home.component.html', ~~~~~~~~~~~~~~~~~~~~~~~ Error occurs in the template of component HomeComponent. app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { MatLegacySnackBarModule as MatSnackBarModule } from '@angular/material/legacy-snack-bar';
import { MatLegacyDialogModule as MatDialogModule, MAT_LEGACY_DIALOG_DEFAULT_OPTIONS as MAT_DIALOG_DEFAULT_OPTIONS } from '@angular/material/legacy-dialog';
import { ReactiveFormsModule } from '@angular/forms';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { ChooseDestinationComponent } from './components/choose-destination/choose-destination.component';
import { GooglePlaceModule } from 'ngx-google-places-autocomplete';
import { AwaitingComponent } from './components/awaiting/awaiting.component';
import { DiverHomeComponent } from './components/driver-components/diver-home/diver-home.component';
import { OngoingRideComponent } from './components/ongoing-ride/ongoing-ride.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ConfirmDialogComponent } from './components/dialogs/confirm-dialog/confirm-dialog.component';
import { initializeApp, provideFirebaseApp } from '@angular/fire/app';
import { environment } from '../environments/environment';
import { provideAnalytics, getAnalytics, ScreenTrackingService, UserTrackingService } from '@angular/fire/analytics';
import { provideAuth, getAuth } from '@angular/fire/auth';
import { provideDatabase, getDatabase } from '@angular/fire/database';
import { AngularFireDatabase } from '@angular/fire/compat/database';
import { DatabaseService } from './services/database.service';
import { AngularFireModule } from '@angular/fire/compat';
import { CallNumber } from '@awesome-cordova-plugins/call-number/ngx';
import { StartTripComponent } from './components/dialogs/start-trip/start-trip.component';
import { AuthService } from './services/auth.service';
import { DriverCardComponent } from './components/driver-card/driver-card.component';
import { SignUpComponent } from './components/sign-up/sign-up.component';
import { SignInComponent } from './components/sign-in/sign-in.component';
import { AuthGuardService } from './services/auth-guard.service';
import { GoogleMapsModule } from '@angular/google-maps';


@NgModule({
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  declarations: [
    AppComponent,
    ChooseDestinationComponent,
    AwaitingComponent,
    DiverHomeComponent,
    OngoingRideComponent,
    ConfirmDialogComponent,
    StartTripComponent,
    DriverCardComponent,
    SignUpComponent,
    SignInComponent,
  ],
  imports: [
    GoogleMapsModule,
    BrowserModule,
    AppRoutingModule,
    ReactiveFormsModule,
    AngularFireModule.initializeApp(environment.firebase),
    HttpClientModule,
    GooglePlaceModule,
    BrowserAnimationsModule,
    MatSnackBarModule,
    MatDialogModule,
    provideFirebaseApp(() => initializeApp(environment.firebase)),
    provideAnalytics(() => getAnalytics()),
    provideAuth(() => getAuth()),
    provideDatabase(() => getDatabase()),
  ],
  providers: [{ provide: MAT_DIALOG_DEFAULT_OPTIONS, useValue: { hasBackdrop: false } },
    ScreenTrackingService,
    UserTrackingService,
    AngularFireDatabase,
    DatabaseService,
    AuthService,
    CallNumber,
    AuthGuardService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }


package.json
{
  "name": "lorley",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^15.1.4",
    "@angular/cdk": "^15.1.4",
    "@angular/common": "^15.1.4",
    "@angular/compiler": "^15.1.4",
    "@angular/core": "^15.1.4",
    "@angular/fire": "^7.5.0",
    "@angular/forms": "^15.1.4",
    "@angular/google-maps": "^15.1.4",
    "@angular/material": "^15.1.4",
    "@angular/platform-browser": "^15.1.4",
    "@angular/platform-browser-dynamic": "^15.1.4",
    "@angular/router": "^15.1.4",
    "@awesome-cordova-plugins/call-number": "^5.46.0",
    "@capacitor-community/capacitor-googlemaps-native": "^1.2.0",
    "@capacitor/android": "^4.0.1",
    "@capacitor/core": "^4.6.1",
    "@capacitor/geolocation": "^4.0.1",
    "@capacitor/google-maps": "^4.0.1",
    "@capacitor/ios": "^4.0.1",
    "@capacitor/preferences": "^4.0.2",
    "call-number": "^1.0.1",
    "ngx-google-places-autocomplete": "^2.0.5",
    "rxjs": "~7.4.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^15.1.5",
    "@angular/cli": "^15.1.5",
    "@angular/compiler-cli": "^15.1.4",
    "@capacitor/cli": "^4.6.1",
    "@types/jasmine": "~3.10.0",
    "@types/node": "^12.11.1",
    "jasmine-core": "~3.10.0",
    "karma": "~6.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "~1.7.0",
    "typescript": "~4.8.4"
  }
}