Angular 4中使用AGM报错：agm-map不是已知元素

遇到这个错误，说明Angular编译器无法识别AGM的组件，下面是针对你的代码和常见场景的解决方案：

1. 确认AGM依赖已正确安装 #

首先确保你已经通过包管理器安装了@agm/core：

npm install @agm/core --save
# 或者用yarn
yarn add @agm/core

2. 修复API Key中的空格问题 #

看你的AppModule里的API Key有个多余的空格，这会导致地图服务无法正常初始化，进而影响组件识别：

// 原代码中的错误写法
AgmCoreModule.forRoot({
  apiKey: 'AIzaSyDpV2SN0k5BqyVTQjTX8wU - hdCgBgktKY0'
})

修改为：

AgmCoreModule.forRoot({
  apiKey: 'AIzaSyDpV2SN0k5BqyVTQjTX8wU-hdCgBgktKY0'
})

3. 确保AGM版本与Angular版本兼容 #

AGM的版本需要和你的Angular版本严格匹配，版本不兼容是组件无法识别的常见原因：

• Angular 15+：使用@agm/core@1.1.0及以上版本
• Angular 12-14：使用@agm/core@3.x或4.x
• Angular 9-11：使用@agm/core@2.x
• Angular 8及以下：使用@agm/core@1.x

可以通过npm list @agm/core查看当前版本，不兼容的话重新安装对应版本：

npm install @agm/core@<兼容版本号> --save

4. 特性模块中的额外配置（如果适用） #

如果你是在某个特性模块中使用agm-map，除了根模块AppModule中导入AgmCoreModule.forRoot()外，还需要在特性模块中单独导入AgmCoreModule（不需要加forRoot）：

// 特性模块文件示例
import { AgmCoreModule } from '@agm/core';

@NgModule({
  imports: [
    AgmCoreModule
  ]
})
export class FeatureModule { }

完成以上步骤后，重启Angular开发服务器（ng serve），应该就能正常识别agm-map和agm-marker组件了。

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