Angular 16升级后ngx-google-places-autocomplete无法使用问题

问题原因 #

升级Angular从14到16后出现'GooglePlaceModule' does not appear to be an NgModule class错误，本质是当前使用的ngx-google-places-autocomplete版本未适配Angular 16的Ivy编译机制。Angular 9及以上默认启用Ivy，对第三方库的模块定义规范要求更严格，旧版本库的代码结构无法满足Ivy的校验规则。

修复方案 #

1. 升级库到兼容版本 #

先查看当前安装的库版本：

npm list ngx-google-places-autocomplete

确认是否有适配Angular 16的新版本，若存在，执行升级命令：

npm install ngx-google-places-autocomplete@latest

如果最新版本仍不兼容，可查看库的issues列表，确认是否有其他用户提供的修复方案或社区维护的兼容分支。

2. 临时禁用Ivy（仅限应急场景） #

若暂时无法升级库，可在tsconfig.json中临时关闭Ivy编译，但这会丢失Angular 16的性能优化，不建议长期使用：
在angularCompilerOptions节点添加：

"enableIvy": false

3. 替换为兼容组件 #

如果上述方法无效，可选择以下替代方案：

• 直接基于Google Places JavaScript API手动实现自动完成功能
• 使用@angular/google-maps官方库结合Places API构建组件

手动实现示例 #

如果选择手动集成，参考以下步骤：

1. 在index.html中引入Google Places API脚本：

<script src="https://maps.googleapis.com/maps/api/js?key=你的API密钥&libraries=places"></script>

2. 在组件中初始化自动完成：

import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';

declare var google: any;

@Component({
  selector: 'app-place-autocomplete',
  template: '<input #placeInput type="text" placeholder="输入地址">'
})
export class PlaceAutocompleteComponent implements OnInit {
  @ViewChild('placeInput') placeInput!: ElementRef;

  ngOnInit(): void {
    const autocomplete = new google.maps.places.Autocomplete(this.placeInput.nativeElement);
    autocomplete.addListener('place_changed', () => {
      const selectedPlace = autocomplete.getPlace();
      // 处理选中的地址数据
      console.log(selectedPlace);
    });
  }
}

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