ERROR 错误：NG0301：未找到名称“ngx-places”的导出！在 Google 地方信息自动完成中

编程问答 2022-04-23

问题描述

我正在尝试使用 ngx-google-places-autocomplete 库在我的输入字段中自动完成位置。我已按照以下步骤在我的 angular 项目中进行了设置。

  1. 运行npm install ngx-google-places-autocomplete
  2. 将带有 api 密钥的脚本添加到 index.html 文件

<script src="https://maps.googleapis.com/maps/api/js?key=<KEY>&libraries=places&language=en"></script>

  1. 将 GooglePlaceModule 添加到 app.module.ts 文件

  2. 向模态内的输入字段添加指令

    <ng-template #interpretersModal let-modal>
  <div class="modal-header">
  <h4 class="modal-title" id="modal-basic-title">Add Interpreter</h4>
    <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
    <span aria-hidden="true">×</span>
    </button>
  </div>
  <form #interpreterForm="ngForm" (ngSubmit)="onInterpreterSubmit(interpreterForm.value)">
  <div class="modal-body">
     <div class="form-group">
         <div class="row">
            <input ngx-google-places-autocomplete [options]='options' #placesRef="ngx-places" (onAddressChange)="handleAddressChange($event)"/>
         </div>
      </div>
   </div>
   <div class="modal-footer">
     <button class="btn btn-secondary" [disabled]="!interpreterForm.valid" data-dismiss="modal">Submit</button>
     </div>
   </form>
 </ng-template>

  3. 在组件下面添加

    @ViewChild("placesRef") placesRef : GooglePlaceDirective;

constructor(private modalService: NgbModal) {}

triggerAddInterpretersModal(content: any) {
 this.modalService.open(content,{ariaLabelledBy: 'modal-basic-title'})
}

public handleAddressChange(address: Address) {
 console.log(address);
}

加载页面时出现此错误

ERROR Error: NG0301: Export of name 'ngx-places' not found!

这里有什么我可能遗漏的吗？？

app.module.ts 文件：

import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { HttpClientModule } from "@angular/common/http";
import { RouterModule } from "@angular/router";
import { ToastrModule } from 'ngx-toastr';
import { AppComponent } from "./app.component";
import { AdminLayoutComponent } from "./layouts/admin-layout/admin-layout.component";
import { NgbModule } from "@ng-bootstrap/ng-bootstrap";
import { AppRoutingModule } from "./app-routing.module";
import { ComponentsModule } from "./components/components.module";
import { AngularFireModule } from '@angular/fire';
import { AngularFirestoreModule } from '@angular/fire/firestore';
import { environment } from '../environments/environment';
import { ProductService } from './services/product.service';
import { ComapnyService } from './services/company.service';
import { SocialLoginModule,SocialAuthServiceConfig } from 'angularx-social-login';
import { GoogleLoginProvider } from 'angularx-social-login';
import { ReactiveFormsModule } from '@angular/forms';
import { LoginGuard } from "./guards/LoginGuard";
import { GooglePlaceModule } from "ngx-google-places-autocomplete";

@NgModule({
  imports: [
    BrowserAnimationsModule,AngularFireModule.initializeApp(environment.firebase),AngularFirestoreModule,FormsModule,HttpClientModule,ComponentsModule,NgbModule,RouterModule,AppRoutingModule,ReactiveFormsModule,SocialLoginModule,GooglePlaceModule,ToastrModule.forRoot()
  ],declarations: [AppComponent,AdminLayoutComponent],providers: [ProductService,ComapnyService,{
      provide: 'SocialAuthServiceConfig',useValue: {
        autoLogin: false,providers: [
          {
            id: GoogleLoginProvider.PROVIDER_ID,provider: new GoogleLoginProvider(
              'xxxx'
            )
          }
        ]
      } as SocialAuthServiceConfig,},LoginGuard   ],bootstrap: [AppComponent]
 })
 export class AppModule {}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

angulargoogle-places-apigoogleplacesautocomplete