ERROR Error: NG0301: Export of name 'ngx-places' not found! in Google Places Autocomplete

Viewed 810

Im trying to use ngx-google-places-autocomplete library to give place auto completion in my input field. I have set it up in my angular project following steps as below.

  1. Running npm install ngx-google-places-autocomplete
  2. Adding script with api key to index.html file

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

  1. Adding GooglePlaceModule to app.module.ts file

  2. Adding directive to the input field which is inside a modal

    <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. Adding below to the component

    @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);
    }
    

And getting this error when the page is loaded

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

Anything i could be missing here??

app.module.ts file :

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 {}
1 Answers

Does your component belong to a module other than the app.module.ts? If so, you also need to add the import to the component module as well. Adding only to the app.module.ts is not enough.

Related