Angular 16独立组件中无法使用GoogleMapsComponent问题求助

问题原因 #

编译报错提示<google-maps>不是已知元素，核心原因有两个：

1. 组件选择器拼写错误：Angular Google Maps的官方组件选择器是**<google-map>**（单数），而非你使用的<google-maps>（复数）。
2. 依赖版本不完全匹配：你的Angular核心版本是16.0.1，而@angular/google-maps是16.0.4，跨小版本可能存在潜在兼容问题。

解决步骤 #

1. 修正模板标签：将模板中的<google-maps />替换为<google-map />。
2. 对齐依赖版本：执行命令将@angular/google-maps版本调整为与Angular核心一致：

npm install @angular/google-maps@16.0.1

修改后的完整组件代码 #

import { Component } from "@angular/core";
import { GoogleMapsModule } from "@angular/google-maps";

@Component({
  selector: "app-root",
  template: `<div>Hello {{ title }}</div><google-map />`,
  standalone: true,
  imports: [GoogleMapsModule],
})
export class AppComponent {
  title = "Angular CLI Template";
}

补充说明 #

编译通过后，需为地图配置Google Maps API密钥才能正常渲染，示例：

<google-map [apiKey]="'你的API密钥'"></google-map>

内容的提问来源于stack exchange，提问作者Sayantan Dey