TypeError: Cannot read property 'Autocomplete' of undefined

[juanmrad]

Bug Report or Feature Request (mark with an x)

- [X] bug report -> please search issues before submitting
- [ ] feature request

OS and Version

Mac OS Catalina

Versions

Your global Angular CLI version (10.1.4) is greater than your local
version (8.3.21). The local Angular CLI version is used.

Angular CLI: 8.3.21
Node: 14.13.0
OS: darwin x64
Angular: 8.2.14
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.803.21
@angular-devkit/build-angular     0.803.21
@angular-devkit/build-optimizer   0.803.21
@angular-devkit/build-webpack     0.803.21
@angular-devkit/core              8.3.21
@angular-devkit/schematics        8.3.21
@angular/cli                      8.3.21
@ngtools/webpack                  8.3.21
@schematics/angular               8.3.21
@schematics/update                0.803.21
rxjs                              6.4.0
typescript                        3.5.3
webpack                           4.39.2

Repro steps

Try to add the mat autocomplete on the project and it won't work:

    "@agm/core": "^3.0.0-beta.0",
    "@types/googlemaps": "^3.39.12",
    "@angular-material-extensions/google-maps-autocomplete": "^5.0.0",

On my modules I have:

    AgmCoreModule.forRoot({
      apiKey: '__API_KEY__',
      libraries: ['places'],
      language: 'en'
    }),

The log given by the failure

TypeError: Cannot read property 'Autocomplete' of undefined
    at main-es2015.js:2224
    at ZoneDelegate.invoke (polyfills-es2015.js:3619)
    at Object.onInvoke (vendor-es2015.js:87050)
    at ZoneDelegate.invoke (polyfills-es2015.js:3618)
    at Zone.run (polyfills-es2015.js:3384)
    at polyfills-es2015.js:4115
    at ZoneDelegate.invokeTask (polyfills-es2015.js:3651)
    at Object.onInvokeTask (vendor-es2015.js:87031)
    at ZoneDelegate.invokeTask (polyfills-es2015.js:3650)
    at Zone.runTask (polyfills-es2015.js:3428)

Desired functionality

It should just work and autocomplete work.

[vervallsweg]

Experienced the same problem. This is caused by the Google Maps Api having not initialized the places API.

new google.maps.places.Autocomplete(...)

Where places is undefined. This in my experience can be caused by:

1. AGM not having the places library enabled (in it's module.forRoot config object)
2. Not having the places api enabled on your project / api key

The second one was my case. I thought since we're using the maps js library, that this would be enough to enable. I thought the places api is more for the backend. It is not.

[Cronch]

Same issue happening here.

[Waseem-Isaac]

Any updates here ? @juanmrad

[Startouf]

I have this in the module of my component

@NgModule({
  declarations: [...],
  imports: [
    ...
    AgmCoreModule.forRoot({
      apiKey: 'AIzaSyA0Zyn9Ikl-EyWxXnJ5W7QRqjsEFN8Fa6s',
      libraries: ['places']
    }),
    MatGoogleMapsAutocompleteModule,

And I have activated the Places API in Google, what else could go wrong ?

EDIT : versions after a fresh install

Angular CLI: 10.1.2
"@agm/core": "^3.0.0-beta.0",
"@types/googlemaps": "^3.43.3",
"@angular-material-extensions/google-maps-autocomplete": "^6.2.2",

[Waseem-Isaac]

I have this in the module of my component

@NgModule({
  declarations: [...],
  imports: [
    ...
    AgmCoreModule.forRoot({
      apiKey: 'AIzaSyA0Zyn9Ikl-EyWxXnJ5W7QRqjsEFN8Fa6s',
      libraries: ['places']
    }),
    MatGoogleMapsAutocompleteModule,

And I have activated the Places API in Google, what else could go wrong ?

EDIT : versions after a fresh install

Angular CLI: 10.1.2
"@agm/core": "^3.0.0-beta.0",
"@types/googlemaps": "^3.43.3",
"@angular-material-extensions/google-maps-autocomplete": "^6.2.2",

@Startouf Can you move those imports into AppModule instead ? And tell me the result

[Startouf]

I seem to have solved my problems, not really sure what did it but

• I had a google script already included in my index.html (for other uses like google map embeds, using import { GoogleMapsModule } from '@angular/google-maps'), I added &libraries=places in the URL of this script
• I moved the AgmCoreModule.forRoot declaration to my AppModule as you suggested
• I left the MatGoogleMapsAutocompleteModule import in my component module
• I removed a duplicate @types/googlemaps (it had found its way both in my devDependencies and regular dependencies)
• Also I think I may not I have stopped/restarted my server correctly after doing some packages updates, to reload those dependencies correctly.