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

Question

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"
  }
}

Vigneshwaran Sourirajalu · Accepted Answer · 2023-02-11 11:13:30Z

1

It seems you didn't installed type declarations for google maps.

Use the below code to install it.

npm i @types/google.maps

answered Feb 11, 2023 at 11:13

Vigneshwaran Sourirajalu

1274 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Pieterjan Over a year ago

+ probably edit the tsconfig.app.json by adding "googlemaps" to the compilerOptions:types

Isaac Laryea Over a year ago

I tried both suggestions but I still get the same error

Isaac Laryea · Accepted Answer · 2023-02-12 01:35:45Z

1

I finally noticed the problem. The component I was using was not part of the declarations array of app.module.ts. For that reason, it appears the component was not running as part of the module. Hence, it was not seeing the GoogleMapsModule. This is what I believed happened.

answered Feb 12, 2023 at 1:35

Isaac Laryea

311 silver badge6 bronze badges

Comments

Felipe Albuquerque de Almeida · Accepted Answer · 2025-02-27 14:07:34Z

I did this EDIT because I received one dislike in my comment

--------------------------- EDIT without revision before post -----------------------

In your context (Angular 15)
Try install:
@angular/google-maps with exact version 15.2.9 because is made for version 15-LTS of angular.
@types/google.maps with exact version 3.58.1 because is made for version 4.9 of typescript.
then change your typescript version if was different this...

However you can think in another hipotesys if understand the concept behind this:

--------------------------- EDIT without revision before post -----------------------

The error NG8001: 'google-map' is not a known element often arises due to version mismatches between Angular, @angular/google-maps, and TypeScript. In your case, resolving this likely required pinning specific versions of dependencies to ensure compatibility. Here’s why:

1. Version Mismatch Issues

Angular libraries like @angular/google-maps are tightly coupled with your Angular version. Using ^ or ~ in package.json allows npm to install newer minor/patch versions, which may introduce breaking changes or incompatibilities with your project’s Angular/TypeScript setup.

For example:

Your Angular version: 13.4.0
Compatible @angular/google-maps: 13.3.9 (exact version, no ^ or ~)
- Consult the @angular/google-maps compatibility guide or the library’s documentation.
Compatible @types/google.maps: 3.55.4 (matches Angular 13’s requirements)
- Consult the @types/google.maps compatibility guide or the library’s documentation.
TypeScript: 4.6.4 (version aligned with Angular 13’s support).

2. How to Fix It

Explicitly Define Versions in package.json: Remove version modifiers (^/~) to enforce exact versions:

{
  "dependencies": {
    "@angular/core": "13.4.0",
    "@angular/google-maps": "13.3.9",
    "@types/google.maps": "3.55.4"
  },
  "devDependencies": {
    "typescript": "4.6.4"
  }
}

This ensures no unintended upgrades occur.

2. Check Compatibility:

Verify that @angular/google-maps and @types/google.maps versions are compatible with your Angular version. For example:
- Angular 13.x typically works with @types/google.maps 3.55.x and TypeScript 4.4.x–4.6.x.
Consult the official Angular compatibility guide or the library’s documentation.

3. Reinstall Dependencies: Delete node_modules and package-lock.json, then run:

npm install

3. Why This Works

Angular and TypeScript often have breaking changes between minor versions. Pinning versions ensures all tools/libraries align with your project’s ecosystem.
The @types/google.maps package must match the Google Maps JavaScript API version your Angular library expects. Mismatched types can cause Angular to "ignore" the component.

4. Avoid Future Issues

Always check compatibility tables when upgrading Angular.
Use tools like npm outdated to identify outdated dependencies, but upgrade cautiously.

By explicitly defining versions, you eliminate version drift and ensure all parts of your Angular project work harmoniously.

Collectives™ on Stack Overflow

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

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related