已添加Google Maps模块到AppModule，Angular仍无法识别google-map组件

云上老周

2026-8-1

解决Angular中'google-map'不是已知元素的NG8001错误

问题核心

你已在app.module.ts中导入GoogleMapsModule，完成Angular 15升级、依赖更新、缓存清理及服务器重启操作，但仍触发NG8001错误，本质原因是**HomeComponent未在AppModule的declarations数组中注册**，导致Angular无法识别该组件模板里的<google-map>指令。

解决方案

在根模块注册HomeComponent
打开app.module.ts，先导入HomeComponent，再将其加入declarations数组：

// 新增HomeComponent导入
import { HomeComponent } from './components/home/home.component';

@NgModule({
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  declarations: [
    AppComponent,
    ChooseDestinationComponent,
    AwaitingComponent,
    // ... 其他已声明组件
    HomeComponent, // 添加这一行
  ],
  imports: [
    GoogleMapsModule,
    // ... 其他已导入模块
  ],
  // ... 其他配置项
})
export class AppModule { }

特性模块场景下的处理
如果HomeComponent属于某个特性模块（比如HomeModule），需在该特性模块内单独导入GoogleMapsModule，而非仅在根模块导入：

// home.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { GoogleMapsModule } from '@angular/google-maps';
import { HomeComponent } from './home.component';

@NgModule({
  declarations: [HomeComponent],
  imports: [
    CommonModule,
    GoogleMapsModule // 在特性模块中导入
  ]
})
export class HomeModule { }