Why isn't the angular google-map component recognized by angular even though its module has...

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:

1. If 'google-map' is an Angular component, then verify that it is part of this module.
2. 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"
}
}

Continue reading...